vuetify 3.7.0 → 3.7.2

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.0
+* Vuetify v3.7.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -162,6 +162,10 @@ function convertToUnit(str) {
 function isObject(obj) {
   return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 }
+function isPlainObject(obj) {
+  let proto;
+  return obj !== null && typeof obj === 'object' && ((proto = Object.getPrototypeOf(obj)) === Object.prototype || proto === null);
+}
 function refElement(obj) {
   if (obj && '$el' in obj) {
     const el = obj.$el;
@@ -311,7 +315,7 @@ function padEnd(str, length) {
   let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
   return str + char.repeat(Math.max(0, length - str.length));
 }
-function padStart$1(str, length) {
+function padStart(str, length) {
   let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
   return char.repeat(Math.max(0, length - str.length)) + str;
 }
@@ -357,12 +361,12 @@ function mergeDeep() {
     const targetProperty = target[key];
 
     // Only continue deep merging if
-    // both properties are objects
-    if (isObject(sourceProperty) && isObject(targetProperty)) {
+    // both properties are plain objects
+    if (isPlainObject(sourceProperty) && isPlainObject(targetProperty)) {
       out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn);
       continue;
     }
-    if (Array.isArray(sourceProperty) && Array.isArray(targetProperty) && arrayFn) {
+    if (arrayFn && Array.isArray(sourceProperty) && Array.isArray(targetProperty)) {
       out[key] = arrayFn(sourceProperty, targetProperty);
       continue;
     }
@@ -5152,10 +5156,14 @@ function useLink(props, attrs) {
     return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
   });
   if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
+    const href = toRef(props, 'href');
     return {
       isLink,
       isClickable,
-      href: toRef(props, 'href')
+      href,
+      linkProps: reactive({
+        href
+      })
     };
   }
   // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
@@ -5167,18 +5175,24 @@ function useLink(props, attrs) {
   // Actual link needs to be undefined when to prop is not used
   const link = computed(() => props.to ? routerLink : undefined);
   const route = useRoute();
+  const isActive = computed(() => {
+    if (!link.value) return false;
+    if (!props.exact) return link.value.isActive?.value ?? false;
+    if (!route.value) return link.value.isExactActive?.value ?? false;
+    return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query);
+  });
+  const href = computed(() => props.to ? link.value?.route.value.href : props.href);
   return {
     isLink,
     isClickable,
+    isActive,
     route: link.value?.route,
     navigate: link.value?.navigate,
-    isActive: computed(() => {
-      if (!link.value) return false;
-      if (!props.exact) return link.value.isActive?.value ?? false;
-      if (!route.value) return link.value.isExactActive?.value ?? false;
-      return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query);
-    }),
-    href: computed(() => props.to ? link.value?.route.value.href : props.href)
+    href,
+    linkProps: reactive({
+      href,
+      'aria-current': computed(() => isActive.value ? 'page' : undefined)
+    })
   };
 }
 const makeRouterProps = propsFactory({
@@ -5653,7 +5667,7 @@ const VBtn = genericComponent()({
       const hasPrepend = !!(props.prependIcon || slots.prepend);
       const hasAppend = !!(props.appendIcon || slots.append);
       const hasIcon = !!(props.icon && props.icon !== true);
-      return withDirectives(createVNode(Tag, {
+      return withDirectives(createVNode(Tag, mergeProps({
         "type": Tag === 'a' ? undefined : 'button',
         "class": ['v-btn', group?.selectedClass.value, {
           'v-btn--active': isActive.value,
@@ -5670,11 +5684,10 @@ const VBtn = genericComponent()({
         "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
         "aria-busy": props.loading ? true : undefined,
         "disabled": isDisabled.value || undefined,
-        "href": link.href.value,
         "tabindex": props.loading || props.readonly ? -1 : undefined,
         "onClick": onClick,
         "value": valueAttr.value
-      }, {
+      }, link.linkProps), {
         default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode("span", {
           "key": "prepend",
           "class": "v-btn__prepend"
@@ -7937,7 +7950,7 @@ const VChip = genericComponent()({
       const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       const hasColor = !group || group.isSelected.value;
-      return isActive.value && withDirectives(createVNode(Tag, {
+      return isActive.value && withDirectives(createVNode(Tag, mergeProps({
         "class": ['v-chip', {
           'v-chip--disabled': props.disabled,
           'v-chip--label': props.label,
@@ -7948,11 +7961,10 @@ const VChip = genericComponent()({
         "style": [hasColor ? colorStyles.value : undefined, props.style],
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
-        "href": link.href.value,
         "tabindex": isClickable.value ? 0 : undefined,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
-      }, {
+      }, link.linkProps), {
         default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VExpandXTransition, {
           "key": "filter"
         }, {
@@ -8197,7 +8209,6 @@ const leafSingleActiveStrategy = mandatory => {
   return strategy;
 };
 
-// Utilities
 const singleOpenStrategy = {
   open: _ref => {
     let {
@@ -8231,11 +8242,11 @@ const multipleOpenStrategy = {
       parents
     } = _ref2;
     if (value) {
-      let parent = toRaw(parents.get(id));
+      let parent = parents.get(id);
       opened.add(id);
       while (parent != null && parent !== id) {
         opened.add(parent);
-        parent = toRaw(parents.get(parent));
+        parent = parents.get(parent);
       }
       return opened;
     } else {
@@ -8477,7 +8488,8 @@ const emptyNested = {
     opened: ref(new Set()),
     activated: ref(new Set()),
     selected: ref(new Map()),
-    selectedValues: ref([])
+    selectedValues: ref([]),
+    getPath: () => []
   }
 };
 const makeNestedProps = propsFactory({
@@ -8495,7 +8507,7 @@ const useNested = props => {
   let isUnmounted = false;
   const children = ref(new Map());
   const parents = ref(new Map());
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(toRaw(v)), v => [...v.values()]);
+  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);
@@ -8555,6 +8567,7 @@ const useNested = props => {
     return path;
   }
   const vm = getCurrentInstance('nested');
+  const nodeIds = new Set();
   const nested = {
     id: shallowRef(),
     root: {
@@ -8571,6 +8584,14 @@ const useNested = props => {
         return arr;
       }),
       register: (id, parentId, isGroup) => {
+        if (nodeIds.has(id)) {
+          const path = getPath(id).join(' -> ');
+          const newPath = getPath(parentId).concat(id).join(' -> ');
+          consoleError(`Multiple nodes with the same ID\n\t${path}\n\t${newPath}`);
+          return;
+        } else {
+          nodeIds.add(id);
+        }
         parentId && id !== parentId && parents.value.set(id, parentId);
         isGroup && children.value.set(id, []);
         if (parentId != null) {
@@ -8579,6 +8600,7 @@ const useNested = props => {
       },
       unregister: id => {
         if (isUnmounted) return;
+        nodeIds.delete(id);
         children.value.delete(id);
         const parent = parents.value.get(id);
         if (parent) {
@@ -8655,7 +8677,8 @@ const useNested = props => {
         newActivated && (activated.value = newActivated);
       },
       children,
-      parents
+      parents,
+      getPath
     }
   };
   provide(VNestedSymbol, nested);
@@ -8668,9 +8691,9 @@ const useNestedItem = (id, isGroup) => {
   const item = {
     ...parent,
     id: computedId,
-    open: (open, e) => parent.root.open(toRaw(computedId.value), open, e),
+    open: (open, e) => parent.root.open(computedId.value, open, e),
     openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
-    isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))),
+    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
@@ -8900,7 +8923,8 @@ const VListItem = genericComponent()({
       isGroupActivator,
       root,
       parent,
-      openOnSelect
+      openOnSelect,
+      id: uid
     } = useNestedItem(id, false);
     const list = useList();
     const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
@@ -8984,7 +9008,7 @@ const VListItem = genericComponent()({
       if (props.activeColor) {
         deprecate('active-color', ['color', 'base-color']);
       }
-      return withDirectives(createVNode(Tag, {
+      return withDirectives(createVNode(Tag, mergeProps({
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
           'v-list-item--disabled': props.disabled,
@@ -8995,11 +9019,10 @@ const VListItem = genericComponent()({
           [`${props.activeClass}`]: props.activeClass && isActive.value
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, dimensionStyles.value, props.style],
-        "href": link.href.value,
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
-      }, {
+      }, link.linkProps), {
         default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode("div", {
           "key": "prepend",
           "class": "v-list-item__prepend"
@@ -9086,7 +9109,9 @@ const VListItem = genericComponent()({
       isGroupActivator,
       isSelected,
       list,
-      select
+      select,
+      root,
+      id: uid
     };
   }
 });
@@ -9487,7 +9512,8 @@ const VList = genericComponent()({
       children,
       open,
       parents,
-      select
+      select,
+      getPath
     } = useNested(props);
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
     const activeColor = toRef(props, 'activeColor');
@@ -9579,7 +9605,8 @@ const VList = genericComponent()({
       select,
       focus,
       children,
-      parents
+      parents,
+      getPath
     };
   }
 });
@@ -11031,6 +11058,8 @@ const Refs = Symbol('Forwarded refs');
 
 /** Omit properties starting with P */
 
+/** Omit keyof $props from T */
+
 function getDescriptor(obj, key) {
   let currentObj = obj;
   while (currentObj) {
@@ -13686,6 +13715,7 @@ const VDialog = genericComponent()({
   props: makeVDialogProps(),
   emits: {
     'update:modelValue': value => true,
+    afterEnter: () => true,
     afterLeave: () => true
   },
   setup(props, _ref) {
@@ -13727,6 +13757,7 @@ const VDialog = genericComponent()({
       });
     }
     function onAfterEnter() {
+      emit('afterEnter');
       if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
         overlay.value.contentEl.focus({
           preventScroll: true
@@ -13747,8 +13778,7 @@ const VDialog = genericComponent()({
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props);
       const activatorProps = mergeProps({
-        'aria-haspopup': 'dialog',
-        'aria-expanded': String(isActive.value)
+        'aria-haspopup': 'dialog'
       }, props.activatorProps);
       const contentProps = mergeProps({
         tabindex: -1
@@ -13879,12 +13909,10 @@ const VBreadcrumbsItem = genericComponent()({
         "style": [textColorStyles.value, props.style],
         "aria-current": isActive.value ? 'page' : undefined
       }, {
-        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createVNode("a", {
+        default: () => [!link.isLink.value ? slots.default?.() ?? props.title : createVNode("a", mergeProps({
           "class": "v-breadcrumbs-item--link",
-          "href": link.href.value,
-          "aria-current": isActive.value ? 'page' : undefined,
           "onClick": link.navigate
-        }, [slots.default?.() ?? props.title])]
+        }, link.linkProps), [slots.default?.() ?? props.title])]
       });
     });
     return {};
@@ -14260,7 +14288,7 @@ const VCard = genericComponent()({
       const hasImage = !!(slots.image || props.image);
       const hasCardItem = hasHeader || hasPrepend || hasAppend;
       const hasText = !!(slots.text || props.text != null);
-      return withDirectives(createVNode(Tag, {
+      return withDirectives(createVNode(Tag, mergeProps({
         "class": ['v-card', {
           'v-card--disabled': props.disabled,
           'v-card--flat': props.flat,
@@ -14268,10 +14296,9 @@ const VCard = genericComponent()({
           'v-card--link': isClickable.value
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
-        "href": link.href.value,
         "onClick": isClickable.value && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
-      }, {
+      }, link.linkProps), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
           "class": "v-card__image"
@@ -17637,8 +17664,8 @@ function format(value, formatString, locale, formats) {
 function toISO(adapter, value) {
   const date = adapter.toJsDate(value);
   const year = date.getFullYear();
-  const month = padStart$1(String(date.getMonth() + 1), 2, '0');
-  const day = padStart$1(String(date.getDate()), 2, '0');
+  const month = padStart(String(date.getMonth() + 1), 2, '0');
+  const day = padStart(String(date.getDate()), 2, '0');
   return `${year}-${month}-${day}`;
 }
 function parseISO(value) {
@@ -23166,7 +23193,6 @@ const VInfiniteScrollIntersect = defineComponent({
       type: String,
       required: true
     },
-    rootRef: null,
     rootMargin: String
   },
   emits: {
@@ -23179,14 +23205,15 @@ const VInfiniteScrollIntersect = defineComponent({
     const {
       intersectionRef,
       isIntersecting
-    } = useIntersectionObserver(entries => {}, props.rootMargin ? {
-      rootMargin: props.rootMargin
-    } : undefined);
+    } = useIntersectionObserver();
     watch(isIntersecting, async val => {
       emit('intersect', props.side, val);
     });
     useRender(() => createVNode("div", {
       "class": "v-infinite-scroll-intersect",
+      "style": {
+        '--v-infinite-margin-size': props.rootMargin
+      },
       "ref": intersectionRef
     }, [createTextVNode("\xA0")]));
     return {};
@@ -23337,17 +23364,15 @@ const VInfiniteScroll = genericComponent()({
       }, {
         default: () => [createVNode("div", {
           "class": "v-infinite-scroll__side"
-        }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
           "key": "start",
           "side": "start",
           "onIntersect": handleIntersect,
-          "rootRef": rootEl.value,
           "rootMargin": margin.value
-        }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        }, null), slots.default?.(), hasEndIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
           "key": "end",
           "side": "end",
           "onIntersect": handleIntersect,
-          "rootRef": rootEl.value,
           "rootMargin": margin.value
         }, null), createVNode("div", {
           "class": "v-infinite-scroll__side"
@@ -28150,7 +28175,13 @@ const VNumberInput = genericComponent()({
     const model = computed({
       get: () => _model.value,
       set(val) {
-        if (typeof val !== 'string') _model.value = val;
+        if (val === null) {
+          _model.value = null;
+          return;
+        }
+        if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
+          _model.value = +val;
+        }
       }
     });
     const vTextFieldRef = ref();
@@ -28840,6 +28871,11 @@ const VSnackbarQueue = genericComponent()({
   }
 });
 
+function pad(n) {
+  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return String(n).padStart(length, '0');
+}
+
 // Types
 
 const makeVTimePickerClockProps = propsFactory({
@@ -29080,27 +29116,6 @@ const VTimePickerClock = genericComponent()({
   }
 });
 
-// @ts-nocheck
-/* eslint-disable */
-
-const padStart = (string, targetLength, padString) => {
-  targetLength = targetLength >> 0;
-  string = String(string);
-  padString = String(padString);
-  if (string.length > targetLength) {
-    return String(string);
-  }
-  targetLength = targetLength - string.length;
-  if (targetLength > padString.length) {
-    padString += padString.repeat(targetLength / padString.length);
-  }
-  return padString.slice(0, targetLength) + String(string);
-};
-var pad = (function (n) {
-  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return padStart(n, length, '0');
-});
-
 // @ts-nocheck
 /* eslint-disable */
 var SelectingTimes = /*#__PURE__*/function (SelectingTimes) {
@@ -29548,25 +29563,13 @@ const VTreeviewItem = genericComponent()({
       emit
     } = _ref;
     const link = useLink(props, attrs);
-    const rawId = computed(() => props.value === undefined ? link.href.value : props.value);
     const vListItemRef = ref();
-    const {
-      activate,
-      isActivated,
-      isGroupActivator,
-      root,
-      id
-    } = useNestedItem(rawId, false);
-    const isActivatableGroupActivator = computed(() => root.activatable.value && isGroupActivator);
+    const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));
     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);
-        }
+      if (!isClickable.value || !isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator) return;
+      if (vListItemRef.value?.root.activatable.value) {
+        vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
       }
     }
     const visibleIds = inject$1(VTreeviewSymbol, {
@@ -29575,11 +29578,13 @@ const VTreeviewItem = genericComponent()({
     useRender(() => {
       const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
       const hasPrepend = slots.prepend || props.toggleIcon;
-      return createVNode(VListItem, mergeProps(listItemProps, {
-        "active": isActivated.value,
+      return createVNode(VListItem, mergeProps({
+        "ref": vListItemRef
+      }, listItemProps, {
+        "active": vListItemRef.value?.isActivated,
         "class": ['v-treeview-item', {
           'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
-          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
+          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)
         }, props.class],
         "ripple": false,
         "onClick": props.onClick ?? activateItem
@@ -29713,7 +29718,7 @@ const VTreeviewChildren = genericComponent()({
             ...itemProps,
             ...activatorProps,
             value: itemProps?.value,
-            onToggleExpand: activatorProps.onClick,
+            onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
             onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : undefined
           };
           return createVNode(VTreeviewItem, mergeProps(listItemProps, {
@@ -29798,22 +29803,13 @@ const VTreeview = genericComponent()({
       filteredItems
     } = useFilter(props, flatItems, search);
     const visibleIds = computed(() => {
-      if (!search.value) {
-        return null;
-      }
+      if (!search.value) return null;
+      const getPath = vListRef.value?.getPath;
+      if (!getPath) return null;
       return new Set(filteredItems.value.flatMap(item => {
         return [...getPath(item.props.value), ...getChildren(item.props.value)];
       }));
     });
-    function getPath(id) {
-      const path = [];
-      let parent = id;
-      while (parent != null) {
-        path.unshift(parent);
-        parent = vListRef.value?.parents.get(parent);
-      }
-      return path;
-    }
     function getChildren(id) {
       const arr = [];
       const queue = (vListRef.value?.children.get(id) ?? []).slice();
@@ -30214,7 +30210,7 @@ function mountComponent(component, props) {
     const value = isObject(binding.value) ? binding.value : {};
 
     // Get the children from the props or directive value, or the element's children
-    const children = () => text ?? el.innerHTML;
+    const children = () => text ?? el.textContent;
 
     // If vnode.ctx is the same as the instance, then we're bound to a plain element
     // and need to find the nearest parent component instance to inherit provides from
@@ -30272,7 +30268,7 @@ function findComponentParent(vnode, root) {
 const Tooltip = useDirectiveComponent(VTooltip, binding => {
   return {
     activator: 'parent',
-    location: binding.arg?.replace('-', ' ') ?? 'top',
+    location: binding.arg?.replace('-', ' '),
     text: typeof binding.value === 'boolean' ? undefined : binding.value
   };
 });
@@ -30378,7 +30374,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.0";
+const version$1 = "3.7.2";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30631,7 +30627,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.0";
+const version = "3.7.2";
 
 /* eslint-disable local-rules/sort-imports */