vuetify 3.3.6 → 3.3.7

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.6
+* Vuetify v3.3.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1258,8 +1258,9 @@
   };
 
   function getScrollParent(el) {
+    let includeHidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     while (el) {
-      if (hasScrollbar(el)) return el;
+      if (includeHidden ? isPotentiallyScrollable(el) : hasScrollbar(el)) return el;
       el = el.parentElement;
     }
     return document.scrollingElement;
@@ -1279,6 +1280,11 @@
     const style = window.getComputedStyle(el);
     return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
   }
+  function isPotentiallyScrollable(el) {
+    if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
+    const style = window.getComputedStyle(el);
+    return ['scroll', 'auto'].includes(style.overflowY);
+  }
 
   const IN_BROWSER = typeof window !== 'undefined';
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -1324,13 +1330,18 @@
   // Types
 
   function useResizeObserver(callback) {
+    let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
     const resizeRef = vue.ref();
     const contentRect = vue.ref();
     if (IN_BROWSER) {
       const observer = new ResizeObserver(entries => {
         callback?.(entries, observer);
         if (!entries.length) return;
-        contentRect.value = entries[0].contentRect;
+        if (box === 'content') {
+          contentRect.value = entries[0].contentRect;
+        } else {
+          contentRect.value = entries[0].target.getBoundingClientRect();
+        }
       });
       vue.onBeforeUnmount(() => {
         observer.disconnect();
@@ -3152,7 +3163,9 @@
           "class": ['v-img', {
             'v-img--booting': !isBooted.value
           }, props.class],
-          "style": props.style
+          "style": [{
+            width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
+          }, props.style]
         }, responsiveProps, {
           "aspectRatio": aspectRatio.value,
           "aria-label": props.alt,
@@ -5271,7 +5284,7 @@
         return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
       });
       function onClick(e) {
-        if (isDisabled.value) return;
+        if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === '_blank')) return;
         link.navigate?.(e);
         group?.toggle();
       }
@@ -5610,7 +5623,10 @@
   const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
   const makeSelectionControlGroupProps = propsFactory({
     color: String,
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     defaultsTarget: String,
     error: Boolean,
     id: String,
@@ -5834,12 +5850,12 @@
         }, null), vue.createVNode("input", vue.mergeProps({
           "ref": input,
           "checked": model.value,
-          "disabled": props.disabled,
+          "disabled": !!(props.readonly || props.disabled),
           "id": id.value,
           "onBlur": onBlur,
           "onFocus": onFocus,
           "onInput": onInput,
-          "aria-disabled": props.readonly,
+          "aria-disabled": !!(props.readonly || props.disabled),
           "type": props.type,
           "value": trueValue.value,
           "name": props.name,
@@ -8710,7 +8726,9 @@
     scrollElements.forEach((el, i) => {
       el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft));
       el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop));
-      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
+      if (el !== document.documentElement) {
+        el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
+      }
       el.classList.add('v-overlay-scroll-blocked');
     });
     vue.onScopeDispose(() => {
@@ -10365,12 +10383,16 @@
                 }]]);
                 return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
                   "class": "v-text-field__prefix"
-                }, [props.prefix]), vue.createVNode("div", {
+                }, [vue.createVNode("span", {
+                  "class": "v-text-field__prefix__text"
+                }, [props.prefix])]), vue.createVNode("div", {
                   "class": fieldClass,
                   "data-no-activator": ""
                 }, [slots.default ? vue.createVNode(vue.Fragment, null, [slots.default(), inputNode]) : vue.cloneVNode(inputNode)]), props.suffix && vue.createVNode("span", {
                   "class": "v-text-field__suffix"
-                }, [props.suffix])]);
+                }, [vue.createVNode("span", {
+                  "class": "v-text-field__suffix__text"
+                }, [props.suffix])])]);
               }
             });
           },
@@ -10387,6 +10409,301 @@
 
   // Types
 
