vuetify 3.7.1 → 3.7.3

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.1
+* Vuetify v3.7.3
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5389,10 +5389,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
@@ -5404,18 +5408,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({
@@ -5890,7 +5900,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,
@@ -5907,11 +5917,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"
@@ -8174,7 +8183,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,
@@ -8185,11 +8194,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"
         }, {
@@ -8268,7 +8276,8 @@ const VChip = genericComponent()({
         }, slots.append)]), hasClose && createVNode("button", mergeProps({
           "key": "close",
           "class": "v-chip__close",
-          "type": "button"
+          "type": "button",
+          "data-testid": "close-chip"
         }, closeProps.value), [!slots.close ? createVNode(VIcon, {
           "key": "close-icon",
           "icon": props.closeIcon,
@@ -8434,7 +8443,6 @@ const leafSingleActiveStrategy = mandatory => {
   return strategy;
 };
 
-// Utilities
 const singleOpenStrategy = {
   open: _ref => {
     let {
@@ -8468,11 +8476,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 {
@@ -8714,7 +8722,8 @@ const emptyNested = {
     opened: ref(new Set()),
     activated: ref(new Set()),
     selected: ref(new Map()),
-    selectedValues: ref([])
+    selectedValues: ref([]),
+    getPath: () => []
   }
 };
 const makeNestedProps = propsFactory({
@@ -8732,7 +8741,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);
@@ -8792,6 +8801,7 @@ const useNested = props => {
     return path;
   }
   const vm = getCurrentInstance('nested');
+  const nodeIds = new Set();
   const nested = {
     id: shallowRef(),
     root: {
@@ -8808,6 +8818,14 @@ const useNested = props => {
         return arr;
       }),
       register: (id, parentId, isGroup) => {
+        if (nodeIds.has(id)) {
+          const path = getPath(id).map(String).join(' -> ');
+          const newPath = getPath(parentId).concat(id).map(String).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 +8834,7 @@ const useNested = props => {
       },
       unregister: id => {
         if (isUnmounted) return;
+        nodeIds.delete(id);
         children.value.delete(id);
         const parent = parents.value.get(id);
         if (parent) {
@@ -8892,7 +8911,8 @@ const useNested = props => {
         newActivated && (activated.value = newActivated);
       },
       children,
-      parents
+      parents,
+      getPath
     }
   };
   provide(VNestedSymbol, nested);
@@ -8905,9 +8925,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))),
@@ -9137,7 +9157,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)));
@@ -9221,7 +9242,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,
@@ -9232,11 +9253,11 @@ 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,
+        "aria-selected": root.activatable.value ? isActivated.value : isSelected.value,
         "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"
@@ -9323,7 +9344,9 @@ const VListItem = genericComponent()({
       isGroupActivator,
       isSelected,
       list,
-      select
+      select,
+      root,
+      id: uid
     };
   }
 });
@@ -9724,7 +9747,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');
@@ -9816,7 +9840,8 @@ const VList = genericComponent()({
       select,
       focus,
       children,
-      parents
+      parents,
+      getPath
     };
   }
 });
@@ -13988,8 +14013,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
@@ -14120,12 +14144,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 {};
@@ -14501,7 +14523,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,
@@ -14509,10 +14531,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"
@@ -16843,7 +16864,7 @@ const VColorPicker = defineComponent({
       hue.value = hsva.h;
       model.value = hsva;
     };
-    onMounted(() => {
+    onBeforeMount(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
     provideDefaults({
@@ -18602,7 +18623,9 @@ function providePagination(options) {
     if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
     return Math.ceil(itemsLength.value / itemsPerPage.value);
   });
-  watchEffect(() => {
+
+  // Don't run immediately, items may not have been loaded yet: #17966
+  watch([page, pageCount], () => {
     if (page.value > pageCount.value) {
       page.value = pageCount.value;
     }
@@ -28050,7 +28073,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
@@ -28068,7 +28091,7 @@ function findComponentParent(vnode, root) {
   const walk = children => {
     for (const child of children) {
       if (!child) continue;
-      if (child === vnode) {
+      if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
         return true;
       }
       stack.add(child);
@@ -28088,7 +28111,8 @@ function findComponentParent(vnode, root) {
     return false;
   };
   if (!walk([root.subTree])) {
-    throw new Error('Could not find original vnode');
+    consoleError('Could not find original vnode, component will not inherit provides');
+    return root;
   }
 
   // Return the first component parent
@@ -28108,7 +28132,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
   };
 });
@@ -28214,7 +28238,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.1";
+const version$1 = "3.7.3";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28239,7 +28263,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.7.1";
+const version = "3.7.3";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };