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

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-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'];
@@ -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'
     });
@@ -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);
@@ -10560,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(() => {
@@ -15039,7 +15062,7 @@ const VColorPickerCanvas = defineComponent({
     const {
       resizeRef
     } = useResizeObserver(entries => {
-      if (!resizeRef.value?.offsetParent) return;
+      if (!resizeRef.el?.offsetParent) return;
       const {
         width,
         height
@@ -18662,6 +18685,7 @@ function provideSelection(props, _ref9) {
     });
     return !!items.length && isSelected(items);
   });
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
   const data = {
     toggleSelect,
     select,
@@ -18670,7 +18694,7 @@ function provideSelection(props, _ref9) {
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll
+    showSelectAll
   };
   provide(VDataTableSelectionSymbol, data);
   return data;
@@ -19941,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
@@ -21910,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'
       });
     });
@@ -22894,7 +22918,7 @@ const VFileInput = genericComponent()({
           }, 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
@@ -23239,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) {
@@ -26039,13 +26063,14 @@ const VStepperItem = genericComponent()({
     const group = useGroupItem(props, VStepperSymbol, true);
     const step = computed(() => group?.value.value ?? props.value);
     const isValid = computed(() => props.rules.every(handler => handler() === true));
+    const isClickable = computed(() => !props.disabled && props.editable);
     const canEdit = computed(() => !props.disabled && props.editable);
     const hasError = computed(() => props.error || !isValid.value);
     const hasCompleted = computed(() => props.complete || props.rules.length > 0 && isValid.value);
     const icon = 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 = computed(() => ({
@@ -26072,7 +26097,7 @@ const VStepperItem = genericComponent()({
         }, group?.selectedClass.value],
         "disabled": !props.editable,
         "onClick": onClick
-      }, [createVNode(VAvatar, {
+      }, [isClickable.value && genOverlays(true, 'v-stepper-item'), createVNode(VAvatar, {
         "key": "stepper-avatar",
         "class": "v-stepper-item__avatar",
         "color": hasColor ? props.color : undefined,
@@ -26134,7 +26159,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);
@@ -26158,7 +26184,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 {};
@@ -26266,12 +26293,18 @@ const VStepper = genericComponent()({
         default: () => [hasHeader && createVNode(VStepperHeader, {
           "key": "stepper-header"
         }, {
-          default: () => [items.value.map((item, index) => createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), 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 createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
+              default: slots[`header-item.${item.value}`] ?? slots.header,
+              icon: slots.icon,
+              title: slots.title,
+              subtitle: slots.subtitle
+            })]);
+          })]
         }), hasWindow && createVNode(VStepperWindow, {
           "key": "stepper-window"
         }, {
@@ -26657,7 +26690,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);
@@ -27926,7 +27960,7 @@ function createVuetify$1() {
     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
@@ -27951,7 +27985,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.3-master.2024-05-07";
+const version = "3.6.4-master.2024-05-09";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };