vuetify 3.6.4 → 3.6.5

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.4
+* Vuetify v3.6.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4137,6 +4137,12 @@
     const isSelected = vue.computed(() => {
       return group.isSelected(id);
     });
+    const isFirst = vue.computed(() => {
+      return group.items.value[0].id === id;
+    });
+    const isLast = vue.computed(() => {
+      return group.items.value[group.items.value.length - 1].id === id;
+    });
     const selectedClass = vue.computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
     vue.watch(isSelected, value => {
       vm.emit('group:selected', {
@@ -4148,6 +4154,8 @@
     return {
       id,
       isSelected,
+      isFirst,
+      isLast,
       toggle: () => group.select(id, !isSelected.value),
       select: value => group.select(id, value),
       selectedClass,
@@ -20255,6 +20263,8 @@
 
   const makeDataTableProps = propsFactory({
     ...makeVDataTableRowsProps(),
+    hideDefaultFooter: Boolean,
+    hideDefaultHeader: Boolean,
     width: [String, Number],
     search: String,
     ...makeDataTableExpandProps(),
@@ -20437,10 +20447,12 @@
           "style": props.style
         }, tableProps), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead"
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
             "items": paginatedItems.value
           }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -20608,7 +20620,9 @@
             "style": {
               height: convertToUnit(props.height)
             }
-          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
+          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead"
+          }, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
             "sticky": props.fixedHeader
           }), slots)]), vue.createVNode("tbody", null, [vue.createVNode("tr", {
             "ref": markerRef,
@@ -20813,7 +20827,8 @@
           "style": props.style
         }, tableProps), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead",
             "class": "v-data-table__thead",
             "role": "rowgroup"
           }, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
@@ -20824,7 +20839,7 @@
           }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
             "items": flatItems.value
           }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -22368,7 +22383,9 @@
           }), slots.default?.()]
         });
       });
-      return {};
+      return {
+        groupItem
+      };
     }
   });
 
@@ -22397,7 +22414,10 @@
       let {
         slots
       } = _ref;
-      useGroup(props, VExpansionPanelSymbol);
+      const {
+        next,
+        prev
+      } = useGroup(props, VExpansionPanelSymbol);
       const {
         themeClasses
       } = provideTheme(props);
@@ -22424,8 +22444,16 @@
           '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
+      };
     }
   });
 
