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

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.4-master.2024-05-10
+* Vuetify v3.6.5-master.2024-05-12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4133,6 +4133,12 @@ function useGroupItem(props, injectKey) {
   const isSelected = computed(() => {
     return group.isSelected(id);
   });
+  const isFirst = computed(() => {
+    return group.items.value[0].id === id;
+  });
+  const isLast = computed(() => {
+    return group.items.value[group.items.value.length - 1].id === id;
+  });
   const selectedClass = computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
   watch(isSelected, value => {
     vm.emit('group:selected', {
@@ -4144,6 +4150,8 @@ function useGroupItem(props, injectKey) {
   return {
     id,
     isSelected,
+    isFirst,
+    isLast,
     toggle: () => group.select(id, !isSelected.value),
     select: value => group.select(id, value),
     selectedClass,
@@ -22371,7 +22379,9 @@ const VExpansionPanel = genericComponent()({
         }), slots.default?.()]
       });
     });
-    return {};
+    return {
+      groupItem
+    };
   }
 });
 
@@ -22400,7 +22410,10 @@ const VExpansionPanels = genericComponent()({
     let {
       slots
     } = _ref;
-    useGroup(props, VExpansionPanelSymbol);
+    const {
+      next,
+      prev
+    } = useGroup(props, VExpansionPanelSymbol);
     const {
       themeClasses
     } = provideTheme(props);
@@ -22427,8 +22440,16 @@ const VExpansionPanels = genericComponent()({
         'v-expansion-panels--tile': props.tile
       }, themeClasses.value, variantClass.value, props.class],
       "style": props.style
-    }, slots));
-    return {};
+    }, {
+      default: () => [slots.default?.({
+        prev,
+        next
+      })]
+    }));
+    return {
+      next,
+      prev
+    };
   }
 });
 
@@ -25791,7 +25812,7 @@ const VStepperHeader = createSimpleFunctional('v-stepper-header');
 
 // Types
 
-const makeVStepperItemProps = propsFactory({
+const makeStepperItemProps = propsFactory({
   color: String,
   title: String,
   subtitle: String,
@@ -25818,7 +25839,10 @@ const makeVStepperItemProps = propsFactory({
   rules: {
     type: Array,
     default: () => []
-  },
+  }
+}, 'StepperItem');
+const makeVStepperItemProps = propsFactory({
+  ...makeStepperItemProps(),
   ...makeGroupItemProps()
 }, 'VStepperItem');
 const VStepperItem = genericComponent()({
@@ -25969,7 +25993,7 @@ const VStepperWindowItem = genericComponent()({
 // Types
 
 const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-const makeVStepperProps = propsFactory({
+const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
   editable: Boolean,
@@ -25988,7 +26012,10 @@ const makeVStepperProps = propsFactory({
   },
   mobile: Boolean,
   nonLinear: Boolean,
-  flat: Boolean,
+  flat: Boolean
+}, 'Stepper');
+const makeVStepperProps = propsFactory({
+  ...makeStepperProps(),
   ...makeGroupProps({
     mandatory: 'force',
     selectedClass: 'v-stepper-item--selected'
@@ -28088,6 +28115,263 @@ const VNumberInput = genericComponent()({
   }
 });
 
+// Types
+
+const makeVStepperVerticalActionsProps = propsFactory({
+  ...makeVStepperActionsProps()
+}, 'VStepperActions');
+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 {};
+  }
+});
+
+// Types
+
+const makeVStepperVerticalItemProps = propsFactory({
+  hideActions: Boolean,
+  ...makeStepperItemProps(),
+  ...omit(makeVExpansionPanelProps({
+    expandIcon: '',
+    collapseIcon: ''
+  }), ['hideActions'])
+}, 'VStepperVerticalItem');
+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 {};
+  }
+});
+
+// Types
+
+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');
+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 {};
+  }
+});
+
 const VPullToRefresh = genericComponent()({
   name: 'VPullToRefresh',
   props: {
@@ -29448,6 +29732,9 @@ var components = /*#__PURE__*/Object.freeze({
   VStepperActions: VStepperActions,
   VStepperHeader: VStepperHeader,
   VStepperItem: VStepperItem,
+  VStepperVertical: VStepperVertical,
+  VStepperVerticalActions: VStepperVerticalActions,
+  VStepperVerticalItem: VStepperVerticalItem,
   VStepperWindow: VStepperWindow,
   VStepperWindowItem: VStepperWindowItem,
   VSvgIcon: VSvgIcon,
@@ -29785,7 +30072,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.4-master.2024-05-10";
+const version$1 = "3.6.5-master.2024-05-12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30038,7 +30325,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.4-master.2024-05-10";
+const version = "3.6.5-master.2024-05-12";
 
 /* eslint-disable local-rules/sort-imports */