+  const makeVVirtualScrollItemProps = propsFactory({
+    renderless: Boolean,
+    ...makeComponentProps()
+  }, 'VVirtualScrollItem');
+  const VVirtualScrollItem = genericComponent()({
+    name: 'VVirtualScrollItem',
+    inheritAttrs: false,
+    props: makeVVirtualScrollItemProps(),
+    emits: {
+      'update:height': height => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs,
+        emit,
+        slots
+      } = _ref;
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver(undefined, 'border');
+      vue.watch(() => contentRect.value?.height, height => {
+        if (height != null) emit('update:height', height);
+      });
+      useRender(() => props.renderless ? vue.createVNode(vue.Fragment, null, [slots.default?.({
+        itemRef: resizeRef
+      })]) : vue.createVNode("div", vue.mergeProps({
+        "ref": resizeRef,
+        "class": ['v-virtual-scroll__item', props.class],
+        "style": props.style
+      }, attrs), [slots.default?.()]));
+    }
+  });
+
+  // Composables
+
+  // Types
+
+  const UP = -1;
+  const DOWN = 1;
+  const makeVirtualProps = propsFactory({
+    itemHeight: {
+      type: [Number, String],
+      default: 48
+    }
+  }, 'virtual');
+  function useVirtual(props, items, offset) {
+    const first = vue.shallowRef(0);
+    const baseItemHeight = vue.shallowRef(props.itemHeight);
+    const itemHeight = vue.computed({
+      get: () => parseInt(baseItemHeight.value ?? 0, 10),
+      set(val) {
+        baseItemHeight.value = val;
+      }
+    });
+    const containerRef = vue.ref();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    vue.watchEffect(() => {
+      resizeRef.value = containerRef.value;
+    });
+    const display = useDisplay();
+    const sizeMap = new Map();
+    let sizes = Array.from({
+      length: items.value.length
+    });
+    const visibleItems = vue.computed(() => {
+      const height = (!contentRect.value || containerRef.value === document.documentElement ? display.height.value : contentRect.value.height) - (offset?.value ?? 0);
+      return Math.ceil(height / itemHeight.value * 1.7 + 1);
+    });
+    function handleItemResize(index, height) {
+      itemHeight.value = Math.max(itemHeight.value, height);
+      sizes[index] = height;
+      sizeMap.set(items.value[index], height);
+    }
+    function calculateOffset(index) {
+      return sizes.slice(0, index).reduce((acc, val) => acc + (val || itemHeight.value), 0);
+    }
+    function calculateMidPointIndex(scrollTop) {
+      const end = items.value.length;
+      let middle = 0;
+      let middleOffset = 0;
+      while (middleOffset < scrollTop && middle < end) {
+        middleOffset += sizes[middle++] || itemHeight.value;
+      }
+      return middle - 1;
+    }
+    let lastScrollTop = 0;
+    function handleScroll() {
+      if (!containerRef.value || !contentRect.value) return;
+      const height = contentRect.value.height - 56;
+      const scrollTop = containerRef.value.scrollTop;
+      const direction = scrollTop < lastScrollTop ? UP : DOWN;
+      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
+      const buffer = Math.round(visibleItems.value / 3);
+      const firstIndex = midPointIndex - buffer;
+      const lastIndex = first.value + buffer * 2 - 1;
+      if (direction === UP && midPointIndex <= lastIndex) {
+        first.value = clamp(firstIndex, 0, items.value.length);
+      } else if (direction === DOWN && midPointIndex >= lastIndex) {
+        first.value = clamp(firstIndex, 0, items.value.length - visibleItems.value);
+      }
+      lastScrollTop = scrollTop;
+    }
+    function scrollToIndex(index) {
+      if (!containerRef.value) return;
+      const offset = calculateOffset(index);
+      containerRef.value.scrollTop = offset;
+    }
+    const last = vue.computed(() => Math.min(items.value.length, first.value + visibleItems.value));
+    const computedItems = vue.computed(() => {
+      return items.value.slice(first.value, last.value).map((item, index) => ({
+        raw: item,
+        index: index + first.value
+      }));
+    });
+    const paddingTop = vue.computed(() => calculateOffset(first.value));
+    const paddingBottom = vue.computed(() => calculateOffset(items.value.length) - calculateOffset(last.value));
+    vue.watch(() => items.value.length, () => {
+      sizes = createRange(items.value.length).map(() => itemHeight.value);
+      sizeMap.forEach((height, item) => {
+        const index = items.value.indexOf(item);
+        if (index === -1) {
+          sizeMap.delete(item);
+        } else {
+          sizes[index] = height;
+        }
+      });
+    });
+    return {
+      containerRef,
+      computedItems,
+      itemHeight,
+      paddingTop,
+      paddingBottom,
+      scrollToIndex,
+      handleScroll,
+      handleItemResize
+    };
+  }
+
+  // Types
+
+  const makeVVirtualScrollProps = propsFactory({
+    items: {
+      type: Array,
+      default: () => []
+    },
+    renderless: Boolean,
+    ...makeVirtualProps(),
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  }, 'VVirtualScroll');
+  const VVirtualScroll = genericComponent()({
+    name: 'VVirtualScroll',
+    props: makeVVirtualScrollProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const vm = getCurrentInstance('VVirtualScroll');
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      const {
+        containerRef,
+        handleScroll,
+        handleItemResize,
+        scrollToIndex,
+        paddingTop,
+        paddingBottom,
+        computedItems
+      } = useVirtual(props, vue.toRef(props, 'items'));
+      useToggleScope(() => props.renderless, () => {
+        vue.onMounted(() => {
+          containerRef.value = getScrollParent(vm.vnode.el, true);
+          containerRef.value?.addEventListener('scroll', handleScroll);
+        });
+        vue.onScopeDispose(() => {
+          containerRef.value?.removeEventListener('scroll', handleScroll);
+        });
+      });
+      useRender(() => {
+        const children = computedItems.value.map(item => vue.createVNode(VVirtualScrollItem, {
+          "key": item.index,
+          "renderless": props.renderless,
+          "onUpdate:height": height => handleItemResize(item.index, height)
+        }, {
+          default: slotProps => slots.default?.({
+            item: item.raw,
+            index: item.index,
+            ...slotProps
+          })
+        }));
+        return props.renderless ? vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+          "class": "v-virtual-scroll__spacer",
+          "style": {
+            paddingTop: convertToUnit(paddingTop.value)
+          }
+        }, null), children, vue.createVNode("div", {
+          "class": "v-virtual-scroll__spacer",
+          "style": {
+            paddingBottom: convertToUnit(paddingBottom.value)
+          }
+        }, null)]) : vue.createVNode("div", {
+          "ref": containerRef,
+          "class": ['v-virtual-scroll', props.class],
+          "onScroll": handleScroll,
+          "style": [dimensionStyles.value, props.style]
+        }, [vue.createVNode("div", {
+          "class": "v-virtual-scroll__container",
+          "style": {
+            paddingTop: convertToUnit(paddingTop.value),
+            paddingBottom: convertToUnit(paddingBottom.value)
+          }
+        }, [children])]);
+      });
+      return {
+        scrollToIndex
+      };
+    }
+  });
+
+  // Utilities
+
+  // Types
+
+  function useScrolling(listRef, textFieldRef) {
+    const isScrolling = vue.shallowRef(false);
+    let scrollTimeout;
+    function onListScroll(e) {
+      cancelAnimationFrame(scrollTimeout);
+      isScrolling.value = true;
+      scrollTimeout = requestAnimationFrame(() => {
+        scrollTimeout = requestAnimationFrame(() => {
+          isScrolling.value = false;
+        });
+      });
+    }
+    async function finishScrolling() {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await new Promise(resolve => {
+        if (isScrolling.value) {
+          const stop = vue.watch(isScrolling, () => {
+            stop();
+            resolve();
+          });
+        } else resolve();
+      });
+    }
+    async function onListKeydown(e) {
+      if (e.key === 'Tab') {
+        textFieldRef.value?.focus();
+      }
+      if (!['PageDown', 'PageUp', 'Home', 'End'].includes(e.key)) return;
+      const el = listRef.value?.$el;
+      if (!el) return;
+      if (e.key === 'Home' || e.key === 'End') {
+        el.scrollTo({
+          top: e.key === 'Home' ? 0 : el.scrollHeight,
+          behavior: 'smooth'
+        });
+      }
+      await finishScrolling();
+      const children = el.querySelectorAll(':scope > :not(.v-virtual-scroll__spacer)');
+      if (e.key === 'PageDown' || e.key === 'Home') {
+        const top = el.getBoundingClientRect().top;
+        for (const child of children) {
+          if (child.getBoundingClientRect().top >= top) {
+            child.focus();
+            break;
+          }
+        }
+      } else {
+        const bottom = el.getBoundingClientRect().bottom;
+        for (const child of [...children].reverse()) {
+          if (child.getBoundingClientRect().bottom <= bottom) {
+            child.focus();
+            break;
+          }
+        }
+      }
+    }
+    return {
+      onListScroll,
+      onListKeydown
+    };
+  }
+
+  // Types
+
   const makeSelectProps = propsFactory({
     chips: Boolean,
     closableChips: Boolean,
@@ -10478,6 +10795,10 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
+      const {
+        onListScroll,
+        onListKeydown
+      } = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -10524,11 +10845,6 @@
           model.value = [item];
         }
       }