@@ -22689,7 +22717,7 @@
             }, fieldProps, {
               "id": id.value,
               "active": isActive.value || isDirty.value,
-              "dirty": isDirty.value,
+              "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
@@ -25788,7 +25816,7 @@
 
   // Types
 
-  const makeVStepperItemProps = propsFactory({
+  const makeStepperItemProps = propsFactory({
     color: String,
     title: String,
     subtitle: String,
@@ -25815,7 +25843,10 @@
     rules: {
       type: Array,
       default: () => []
-    },
+    }
+  }, 'StepperItem');
+  const makeVStepperItemProps = propsFactory({
+    ...makeStepperItemProps(),
     ...makeGroupItemProps()
   }, 'VStepperItem');
   const VStepperItem = genericComponent()({
@@ -25834,13 +25865,14 @@
       const group = useGroupItem(props, VStepperSymbol, true);
       const step = vue.computed(() => group?.value.value ?? props.value);
       const isValid = vue.computed(() => props.rules.every(handler => handler() === true));
+      const isClickable = vue.computed(() => !props.disabled && props.editable);
       const canEdit = vue.computed(() => !props.disabled && props.editable);
       const hasError = vue.computed(() => props.error || !isValid.value);
       const hasCompleted = vue.computed(() => props.complete || props.rules.length > 0 && isValid.value);
       const icon = vue.computed(() => {
         if (hasError.value) return props.errorIcon;
         if (hasCompleted.value) return props.completeIcon;
-        if (props.editable) return props.editIcon;
+        if (group.isSelected.value && props.editable) return props.editIcon;
         return props.icon;
       });
       const slotProps = vue.computed(() => ({
@@ -25867,7 +25899,7 @@
           }, group?.selectedClass.value],
           "disabled": !props.editable,
           "onClick": onClick
-        }, [vue.createVNode(VAvatar, {
+        }, [isClickable.value && genOverlays(true, 'v-stepper-item'), vue.createVNode(VAvatar, {
           "key": "stepper-avatar",
           "class": "v-stepper-item__avatar",
           "color": hasColor ? props.color : undefined,
@@ -25965,7 +25997,7 @@
   // Types
 
   const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-  const makeVStepperProps = propsFactory({
+  const makeStepperProps = propsFactory({
     altLabels: Boolean,
     bgColor: String,
     editable: Boolean,
@@ -25984,7 +26016,10 @@
     },
     mobile: Boolean,
     nonLinear: Boolean,
-    flat: Boolean,
+    flat: Boolean
+  }, 'Stepper');
+  const makeVStepperProps = propsFactory({
+    ...makeStepperProps(),
     ...makeGroupProps({
       mandatory: 'force',
       selectedClass: 'v-stepper-item--selected'
@@ -26063,12 +26098,18 @@
           default: () => [hasHeader && vue.createVNode(VStepperHeader, {
             "key": "stepper-header"
           }, {
-            default: () => [items.value.map((item, index) => vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
-              default: slots[`header-item.${item.value}`] ?? slots.header,
-              icon: slots.icon,
-              title: slots.title,
-              subtitle: slots.subtitle
-            })]))]
+            default: () => [items.value.map((_ref2, index) => {
+              let {
+                raw,
+                ...item
+              } = _ref2;
+              return vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
+                default: slots[`header-item.${item.value}`] ?? slots.header,
+                icon: slots.icon,
+                title: slots.title,
+                subtitle: slots.subtitle
+              })]);
+            })]
           }), hasWindow && vue.createVNode(VStepperWindow, {
             "key": "stepper-window"
           }, {
@@ -28078,6 +28119,263 @@
     }
   });
 
+  // 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 vue.createVNode(VStepperActions, vue.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 = vue.ref();
+      const step = vue.computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value);
+      const groupItem = vue.computed(() => vExpansionPanelRef.value?.groupItem);
+      const isSelected = vue.computed(() => groupItem.value?.isSelected.value ?? false);
+      const isValid = vue.computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null);
+      const canEdit = vue.computed(() => !props.disabled && props.editable);
+      const hasError = vue.computed(() => props.error || isSelected.value && !isValid.value);
+      const hasCompleted = vue.computed(() => props.complete || props.rules.length > 0 && isValid.value === true);
+      const disabled = vue.computed(() => {
+        if (props.disabled) return props.disabled;
+        if (groupItem.value?.isFirst.value) return 'prev';
+        return false;
+      });
+      const icon = vue.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 = vue.computed(() => ({
+        canEdit: canEdit.value,
+        hasError: hasError.value,
+        hasCompleted: hasCompleted.value,
+        title: props.title,
+        subtitle: props.subtitle,
+        step: step.value,
+        value: props.value
+      }));
+      const actionProps = vue.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 vue.createVNode(VExpansionPanel, vue.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: () => vue.createVNode(vue.Fragment, null, [vue.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 ? vue.createVNode(VIcon, {
+              "icon": icon.value
+            }, null) : step.value)]
+          }), vue.createVNode("div", null, [vue.createVNode("div", {
+            "class": "v-stepper-vertical-item__title"
+          }, [slots.title?.(slotProps.value) ?? props.title]), vue.createVNode("div", {
+            "class": "v-stepper-vertical-item__subtitle"
+          }, [slots.subtitle?.(slotProps.value) ?? props.subtitle])])]),
+          text: () => vue.createVNode(vue.Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VStepperVerticalActions: {
+                disabled: disabled.value,
+                finish: groupItem.value?.isLast.value
+              }
+            }
+          }, {
+            default: () => [slots.actions?.(actionProps.value) ?? vue.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 = vue.ref();
+      const {
+        color,
+        editable,
+        prevText,
+        nextText,
+        hideActions
+      } = vue.toRefs(props);
+      const model = useProxiedModel(props, 'modelValue');
+      const items = vue.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 vue.createVNode(VExpansionPanels, vue.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 vue.createVNode(vue.Fragment, null, [items.value.map(_ref3 => {
+              let {
+                raw,
+                ...item
+              } = _ref3;
+              return vue.createVNode(VStepperVerticalItem, item, {
+                ...slots,
+                default: slots[`item.${item.value}`]
+              });
+            }), slots.default?.({
+              prev,
+              next,
+              step: model.value
+            })]);
+          }
+        });
+      });
+      return {};
+    }
+  });
+
   const VPullToRefresh = genericComponent()({
     name: 'VPullToRefresh',
     props: {
@@ -29438,6 +29736,9 @@
     VStepperActions: VStepperActions,
     VStepperHeader: VStepperHeader,
     VStepperItem: VStepperItem,
+    VStepperVertical: VStepperVertical,
+    VStepperVerticalActions: VStepperVerticalActions,
+    VStepperVerticalItem: VStepperVerticalItem,
     VStepperWindow: VStepperWindow,
     VStepperWindowItem: VStepperWindowItem,
     VSvgIcon: VSvgIcon,
@@ -29775,7 +30076,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.4";
+  const version$1 = "3.6.5";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30028,7 +30329,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.4";
+  const version = "3.6.5";
 
   /* eslint-disable local-rules/sort-imports */