vuetify 3.7.0 → 3.7.2

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.0
+* Vuetify v3.7.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -95,6 +95,10 @@
   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;
@@ -284,12 +288,12 @@
       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;
       }
@@ -5389,10 +5393,14 @@
       return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
     });
     if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
+      const href = vue.toRef(props, 'href');
       return {
         isLink,
         isClickable,
-        href: vue.toRef(props, 'href')
+        href,
+        linkProps: vue.reactive({
+          href
+        })
       };
     }
     // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
@@ -5404,18 +5412,24 @@
     // Actual link needs to be undefined when to prop is not used
     const link = vue.computed(() => props.to ? routerLink : undefined);
     const route = useRoute();
+    const isActive = vue.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 = vue.computed(() => props.to ? link.value?.route.value.href : props.href);
     return {
       isLink,
       isClickable,
+      isActive,
       route: link.value?.route,
       navigate: link.value?.navigate,
-      isActive: vue.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: vue.computed(() => props.to ? link.value?.route.value.href : props.href)
+      href,
+      linkProps: vue.reactive({
+        href,
+        'aria-current': vue.computed(() => isActive.value ? 'page' : undefined)
+      })
     };
   }
   const makeRouterProps = propsFactory({
@@ -5890,7 +5904,7 @@
         const hasPrepend = !!(props.prependIcon || slots.prepend);
         const hasAppend = !!(props.appendIcon || slots.append);
         const hasIcon = !!(props.icon && props.icon !== true);
-        return vue.withDirectives(vue.createVNode(Tag, {
+        return vue.withDirectives(vue.createVNode(Tag, vue.mergeProps({
           "type": Tag === 'a' ? undefined : 'button',
           "class": ['v-btn', group?.selectedClass.value, {
             'v-btn--active': isActive.value,
@@ -5907,11 +5921,10 @@
           "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 && vue.createVNode("span", {
             "key": "prepend",
             "class": "v-btn__prepend"
@@ -8174,7 +8187,7 @@
         const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         const hasColor = !group || group.isSelected.value;
-        return isActive.value && vue.withDirectives(vue.createVNode(Tag, {
+        return isActive.value && vue.withDirectives(vue.createVNode(Tag, vue.mergeProps({
           "class": ['v-chip', {
             'v-chip--disabled': props.disabled,
             'v-chip--label': props.label,
@@ -8185,11 +8198,10 @@
           "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 && vue.createVNode(VExpandXTransition, {
             "key": "filter"
           }, {
@@ -8434,7 +8446,6 @@
     return strategy;
   };
 
-  // Utilities
   const singleOpenStrategy = {
     open: _ref => {
       let {
@@ -8468,11 +8479,11 @@
         parents
       } = _ref2;
       if (value) {
-        let parent = vue.toRaw(parents.get(id));
+        let parent = parents.get(id);
         opened.add(id);
         while (parent != null && parent !== id) {
           opened.add(parent);
-          parent = vue.toRaw(parents.get(parent));
+          parent = parents.get(parent);
         }
         return opened;
       } else {
@@ -8714,7 +8725,8 @@
       opened: vue.ref(new Set()),
       activated: vue.ref(new Set()),
       selected: vue.ref(new Map()),
-      selectedValues: vue.ref([])
+      selectedValues: vue.ref([]),
+      getPath: () => []
     }
   };
   const makeNestedProps = propsFactory({
@@ -8732,7 +8744,7 @@
     let isUnmounted = false;
     const children = vue.ref(new Map());
     const parents = vue.ref(new Map());
-    const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(vue.toRaw(v)), v => [...v.values()]);
+    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);
@@ -8792,6 +8804,7 @@
       return path;
     }
     const vm = getCurrentInstance('nested');
+    const nodeIds = new Set();
     const nested = {
       id: vue.shallowRef(),
       root: {
@@ -8808,6 +8821,14 @@
           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) {
@@ -8816,6 +8837,7 @@
         },
         unregister: id => {
           if (isUnmounted) return;
+          nodeIds.delete(id);
           children.value.delete(id);
           const parent = parents.value.get(id);
           if (parent) {
@@ -8892,7 +8914,8 @@
           newActivated && (activated.value = newActivated);
         },
         children,
-        parents
+        parents,
+        getPath
       }
     };
     vue.provide(VNestedSymbol, nested);
@@ -8905,9 +8928,9 @@
     const item = {
       ...parent,
       id: computedId,
-      open: (open, e) => parent.root.open(vue.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: vue.computed(() => parent.root.opened.value.has(vue.toRaw(computedId.value))),
+      isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
       isActivated: vue.computed(() => parent.root.activated.value.has(vue.toRaw(computedId.value))),
@@ -9137,7 +9160,8 @@
         isGroupActivator,
         root,
         parent,
-        openOnSelect
+        openOnSelect,
+        id: uid
       } = useNestedItem(id, false);
       const list = useList();
       const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
@@ -9221,7 +9245,7 @@
         if (props.activeColor) {
           deprecate('active-color', ['color', 'base-color']);
         }
-        return vue.withDirectives(vue.createVNode(Tag, {
+        return vue.withDirectives(vue.createVNode(Tag, vue.mergeProps({
           "class": ['v-list-item', {
             'v-list-item--active': isActive.value,
             'v-list-item--disabled': props.disabled,
@@ -9232,11 +9256,10 @@
             [`${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 && vue.createVNode("div", {
             "key": "prepend",
             "class": "v-list-item__prepend"
@@ -9323,7 +9346,9 @@
         isGroupActivator,
         isSelected,
         list,
-        select
+        select,
+        root,
+        id: uid
       };
     }
   });
@@ -9724,7 +9749,8 @@
         children,
         open,
         parents,
-        select
+        select,
+        getPath
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
       const activeColor = vue.toRef(props, 'activeColor');
@@ -9816,7 +9842,8 @@
         select,
         focus,
         children,
-        parents
+        parents,
+        getPath
       };
     }
   });
@@ -11268,6 +11295,8 @@
 
   /** Omit properties starting with P */
 
+  /** Omit keyof $props from T */
+
   function getDescriptor(obj, key) {
     let currentObj = obj;
     while (currentObj) {
@@ -13923,6 +13952,7 @@
     props: makeVDialogProps(),
     emits: {
       'update:modelValue': value => true,
+      afterEnter: () => true,
       afterLeave: () => true
     },
     setup(props, _ref) {
@@ -13964,6 +13994,7 @@
         });
       }
       function onAfterEnter() {
+        emit('afterEnter');
         if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) {
           overlay.value.contentEl.focus({
             preventScroll: true
@@ -13984,8 +14015,7 @@
       useRender(() => {
         const overlayProps = VOverlay.filterProps(props);
         const activatorProps = vue.mergeProps({
-          'aria-haspopup': 'dialog',
-          'aria-expanded': String(isActive.value)
+          'aria-haspopup': 'dialog'
         }, props.activatorProps);
         const contentProps = vue.mergeProps({
           tabindex: -1
@@ -14116,12 +14146,10 @@
           "style": [textColorStyles.value, props.style],
           "aria-current": isActive.value ? 'page' : undefined
         }, {
-          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createVNode("a", {
+          default: () => [!link.isLink.value ? slots.default?.() ?? props.title : vue.createVNode("a", vue.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 {};
@@ -14497,7 +14525,7 @@
         const hasImage = !!(slots.image || props.image);
         const hasCardItem = hasHeader || hasPrepend || hasAppend;
         const hasText = !!(slots.text || props.text != null);
-        return vue.withDirectives(vue.createVNode(Tag, {
+        return vue.withDirectives(vue.createVNode(Tag, vue.mergeProps({
           "class": ['v-card', {
             'v-card--disabled': props.disabled,
             'v-card--flat': props.flat,
@@ -14505,10 +14533,9 @@
             '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 && vue.createVNode("div", {
             "key": "image",
             "class": "v-card__image"
@@ -23403,7 +23430,6 @@
         type: String,
         required: true
       },
-      rootRef: null,
       rootMargin: String
     },
     emits: {
@@ -23416,14 +23442,15 @@
       const {
         intersectionRef,
         isIntersecting
-      } = useIntersectionObserver(entries => {}, props.rootMargin ? {
-        rootMargin: props.rootMargin
-      } : undefined);
+      } = useIntersectionObserver();
       vue.watch(isIntersecting, async val => {
         emit('intersect', props.side, val);
       });
       useRender(() => vue.createVNode("div", {
         "class": "v-infinite-scroll-intersect",
+        "style": {
+          '--v-infinite-margin-size': props.rootMargin
+        },
         "ref": intersectionRef
       }, [vue.createTextVNode("\xA0")]));
       return {};
@@ -23574,17 +23601,15 @@
         }, {
           default: () => [vue.createVNode("div", {
             "class": "v-infinite-scroll__side"
-          }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          }, [renderSide('start', startStatus.value)]), hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
             "key": "start",
             "side": "start",
             "onIntersect": handleIntersect,
-            "rootRef": rootEl.value,
             "rootMargin": margin.value
-          }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          }, null), slots.default?.(), hasEndIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
             "key": "end",
             "side": "end",
             "onIntersect": handleIntersect,
-            "rootRef": rootEl.value,
             "rootMargin": margin.value
           }, null), vue.createVNode("div", {
             "class": "v-infinite-scroll__side"
@@ -28048,7 +28073,7 @@
       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
@@ -28106,7 +28131,7 @@
   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
     };
   });
@@ -28212,7 +28237,7 @@
       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
@@ -28237,7 +28262,7 @@
       ...options
     });
   };
-  const version = "3.7.0";
+  const version = "3.7.2";
   createVuetify.version = version;
 
   exports.blueprints = index;