-      function onListKeydown(e) {
-        if (e.key === 'Tab') {
-          vTextFieldRef.value?.focus();
-        }
-      }
       function select(item) {
         if (props.multiple) {
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -10611,34 +10927,46 @@
               "onMousedown": e => e.preventDefault(),
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
+              "onScrollPassive": onListScroll,
               "tabindex": "-1"
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), displayItems.value.map((item, index) => {
-                const itemProps = vue.mergeProps(item.props, {
-                  key: index,
-                  onClick: () => select(item)
-                });
-                return slots.item?.({
-                  item,
-                  index,
-                  props: itemProps
-                }) ?? vue.createVNode(VListItem, itemProps, {
-                  prepend: _ref2 => {
-                    let {
-                      isSelected
-                    } = _ref2;
-                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                      "key": item.value,
-                      "modelValue": isSelected,
-                      "ripple": false,
-                      "tabindex": "-1"
-                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                      "icon": item.props.prependIcon
-                    }, null)]);
-                  }
-                });
+              }, null)), vue.createVNode(VVirtualScroll, {
+                "renderless": true,
+                "items": displayItems.value
+              }, {
+                default: _ref2 => {
+                  let {
+                    item,
+                    index,
+                    itemRef
+                  } = _ref2;
+                  const itemProps = vue.mergeProps(item.props, {
+                    ref: itemRef,
+                    key: index,
+                    onClick: () => select(item)
+                  });
+                  return slots.item?.({
+                    item,
+                    index,
+                    props: itemProps
+                  }) ?? vue.createVNode(VListItem, itemProps, {
+                    prepend: _ref3 => {
+                      let {
+                        isSelected
+                      } = _ref3;
+                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                        "key": item.value,
+                        "modelValue": isSelected,
+                        "ripple": false,
+                        "tabindex": "-1"
+                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                        "icon": item.props.prependIcon
+                      }, null)]);
+                    }
+                  });
+                }
               }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
