VStepperVertical.mjs 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Components
  3. import { VStepperVerticalItem } from "./VStepperVerticalItem.mjs";
  4. import { makeVExpansionPanelsProps, VExpansionPanels } from "../../components/VExpansionPanel/VExpansionPanels.mjs";
  5. import { makeStepperProps } from "../../components/VStepper/VStepper.mjs"; // Composables
  6. import { provideDefaults } from "../../composables/defaults.mjs";
  7. import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
  8. import { computed, ref, toRefs } from 'vue';
  9. import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  10. export const makeVStepperVerticalProps = propsFactory({
  11. prevText: {
  12. type: String,
  13. default: '$vuetify.stepper.prev'
  14. },
  15. nextText: {
  16. type: String,
  17. default: '$vuetify.stepper.next'
  18. },
  19. ...makeStepperProps(),
  20. ...omit(makeVExpansionPanelsProps({
  21. mandatory: 'force',
  22. variant: 'accordion'
  23. }), ['static'])
  24. }, 'VStepperVertical');
  25. export const VStepperVertical = genericComponent()({
  26. name: 'VStepperVertical',
  27. props: makeVStepperVerticalProps(),
  28. emits: {
  29. 'update:modelValue': val => true
  30. },
  31. setup(props, _ref) {
  32. let {
  33. slots
  34. } = _ref;
  35. const vExpansionPanelsRef = ref();
  36. const {
  37. color,
  38. eager,
  39. editable,
  40. prevText,
  41. nextText,
  42. hideActions
  43. } = toRefs(props);
  44. const model = useProxiedModel(props, 'modelValue');
  45. const items = computed(() => props.items.map((item, index) => {
  46. const title = getPropertyFromItem(item, props.itemTitle, item);
  47. const value = getPropertyFromItem(item, props.itemValue, index + 1);
  48. return {
  49. title,
  50. value,
  51. raw: item
  52. };
  53. }));
  54. provideDefaults({
  55. VStepperVerticalItem: {
  56. color,
  57. eager,
  58. editable,
  59. prevText,
  60. nextText,
  61. hideActions,
  62. static: true
  63. },
  64. VStepperActions: {
  65. color
  66. }
  67. });
  68. useRender(() => {
  69. const expansionPanelProps = VExpansionPanels.filterProps(props);
  70. return _createVNode(VExpansionPanels, _mergeProps(expansionPanelProps, {
  71. "modelValue": model.value,
  72. "onUpdate:modelValue": $event => model.value = $event,
  73. "ref": vExpansionPanelsRef,
  74. "class": ['v-stepper', {
  75. 'v-stepper--alt-labels': props.altLabels,
  76. 'v-stepper--flat': props.flat,
  77. 'v-stepper--non-linear': props.nonLinear,
  78. 'v-stepper--mobile': props.mobile
  79. }, props.class],
  80. "style": props.style
  81. }), {
  82. ...slots,
  83. default: _ref2 => {
  84. let {
  85. prev,
  86. next
  87. } = _ref2;
  88. return _createVNode(_Fragment, null, [items.value.map(_ref3 => {
  89. let {
  90. raw,
  91. ...item
  92. } = _ref3;
  93. return _createVNode(VStepperVerticalItem, item, {
  94. ...slots,
  95. default: slots[`item.${item.value}`]
  96. });
  97. }), slots.default?.({
  98. prev,
  99. next,
  100. step: model.value
  101. })]);
  102. }
  103. });
  104. });
  105. return {};
  106. }
  107. });
  108. //# sourceMappingURL=VStepperVertical.mjs.map