@vuetify/nightly 3.6.3-master.2024-05-06 → 3.6.4-master.2024-05-08

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.6.3-master.2024-05-06
+* Vuetify v3.6.4-master.2024-05-08
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, Suspense, TransitionGroup, Transition, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, Suspense, TransitionGroup, Transition, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -480,6 +480,22 @@ function isClickInsideElement(event, targetDiv) {
   const divBottom = divRect.bottom;
   return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
 }
+function templateRef() {
+  const el = 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'];
@@ -1222,7 +1238,7 @@ function propsFactory(props, source) {
 
 // Composables
 const makeComponentProps = propsFactory({
-  class: [String, Array],
+  class: [String, Array, Object],
   style: {
     type: [String, Array, Object],
     default: null
@@ -2005,7 +2021,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 function useResizeObserver(callback) {
   let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
-  const resizeRef = ref();
+  const resizeRef = templateRef();
   const contentRect = ref();
   if (IN_BROWSER) {
     const observer = new ResizeObserver(entries => {
@@ -2020,12 +2036,12 @@ function useResizeObserver(callback) {
     onBeforeUnmount(() => {
       observer.disconnect();
     });
-    watch(resizeRef, (newValue, oldValue) => {
+    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'
     });
@@ -3441,7 +3457,7 @@ function useAspectStyles(props) {
 }
 const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
-  contentClass: String,
+  contentClass: null,
   inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
@@ -7617,7 +7633,7 @@ const VSlideGroup = genericComponent()({
     const goTo = useGoTo();
     const goToOptions = computed(() => {
       return {
-        container: containerRef.value,
+        container: containerRef.el,
         duration: 200,
         easing: 'easeOutQuart'
       };
@@ -7641,9 +7657,9 @@ const VSlideGroup = genericComponent()({
             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);
           }
         });
@@ -7654,13 +7670,13 @@ const VSlideGroup = genericComponent()({
       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
@@ -7669,18 +7685,18 @@ const VSlideGroup = genericComponent()({
       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) {
@@ -7698,12 +7714,12 @@ const VSlideGroup = genericComponent()({
     }
     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;
@@ -7718,14 +7734,14 @@ const VSlideGroup = genericComponent()({
     // 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);
@@ -7750,21 +7766,21 @@ const VSlideGroup = genericComponent()({
       }
     }
     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({
@@ -7778,11 +7794,11 @@ const VSlideGroup = genericComponent()({
       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);
@@ -7825,8 +7841,8 @@ const VSlideGroup = genericComponent()({
     });
     const hasNext = 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
@@ -8250,14 +8266,16 @@ const independentActiveStrategy = mandatory => {
     },
     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;
     },
@@ -8286,8 +8304,11 @@ const independentSingleActiveStrategy = mandatory => {
     },
     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;
     },
@@ -8631,12 +8652,12 @@ const emptyNested = {
 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 => {
@@ -8646,6 +8667,7 @@ const useNested = props => {
   const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
   const activeStrategy = 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);
@@ -8660,6 +8682,7 @@ const useNested = props => {
   });
   const selectStrategy = 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);
@@ -8988,7 +9011,7 @@ const makeVListItemProps = propsFactory({
   appendIcon: IconValue,
   baseColor: String,
   disabled: Boolean,
-  lines: String,
+  lines: [Boolean, String],
   link: {
     type: Boolean,
     default: undefined
@@ -9099,8 +9122,9 @@ const VListItem = genericComponent()({
     }));
     function onClick(e) {
       emit('click', e);
-      if (isGroupActivator || !isClickable.value) return;
+      if (!isClickable.value) return;
       link.navigate?.(e);
+      if (isGroupActivator) return;
       if (root.activatable.value) {
         activate(!isActivated.value, e);
       } else if (root.selectable.value) {
@@ -10559,17 +10583,17 @@ function useActivator(props, _ref) {
   }, {
     flush: 'post'
   });
-  const activatorRef = ref();
+  const activatorRef = templateRef();
   watchEffect(() => {
     if (!activatorRef.value) return;
     nextTick(() => {
-      activatorEl.value = refElement(activatorRef.value);
+      activatorEl.value = activatorRef.el;
     });
   });
-  const targetRef = ref();
+  const targetRef = templateRef();
   const target = 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 = computed(() => {
@@ -10914,10 +10938,7 @@ const makeVOverlayProps = propsFactory({
   disabled: Boolean,
   opacity: [Number, String],
   noClickAnimation: Boolean,
-  modelValue: {
-    type: Boolean,
-    default: null
-  },
+  modelValue: Boolean,
   persistent: Boolean,
   scrim: {
     type: [Boolean, String],
@@ -10960,7 +10981,7 @@ const VOverlay = genericComponent()({
     } = _ref;
     const model = useProxiedModel(props, 'modelValue');
     const isActive = computed({
-      get: () => Boolean(model.value),
+      get: () => model.value,
       set: v => {
         if (!(v && props.disabled)) model.value = v;
       }
@@ -13197,7 +13218,7 @@ const VAutocomplete = genericComponent()({
           select(displayItems.value[0]);
         }
         menu.value = false;
-        search.value = '';
+        if (props.multiple || hasSelectionSlot.value) search.value = '';
         selectionIndex.value = -1;
       }
     });
@@ -15041,7 +15062,7 @@ const VColorPickerCanvas = defineComponent({
     const {
       resizeRef
     } = useResizeObserver(entries => {
-      if (!resizeRef.value?.offsetParent) return;
+      if (!resizeRef.el?.offsetParent) return;
       const {
         width,
         height
@@ -18664,6 +18685,7 @@ function provideSelection(props, _ref9) {
     });
     return !!items.length && isSelected(items);
   });
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
   const data = {
     toggleSelect,
     select,
@@ -18672,7 +18694,7 @@ function provideSelection(props, _ref9) {
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll
+    showSelectAll
   };
   provide(VDataTableSelectionSymbol, data);
   return data;
@@ -19943,7 +19965,7 @@ const VDataTableHeaders = genericComponent()({
           };
           if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
           if (column.key === 'data-table-select') {
-            return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && createVNode(VCheckboxBtn, {
+            return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && createVNode(VCheckboxBtn, {
               "modelValue": allSelected.value,
               "indeterminate": someSelected.value && !allSelected.value,
               "onUpdate:modelValue": selectAll
@@ -21912,10 +21934,10 @@ const VDatePickerYears = genericComponent()({
     watchEffect(() => {
       model.value = model.value ?? adapter.getYear(adapter.date());
     });
-    const yearRef = ref();
+    const yearRef = templateRef();
     onMounted(async () => {
       await nextTick();
-      yearRef.value?.$el.scrollIntoView({
+      yearRef.el?.scrollIntoView({
         block: 'center'
       });
     });
@@ -22792,7 +22814,7 @@ const VFileInput = genericComponent()({
     const {
       t
     } = useLocale();
-    const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
+    const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0] ?? null);
     const {
       isFocused,
       focus,
@@ -23241,7 +23263,7 @@ const VInfiniteScroll = genericComponent()({
     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) {
@@ -26136,7 +26158,8 @@ const VStepperWindow = genericComponent()({
       }, 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);
@@ -26160,7 +26183,8 @@ const VStepperWindowItem = genericComponent()({
       return createVNode(VWindowItem, mergeProps({
         "_as": "VStepperWindowItem"
       }, windowItemProps, {
-        "class": "v-stepper-window-item"
+        "class": ['v-stepper-window-item', props.class],
+        "style": props.style
       }), slots);
     });
     return {};
@@ -26659,7 +26683,8 @@ const VTabsWindow = genericComponent()({
       }, 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);
@@ -27928,7 +27953,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.3-master.2024-05-06";
+const version$1 = "3.6.4-master.2024-05-08";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -27953,7 +27978,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.3-master.2024-05-06";
+const version = "3.6.4-master.2024-05-08";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };