vuetify 3.10.3 → 3.10.5

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.3
+* Vuetify v3.10.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -584,17 +584,19 @@ function getAxis(anchor) {
 }
 
 class Box {
-  constructor(_ref) {
-    let {
+  constructor(args) {
+    const pageScale = document.body.currentCSSZoom ?? 1;
+    const factor = args instanceof DOMRect ? 1 + (1 - pageScale) / pageScale : 1;
+    const {
       x,
       y,
       width,
       height
-    } = _ref;
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
+    } = args;
+    this.x = x * factor;
+    this.y = y * factor;
+    this.width = width * factor;
+    this.height = height * factor;
   }
   get top() {
     return this.y;
@@ -623,14 +625,16 @@ function getOverflow(a, b) {
 }
 function getTargetBox(target) {
   if (Array.isArray(target)) {
+    const pageScale = document.body.currentCSSZoom ?? 1;
+    const factor = 1 + (1 - pageScale) / pageScale;
     return new Box({
-      x: target[0],
-      y: target[1],
-      width: 0,
-      height: 0
+      x: target[0] * factor,
+      y: target[1] * factor,
+      width: 0 * factor,
+      height: 0 * factor
     });
   } else {
-    return target.getBoundingClientRect();
+    return new Box(target.getBoundingClientRect());
   }
 }
 function getElementBox(el) {
@@ -643,11 +647,12 @@ function getElementBox(el) {
         height: document.documentElement.clientHeight
       });
     } else {
+      const pageScale = document.body.currentCSSZoom ?? 1;
       return new Box({
         x: visualViewport.scale > 1 ? 0 : visualViewport.offsetLeft,
         y: visualViewport.scale > 1 ? 0 : visualViewport.offsetTop,
-        width: visualViewport.width * visualViewport.scale,
-        height: visualViewport.height * visualViewport.scale
+        width: visualViewport.width * visualViewport.scale / pageScale,
+        height: visualViewport.height * visualViewport.scale / pageScale
       });
     }
   } else {
@@ -665,7 +670,7 @@ function getElementBox(el) {
 
 /** @see https://stackoverflow.com/a/57876601/2074736 */
 function nullifyTransforms(el) {
-  const rect = el.getBoundingClientRect();
+  const rect = new Box(el.getBoundingClientRect());
   const style = getComputedStyle(el);
   const tx = style.transform;
   if (tx) {
@@ -5004,14 +5009,18 @@ function useGroupItem(props, injectKey) {
   }
   const value = toRef(() => props.value);
   const disabled = computed(() => !!(group.disabled.value || props.disabled));
-  group.register({
-    id,
-    value,
-    disabled
-  }, vm);
-  onBeforeUnmount(() => {
-    group.unregister(id);
-  });
+  function register() {
+    group?.register({
+      id,
+      value,
+      disabled
+    }, vm);
+  }
+  function unregister() {
+    group?.unregister(id);
+  }
+  onMounted(() => register());
+  onBeforeUnmount(() => unregister());
   const isSelected = computed(() => {
     return group.isSelected(id);
   });
@@ -5039,7 +5048,9 @@ function useGroupItem(props, injectKey) {
     selectedClass,
     value,
     disabled,
-    group
+    group,
+    register,
+    unregister
   };
 }
 function useGroup(props, injectKey) {
@@ -6401,7 +6412,7 @@ const VBtn = genericComponent()({
     });
     function onClick(e) {
       if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === '_blank')) return;
-      if (link.isLink.value) {
+      if (link.isRouterLink.value) {
         link.navigate?.(e);
       } else {
         // Group active state for links is handled by useSelectLink
@@ -8847,6 +8858,7 @@ const VChip = genericComponent()({
     } = provideTheme(props);
     const isActive = useProxiedModel(props, 'modelValue');
     const group = useGroupItem(props, VChipGroupSymbol, false);
+    const slideGroup = useGroupItem(props, VSlideGroupSymbol, false);
     const link = useLink(props, attrs);
     const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
@@ -8860,6 +8872,15 @@ const VChip = genericComponent()({
         emit('click:close', e);
       }
     }));
+    watch(isActive, val => {
+      if (val) {
+        group?.register();
+        slideGroup?.register();
+      } else {
+        group?.unregister();
+        slideGroup?.unregister();
+      }
+    });
     const {
       colorClasses,
       colorStyles,
@@ -10013,7 +10034,7 @@ const VListItem = genericComponent()({
     const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
-    const role = computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
+    const role = computed(() => list ? isLink.value ? 'link' : isSelectable.value ? 'option' : 'listitem' : undefined);
     const ariaSelected = computed(() => {
       if (!isSelectable.value) return undefined;
       return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
@@ -15041,10 +15062,11 @@ const VDialog = genericComponent()({
       scopeId
     } = useScopeId();
     const overlay = ref();
-    function onFocusin(e) {
+    async function onFocusin(e) {
       const before = e.relatedTarget;
       const after = e.target;
-      if (before !== after && overlay.value?.contentEl &&
+      await nextTick();
+      if (isActive.value && before !== after && overlay.value?.contentEl &&
       // We're the topmost dialog
       overlay.value?.globalTop &&
       // It isn't the document or the dialog body
@@ -15052,22 +15074,39 @@ const VDialog = genericComponent()({
       // It isn't inside the dialog body
       !overlay.value.contentEl.contains(after)) {
         const focusable = focusableChildren(overlay.value.contentEl);
-        if (!focusable.length) return;
-        const firstElement = focusable[0];
-        const lastElement = focusable[focusable.length - 1];
-        if (before === firstElement) {
-          lastElement.focus();
-        } else {
-          firstElement.focus();
-        }
+        focusable[0]?.focus();
+      }
+    }
+    function onKeydown(e) {
+      if (e.key !== 'Tab' || !overlay.value?.contentEl) return;
+      const focusable = focusableChildren(overlay.value.contentEl);
+      if (!focusable.length) return;
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && active === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
       }
     }
     onBeforeUnmount(() => {
       document.removeEventListener('focusin', onFocusin);
+      document.removeEventListener('keydown', onKeydown);
     });
     if (IN_BROWSER) {
       watch(() => isActive.value && props.retainFocus, val => {
-        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+        if (val) {
+          document.addEventListener('focusin', onFocusin, {
+            once: true
+          });
+          document.addEventListener('keydown', onKeydown);
+        } else {
+          document.removeEventListener('focusin', onFocusin);
+          document.removeEventListener('keydown', onKeydown);
+        }
       }, {
         immediate: true
       });
@@ -19455,6 +19494,7 @@ const VColorPicker = defineComponent({
 // Types
 
 const makeVComboboxProps = propsFactory({
+  alwaysFilter: Boolean,
   autoSelectFirst: {
     type: [Boolean, String]
   },
@@ -19554,7 +19594,7 @@ const VCombobox = genericComponent()({
     const {
       filteredItems,
       getMatches
-    } = useFilter(props, items, () => isPristine.value ? '' : search.value);
+    } = useFilter(props, items, () => props.alwaysFilter || !isPristine.value ? search.value : '');
     const displayItems = computed(() => {
       if (props.hideSelected) {
         return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
@@ -19601,6 +19641,7 @@ const VCombobox = genericComponent()({
     const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       cleared = true;
+      nextTick(() => cleared = false);
       if (props.openOnClear) {
         menu.value = true;
       }
@@ -21834,6 +21875,7 @@ const makeVDataTableHeadersProps = propsFactory({
   },
   /** @deprecated */
   sticky: Boolean,
+  ...makeDensityProps(),
   ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
@@ -21958,6 +22000,7 @@ const VDataTableHeaders = genericComponent()({
           if (isEmpty) return '';
           if (column.key === 'data-table-select') {
             return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && createVNode(VCheckboxBtn, {
+              "density": props.density,
               "modelValue": allSelected.value,
               "indeterminate": someSelected.value && !allSelected.value,
               "onUpdate:modelValue": selectAll
@@ -22058,7 +22101,8 @@ const makeVDataTableGroupHeaderRowProps = propsFactory({
   groupExpandIcon: {
     type: IconValue,
     default: '$tableGroupExpand'
-  }
+  },
+  ...makeDensityProps()
 }, 'VDataTableGroupHeaderRow');
 const VDataTableGroupHeaderRow = genericComponent()({
   name: 'VDataTableGroupHeaderRow',
@@ -22126,6 +22170,7 @@ const VDataTableGroupHeaderRow = genericComponent()({
           "noPadding": true
         }, {
           default: () => [createVNode(VCheckboxBtn, {
+            "density": props.density,
             "modelValue": modelValue,
             "indeterminate": indeterminate,
             "onUpdate:modelValue": selectGroup
@@ -22154,6 +22199,7 @@ const makeVDataTableRowProps = propsFactory({
   onClick: EventProp(),
   onContextmenu: EventProp(),
   onDblclick: EventProp(),
+  ...makeDensityProps(),
   ...makeDisplayProps()
 }, 'VDataTableRow');
 const VDataTableRow = genericComponent()({
@@ -22262,6 +22308,7 @@ const VDataTableRow = genericComponent()({
               }
             }) ?? createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
+              "density": props.density,
               "modelValue": isSelected([item]),
               "onClick": withModifiers(event => toggleSelect(item, props.index, event), ['stop'])
             }, null);
@@ -22314,8 +22361,8 @@ const makeVDataTableRowsProps = propsFactory({
   },
   rowProps: [Object, Function],
   cellProps: [Object, Function],
-  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
-  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
+  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon', 'density']),
+  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon', 'density']),
   ...makeDisplayProps()
 }, 'VDataTableRows');
 const VDataTableRows = genericComponent()({
@@ -22350,7 +22397,7 @@ const VDataTableRows = genericComponent()({
       mobile
     } = useDisplay(props);
     useRender(() => {
-      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon']);
+      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon', 'density']);
       if (props.loading && (!props.items.length || slots.loading)) {
         return createElementVNode("tr", {
           "class": "v-data-table-rows-loading",
@@ -22416,6 +22463,7 @@ const VDataTableRows = genericComponent()({
             cellProps: props.cellProps,
             collapseIcon: props.collapseIcon,
             expandIcon: props.expandIcon,
+            density: props.density,
             mobile: mobile.value
           }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
             item: slotProps.item,
@@ -22432,6 +22480,8 @@ const VDataTableRows = genericComponent()({
   }
 });
 
+// Types
+
 const makeVTableProps = propsFactory({
   fixedHeader: Boolean,
   fixedFooter: Boolean,
@@ -22461,37 +22511,26 @@ const VTable = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
-    useRender(() => {
-      const tableContentDefaults = {
-        VCheckboxBtn: {
-          density: props.density
+    useRender(() => createVNode(props.tag, {
+      "class": normalizeClass(['v-table', {
+        'v-table--fixed-height': !!props.height,
+        'v-table--fixed-header': props.fixedHeader,
+        'v-table--fixed-footer': props.fixedFooter,
+        'v-table--has-top': !!slots.top,
+        'v-table--has-bottom': !!slots.bottom,
+        'v-table--hover': props.hover,
+        'v-table--striped-even': props.striped === 'even',
+        'v-table--striped-odd': props.striped === 'odd'
+      }, themeClasses.value, densityClasses.value, props.class]),
+      "style": normalizeStyle(props.style)
+    }, {
+      default: () => [slots.top?.(), slots.default ? createElementVNode("div", {
+        "class": "v-table__wrapper",
+        "style": {
+          height: convertToUnit(props.height)
         }
-      };
-      return createVNode(props.tag, {
-        "class": normalizeClass(['v-table', {
-          'v-table--fixed-height': !!props.height,
-          'v-table--fixed-header': props.fixedHeader,
-          'v-table--fixed-footer': props.fixedFooter,
-          'v-table--has-top': !!slots.top,
-          'v-table--has-bottom': !!slots.bottom,
-          'v-table--hover': props.hover,
-          'v-table--striped-even': props.striped === 'even',
-          'v-table--striped-odd': props.striped === 'odd'
-        }, themeClasses.value, densityClasses.value, props.class]),
-        "style": normalizeStyle(props.style)
-      }, {
-        default: () => [slots.top?.(), createVNode(VDefaultsProvider, {
-          "defaults": tableContentDefaults
-        }, {
-          default: () => [slots.default ? createElementVNode("div", {
-            "class": "v-table__wrapper",
-            "style": {
-              height: convertToUnit(props.height)
-            }
-          }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.()]
-        }), slots.bottom?.()]
-      });
-    });
+      }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
+    }));
     return {};
   }
 });
@@ -25274,7 +25313,8 @@ const VFileInput = genericComponent()({
         'onClick:clear': onClear
       };
       const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
-      const inputAccept = expectsDirectory ? undefined : props.filterByType ?? String(attrs.accept);
+      const acceptFallback = attrs.accept ? String(attrs.accept) : undefined;
+      const inputAccept = expectsDirectory ? undefined : props.filterByType ?? acceptFallback;
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": props.multiple ? model.value : model.value[0],
@@ -31529,6 +31569,7 @@ const VTreeviewChildren = genericComponent()({
             ...itemProps,
             ...activatorProps,
             value: itemProps?.value,
+            indentLines: indentLines.node,
             onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
             onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
           };
@@ -31542,7 +31583,6 @@ const VTreeviewChildren = genericComponent()({
           }, listItemProps, {
             "hasCustomPrepend": !!slots.prepend,
             "hideActions": props.hideActions,
-            "indentLines": indentLines.node,
             "value": props.returnObject ? item.raw : itemProps.value,
             "loading": loading
           }), slotsWithItem));
@@ -32237,7 +32277,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.10.3";
+const version$1 = "3.10.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -32262,7 +32302,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.10.3";
+const version = "3.10.5";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useMask, useRtl, useTheme, version };