vuetify 3.6.7 → 3.6.8

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.7
+* Vuetify v3.6.8
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1261,6 +1261,53 @@
 
   // Types
 
+  function getCurrentInstance(name, message) {
+    const vm = vue.getCurrentInstance();
+    if (!vm) {
+      throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
+    }
+    return vm;
+  }
+  function getCurrentInstanceName() {
+    let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
+    const vm = getCurrentInstance(name).type;
+    return toKebabCase(vm?.aliasName || vm?.name);
+  }
+  let _uid = 0;
+  let _map = new WeakMap();
+  function getUid() {
+    const vm = getCurrentInstance('getUid');
+    if (_map.has(vm)) return _map.get(vm);else {
+      const uid = _uid++;
+      _map.set(vm, uid);
+      return uid;
+    }
+  }
+  getUid.reset = () => {
+    _uid = 0;
+    _map = new WeakMap();
+  };
+
+  // Utilities
+
+  // Types
+
+  function injectSelf(key) {
+    let vm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstance('injectSelf');
+    const {
+      provides
+    } = vm;
+    if (provides && key in provides) {
+      // TS doesn't allow symbol as index type
+      return provides[key];
+    }
+    return undefined;
+  }
+
+  // Utilities
+
+  // Types
+
   const DefaultsSymbol = Symbol.for('vuetify:defaults');
   function createDefaults(options) {
     return vue.ref(options);
@@ -1486,37 +1533,6 @@
     }, {});
   }
 
