@vuetify/nightly 3.6.3-master.2024-05-07 → 3.6.4-master.2024-05-09

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.3-master.2024-05-07
+* Vuetify v3.6.4-master.2024-05-09
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -561,6 +561,22 @@
     const divBottom = divRect.bottom;
     return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
   }
+  function templateRef() {
+    const el = vue.shallowRef();
+    const fn = target => {
+      el.value = target;
+    };
+    Object.defineProperty(fn, 'value', {
+      enumerable: true,
+      get: () => el.value,
+      set: val => el.value = val
+    });
+    Object.defineProperty(fn, 'el', {
+      enumerable: true,
+      get: () => refElement(el.value)
+    });
+    return fn;
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -1569,7 +1585,7 @@
 
   function useResizeObserver(callback) {
     let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
-    const resizeRef = vue.ref();
+    const resizeRef = templateRef();
     const contentRect = vue.ref();
     if (IN_BROWSER) {
       const observer = new ResizeObserver(entries => {
@@ -1584,12 +1600,12 @@
       vue.onBeforeUnmount(() => {
         observer.disconnect();
       });
-      vue.watch(resizeRef, (newValue, oldValue) => {
+      vue.watch(() => resizeRef.el, (newValue, oldValue) => {
         if (oldValue) {
-          observer.unobserve(refElement(oldValue));
+          observer.unobserve(oldValue);
           contentRect.value = undefined;
         }
-        if (newValue) observer.observe(refElement(newValue));
+        if (newValue) observer.observe(newValue);
       }, {
         flush: 'post'
       });
@@ -7388,7 +7404,7 @@
       const goTo = useGoTo();
       const goToOptions = vue.computed(() => {
         return {
-          container: containerRef.value,
+          container: containerRef.el,
           duration: 200,
           easing: 'easeOutQuart'
         };
@@ -7412,9 +7428,9 @@
               contentSize.value = contentRect.value[sizeProperty];
               isOverflowing.value = containerSize.value + 1 < contentSize.value;
             }
-            if (firstSelectedIndex.value >= 0 && contentRef.value) {
+            if (firstSelectedIndex.value >= 0 && contentRef.el) {
               // TODO: Is this too naive? Should we store element references in group composable?
-              const selectedElement = contentRef.value.children[lastSelectedIndex.value];
+              const selectedElement = contentRef.el.children[lastSelectedIndex.value];
               scrollToChildren(selectedElement, props.centerActive);
             }
           });
@@ -7425,13 +7441,13 @@
         let target = 0;
         if (center) {
           target = calculateCenteredTarget({
-            containerElement: containerRef.value,
+            containerElement: containerRef.el,
             isHorizontal: isHorizontal.value,
             selectedElement: children
           });
         } else {
           target = calculateUpdatedTarget({
-            containerElement: containerRef.value,
+            containerElement: containerRef.el,
             isHorizontal: isHorizontal.value,
             isRtl: isRtl.value,
             selectedElement: children
@@ -7440,18 +7456,18 @@
         scrollToPosition(target);
       }
       function scrollToPosition(newPosition) {
-        if (!IN_BROWSER || !containerRef.value) return;
-        const offsetSize = getOffsetSize(isHorizontal.value, containerRef.value);
-        const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.value);
-        const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+        if (!IN_BROWSER || !containerRef.el) return;
+        const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
+        const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
+        const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
         if (scrollSize <= offsetSize ||
         // Prevent scrolling by only a couple of pixels, which doesn't look smooth
         Math.abs(newPosition - scrollPosition) < 16) return;
-        if (isHorizontal.value && isRtl.value && containerRef.value) {
+        if (isHorizontal.value && isRtl.value && containerRef.el) {
           const {
             scrollWidth,
             offsetWidth: containerWidth
-          } = containerRef.value;
+          } = containerRef.el;
           newPosition = scrollWidth - containerWidth - newPosition;
         }
         if (isHorizontal.value) {
@@ -7469,12 +7485,12 @@
       }
       function onFocusin(e) {
         isFocused.value = true;
-        if (!isOverflowing.value || !contentRef.value) return;
+        if (!isOverflowing.value || !contentRef.el) return;
 
         // Focused element is likely to be the root of an item, so a
         // breadth-first search will probably find it in the first iteration
         for (const el of e.composedPath()) {
-          for (const item of contentRef.value.children) {
+          for (const item of contentRef.el.children) {
             if (item === el) {
               scrollToChildren(item);
               return;
@@ -7489,14 +7505,14 @@
       // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
       let ignoreFocusEvent = false;
       function onFocus(e) {
-        if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+        if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
         ignoreFocusEvent = false;
       }
       function onFocusAffixes() {
         ignoreFocusEvent = true;
       }
       function onKeydown(e) {
-        if (!contentRef.value) return;
+        if (!contentRef.el) return;
         function toFocus(location) {
           e.preventDefault();
           focus(location);
@@ -7521,21 +7537,21 @@
         }
       }
       function focus(location) {
-        if (!contentRef.value) return;
+        if (!contentRef.el) return;
         let el;
         if (!location) {
-          const focusable = focusableChildren(contentRef.value);
+          const focusable = focusableChildren(contentRef.el);
           el = focusable[0];
         } else if (location === 'next') {
-          el = contentRef.value.querySelector(':focus')?.nextElementSibling;
+          el = contentRef.el.querySelector(':focus')?.nextElementSibling;
           if (!el) return focus('first');
         } else if (location === 'prev') {
-          el = contentRef.value.querySelector(':focus')?.previousElementSibling;
+          el = contentRef.el.querySelector(':focus')?.previousElementSibling;
           if (!el) return focus('last');
         } else if (location === 'first') {
-          el = contentRef.value.firstElementChild;
+          el = contentRef.el.firstElementChild;
         } else if (location === 'last') {
-          el = contentRef.value.lastElementChild;
+          el = contentRef.el.lastElementChild;
         }
         if (el) {
           el.focus({
@@ -7549,11 +7565,11 @@
         let newPosition = scrollOffset.value + offsetStep;
 
         // TODO: improve it
-        if (isHorizontal.value && isRtl.value && containerRef.value) {
+        if (isHorizontal.value && isRtl.value && containerRef.el) {
           const {
             scrollWidth,
             offsetWidth: containerWidth
-          } = containerRef.value;
+          } = containerRef.el;
           newPosition += scrollWidth - containerWidth;
         }
         scrollToPosition(newPosition);
@@ -7596,8 +7612,8 @@
       });
       const hasNext = vue.computed(() => {
         if (!containerRef.value) return false;
-        const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
-        const clientSize = getClientSize(isHorizontal.value, containerRef.value);
+        const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
+        const clientSize = getClientSize(isHorizontal.value, containerRef.el);
         const scrollSizeMax = scrollSize - clientSize;
 
         // 1 pixel in reserve, may be lost after rounding
@@ -8021,14 +8037,16 @@
       },
       in: (v, children, parents) => {
         let set = new Set();
-        for (const id of v || []) {
-          set = strategy.activate({
-            id,
-            value: true,
-            activated: new Set(set),
-            children,
-            parents
-          });
+        if (v != null) {
+          for (const id of wrapInArray(v)) {
+            set = strategy.activate({
+              id,
+              value: true,
+              activated: new Set(set),
+              children,
+              parents
+            });
+          }
         }
         return set;
       },
@@ -8057,8 +8075,11 @@
       },
       in: (v, children, parents) => {
         let set = new Set();
-        if (v?.length) {
-          set = parentStrategy.in(v.slice(0, 1), children, parents);
+        if (v != null) {
+          const arr = wrapInArray(v);
+          if (arr.length) {
+            set = parentStrategy.in(arr.slice(0, 1), children, parents);
+          }
         }
         return set;
       },
@@ -8402,12 +8423,12 @@
   const makeNestedProps = propsFactory({
     activatable: Boolean,
     selectable: Boolean,
-    activeStrategy: [String, Function],
-    selectStrategy: [String, Function],
+    activeStrategy: [String, Function, Object],
+    selectStrategy: [String, Function, Object],
     openStrategy: [String, Object],
-    opened: Array,
-    activated: Array,
-    selected: Array,
+    opened: null,
+    activated: null,
+    selected: null,
     mandatory: Boolean
   }, 'nested');
   const useNested = props => {
@@ -8417,6 +8438,7 @@
     const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
     const activeStrategy = vue.computed(() => {
       if (typeof props.activeStrategy === 'object') return props.activeStrategy;
+      if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
       switch (props.activeStrategy) {
         case 'leaf':
           return leafActiveStrategy(props.mandatory);
@@ -8431,6 +8453,7 @@
     });
     const selectStrategy = vue.computed(() => {
       if (typeof props.selectStrategy === 'object') return props.selectStrategy;
+      if (typeof props.selectStrategy === 'function') return props.selectStrategy(props.mandatory);
       switch (props.selectStrategy) {
         case 'single-leaf':
           return leafSingleSelectStrategy(props.mandatory);
@@ -10331,17 +10354,17 @@
     }, {
       flush: 'post'
     });
-    const activatorRef = vue.ref();
+    const activatorRef = templateRef();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
       vue.nextTick(() => {
-        activatorEl.value = refElement(activatorRef.value);
+        activatorEl.value = activatorRef.el;
       });
     });
-    const targetRef = vue.ref();
+    const targetRef = templateRef();
     const target = vue.computed(() => {
       if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
-      if (targetRef.value) return refElement(targetRef.value);
+      if (targetRef.value) return targetRef.el;
       return getTarget(props.target, vm) || activatorEl.value;
     });
     const targetEl = vue.computed(() => {
@@ -14810,7 +14833,7 @@
       const {
         resizeRef
       } = useResizeObserver(entries => {
-        if (!resizeRef.value?.offsetParent) return;
+        if (!resizeRef.el?.offsetParent) return;
         const {
           width,
           height
@@ -18433,6 +18456,7 @@
       });
       return !!items.length && isSelected(items);
     });
+    const showSelectAll = vue.computed(() => selectStrategy.value.showSelectAll);
     const data = {
       toggleSelect,
       select,
@@ -18441,7 +18465,7 @@
       isSomeSelected,
       someSelected,
       allSelected,
-      showSelectAll: selectStrategy.value.showSelectAll
+      showSelectAll
     };
     vue.provide(VDataTableSelectionSymbol, data);
     return data;
@@ -19712,7 +19736,7 @@
             };
             if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
             if (column.key === 'data-table-select') {
-              return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && vue.createVNode(VCheckboxBtn, {
+              return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && vue.createVNode(VCheckboxBtn, {
                 "modelValue": allSelected.value,
                 "indeterminate": someSelected.value && !allSelected.value,
                 "onUpdate:modelValue": selectAll
@@ -21681,10 +21705,10 @@
       vue.watchEffect(() => {
         model.value = model.value ?? adapter.getYear(adapter.date());
       });
-      const yearRef = vue.ref();
+      const yearRef = templateRef();
       vue.onMounted(async () => {
         await vue.nextTick();
-        yearRef.value?.$el.scrollIntoView({
+        yearRef.el?.scrollIntoView({
           block: 'center'
         });
       });
@@ -22665,7 +22689,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
@@ -23010,7 +23034,7 @@
       function intersecting(side) {
         if (props.mode !== 'manual' && !isIntersecting.value) return;
         const status = getStatus(side);
-        if (!rootEl.value || status === 'loading') return;
+        if (!rootEl.value || ['empty', 'loading'].includes(status)) return;
         previousScrollSize = getScrollSize();
         setStatus(side, 'loading');
         function done(status) {
@@ -25810,13 +25834,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(() => ({
@@ -25843,7 +25868,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,
@@ -25905,7 +25930,8 @@
         }, windowProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "class": "v-stepper-window",
+          "class": ['v-stepper-window', props.class],
+          "style": props.style,
           "mandatory": false,
           "touch": false
         }), slots);
@@ -25929,7 +25955,8 @@
         return vue.createVNode(VWindowItem, vue.mergeProps({
           "_as": "VStepperWindowItem"
         }, windowItemProps, {
-          "class": "v-stepper-window-item"
+          "class": ['v-stepper-window-item', props.class],
+          "style": props.style
         }), slots);
       });
       return {};
@@ -26037,12 +26064,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"
           }, {
@@ -26428,7 +26461,8 @@
         }, windowProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "class": "v-tabs-window",
+          "class": ['v-tabs-window', props.class],
+          "style": props.style,
           "mandatory": false,
           "touch": false
         }), slots);
@@ -29748,7 +29782,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.3-master.2024-05-07";
+  const version$1 = "3.6.4-master.2024-05-09";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -30001,7 +30035,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.3-master.2024-05-07";
+  const version = "3.6.4-master.2024-05-09";
 
   /* eslint-disable local-rules/sort-imports */