@@ -10776,14 +11104,12 @@
     return array;
   }
   function useFilter(props, items, query, options) {
-    const strQuery = vue.computed(() => typeof query?.value !== 'string' && typeof query?.value !== 'number' ? '' : String(query.value));
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
     const transformedItems = vue.computed(() => options?.transform ? vue.unref(items).map(options?.transform) : vue.unref(items));
     vue.watchEffect(() => {
-      filteredItems.value = [];
-      filteredMatches.value = new Map();
-      const results = filterItems(transformedItems.value, strQuery.value, {
+      const strQuery = typeof vue.toValue(query) !== 'string' && typeof vue.toValue(query) !== 'number' ? '' : String(vue.toValue(query));
+      const results = filterItems(transformedItems.value, strQuery, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
         filterKeys: props.filterKeys,
@@ -10791,15 +11117,19 @@
         noFilter: props.noFilter
       });
       const originalItems = vue.unref(items);
+      const _filteredItems = [];
+      const _filteredMatches = new Map();
       results.forEach(_ref => {
         let {
           index,
           matches
         } = _ref;
         const item = originalItems[index];
-        filteredItems.value.push(item);
-        filteredMatches.value.set(item.value, matches);
+        _filteredItems.push(item);
+        _filteredMatches.set(item.value, matches);
       });
+      filteredItems.value = _filteredItems;
+      filteredMatches.value = _filteredMatches;
     });
     function getMatches(item) {
       return filteredMatches.value.get(item.value);
@@ -10889,7 +11219,7 @@
       const {
         filteredItems,
         getMatches
-      } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
+      } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.computed(() => {
         return model.value.map(v => {
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
@@ -10909,6 +11239,10 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
+      const {
+        onListScroll,
+        onListKeydown
+      } = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -10982,11 +11316,6 @@
           }
         }
       }
-      function onListKeydown(e) {
-        if (e.key === 'Tab') {
-          vTextFieldRef.value?.focus();
-        }
-      }
       function onInput(e) {
         search.value = e.target.value;
       }
@@ -11105,38 +11434,50 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
+              "onScrollPassive": onListScroll,
               "tabindex": "-1"
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), displayItems.value.map((item, index) => {
-                const itemProps = vue.mergeProps(item.props, {
-                  key: index,
-                  active: highlightFirst.value && index === 0 ? true : undefined,
-                  onClick: () => select(item)
-                });
-                return slots.item?.({
-                  item,
-                  index,
-                  props: itemProps
-                }) ?? vue.createVNode(VListItem, itemProps, {
-                  prepend: _ref3 => {
-                    let {
-                      isSelected
-                    } = _ref3;
-                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                      "key": item.value,
-                      "modelValue": isSelected,
-                      "ripple": false,
-                      "tabindex": "-1"
-                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                      "icon": item.props.prependIcon
-                    }, null)]);
-                  },
-                  title: () => {
-                    return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                  }
-                });
+              }, null)), vue.createVNode(VVirtualScroll, {
+                "renderless": true,
+                "items": displayItems.value
+              }, {
+                default: _ref3 => {
+                  let {
+                    item,
+                    index,
+                    itemRef
+                  } = _ref3;
+                  const itemProps = vue.mergeProps(item.props, {
+                    ref: itemRef,
+                    key: index,
+                    active: highlightFirst.value && index === 0 ? true : undefined,
+                    onClick: () => select(item)
+                  });
+                  return slots.item?.({
+                    item,
+                    index,
+                    props: itemProps
+                  }) ?? vue.createVNode(VListItem, itemProps, {
+                    prepend: _ref4 => {
+                      let {
+                        isSelected
+                      } = _ref4;
+                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                        "key": item.value,
+                        "modelValue": isSelected,
+                        "ripple": false,
+                        "tabindex": "-1"
+                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                        "icon": item.props.prependIcon
+                      }, null)]);
+                    },
+                    title: () => {
+                      return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                    }
+                  });
+                }
               }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
