vuetify 3.3.6 → 3.3.7

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.3.6
+* Vuetify v3.3.7
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, toValue, onBeforeUpdate, vModelText, withModifiers } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1254,8 +1254,9 @@ getUid.reset = () => {
 };
 
 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;
@@ -1275,6 +1276,11 @@ function hasScrollbar(el) {
   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;
@@ -1320,13 +1326,18 @@ function useRender(render) {
 // Types
 
 function useResizeObserver(callback) {
+  let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
   const resizeRef = ref();
   const contentRect = 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();
+      }
     });
     onBeforeUnmount(() => {
       observer.disconnect();
@@ -3148,7 +3159,9 @@ const VImg = genericComponent()({
         "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,
@@ -5267,7 +5280,7 @@ const VBtn = genericComponent()({
       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();
     }
@@ -5606,7 +5619,10 @@ const VLabel = genericComponent()({
 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,
@@ -5830,12 +5846,12 @@ const VSelectionControl = genericComponent()({
       }, null), createVNode("input", 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,
@@ -8706,7 +8722,9 @@ function blockScrollStrategy(data, props) {
   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');
   });
   onScopeDispose(() => {
@@ -10361,12 +10379,16 @@ const VTextField = genericComponent()({
               }]]);
               return createVNode(Fragment, null, [props.prefix && createVNode("span", {
                 "class": "v-text-field__prefix"
-              }, [props.prefix]), createVNode("div", {
+              }, [createVNode("span", {
+                "class": "v-text-field__prefix__text"
+              }, [props.prefix])]), createVNode("div", {
                 "class": fieldClass,
                 "data-no-activator": ""
               }, [slots.default ? createVNode(Fragment, null, [slots.default(), inputNode]) : cloneVNode(inputNode)]), props.suffix && createVNode("span", {
                 "class": "v-text-field__suffix"
-              }, [props.suffix])]);
+              }, [createVNode("span", {
+                "class": "v-text-field__suffix__text"
+              }, [props.suffix])])]);
             }
           });
         },
