@vuetify/nightly 3.6.4-master.2024-05-10 → 3.6.5-master.2024-05-11

package/lib/labs/VStepperVertical/VStepperVertical.mjs

@@ -0,0 +1,106 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Components
+import { VStepperVerticalItem } from "./VStepperVerticalItem.mjs";
+import { makeVExpansionPanelsProps, VExpansionPanels } from "../../components/VExpansionPanel/VExpansionPanels.mjs";
+import { makeStepperProps } from "../../components/VStepper/VStepper.mjs"; // Composables
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { computed, ref, toRefs } from 'vue';
+import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVStepperVerticalProps = propsFactory({
+  prevText: {
+    type: String,
+    default: '$vuetify.stepper.prev'
+  },
+  nextText: {
+    type: String,
+    default: '$vuetify.stepper.next'
+  },
+  ...makeStepperProps(),
+  ...omit(makeVExpansionPanelsProps({
+    mandatory: 'force',
+    variant: 'accordion'
+  }), ['static'])
+}, 'VStepperVertical');
+export const VStepperVertical = genericComponent()({
+  name: 'VStepperVertical',
+  props: makeVStepperVerticalProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const vExpansionPanelsRef = ref();
+    const {
+      color,
+      editable,
+      prevText,
+      nextText,
+      hideActions
+    } = toRefs(props);
+    const model = useProxiedModel(props, 'modelValue');
+    const items = computed(() => props.items.map((item, index) => {
+      const title = getPropertyFromItem(item, props.itemTitle, item);
+      const value = getPropertyFromItem(item, props.itemValue, index + 1);
+      return {
+        title,
+        value,
+        raw: item
+      };
+    }));
+    provideDefaults({
+      VStepperVerticalItem: {
+        color,
+        editable,
+        prevText,
+        nextText,
+        hideActions,
+        static: true
+      },
+      VStepperActions: {
+        color
+      }
+    });
+    useRender(() => {
+      const expansionPanelProps = VExpansionPanels.filterProps(props);
+      return _createVNode(VExpansionPanels, _mergeProps(expansionPanelProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "ref": vExpansionPanelsRef,
+        "class": ['v-stepper', {
+          'v-stepper--alt-labels': props.altLabels,
+          'v-stepper--flat': props.flat,
+          'v-stepper--non-linear': props.nonLinear,
+          'v-stepper--mobile': props.mobile
+        }, props.class],
+        "style": props.style
+      }), {
+        ...slots,
+        default: _ref2 => {
+          let {
+            prev,
+            next
+          } = _ref2;
+          return _createVNode(_Fragment, null, [items.value.map(_ref3 => {
+            let {
+              raw,
+              ...item
+            } = _ref3;
+            return _createVNode(VStepperVerticalItem, item, {
+              ...slots,
+              default: slots[`item.${item.value}`]
+            });
+          }), slots.default?.({
+            prev,
+            next,
+            step: model.value
+          })]);
+        }
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VStepperVertical.mjs.map

package/lib/labs/VStepperVertical/VStepperVertical.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStepperVertical.mjs","names":["VStepperVerticalItem","makeVExpansionPanelsProps","VExpansionPanels","makeStepperProps","provideDefaults","useProxiedModel","computed","ref","toRefs","genericComponent","getPropertyFromItem","omit","propsFactory","useRender","makeVStepperVerticalProps","prevText","type","String","default","nextText","mandatory","variant","VStepperVertical","name","props","emits","val","setup","_ref","slots","vExpansionPanelsRef","color","editable","hideActions","model","items","map","item","index","title","itemTitle","value","itemValue","raw","static","VStepperActions","expansionPanelProps","filterProps","_createVNode","_mergeProps","$event","altLabels","flat","nonLinear","mobile","class","style","_ref2","prev","next","_Fragment","_ref3","step"],"sources":["../../../src/labs/VStepperVertical/VStepperVertical.tsx"],"sourcesContent":["// Components\nimport { VStepperVerticalItem } from './VStepperVerticalItem'\nimport { makeVExpansionPanelsProps, VExpansionPanels } from '@/components/VExpansionPanel/VExpansionPanels'\nimport { makeStepperProps } from '@/components/VStepper/VStepper'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRefs } from 'vue'\nimport { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VStepperSlot } from '@/components/VStepper/VStepper'\nimport type { StepperItem, StepperItemSlot } from '@/components/VStepper/VStepperItem'\n\nexport type VStepperVerticalSlots = {\n  actions: StepperItemSlot\n  default: VStepperSlot & { step: unknown }\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n  item: StepperItem\n  prev: StepperItemSlot\n  next: StepperItemSlot\n} & {\n  [key: `header-item.${string}`]: StepperItemSlot\n  [key: `item.${string}`]: StepperItem\n}\n\nexport const makeVStepperVerticalProps = propsFactory({\n  prevText: {\n    type: String,\n    default: '$vuetify.stepper.prev',\n  },\n  nextText: {\n    type: String,\n    default: '$vuetify.stepper.next',\n  },\n\n  ...makeStepperProps(),\n  ...omit(makeVExpansionPanelsProps({\n    mandatory: 'force' as const,\n    variant: 'accordion' as const,\n  }), ['static']),\n}, 'VStepperVertical')\n\nexport const VStepperVertical = genericComponent<VStepperVerticalSlots>()({\n  name: 'VStepperVertical',\n\n  props: makeVStepperVerticalProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const vExpansionPanelsRef = ref<typeof VExpansionPanels>()\n    const { color, editable, prevText, nextText, hideActions } = toRefs(props)\n\n    const model = useProxiedModel(props, 'modelValue')\n    const items = computed(() => props.items.map((item, index) => {\n      const title = getPropertyFromItem(item, props.itemTitle, item)\n      const value = getPropertyFromItem(item, props.itemValue, index + 1)\n\n      return {\n        title,\n        value,\n        raw: item,\n      }\n    }))\n\n    provideDefaults({\n      VStepperVerticalItem: {\n        color,\n        editable,\n        prevText,\n        nextText,\n        hideActions,\n        static: true,\n      },\n      VStepperActions: {\n        color,\n      },\n    })\n\n    useRender(() => {\n      const expansionPanelProps = VExpansionPanels.filterProps(props)\n\n      return (\n        <VExpansionPanels\n          { ...expansionPanelProps }\n          v-model={ model.value }\n          ref={ vExpansionPanelsRef }\n          class={[\n            'v-stepper',\n            {\n              'v-stepper--alt-labels': props.altLabels,\n              'v-stepper--flat': props.flat,\n              'v-stepper--non-linear': props.nonLinear,\n              'v-stepper--mobile': props.mobile,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              prev,\n              next,\n            }) => {\n              return (\n                <>\n                  { items.value.map(({ raw, ...item }) => (\n                    <VStepperVerticalItem { ...item }>\n                      {{\n                        ...slots,\n                        default: slots[`item.${item.value}`],\n                      }}\n                    </VStepperVerticalItem>\n                  ))}\n\n                  { slots.default?.({ prev, next, step: model.value }) }\n                </>\n              )\n            },\n          }}\n        </VExpansionPanels>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VStepperVertical = InstanceType<typeof VStepperVertical>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VStepperVertical/VStepperVerticalActions.mjs

@@ -0,0 +1,38 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeVStepperActionsProps, VStepperActions } from "../../components/VStepper/VStepperActions.mjs"; // Utilities
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVStepperVerticalActionsProps = propsFactory({
+  ...makeVStepperActionsProps()
+}, 'VStepperActions');
+export const VStepperVerticalActions = genericComponent()({
+  name: 'VStepperVerticalActions',
+  props: makeVStepperVerticalActionsProps(),
+  emits: {
+    'click:prev': () => true,
+    'click:next': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    function onClickPrev() {
+      emit('click:prev');
+    }
+    function onClickNext() {
+      emit('click:next');
+    }
+    useRender(() => {
+      const stepperActionsProps = VStepperActions.filterProps(props);
+      return _createVNode(VStepperActions, _mergeProps({
+        "class": "v-stepper-vertical-actions"
+      }, stepperActionsProps, {
+        "onClick:prev": onClickPrev,
+        "onClick:next": onClickNext
+      }), slots);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VStepperVerticalActions.mjs.map

package/lib/labs/VStepperVertical/VStepperVerticalActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStepperVerticalActions.mjs","names":["makeVStepperActionsProps","VStepperActions","genericComponent","propsFactory","useRender","makeVStepperVerticalActionsProps","VStepperVerticalActions","name","props","emits","click:prev","click:next","setup","_ref","emit","slots","onClickPrev","onClickNext","stepperActionsProps","filterProps","_createVNode","_mergeProps"],"sources":["../../../src/labs/VStepperVertical/VStepperVerticalActions.tsx"],"sourcesContent":["// Components\nimport { makeVStepperActionsProps, VStepperActions } from '@/components/VStepper/VStepperActions'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VStepperActionsSlots } from '@/components/VStepper/VStepperActions'\n\nexport const makeVStepperVerticalActionsProps = propsFactory({\n  ...makeVStepperActionsProps(),\n}, 'VStepperActions')\n\nexport const VStepperVerticalActions = genericComponent<VStepperActionsSlots>()({\n  name: 'VStepperVerticalActions',\n\n  props: makeVStepperVerticalActionsProps(),\n\n  emits: {\n    'click:prev': () => true,\n    'click:next': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    function onClickPrev () {\n      emit('click:prev')\n    }\n\n    function onClickNext () {\n      emit('click:next')\n    }\n\n    useRender(() => {\n      const stepperActionsProps = VStepperActions.filterProps(props)\n\n      return (\n        <VStepperActions\n          class=\"v-stepper-vertical-actions\"\n          { ...stepperActionsProps }\n          onClick:prev={ onClickPrev }\n          onClick:next={ onClickNext }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VStepperVerticalActions = InstanceType<typeof VStepperVerticalActions>\n"],"mappings":";AAAA;AAAA,SACSA,wBAAwB,EAAEC,eAAe,yDAElD;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,gCAAgC,GAAGF,YAAY,CAAC;EAC3D,GAAGH,wBAAwB,CAAC;AAC9B,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,MAAMM,uBAAuB,GAAGJ,gBAAgB,CAAuB,CAAC,CAAC;EAC9EK,IAAI,EAAE,yBAAyB;EAE/BC,KAAK,EAAEH,gCAAgC,CAAC,CAAC;EAEzCI,KAAK,EAAE;IACL,YAAY,EAAEC,CAAA,KAAM,IAAI;IACxB,YAAY,EAAEC,CAAA,KAAM;EACtB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,SAASG,WAAWA,CAAA,EAAI;MACtBF,IAAI,CAAC,YAAY,CAAC;IACpB;IAEA,SAASG,WAAWA,CAAA,EAAI;MACtBH,IAAI,CAAC,YAAY,CAAC;IACpB;IAEAV,SAAS,CAAC,MAAM;MACd,MAAMc,mBAAmB,GAAGjB,eAAe,CAACkB,WAAW,CAACX,KAAK,CAAC;MAE9D,OAAAY,YAAA,CAAAnB,eAAA,EAAAoB,WAAA;QAAA;MAAA,GAGSH,mBAAmB;QAAA,gBACTF,WAAW;QAAA,gBACXC;MAAW,IAChBF,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/labs/VStepperVertical/VStepperVerticalItem.css

@@ -0,0 +1,69 @@
+.v-stepper-vertical-item {
+  position: relative;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-stepper-vertical-item__title {
+  font-size: 1rem;
+}
+.v-stepper-vertical-item__subtitle {
+  font-size: 0.75rem;
+}
+.v-stepper-vertical-item .v-expansion-panel-text {
+  padding-inline-start: 32px;
+}
+.v-stepper-vertical-item:not(:last-child):before {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: calc(100% - 30px);
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+  left: 35px;
+  top: 44px;
+  z-index: 1;
+  transition-duration: 300ms;
+  transition-property: height;
+}
+.v-stepper-vertical-item:after {
+  display: none;
+}
+.v-stepper-vertical-item.v-expansion-panel--disabled .v-expansion-panel-title, .v-stepper-vertical-item:not(.v-stepper-vertical-item--editable) .v-expansion-panel-title {
+  pointer-events: none;
+}
+.v-stepper-vertical-item.v-expansion-panel--disabled .v-expansion-panel-title .v-expansion-panel-title__overlay, .v-stepper-vertical-item:not(.v-stepper-vertical-item--editable) .v-expansion-panel-title .v-expansion-panel-title__overlay {
+  opacity: 0;
+}
+
+.v-stepper-vertical-item__avatar.v-avatar {
+  background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity));
+  color: rgb(var(--v-theme-on-surface-variant));
+  transition-property: background;
+}
+.v-stepper-vertical-item__avatar.v-avatar .v-icon {
+  font-size: 0.875rem;
+}
+.v-expansion-panel--active .v-stepper-vertical-item__avatar.v-avatar {
+  background: rgb(var(--v-theme-surface-variant));
+}
+.v-stepper-vertical-item--error .v-stepper-vertical-item__avatar.v-avatar {
+  background: rgb(var(--v-theme-error));
+  color: rgb(var(--v-theme-on-error));
+}
+
+.v-stepper-vertical-item--error .v-stepper-vertical-item__title {
+  color: rgb(var(--v-theme-error));
+}
+
+.v-stepper-vertical-item--error .v-stepper-vertical-item__subtitle {
+  color: rgb(var(--v-theme-error));
+}
+
+.v-stepper-vertical-actions.v-stepper-actions .v-btn {
+  margin-inline-end: 8px;
+}
+.v-stepper .v-stepper-vertical-actions.v-stepper-actions {
+  justify-content: flex-end;
+  padding: 24px 0 0;
+  flex-direction: row-reverse;
+}

package/lib/labs/VStepperVertical/VStepperVerticalItem.mjs

@@ -0,0 +1,134 @@
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Styles
+import "./VStepperVerticalItem.css";
+
+// Components
+import { VStepperVerticalActions } from "./VStepperVerticalActions.mjs";
+import { VAvatar } from "../../components/VAvatar/VAvatar.mjs";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.mjs";
+import { VExpansionPanel } from "../../components/VExpansionPanel/index.mjs";
+import { makeVExpansionPanelProps } from "../../components/VExpansionPanel/VExpansionPanel.mjs";
+import { VIcon } from "../../components/VIcon/VIcon.mjs";
+import { makeStepperItemProps } from "../../components/VStepper/VStepperItem.mjs"; // Utilities
+import { computed, ref } from 'vue';
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVStepperVerticalItemProps = propsFactory({
+  hideActions: Boolean,
+  ...makeStepperItemProps(),
+  ...omit(makeVExpansionPanelProps({
+    expandIcon: '',
+    collapseIcon: ''
+  }), ['hideActions'])
+}, 'VStepperVerticalItem');
+export const VStepperVerticalItem = genericComponent()({
+  name: 'VStepperVerticalItem',
+  props: makeVStepperVerticalItemProps(),
+  emits: {
+    'click:next': () => true,
+    'click:prev': () => true,
+    'click:finish': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const vExpansionPanelRef = ref();
+    const step = computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value);
+    const groupItem = computed(() => vExpansionPanelRef.value?.groupItem);
+    const isSelected = computed(() => groupItem.value?.isSelected.value ?? false);
+    const isValid = computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null);
+    const canEdit = computed(() => !props.disabled && props.editable);
+    const hasError = computed(() => props.error || isSelected.value && !isValid.value);
+    const hasCompleted = computed(() => props.complete || props.rules.length > 0 && isValid.value === true);
+    const disabled = computed(() => {
+      if (props.disabled) return props.disabled;
+      if (groupItem.value?.isFirst.value) return 'prev';
+      return false;
+    });
+    const icon = computed(() => {
+      if (hasError.value) return props.errorIcon;
+      if (hasCompleted.value) return props.completeIcon;
+      if (groupItem.value?.isSelected.value && props.editable) return props.editIcon;
+      return props.icon;
+    });
+    const slotProps = computed(() => ({
+      canEdit: canEdit.value,
+      hasError: hasError.value,
+      hasCompleted: hasCompleted.value,
+      title: props.title,
+      subtitle: props.subtitle,
+      step: step.value,
+      value: props.value
+    }));
+    const actionProps = computed(() => ({
+      ...slotProps.value,
+      prev: onClickPrev,
+      next: onClickNext
+    }));
+    function onClickNext() {
+      emit('click:next');
+      if (groupItem.value?.isLast.value) return;
+      groupItem.value.group.next();
+    }
+    function onClickPrev() {
+      emit('click:prev');
+      groupItem.value.group.prev();
+    }
+    useRender(() => {
+      const hasColor = (hasCompleted.value || groupItem.value?.isSelected.value) && !hasError.value && !props.disabled;
+      const hasActions = !props.hideActions || !!slots.actions;
+      const expansionPanelProps = VExpansionPanel.filterProps(props);
+      return _createVNode(VExpansionPanel, _mergeProps({
+        "_as": "VStepperVerticalItem",
+        "ref": vExpansionPanelRef
+      }, expansionPanelProps, {
+        "class": ['v-stepper-vertical-item', {
+          'v-stepper-vertical-item--complete': hasCompleted.value,
+          'v-stepper-vertical-item--disabled': props.disabled,
+          'v-stepper-vertical-item--editable': canEdit.value,
+          'v-stepper-vertical-item--error': hasError.value
+        }, props.class],
+        "readonly": !props.editable,
+        "style": props.style,
+        "color": "",
+        "hide-actions": false,
+        "value": step.value
+      }), {
+        title: () => _createVNode(_Fragment, null, [_createVNode(VAvatar, {
+          "key": "stepper-avatar",
+          "class": "v-stepper-vertical-item__avatar",
+          "color": hasColor ? props.color : undefined,
+          "size": 24,
+          "start": true
+        }, {
+          default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? _createVNode(VIcon, {
+            "icon": icon.value
+          }, null) : step.value)]
+        }), _createVNode("div", null, [_createVNode("div", {
+          "class": "v-stepper-vertical-item__title"
+        }, [slots.title?.(slotProps.value) ?? props.title]), _createVNode("div", {
+          "class": "v-stepper-vertical-item__subtitle"
+        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle])])]),
+        text: () => _createVNode(_Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && _createVNode(VDefaultsProvider, {
+          "defaults": {
+            VStepperVerticalActions: {
+              disabled: disabled.value,
+              finish: groupItem.value?.isLast.value
+            }
+          }
+        }, {
+          default: () => [slots.actions?.(actionProps.value) ?? _createVNode(VStepperVerticalActions, {
+            "onClick:next": onClickNext,
+            "onClick:prev": onClickPrev
+          }, {
+            prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,
+            next: slots.next ? () => slots.next?.(actionProps.value) : undefined
+          })]
+        })])
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VStepperVerticalItem.mjs.map

package/lib/labs/VStepperVertical/VStepperVerticalItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStepperVerticalItem.mjs","names":["VStepperVerticalActions","VAvatar","VDefaultsProvider","VExpansionPanel","makeVExpansionPanelProps","VIcon","makeStepperItemProps","computed","ref","genericComponent","omit","propsFactory","useRender","makeVStepperVerticalItemProps","hideActions","Boolean","expandIcon","collapseIcon","VStepperVerticalItem","name","props","emits","click:next","click:prev","click:finish","setup","_ref","emit","slots","vExpansionPanelRef","step","isNaN","parseInt","value","Number","groupItem","isSelected","isValid","rules","every","handler","canEdit","disabled","editable","hasError","error","hasCompleted","complete","length","isFirst","icon","errorIcon","completeIcon","editIcon","slotProps","title","subtitle","actionProps","prev","onClickPrev","next","onClickNext","isLast","group","hasColor","hasActions","actions","expansionPanelProps","filterProps","_createVNode","_mergeProps","class","style","_Fragment","color","undefined","default","text","finish"],"sources":["../../../src/labs/VStepperVertical/VStepperVerticalItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperVerticalItem.sass'\n\n// Components\nimport { VStepperVerticalActions } from './VStepperVerticalActions'\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VExpansionPanel } from '@/components/VExpansionPanel'\nimport { makeVExpansionPanelProps } from '@/components/VExpansionPanel/VExpansionPanel'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { makeStepperItemProps } from '@/components/VStepper/VStepperItem'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { StepperItemSlot } from '@/components/VStepper/VStepperItem'\n\nexport type VStepperVerticalItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  subtitle: StepperItemSlot\n  title: StepperItemSlot\n  text: StepperItemSlot\n  prev: StepperItemSlot\n  next: StepperItemSlot\n  actions: StepperItemSlot & {\n    next: () => void\n    prev: () => void\n  }\n}\n\nexport const makeVStepperVerticalItemProps = propsFactory({\n  hideActions: Boolean,\n\n  ...makeStepperItemProps(),\n  ...omit(makeVExpansionPanelProps({\n    expandIcon: '',\n    collapseIcon: '',\n  }), ['hideActions']),\n}, 'VStepperVerticalItem')\n\nexport const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>()({\n  name: 'VStepperVerticalItem',\n\n  props: makeVStepperVerticalItemProps(),\n\n  emits: {\n    'click:next': () => true,\n    'click:prev': () => true,\n    'click:finish': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const vExpansionPanelRef = ref<typeof VExpansionPanel>()\n    const step = computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value)\n    const groupItem = computed(() => vExpansionPanelRef.value?.groupItem)\n    const isSelected = computed(() => groupItem.value?.isSelected.value ?? false)\n    const isValid = computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null)\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || (isSelected.value && !isValid.value))\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value === true))\n\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (groupItem.value?.isFirst.value) return 'prev'\n\n      return false\n    })\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (groupItem.value?.isSelected.value && props.editable) return props.editIcon\n\n      return props.icon\n    })\n\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    const actionProps = computed(() => ({\n      ...slotProps.value,\n      prev: onClickPrev,\n      next: onClickNext,\n    }))\n\n    function onClickNext () {\n      emit('click:next')\n\n      if (groupItem.value?.isLast.value) return\n\n      groupItem.value.group.next()\n    }\n\n    function onClickPrev () {\n      emit('click:prev')\n\n      groupItem.value.group.prev()\n    }\n\n    useRender(() => {\n      const hasColor = (\n        hasCompleted.value ||\n        groupItem.value?.isSelected.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n\n      const hasActions = !props.hideActions || !!slots.actions\n      const expansionPanelProps = VExpansionPanel.filterProps(props)\n\n      return (\n        <VExpansionPanel\n          _as=\"VStepperVerticalItem\"\n          ref={ vExpansionPanelRef }\n          { ...expansionPanelProps }\n          class={[\n            'v-stepper-vertical-item',\n            {\n              'v-stepper-vertical-item--complete': hasCompleted.value,\n              'v-stepper-vertical-item--disabled': props.disabled,\n              'v-stepper-vertical-item--editable': canEdit.value,\n              'v-stepper-vertical-item--error': hasError.value,\n            },\n            props.class,\n          ]}\n          readonly={ !props.editable }\n          style={ props.style }\n          color=\"\"\n          hide-actions={ false }\n          value={ step.value }\n        >\n          {{\n            title: () => (\n              <>\n                <VAvatar\n                  key=\"stepper-avatar\"\n                  class=\"v-stepper-vertical-item__avatar\"\n                  color={ hasColor ? props.color : undefined }\n                  size={ 24 }\n                  start\n                >\n                  { slots.icon?.(slotProps.value) ?? (\n                    icon.value ? (\n                      <VIcon icon={ icon.value }></VIcon>\n                    ) : step.value\n                  )}\n                </VAvatar>\n\n                <div>\n                  <div class=\"v-stepper-vertical-item__title\">\n                    { slots.title?.(slotProps.value) ?? props.title }\n                  </div>\n\n                  <div class=\"v-stepper-vertical-item__subtitle\">\n                    { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n                  </div>\n                </div>\n              </>\n            ),\n            text: () => (\n              <>\n                { slots.default?.(slotProps.value) ?? props.text }\n\n                { hasActions && (\n                  <VDefaultsProvider\n                    defaults={{\n                      VStepperVerticalActions: {\n                        disabled: disabled.value,\n                        finish: groupItem.value?.isLast.value,\n                      },\n                    }}\n                  >\n                    { slots.actions?.(actionProps.value) ?? (\n                      <VStepperVerticalActions\n                        onClick:next={ onClickNext }\n                        onClick:prev={ onClickPrev }\n                        v-slots={{\n                          prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,\n                          next: slots.next ? () => slots.next?.(actionProps.value) : undefined,\n                        }}\n                      />\n                    )}\n                  </VDefaultsProvider>\n                )}\n              </>\n            ),\n          }}\n        </VExpansionPanel>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VStepperVerticalItem = InstanceType<typeof VStepperVerticalItem>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VStepperVertical/VStepperVerticalItem.sass

@@ -0,0 +1,74 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-stepper-vertical-item
+  position: relative
+  transition-duration: $stepper-vertical-item-transition-duration
+  transition-property: $stepper-vertical-item-transition-property
+  transition-timing-function: $stepper-vertical-item-transition-timing-function
+
+  &__title
+    font-size: 1rem
+
+  &__subtitle
+    font-size: .75rem
+
+  .v-expansion-panel-text
+    padding-inline-start: 32px
+
+  &:not(:last-child):before
+    content: ''
+    position: absolute
+    width: 2px
+    height: calc(100% - 30px)
+    background: rgba(var(--v-border-color), var(--v-border-opacity))
+    left: 35px
+    top: 44px
+    z-index: 1
+    transition-duration: 300ms
+    transition-property: height
+
+  &:after
+    display: none
+
+  &.v-expansion-panel--disabled,
+  &:not(.v-stepper-vertical-item--editable)
+    .v-expansion-panel-title
+      pointer-events: none
+
+      .v-expansion-panel-title__overlay
+        opacity: 0
+
+.v-stepper-vertical-item__avatar.v-avatar
+  background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
+  color: rgb(var(--v-theme-on-surface-variant))
+  transition-property: background
+
+  .v-icon
+    font-size: .875rem
+
+  .v-expansion-panel--active &
+    background: rgb(var(--v-theme-surface-variant))
+
+  .v-stepper-vertical-item--error &
+    background: rgb(var(--v-theme-error))
+    color: rgb(var(--v-theme-on-error))
+
+.v-stepper-vertical-item__title
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-item__subtitle
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-actions
+  &.v-stepper-actions
+    .v-btn
+      margin-inline-end: 8px
+
+    .v-stepper &
+      justify-content: flex-end
+      padding: 24px 0 0
+      flex-direction: row-reverse

package/lib/labs/VStepperVertical/_variables.scss

@@ -0,0 +1,3 @@
+$stepper-vertical-item-transition-duration: .2s !default;
+$stepper-vertical-item-transition-property: opacity !default;
+$stepper-vertical-item-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;