-  // Utilities
-
-  // Types
-
-  function getCurrentInstance(name, message) {
-    const vm = vue.getCurrentInstance();
-    if (!vm) {
-      throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
-    }
-    return vm;
-  }
-  function getCurrentInstanceName() {
-    let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
-    const vm = getCurrentInstance(name).type;
-    return toKebabCase(vm?.aliasName || vm?.name);
-  }
-  let _uid = 0;
-  let _map = new WeakMap();
-  function getUid() {
-    const vm = getCurrentInstance('getUid');
-    if (_map.has(vm)) return _map.get(vm);else {
-      const uid = _uid++;
-      _map.set(vm, uid);
-      return uid;
-    }
-  }
-  getUid.reset = () => {
-    _uid = 0;
-    _map = new WeakMap();
-  };
-
   function getScrollParent(el) {
     let includeHidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     while (el) {
@@ -1546,22 +1562,6 @@
     return ['scroll', 'auto'].includes(style.overflowY);
   }
 
-  // Utilities
-
-  // Types
-
-  function injectSelf(key) {
-    let vm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstance('injectSelf');
-    const {
-      provides
-    } = vm;
-    if (provides && key in provides) {
-      // TS doesn't allow symbol as index type
-      return provides[key];
-    }
-    return undefined;
-  }
-
   function isFixedPosition(el) {
     while (el) {
       if (window.getComputedStyle(el).position === 'fixed') {
@@ -6253,7 +6253,15 @@
         e.stopPropagation();
       }
       function onInput(e) {
-        if (!isInteractive.value) return;
+        if (!isInteractive.value) {
+          if (input.value) {
+            // model value is not updated when input is not interactive
+            // but the internal checked state of the input is still updated,
+            // so here it's value is restored
+            input.value.checked = model.value;
+          }
+          return;
+        }
         if (props.readonly && group) {
           vue.nextTick(() => group.forceUpdate());
         }
@@ -8706,6 +8714,7 @@
         isBooted
       } = useSsrBoot();
       function onClick(e) {
+        e.stopPropagation();
         open(!isOpen.value, e);
       }
       const activatorProps = vue.computed(() => ({
@@ -9039,6 +9048,8 @@
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {
+        activate,
+        isActivated,
         isGroupActivator,
         isSelected,
         list,
@@ -9114,7 +9125,7 @@
       const dividerStyles = vue.computed(() => {
         const styles = {};
         if (props.length) {
-          styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length);
+          styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length);
         }
         if (props.thickness) {
           styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness);
@@ -9375,6 +9386,8 @@
     },
     slim: Boolean,
     nav: Boolean,
+    'onClick:open': EventProp(),
+    'onClick:select': EventProp(),
     ...makeNestedProps({
       selectStrategy: 'single-leaf',
       openStrategy: 'list'
@@ -12686,7 +12699,7 @@
       const customMatches = {};
       const defaultMatches = {};
       let match = -1;
-      if (query && !options?.noFilter) {
+      if ((query || customFiltersLength > 0) && !options?.noFilter) {
         if (typeof item === 'object') {
           const filterKeys = keys || Object.keys(transformed);
           for (const key of filterKeys) {
@@ -15527,6 +15540,7 @@
       type: [Boolean, Object],
       default: true
     },
+    name: String,
     ...makeComponentProps()
   }, 'VSliderThumb');
   const VSliderThumb = genericComponent()({
@@ -15623,6 +15637,7 @@
           }, props.style],
           "role": "slider",
           "tabindex": disabled.value ? -1 : 0,
+          "aria-label": props.name,
           "aria-valuemin": props.min,
           "aria-valuemax": props.max,
           "aria-valuenow": props.modelValue,
@@ -15899,7 +15914,8 @@
               "elevation": props.elevation,
               "onFocus": focus,
               "onBlur": blur,
-              "ripple": props.ripple
+              "ripple": props.ripple,
+              "name": props.name
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -21524,6 +21540,9 @@
       });
       function onRangeClick(value) {
         const _value = adapter.startOfDay(value);
+        if (model.value.length === 0) {
+          rangeStart.value = undefined;
+        }
         if (!rangeStart.value) {
           rangeStart.value = _value;
           model.value = [rangeStart.value];
@@ -22249,6 +22268,10 @@
     }
   });
 
+  // Types
+
+  const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
+
   const makeVExpansionPanelTextProps = propsFactory({
     ...makeComponentProps(),
     ...makeLazyProps()
@@ -22429,7 +22452,6 @@
 
   // Types
 
-  const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     flat: Boolean,
@@ -25773,6 +25795,10 @@
 
   // Types
 
+  const VStepperSymbol = Symbol.for('vuetify:v-stepper');
+
+  // Types
+
   const makeVStepperActionsProps = propsFactory({
     color: String,
     disabled: {
@@ -25960,9 +25986,6 @@
     }
   });
 
-  // Types
-
-  const VStepperSymbol$1 = Symbol.for('vuetify:v-stepper');
   const makeVStepperWindowProps = propsFactory({
     ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory'])
   }, 'VStepperWindow');
@@ -25976,7 +25999,7 @@
       let {
         slots
       } = _ref;
-      const group = vue.inject(VStepperSymbol$1, null);
+      const group = vue.inject(VStepperSymbol, null);
       const _model = useProxiedModel(props, 'modelValue');
       const model = vue.computed({
         get() {
@@ -26034,11 +26057,13 @@
 
   // Types
 
-  const VStepperSymbol = Symbol.for('vuetify:v-stepper');
   const makeStepperProps = propsFactory({
     altLabels: Boolean,
     bgColor: String,
+    completeIcon: String,
+    editIcon: String,
     editable: Boolean,
+    errorIcon: String,
     hideActions: Boolean,
     items: {
       type: Array,
@@ -26052,9 +26077,9 @@
       type: String,
       default: 'value'
     },
-    mobile: Boolean,
     nonLinear: Boolean,
-    flat: Boolean
+    flat: Boolean,
+    ...makeDisplayProps()
   }, 'Stepper');
   const makeVStepperProps = propsFactory({
     ...makeStepperProps(),
@@ -26082,6 +26107,13 @@
         selected
       } = useGroup(props, VStepperSymbol);
       const {
+        displayClasses,
+        mobile
+      } = useDisplay(props);
+      const {
+        completeIcon,
+        editIcon,
+        errorIcon,
         color,
         editable,
         prevText,
@@ -26108,6 +26140,9 @@
       provideDefaults({
         VStepperItem: {
           editable,
+          errorIcon,
+          completeIcon,
+          editIcon,
           prevText,
           nextText
         },
@@ -26129,8 +26164,8 @@
             'v-stepper--alt-labels': props.altLabels,
             'v-stepper--flat': props.flat,
             'v-stepper--non-linear': props.nonLinear,
-            'v-stepper--mobile': props.mobile
-          }, props.class],
+            'v-stepper--mobile': mobile.value
+          }, displayClasses.value, props.class],
           "style": props.style
         }), {
           default: () => [hasHeader && vue.createVNode(VStepperHeader, {
@@ -26660,9 +26695,9 @@
             "key": item.text,
             "value": item.value
           }), {
-            default: () => slots[`tab.${item.value}`]?.({
+            default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
               item
-            })
+            }) : undefined
           }))]
         }), hasWindow && vue.createVNode(VTabsWindow, vue.mergeProps({
           "modelValue": model.value,
@@ -27973,15 +28008,20 @@
       const model = useProxiedModel(props, 'modelValue');
       const stepDecimals = vue.computed(() => getDecimals(props.step));
       const modelDecimals = vue.computed(() => model.value != null ? getDecimals(model.value) : 0);
+      const form = useForm();
+      const controlsDisabled = vue.computed(() => props.disabled || props.readonly || form?.isReadonly.value);
       const canIncrease = vue.computed(() => {
+        if (controlsDisabled.value) return false;
         if (model.value == null) return true;
         return model.value + props.step <= props.max;
       });
       const canDecrease = vue.computed(() => {
+        if (controlsDisabled.value) return false;
         if (model.value == null) return true;
         return model.value - props.step >= props.min;
       });
       vue.watchEffect(() => {
+        if (controlsDisabled.value) return;
         if (model.value != null && (model.value < props.min || model.value > props.max)) {
           model.value = clamp(model.value, props.min, props.max);
         }
@@ -27997,6 +28037,7 @@
       }));
       function toggleUpDown() {
         let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        if (controlsDisabled.value) return;
         if (model.value == null) {
           model.value = 0;
           return;
@@ -29338,32 +29379,100 @@
         emit
       } = _ref;
       const link = useLink(props, attrs);
-      const id = vue.computed(() => props.value === undefined ? link.href.value : props.value);
+      const rawId = vue.computed(() => props.value === undefined ? link.href.value : props.value);
       const vListItemRef = vue.ref();
+      const {
+        activate,
+        isActivated,
+        select,
+        isSelected,
+        isIndeterminate,
+        isGroupActivator,
+        root,
+        id
+      } = useNestedItem(rawId, false);
+      const isActivatableGroupActivator = vue.computed(() => root.activatable.value && isGroupActivator);
+      const {
+        densityClasses
+      } = useDensity(props, 'v-list-item');
+      const slotProps = vue.computed(() => ({
+        isActive: isActivated.value,
+        select,
+        isSelected: isSelected.value,
+        isIndeterminate: isIndeterminate.value
+      }));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list));
-      function onClick(e) {
-        if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return;
-        props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e);
+      function activateItem(e) {
+        if (!isClickable.value || !isActivatableGroupActivator.value && isGroupActivator) return;
+        if (root.activatable.value) {
+          if (isActivatableGroupActivator.value) {
+            activate(!isActivated.value, e);
+          } else {
+            vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
+          }
+        }
       }
       function onKeyDown(e) {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
-          onClick(e);
+          activateItem(e);
         }
       }
       const visibleIds = vue.inject(VTreeviewSymbol, {
         visibleIds: vue.ref()
       }).visibleIds;
       useRender(() => {
+        const hasTitle = slots.title || props.title != null;
+        const hasSubtitle = slots.subtitle || props.subtitle != null;
         const listItemProps = VListItem.filterProps(props);
         const hasPrepend = slots.prepend || props.toggleIcon;
-        return vue.createVNode(VListItem, vue.mergeProps({
+        return isActivatableGroupActivator.value ? vue.withDirectives(vue.createVNode("div", {
+          "class": ['v-list-item', 'v-list-item--one-line', 'v-treeview-item', 'v-treeview-item--activetable-group-activator', {
+            'v-list-item--active': isActivated.value || isSelected.value,
+            'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
+          }, densityClasses.value, props.class],
+          "onClick": activateItem
+        }, [vue.createVNode(vue.Fragment, null, [genOverlays(isActivated.value || isSelected.value, 'v-list-item'), props.toggleIcon && vue.createVNode(VListItemAction, {
+          "start": false
+        }, {
+          default: () => [vue.createVNode(VBtn, {
+            "density": "compact",
+            "icon": props.toggleIcon,
+            "loading": props.loading,
+            "variant": "text",
+            "onClick": props.onClick
+          }, {
+            loader() {
+              return vue.createVNode(VProgressCircular, {
+                "indeterminate": "disable-shrink",
+                "size": "20",
+                "width": "2"
+              }, null);
+            }
+          })]
+        })]), vue.createVNode("div", {
+          "class": "v-list-item__content",
+          "data-no-activator": ""
+        }, [hasTitle && vue.createVNode(VListItemTitle, {
+          "key": "title"
+        }, {
+          default: () => [slots.title?.({
+            title: props.title
+          }) ?? props.title]
+        }), hasSubtitle && vue.createVNode(VListItemSubtitle, {
+          "key": "subtitle"
+        }, {
+          default: () => [slots.subtitle?.({
+            subtitle: props.subtitle
+          }) ?? props.subtitle]
+        }), slots.default?.(slotProps.value)])]), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]) : vue.createVNode(VListItem, vue.mergeProps({
           "ref": vListItemRef
         }, listItemProps, {
           "class": ['v-treeview-item', {
             'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
           }, props.class],
-          "onClick": onClick,
+          "value": id.value,
+          "onClick": activateItem,
           "onKeydown": isClickable.value && onKeyDown
         }), {
           ...slots,
@@ -29402,7 +29511,8 @@
       default: '$loading'
     },
     items: Array,
-    selectable: Boolean
+    selectable: Boolean,
+    selectStrategy: [String, Function, Object]
   }, 'VTreeviewChildren');
   const VTreeviewChildren = genericComponent()({
     name: 'VTreeviewChildren',
@@ -29426,9 +29536,10 @@
           isLoading.value = null;
         });
       }
-      function onClick(e, item) {
-        e.stopPropagation();
-        checkChildren(item);
+      function selectItem(select, isSelected) {
+        if (props.selectable) {
+          select(!isSelected);
+        }
       }
       return () => slots.default?.() ?? props.items?.map(_ref2 => {
         let {
@@ -29438,23 +29549,21 @@
         } = _ref2;
         const loading = isLoading.value === item.value;
         const slotsWithItem = {
-          prepend: slots.prepend ? slotProps => slots.prepend?.({
+          prepend: slotProps => vue.createVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createVNode("div", null, [vue.createVNode(VCheckboxBtn, {
+            "key": item.value,
+            "modelValue": slotProps.isSelected,
+            "loading": loading,
+            "indeterminate": slotProps.isIndeterminate,
+            "onClick": vue.withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']),
+            "onKeydown": e => {
+              if (!['Enter', 'Space'].includes(e.key)) return;
+              e.stopPropagation();
+              selectItem(slotProps.select, slotProps.isSelected);
+            }
+          }, null)]), slots.prepend?.({
             ...slotProps,
             item
-          }) : props.selectable ? _ref3 => {
-            let {
-              isSelected,
-              isIndeterminate
-            } = _ref3;
-            return vue.createVNode(VCheckboxBtn, {
-              "key": item.value,
-              "tabindex": "-1",
-              "modelValue": isSelected,
-              "loading": loading,
-              "indeterminate": isIndeterminate,
-              "onClick": e => onClick(e, item)
-            }, null);
-          } : undefined,
+          })]),
           append: slots.append ? slotProps => slots.append?.({
             ...slotProps,
             item
@@ -29469,13 +29578,18 @@
         return children ? vue.createVNode(VTreeviewGroup, vue.mergeProps({
           "value": itemProps?.value
         }, treeviewGroupProps), {
-          activator: _ref4 => {
+          activator: _ref3 => {
             let {
               props: activatorProps
-            } = _ref4;
-            return vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, activatorProps, {
+            } = _ref3;
+            const listItemProps = {
+              ...itemProps,
+              ...activatorProps,
+              value: itemProps?.value
+            };
+            return vue.createVNode(VTreeviewItem, vue.mergeProps(listItemProps, {
               "loading": loading,
-              "onClick": e => onClick(e, item)
+              "onClick": () => checkChildren(item)
             }), slotsWithItem);
           },
           default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
@@ -29506,7 +29620,7 @@
     ...omit(makeVListProps({
       collapseIcon: '$treeviewCollapse',
       expandIcon: '$treeviewExpand',
-      selectStrategy: 'independent',
+      selectStrategy: 'classic',
       openStrategy: 'multiple',
       slim: true
     }), ['nav'])
@@ -30127,7 +30241,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.7";
+  const version$1 = "3.6.8";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30380,7 +30494,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.7";
+  const version = "3.6.8";
 
   /* eslint-disable local-rules/sort-imports */