VStepper.mjs 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Styles
  3. import "./VStepper.css";
  4. // Components
  5. import { makeVStepperActionsProps, VStepperActions } from "./VStepperActions.mjs";
  6. import { VStepperHeader } from "./VStepperHeader.mjs";
  7. import { VStepperItem } from "./VStepperItem.mjs";
  8. import { VStepperWindow } from "./VStepperWindow.mjs";
  9. import { VStepperWindowItem } from "./VStepperWindowItem.mjs";
  10. import { VDivider } from "../../components/VDivider/index.mjs";
  11. import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; // Composables
  12. import { provideDefaults } from "../../composables/defaults.mjs";
  13. import { makeGroupProps, useGroup } from "../../composables/group.mjs"; // Utilities
  14. import { computed, toRefs } from 'vue';
  15. import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  16. export const VStepperSymbol = Symbol.for('vuetify:v-stepper');
  17. export const makeVStepperProps = propsFactory({
  18. altLabels: Boolean,
  19. bgColor: String,
  20. editable: Boolean,
  21. hideActions: Boolean,
  22. items: {
  23. type: Array,
  24. default: () => []
  25. },
  26. itemTitle: {
  27. type: String,
  28. default: 'title'
  29. },
  30. itemValue: {
  31. type: String,
  32. default: 'value'
  33. },
  34. mobile: Boolean,
  35. nonLinear: Boolean,
  36. flat: Boolean,
  37. ...makeGroupProps({
  38. mandatory: 'force',
  39. selectedClass: 'v-stepper-item--selected'
  40. }),
  41. ...omit(makeVSheetProps(), ['color']),
  42. ...makeVStepperActionsProps()
  43. }, 'VStepper');
  44. export const VStepper = genericComponent()({
  45. name: 'VStepper',
  46. props: makeVStepperProps(),
  47. emits: {
  48. 'update:modelValue': v => true
  49. },
  50. setup(props, _ref) {
  51. let {
  52. slots
  53. } = _ref;
  54. // TODO: fix typing
  55. const {
  56. items: _items,
  57. next,
  58. prev,
  59. selected
  60. } = useGroup(props, VStepperSymbol);
  61. const {
  62. editable,
  63. prevText,
  64. nextText
  65. } = toRefs(props);
  66. const items = computed(() => props.items.map((item, index) => {
  67. const title = getPropertyFromItem(item, props.itemTitle, item);
  68. const value = getPropertyFromItem(item, props.itemValue, index + 1);
  69. return {
  70. title,
  71. value,
  72. raw: item
  73. };
  74. }));
  75. const activeIndex = computed(() => {
  76. return _items.value.findIndex(item => selected.value.includes(item.id));
  77. });
  78. const disabled = computed(() => {
  79. if (props.disabled) return props.disabled;
  80. if (activeIndex.value === 0) return 'prev';
  81. if (activeIndex.value === _items.value.length - 1) return 'next';
  82. return false;
  83. });
  84. provideDefaults({
  85. VStepperItem: {
  86. editable,
  87. prevText,
  88. nextText
  89. },
  90. VStepperActions: {
  91. disabled
  92. }
  93. });
  94. useRender(() => {
  95. const [sheetProps] = VSheet.filterProps(props);
  96. const [stepperActionProps] = VStepperActions.filterProps(props);
  97. const hasHeader = !!(slots.header || props.items.length);
  98. const hasWindow = props.items.length > 0;
  99. const hasActions = !props.hideActions && !!(hasWindow || slots.actions);
  100. return _createVNode(VSheet, _mergeProps(sheetProps, {
  101. "class": ['v-stepper', {
  102. 'v-stepper--alt-labels': props.altLabels,
  103. 'v-stepper--flat': props.flat,
  104. 'v-stepper--non-linear': props.nonLinear,
  105. 'v-stepper--mobile': props.mobile
  106. }, props.class],
  107. "style": props.style
  108. }), {
  109. default: () => [hasHeader && _createVNode(VStepperHeader, {
  110. "key": "stepper-header"
  111. }, {
  112. default: () => [items.value.map((item, index) => _createVNode(_Fragment, null, [!!index && _createVNode(VDivider, null, null), _createVNode(VStepperItem, item, {
  113. default: slots[`header-item.${item.value}`] ?? slots.header,
  114. icon: slots.icon,
  115. title: slots.title,
  116. subtitle: slots.subtitle
  117. })]))]
  118. }), hasWindow && _createVNode(VStepperWindow, {
  119. "key": "stepper-window"
  120. }, {
  121. default: () => [items.value.map(item => _createVNode(VStepperWindowItem, {
  122. "value": item.value
  123. }, {
  124. default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item)
  125. }))]
  126. }), slots.default?.({
  127. prev,
  128. next
  129. }), hasActions && (slots.actions?.({
  130. next,
  131. prev
  132. }) ?? _createVNode(VStepperActions, _mergeProps({
  133. "key": "stepper-actions"
  134. }, stepperActionProps, {
  135. "onClick:prev": prev,
  136. "onClick:next": next
  137. }), null))]
  138. });
  139. });
  140. return {
  141. prev,
  142. next
  143. };
  144. }
  145. });
  146. //# sourceMappingURL=VStepper.mjs.map