@@ -10383,6 +10405,301 @@ const VTextField = genericComponent()({
 
 // 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');
+    watch(() => contentRect.value?.height, height => {
+      if (height != null) emit('update:height', height);
+    });
+    useRender(() => props.renderless ? createVNode(Fragment, null, [slots.default?.({
+      itemRef: resizeRef
+    })]) : createVNode("div", 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 = shallowRef(0);
+  const baseItemHeight = shallowRef(props.itemHeight);
+  const itemHeight = computed({
+    get: () => parseInt(baseItemHeight.value ?? 0, 10),
+    set(val) {
+      baseItemHeight.value = val;
+    }
+  });
+  const containerRef = ref();
+  const {
+    resizeRef,
+    contentRect
+  } = useResizeObserver();
+  watchEffect(() => {
+    resizeRef.value = containerRef.value;
+  });
+  const display = useDisplay();
+  const sizeMap = new Map();
+  let sizes = Array.from({
+    length: items.value.length
+  });
+  const visibleItems = 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 = computed(() => Math.min(items.value.length, first.value + visibleItems.value));
+  const computedItems = computed(() => {
+    return items.value.slice(first.value, last.value).map((item, index) => ({
+      raw: item,
+      index: index + first.value
+    }));
+  });
+  const paddingTop = computed(() => calculateOffset(first.value));
+  const paddingBottom = computed(() => calculateOffset(items.value.length) - calculateOffset(last.value));
+  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, toRef(props, 'items'));
+    useToggleScope(() => props.renderless, () => {
+      onMounted(() => {
+        containerRef.value = getScrollParent(vm.vnode.el, true);
+        containerRef.value?.addEventListener('scroll', handleScroll);
+      });
+      onScopeDispose(() => {
+        containerRef.value?.removeEventListener('scroll', handleScroll);
+      });
+    });
+    useRender(() => {
+      const children = computedItems.value.map(item => 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 ? createVNode(Fragment, null, [createVNode("div", {
+        "class": "v-virtual-scroll__spacer",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value)
+        }
+      }, null), children, createVNode("div", {
+        "class": "v-virtual-scroll__spacer",
+        "style": {
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, null)]) : createVNode("div", {
+        "ref": containerRef,
+        "class": ['v-virtual-scroll', props.class],
+        "onScroll": handleScroll,
+        "style": [dimensionStyles.value, props.style]
+      }, [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 = 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 = 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,
@@ -10474,6 +10791,10 @@ const VSelect = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
+    const {
+      onListScroll,
+      onListKeydown
+    } = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -10520,11 +10841,6 @@ const VSelect = genericComponent()({
         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));
@@ -10607,34 +10923,46 @@ const VSelect = genericComponent()({
             "onMousedown": e => e.preventDefault(),
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
+            "onScrollPassive": onListScroll,
             "tabindex": "-1"
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), displayItems.value.map((item, index) => {
-              const itemProps = mergeProps(item.props, {
-                key: index,
-                onClick: () => select(item)
-              });
-              return slots.item?.({
-                item,
-                index,
-                props: itemProps
-              }) ?? createVNode(VListItem, itemProps, {
-                prepend: _ref2 => {
-                  let {
-                    isSelected
-                  } = _ref2;
-                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                    "key": item.value,
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                }
-              });
+            }, null)), createVNode(VVirtualScroll, {
+              "renderless": true,
+              "items": displayItems.value
+            }, {
+              default: _ref2 => {
+                let {
+                  item,
+                  index,
+                  itemRef
+                } = _ref2;
+                const itemProps = mergeProps(item.props, {
+                  ref: itemRef,
+                  key: index,
+                  onClick: () => select(item)
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? createVNode(VListItem, itemProps, {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
+                  }
+                });
+              }
             }), slots['append-item']?.()]
           })]
         }), selections.value.map((item, index) => {
@@ -10772,14 +11100,12 @@ function filterItems(items, query, options) {
   return array;
 }
 function useFilter(props, items, query, options) {
-  const strQuery = computed(() => typeof query?.value !== 'string' && typeof query?.value !== 'number' ? '' : String(query.value));
   const filteredItems = ref([]);
   const filteredMatches = ref(new Map());
   const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items));
   watchEffect(() => {
-    filteredItems.value = [];
-    filteredMatches.value = new Map();
-    const results = filterItems(transformedItems.value, strQuery.value, {
+    const strQuery = typeof toValue(query) !== 'string' && typeof toValue(query) !== 'number' ? '' : String(toValue(query));
+    const results = filterItems(transformedItems.value, strQuery, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
       filterKeys: props.filterKeys,
@@ -10787,15 +11113,19 @@ function useFilter(props, items, query, options) {
       noFilter: props.noFilter
     });
     const originalItems = 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);
@@ -10885,7 +11215,7 @@ const VAutocomplete = genericComponent()({
     const {
       filteredItems,
       getMatches
-    } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value));
+    } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = computed(() => {
       return model.value.map(v => {
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
@@ -10905,6 +11235,10 @@ const VAutocomplete = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
+    const {
+      onListScroll,
+      onListKeydown
+    } = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -10978,11 +11312,6 @@ const VAutocomplete = genericComponent()({
         }
       }
     }
-    function onListKeydown(e) {
-      if (e.key === 'Tab') {
-        vTextFieldRef.value?.focus();
-      }
-    }
     function onInput(e) {
       search.value = e.target.value;
     }
@@ -11101,38 +11430,50 @@ const VAutocomplete = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
+            "onScrollPassive": onListScroll,
             "tabindex": "-1"
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), displayItems.value.map((item, index) => {
-              const itemProps = mergeProps(item.props, {
-                key: index,
-                active: highlightFirst.value && index === 0 ? true : undefined,
-                onClick: () => select(item)
-              });
-              return slots.item?.({
-                item,
-                index,
-                props: itemProps
-              }) ?? createVNode(VListItem, itemProps, {
-                prepend: _ref3 => {
-                  let {
-                    isSelected
-                  } = _ref3;
-                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                    "key": item.value,
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && 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)), createVNode(VVirtualScroll, {
+              "renderless": true,
+              "items": displayItems.value
+            }, {
+              default: _ref3 => {
+                let {
+                  item,
+                  index,
+                  itemRef
+                } = _ref3;
+                const itemProps = mergeProps(item.props, {
+                  ref: itemRef,
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
+                  onClick: () => select(item)
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? createVNode(VListItem, itemProps, {
+                  prepend: _ref4 => {
+                    let {
+                      isSelected
+                    } = _ref4;
+                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && 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) => {
@@ -14426,7 +14767,7 @@ const VCombobox = genericComponent()({
     const {
       filteredItems,
       getMatches
-    } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value));
+    } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = computed(() => {
       return model.value.map(v => {
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
@@ -14446,6 +14787,10 @@ const VCombobox = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
+    const {
+      onListScroll,
+      onListKeydown
+    } = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       cleared = true;
       if (props.openOnClear) {
@@ -14523,11 +14868,6 @@ const VCombobox = genericComponent()({
         search.value = '';
       }
     }
-    function onListKeydown(e) {
-      if (e.key === 'Tab') {
-        vTextFieldRef.value?.focus();
-      }
-    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -14638,38 +14978,50 @@ const VCombobox = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
+            "onScrollPassive": onListScroll,
             "tabindex": "-1"
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), displayItems.value.map((item, index) => {
-              const itemProps = mergeProps(item.props, {
-                key: index,
-                active: highlightFirst.value && index === 0 ? true : undefined,
-                onClick: () => select(item)
-              });
-              return slots.item?.({
-                item,
-                index,
-                props: itemProps
-              }) ?? createVNode(VListItem, itemProps, {
-                prepend: _ref3 => {
-                  let {
-                    isSelected
-                  } = _ref3;
-                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                    "key": item.value,
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                },
-                title: () => {
-                  return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                }
-              });
+            }, null)), createVNode(VVirtualScroll, {
+              "renderless": true,
+              "items": displayItems.value
+            }, {
+              default: _ref3 => {
+                let {
+                  item,
+                  index,
+                  itemRef
+                } = _ref3;
+                const itemProps = mergeProps(item.props, {
+                  ref: itemRef,
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
+                  onClick: () => select(item)
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? createVNode(VListItem, itemProps, {
+                  prepend: _ref4 => {
+                    let {
+                      isSelected
+                    } = _ref4;
+                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && 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) => {
@@ -19013,215 +19365,6 @@ const VValidation = genericComponent()({
   }
 });
 
-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, () => {
-      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);
-      }
-    }
-    onUpdated(updateHeight);
-    useRender(() => props.renderless ? createVNode(Fragment, null, [slots.default?.({
-      props: {
-        ref: props.dynamicHeight ? resizeRef : undefined
-      }
-    })]) : 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 = shallowRef(0);
-  const baseItemHeight = shallowRef(props.itemHeight);
-  const itemHeight = computed({
-    get: () => parseInt(baseItemHeight.value ?? 0, 10),
-    set(val) {
-      baseItemHeight.value = val;
-    }
-  });
-  const containerRef = ref();
-  const {
-    resizeRef,
-    contentRect
-  } = useResizeObserver();
-  watchEffect(() => {
-    resizeRef.value = containerRef.value;
-  });
-  const display = useDisplay();
-  const sizeMap = new Map();
-  let sizes = createRange(items.value.length).map(() => itemHeight.value);
-  const visibleItems = 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 = computed(() => items.value.map((item, index) => ({
-    raw: item,
-    index
-  })));
-  const last = computed(() => Math.min(items.value.length, first.value + visibleItems.value));
-  const computedItems = computed(() => allItems.value.slice(first.value, last.value));
-  const paddingTop = computed(() => calculateOffset(first.value));
-  const paddingBottom = computed(() => calculateOffset(items.value.length) - calculateOffset(last.value));
-  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;
-    }
-  });
-  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, toRef(props, 'items'));
-    useRender(() => createVNode("div", {
-      "ref": containerRef,
-      "class": ['v-virtual-scroll', props.class],
-      "onScroll": handleScroll,
-      "style": [dimensionStyles.value, props.style]
-    }, [createVNode("div", {
-      "class": "v-virtual-scroll__container",
-      "style": {
-        paddingTop: convertToUnit(paddingTop.value),
-        paddingBottom: convertToUnit(paddingBottom.value)
-      }
-    }, [computedItems.value.map(item => 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({
@@ -20340,7 +20483,11 @@ function createHeaders(props, options) {
         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,
@@ -21205,19 +21352,21 @@ const VDataTableVirtual = genericComponent()({
           ...slots,
           item: itemSlotProps => 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
-              }
-            }) ?? createVNode(VDataTableRow, mergeProps(itemSlotProps.props, slotProps?.props, {
-              "key": itemSlotProps.item.index
-            }), slots)
+            default: _ref2 => {
+              let {
+                itemRef
+              } = _ref2;
+              return slots.item?.({
+                ...itemSlotProps,
+                itemRef
+              }) ?? createVNode(VDataTableRow, mergeProps(itemSlotProps.props, {
+                "ref": itemRef,
+                "key": itemSlotProps.item.index
+              }), slots);
+            }
           })
         }), createVNode("tr", {
           "style": {
@@ -23447,7 +23596,7 @@ function createVuetify$1() {
     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
@@ -23461,7 +23610,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.6";
+const version = "3.3.7";
 
 /* eslint-disable local-rules/sort-imports */