@vuetify/nightly 3.6.7-master.2024-05-28 → 3.6.8-master.2024-05-30

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.7-master.2024-05-28
+* Vuetify v3.6.8-master.2024-05-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -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) {
@@ -21527,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];
@@ -26044,7 +26060,10 @@
   const makeStepperProps = propsFactory({
     altLabels: Boolean,
     bgColor: String,
+    completeIcon: String,
+    editIcon: String,
     editable: Boolean,
+    errorIcon: String,
     hideActions: Boolean,
     items: {
       type: Array,
@@ -26058,9 +26077,9 @@
       type: String,
       default: 'value'
     },
-    mobile: Boolean,
     nonLinear: Boolean,
-    flat: Boolean
+    flat: Boolean,
+    ...makeDisplayProps()
   }, 'Stepper');
   const makeVStepperProps = propsFactory({
     ...makeStepperProps(),
@@ -26088,6 +26107,13 @@
         selected
       } = useGroup(props, VStepperSymbol);
       const {
+        displayClasses,
+        mobile
+      } = useDisplay(props);
+      const {
+        completeIcon,
+        editIcon,
+        errorIcon,
         color,
         editable,
         prevText,
@@ -26114,6 +26140,9 @@
       provideDefaults({
         VStepperItem: {
           editable,
+          errorIcon,
+          completeIcon,
+          editIcon,
           prevText,
           nextText
         },
@@ -26135,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, {
@@ -26666,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,
@@ -29350,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,
@@ -29414,7 +29511,8 @@
       default: '$loading'
     },
     items: Array,
-    selectable: Boolean
+    selectable: Boolean,
+    selectStrategy: [String, Function, Object]
   }, 'VTreeviewChildren');
   const VTreeviewChildren = genericComponent()({
     name: 'VTreeviewChildren',
@@ -29438,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 {
@@ -29450,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
@@ -29481,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, {
@@ -29518,7 +29620,7 @@
     ...omit(makeVListProps({
       collapseIcon: '$treeviewCollapse',
       expandIcon: '$treeviewExpand',
-      selectStrategy: 'independent',
+      selectStrategy: 'classic',
       openStrategy: 'multiple',
       slim: true
     }), ['nav'])
@@ -30139,7 +30241,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.7-master.2024-05-28";
+  const version$1 = "3.6.8-master.2024-05-30";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30392,7 +30494,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.7-master.2024-05-28";
+  const version = "3.6.8-master.2024-05-30";
 
   /* eslint-disable local-rules/sort-imports */