@@ -14430,7 +14771,7 @@
       const {
         filteredItems,
         getMatches
-      } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
+      } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.computed(() => {
         return model.value.map(v => {
           return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
@@ -14450,6 +14791,10 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
+      const {
+        onListScroll,
+        onListKeydown
+      } = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         cleared = true;
         if (props.openOnClear) {
@@ -14527,11 +14872,6 @@
           search.value = '';
         }
       }
-      function onListKeydown(e) {
-        if (e.key === 'Tab') {
-          vTextFieldRef.value?.focus();
-        }
-      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -14642,38 +14982,50 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
+              "onScrollPassive": onListScroll,
               "tabindex": "-1"
             }, {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), displayItems.value.map((item, index) => {
-                const itemProps = vue.mergeProps(item.props, {
-                  key: index,
-                  active: highlightFirst.value && index === 0 ? true : undefined,
-                  onClick: () => select(item)
-                });
-                return slots.item?.({
-                  item,
-                  index,
-                  props: itemProps
-                }) ?? vue.createVNode(VListItem, itemProps, {
-                  prepend: _ref3 => {
-                    let {
-                      isSelected
-                    } = _ref3;
-                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                      "key": item.value,
-                      "modelValue": isSelected,
-                      "ripple": false,
-                      "tabindex": "-1"
-                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                      "icon": item.props.prependIcon
-                    }, null)]);
-                  },
-                  title: () => {
-                    return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                  }
-                });
+              }, null)), vue.createVNode(VVirtualScroll, {
+                "renderless": true,
+                "items": displayItems.value
+              }, {
+                default: _ref3 => {
+                  let {
+                    item,
+                    index,
+                    itemRef
+                  } = _ref3;
+                  const itemProps = vue.mergeProps(item.props, {
+                    ref: itemRef,
+                    key: index,
+                    active: highlightFirst.value && index === 0 ? true : undefined,
+                    onClick: () => select(item)
+                  });
+                  return slots.item?.({
+                    item,
+                    index,
+                    props: itemProps
+                  }) ?? vue.createVNode(VListItem, itemProps, {
+                    prepend: _ref4 => {
+                      let {
+                        isSelected
+                      } = _ref4;
+                      return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                        "key": item.value,
+                        "modelValue": isSelected,
+                        "ripple": false,
+                        "tabindex": "-1"
+                      }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                        "icon": item.props.prependIcon
+                      }, null)]);
+                    },
+                    title: () => {
+                      return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                    }
+                  });
+                }
               }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
@@ -19017,215 +19369,6 @@
     }
   });
 
-  const makeVVirtualScrollItemProps = propsFactory({
-    dynamicHeight: Boolean,
-    renderless: Boolean,
-    ...makeComponentProps()
-  }, 'VVirtualScrollItem');
-  const VVirtualScrollItem = genericComponent()({
-    name: 'VVirtualScrollItem',
-    props: makeVVirtualScrollItemProps(),
-    emits: {
-      'update:height': height => true
-    },
-    setup(props, _ref) {
-      let {
-        emit,
-        slots
-      } = _ref;
-      const {
-        resizeRef,
-        contentRect
-      } = useResizeObserver();
-      useToggleScope(() => props.dynamicHeight, () => {
-        vue.watch(() => contentRect.value?.height, height => {
-          if (height != null) emit('update:height', height);
-        });
-      });
-      function updateHeight() {
-        if (props.dynamicHeight && contentRect.value) {
-          emit('update:height', contentRect.value.height);
-        }
-      }
-      vue.onUpdated(updateHeight);
-      useRender(() => props.renderless ? vue.createVNode(vue.Fragment, null, [slots.default?.({
-        props: {
-          ref: props.dynamicHeight ? resizeRef : undefined
-        }
-      })]) : vue.createVNode("div", {
-        "ref": props.dynamicHeight ? resizeRef : undefined,
-        "class": ['v-virtual-scroll__item', props.class],
-        "style": props.style
-      }, [slots.default?.()]));
-    }
-  });
-
-  // Composables
-
-  // Types
-
-  const UP = -1;
-  const DOWN = 1;
-  const makeVirtualProps = propsFactory({
-    itemHeight: [Number, String]
-  }, 'virtual');
-  function useVirtual(props, items, offset) {
-    const first = vue.shallowRef(0);
-    const baseItemHeight = vue.shallowRef(props.itemHeight);
-    const itemHeight = vue.computed({
-      get: () => parseInt(baseItemHeight.value ?? 0, 10),
-      set(val) {
-        baseItemHeight.value = val;
-      }
-    });
-    const containerRef = vue.ref();
-    const {
-      resizeRef,
-      contentRect
-    } = useResizeObserver();
-    vue.watchEffect(() => {
-      resizeRef.value = containerRef.value;
-    });
-    const display = useDisplay();
-    const sizeMap = new Map();
-    let sizes = createRange(items.value.length).map(() => itemHeight.value);
-    const visibleItems = vue.computed(() => {
-      const height = (contentRect.value?.height ?? display.height.value) - (offset?.value ?? 0);
-      return itemHeight.value ? Math.max(12, Math.ceil(height / itemHeight.value * 1.7 + 1)) : 12;
-    });
-    function handleItemResize(index, height) {
-      itemHeight.value = Math.max(itemHeight.value, height);
-      sizes[index] = height;
-      sizeMap.set(items.value[index], height);
-    }
-    function calculateOffset(index) {
-      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
-    }
-    function calculateMidPointIndex(scrollTop) {
-      const end = items.value.length;
-      let middle = 0;
-      let middleOffset = 0;
-      while (middleOffset < scrollTop && middle < end) {
-        middleOffset += sizes[middle++] || itemHeight.value;
-      }
-      return middle - 1;
-    }
-    let lastScrollTop = 0;
-    function handleScroll() {
-      if (!containerRef.value || !contentRect.value) return;
-      const height = contentRect.value.height - 56;
-      const scrollTop = containerRef.value.scrollTop;
-      const direction = scrollTop < lastScrollTop ? UP : DOWN;
-      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
-      const buffer = Math.round(visibleItems.value / 3);
-      const firstIndex = midPointIndex - buffer;
-      const lastIndex = first.value + buffer * 2 - 1;
-      if (direction === UP && midPointIndex <= lastIndex) {
-        first.value = clamp(firstIndex, 0, items.value.length);
-      } else if (direction === DOWN && midPointIndex >= lastIndex) {
-        first.value = clamp(firstIndex, 0, items.value.length - visibleItems.value);
-      }
-      lastScrollTop = scrollTop;
-    }
-    function scrollToIndex(index) {
-      if (!containerRef.value) return;
-      const offset = calculateOffset(index);
-      containerRef.value.scrollTop = offset;
-    }
-    const allItems = vue.computed(() => items.value.map((item, index) => ({
-      raw: item,
-      index
-    })));
-    const last = vue.computed(() => Math.min(items.value.length, first.value + visibleItems.value));
-    const computedItems = vue.computed(() => allItems.value.slice(first.value, last.value));
-    const paddingTop = vue.computed(() => calculateOffset(first.value));
-    const paddingBottom = vue.computed(() => calculateOffset(items.value.length) - calculateOffset(last.value));
-    vue.onMounted(() => {
-      if (!itemHeight.value) {
-        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items
-        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
-      }
-    });
-    vue.watch(() => items.value.length, () => {
-      sizes = createRange(items.value.length).map(() => itemHeight.value);
-      sizeMap.forEach((height, item) => {
-        const index = items.value.indexOf(item);
-        if (index === -1) {
-          sizeMap.delete(item);
-        } else {
-          sizes[index] = height;
-        }
-      });
-    });
-    return {
-      containerRef,
-      computedItems,
-      itemHeight,
-      paddingTop,
-      paddingBottom,
-      scrollToIndex,
-      handleScroll,
-      handleItemResize
-    };
-  }
-
-  // Types
-
-  const makeVVirtualScrollProps = propsFactory({
-    items: {
-      type: Array,
-      default: () => []
-    },
-    ...makeVirtualProps(),
-    ...makeComponentProps(),
-    ...makeDimensionProps()
-  }, 'VVirtualScroll');
-  const VVirtualScroll = genericComponent()({
-    name: 'VVirtualScroll',
-    props: makeVVirtualScrollProps(),
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const {
-        dimensionStyles
-      } = useDimension(props);
-      const {
-        containerRef,
-        handleScroll,
-        handleItemResize,
-        scrollToIndex,
-        paddingTop,
-        paddingBottom,
-        computedItems
-      } = useVirtual(props, vue.toRef(props, 'items'));
-      useRender(() => vue.createVNode("div", {
-        "ref": containerRef,
-        "class": ['v-virtual-scroll', props.class],
-        "onScroll": handleScroll,
-        "style": [dimensionStyles.value, props.style]
-      }, [vue.createVNode("div", {
-        "class": "v-virtual-scroll__container",
-        "style": {
-          paddingTop: convertToUnit(paddingTop.value),
-          paddingBottom: convertToUnit(paddingBottom.value)
-        }
-      }, [computedItems.value.map(item => vue.createVNode(VVirtualScrollItem, {
-        "key": item.index,
-        "dynamicHeight": !props.itemHeight,
-        "onUpdate:height": height => handleItemResize(item.index, height)
-      }, {
-        default: () => [slots.default?.({
-          item: item.raw,
-          index: item.index
-        })]
-      }))])]));
-      return {
-        scrollToIndex
-      };
-    }
-  });
-
   // Types
 
   const makeVBottomSheetProps = propsFactory({
@@ -20344,7 +20487,11 @@
           column,
           row
         } = _ref4;
-        const key = column.key;
+        let key = column.key;
+        if (key == null) {
+          consoleWarn('The header key value must not be null or undefined');
+          key = '';
+        }
         for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
           fixedRows[i].push({
             ...column,
@@ -21209,19 +21356,21 @@
             ...slots,
             item: itemSlotProps => vue.createVNode(VVirtualScrollItem, {
               "key": itemSlotProps.item.index,
-              "dynamicHeight": true,
               "renderless": true,
               "onUpdate:height": height => handleItemResize(itemSlotProps.item.index, height)
             }, {
-              default: slotProps => slots.item?.({
-                ...itemSlotProps,
-                props: {
-                  ...itemSlotProps.props,
-                  ...slotProps?.props
-                }
-              }) ?? vue.createVNode(VDataTableRow, vue.mergeProps(itemSlotProps.props, slotProps?.props, {
-                "key": itemSlotProps.item.index
-              }), slots)
+              default: _ref2 => {
+                let {
+                  itemRef
+                } = _ref2;
+                return slots.item?.({
+                  ...itemSlotProps,
+                  itemRef
+                }) ?? vue.createVNode(VDataTableRow, vue.mergeProps(itemSlotProps.props, {
+                  "ref": itemRef,
+                  "key": itemSlotProps.item.index
+                }), slots);
+              }
             })
           }), vue.createVNode("tr", {
             "style": {
@@ -23451,7 +23600,7 @@
       date
     };
   }
-  const version$1 = "3.3.6";
+  const version$1 = "3.3.7";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -23465,7 +23614,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.6";
+  const version = "3.3.7";
 
   /* eslint-disable local-rules/sort-imports */