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

package/dist/vuetify-labs.esm.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.
 */
@@ -6249,7 +6249,15 @@ const VSelectionControl = genericComponent()({
       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) {
         nextTick(() => group.forceUpdate());
       }
@@ -8702,6 +8710,7 @@ const VListGroup = genericComponent()({
       isBooted
     } = useSsrBoot();
     function onClick(e) {
+      e.stopPropagation();
       open(!isOpen.value, e);
     }
     const activatorProps = computed(() => ({
@@ -9035,6 +9044,8 @@ const VListItem = genericComponent()({
       }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {
+      activate,
+      isActivated,
       isGroupActivator,
       isSelected,
       list,
@@ -9110,7 +9121,7 @@ const VDivider = genericComponent()({
     const dividerStyles = 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);
@@ -9371,6 +9382,8 @@ const makeVListProps = propsFactory({
   },
   slim: Boolean,
   nav: Boolean,
+  'onClick:open': EventProp(),
+  'onClick:select': EventProp(),
   ...makeNestedProps({
     selectStrategy: 'single-leaf',
     openStrategy: 'list'
@@ -12682,7 +12695,7 @@ function filterItems(items, query, options) {
     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) {
@@ -21523,6 +21536,9 @@ const VDatePickerMonth = genericComponent()({
     });
     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];
@@ -26040,7 +26056,10 @@ const VStepperWindowItem = genericComponent()({
 const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
+  completeIcon: String,
+  editIcon: String,
   editable: Boolean,
+  errorIcon: String,
   hideActions: Boolean,
   items: {
     type: Array,
@@ -26054,9 +26073,9 @@ const makeStepperProps = propsFactory({
     type: String,
     default: 'value'
   },
-  mobile: Boolean,
   nonLinear: Boolean,
-  flat: Boolean
+  flat: Boolean,
+  ...makeDisplayProps()
 }, 'Stepper');
 const makeVStepperProps = propsFactory({
   ...makeStepperProps(),
@@ -26084,6 +26103,13 @@ const VStepper = genericComponent()({
       selected
     } = useGroup(props, VStepperSymbol);
     const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
+    const {
+      completeIcon,
+      editIcon,
+      errorIcon,
       color,
       editable,
       prevText,
@@ -26110,6 +26136,9 @@ const VStepper = genericComponent()({
     provideDefaults({
       VStepperItem: {
         editable,
+        errorIcon,
+        completeIcon,
+        editIcon,
         prevText,
         nextText
       },
@@ -26131,8 +26160,8 @@ const VStepper = genericComponent()({
           '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 && createVNode(VStepperHeader, {
@@ -26662,9 +26691,9 @@ const VTabs = genericComponent()({
           "key": item.text,
           "value": item.value
         }), {
-          default: () => slots[`tab.${item.value}`]?.({
+          default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({
             item
-          })
+          }) : undefined
         }))]
       }), hasWindow && createVNode(VTabsWindow, mergeProps({
         "modelValue": model.value,
@@ -29346,32 +29375,100 @@ const VTreeviewItem = genericComponent()({
       emit
     } = _ref;
     const link = useLink(props, attrs);
-    const id = computed(() => props.value === undefined ? link.href.value : props.value);
+    const rawId = computed(() => props.value === undefined ? link.href.value : props.value);
     const vListItemRef = ref();
+    const {
+      activate,
+      isActivated,
+      select,
+      isSelected,
+      isIndeterminate,
+      isGroupActivator,
+      root,
+      id
+    } = useNestedItem(rawId, false);
+    const isActivatableGroupActivator = computed(() => root.activatable.value && isGroupActivator);
+    const {
+      densityClasses
+    } = useDensity(props, 'v-list-item');
+    const slotProps = computed(() => ({
+      isActive: isActivated.value,
+      select,
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value
+    }));
     const isClickable = 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 = inject$1(VTreeviewSymbol, {
       visibleIds: 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 createVNode(VListItem, mergeProps({
+      return isActivatableGroupActivator.value ? withDirectives(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
+      }, [createVNode(Fragment, null, [genOverlays(isActivated.value || isSelected.value, 'v-list-item'), props.toggleIcon && createVNode(VListItemAction, {
+        "start": false
+      }, {
+        default: () => [createVNode(VBtn, {
+          "density": "compact",
+          "icon": props.toggleIcon,
+          "loading": props.loading,
+          "variant": "text",
+          "onClick": props.onClick
+        }, {
+          loader() {
+            return createVNode(VProgressCircular, {
+              "indeterminate": "disable-shrink",
+              "size": "20",
+              "width": "2"
+            }, null);
+          }
+        })]
+      })]), createVNode("div", {
+        "class": "v-list-item__content",
+        "data-no-activator": ""
+      }, [hasTitle && createVNode(VListItemTitle, {
+        "key": "title"
+      }, {
+        default: () => [slots.title?.({
+          title: props.title
+        }) ?? props.title]
+      }), hasSubtitle && createVNode(VListItemSubtitle, {
+        "key": "subtitle"
+      }, {
+        default: () => [slots.subtitle?.({
+          subtitle: props.subtitle
+        }) ?? props.subtitle]
+      }), slots.default?.(slotProps.value)])]), [[resolveDirective("ripple"), isClickable.value && props.ripple]]) : createVNode(VListItem, 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,
@@ -29410,7 +29507,8 @@ const makeVTreeviewChildrenProps = propsFactory({
     default: '$loading'
   },
   items: Array,
-  selectable: Boolean
+  selectable: Boolean,
+  selectStrategy: [String, Function, Object]
 }, 'VTreeviewChildren');
 const VTreeviewChildren = genericComponent()({
   name: 'VTreeviewChildren',
@@ -29434,9 +29532,10 @@ const VTreeviewChildren = genericComponent()({
         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 {
@@ -29446,23 +29545,21 @@ const VTreeviewChildren = genericComponent()({
       } = _ref2;
       const loading = isLoading.value === item.value;
       const slotsWithItem = {
-        prepend: slots.prepend ? slotProps => slots.prepend?.({
+        prepend: slotProps => createVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createVNode("div", null, [createVNode(VCheckboxBtn, {
+          "key": item.value,
+          "modelValue": slotProps.isSelected,
+          "loading": loading,
+          "indeterminate": slotProps.isIndeterminate,
+          "onClick": 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 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
@@ -29477,13 +29574,18 @@ const VTreeviewChildren = genericComponent()({
       return children ? createVNode(VTreeviewGroup, mergeProps({
         "value": itemProps?.value
       }, treeviewGroupProps), {
-        activator: _ref4 => {
+        activator: _ref3 => {
           let {
             props: activatorProps
-          } = _ref4;
-          return createVNode(VTreeviewItem, mergeProps(itemProps, activatorProps, {
+          } = _ref3;
+          const listItemProps = {
+            ...itemProps,
+            ...activatorProps,
+            value: itemProps?.value
+          };
+          return createVNode(VTreeviewItem, mergeProps(listItemProps, {
             "loading": loading,
-            "onClick": e => onClick(e, item)
+            "onClick": () => checkChildren(item)
           }), slotsWithItem);
         },
         default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
@@ -29514,7 +29616,7 @@ const makeVTreeviewProps = propsFactory({
   ...omit(makeVListProps({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
-    selectStrategy: 'independent',
+    selectStrategy: 'classic',
     openStrategy: 'multiple',
     slim: true
   }), ['nav'])
@@ -30135,7 +30237,7 @@ function createVuetify$1() {
     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
@@ -30388,7 +30490,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */