@vuetify/nightly 3.2.0-dev-20230405.0 → 3.2.0-dev-20230415.0

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.2.0-dev-20230405.0
+* Vuetify v3.2.0-dev-20230415.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, withModifiers, onUpdated } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -339,7 +339,7 @@ function includes(arr, val) {
 }
 const onRE = /^on[^a-z]/;
 const isOn = key => onRE.test(key);
-const EventProp = [Function, Array];
+const EventProp = () => [Function, Array];
 function hasEvent(props, name) {
   name = 'on' + capitalize(name);
   return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -1703,7 +1703,7 @@ function createTheme(options) {
       if (/^on-[a-z]/.test(key)) {
         createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
       } else {
-        createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
+        createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]);
         createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]);
         createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]);
       }
@@ -1841,7 +1841,8 @@ function useProxiedModel(props, prop, defaultValue) {
   });
   const model = computed({
     get() {
-      return transformIn(isControlled.value ? props[prop] : internal.value);
+      const externalValue = props[prop];
+      return transformIn(isControlled.value ? externalValue : internal.value);
     },
     set(internalValue) {
       const newValue = transformOut(internalValue);
@@ -2715,9 +2716,9 @@ const VImg = genericComponent()({
     ...makeTransitionProps()
   },
   emits: {
-    loadstart: event => true,
-    load: event => true,
-    error: event => true
+    loadstart: value => true,
+    load: value => true,
+    error: value => true
   },
   setup(props, _ref) {
     let {
@@ -5342,9 +5343,9 @@ const makeVFieldProps = propsFactory({
     default: 'filled',
     validator: v => allowedVariants$1.includes(v)
   },
-  'onClick:clear': EventProp,
-  'onClick:appendInner': EventProp,
-  'onClick:prependInner': EventProp,
+  'onClick:clear': EventProp(),
+  'onClick:appendInner': EventProp(),
+  'onClick:prependInner': EventProp(),
   ...makeThemeProps(),
   ...makeLoaderProps()
 }, 'v-field');
@@ -5890,8 +5891,8 @@ const makeVInputProps = propsFactory({
     default: 'horizontal',
     validator: v => ['horizontal', 'vertical'].includes(v)
   },
-  'onClick:prepend': EventProp,
-  'onClick:append': EventProp,
+  'onClick:prepend': EventProp(),
+  'onClick:append': EventProp(),
   ...makeDensityProps(),
   ...makeValidationProps()
 }, 'v-input');
@@ -6122,6 +6123,7 @@ const makeVTextFieldProps = propsFactory({
     type: String,
     default: 'text'
   },
+  modelModifiers: Object,
   ...makeVInputProps(),
   ...makeVFieldProps()
 }, 'v-text-field');
@@ -6196,7 +6198,7 @@ const VTextField = genericComponent()({
     function onInput(e) {
       const el = e.target;
       model.value = el.value;
-      if (['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
+      if (props.modelModifiers?.trim && ['text', 'search', 'password', 'tel', 'url'].includes(props.type)) {
         const caretPosition = [el.selectionStart, el.selectionEnd];
         nextTick(() => {
           el.selectionStart = caretPosition[0];
@@ -6833,8 +6835,8 @@ const VChip = genericComponent()({
       type: Boolean,
       default: true
     },
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
@@ -7678,8 +7680,8 @@ const VListItem = genericComponent()({
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
-    onClick: EventProp,
-    onClickOnce: EventProp,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -8221,7 +8223,8 @@ const VList = genericComponent()({
     }
     function focus(location) {
       if (!contentRef.value) return;
-      const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+      const targets = ['button', '[href]', 'input', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
+      const focusable = [...contentRef.value.querySelectorAll(targets)].filter(el => !el.hasAttribute('disabled'));
       const idx = focusable.indexOf(document.activeElement);
       if (!location) {
         if (!contentRef.value.contains(document.activeElement)) {
@@ -8402,6 +8405,7 @@ function useActivator(props, _ref) {
       isActive.value = !isActive.value;
     },
     mouseenter: e => {
+      if (e.sourceCapabilities?.firesTouchEvents) return;
       isHovered = true;
       activatorEl.value = e.currentTarget || e.target;
       runOpenDelay();
@@ -9928,6 +9932,9 @@ const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const isFocused = ref(false);
+    let keyboardLookupPrefix = '';
+    let keyboardLookupLastTime;
     const displayItems = computed(() => {
       if (props.hideSelected) {
         return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9964,6 +9971,26 @@ const VSelect = genericComponent()({
       } else if (e.key === 'End') {
         listRef.value?.focus('last');
       }
+
+      // html select hotkeys
+      const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
+
+      function checkPrintable(e) {
+        const isPrintableChar = e.key.length === 1;
+        const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
+        return isPrintableChar && noModifier;
+      }
+      if (props.multiple || !checkPrintable(e)) return;
+      const now = performance.now();
+      if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
+        keyboardLookupPrefix = '';
+      }
+      keyboardLookupPrefix += e.key.toLowerCase();
+      keyboardLookupLastTime = now;
+      const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
+      if (item !== undefined) {
+        model.value = [item];
+      }
     }
     function select(item) {
       if (props.multiple) {
@@ -9993,7 +10020,9 @@ const VSelect = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
+      const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? undefined : props.placeholder;
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -10001,8 +10030,10 @@ const VSelect = genericComponent()({
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "class": ['v-select', {
           'v-select--active-menu': menu.value,
           'v-select--chips': !!props.chips,
@@ -10011,6 +10042,7 @@ const VSelect = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
+        "placeholder": placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onBlur": onBlur,
@@ -10059,7 +10091,8 @@ const VSelect = genericComponent()({
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 }
               });
@@ -10386,6 +10419,7 @@ const VAutocomplete = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -10395,7 +10429,7 @@ const VAutocomplete = genericComponent()({
           if (v == null) model.value = [];
         },
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
@@ -10405,6 +10439,7 @@ const VAutocomplete = genericComponent()({
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
+        "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onFocus": () => isFocused.value = true,
@@ -10451,7 +10486,8 @@ const VAutocomplete = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -13567,7 +13603,7 @@ const VCombobox = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
-    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v || [])), v => {
+    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
@@ -13745,6 +13781,7 @@ const VCombobox = genericComponent()({
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -13754,7 +13791,7 @@ const VCombobox = genericComponent()({
           if (v == null) model.value = [];
         }],
         "validationValue": model.externalValue,
-        "dirty": model.value.length > 0,
+        "dirty": isDirty,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
           'v-combobox--chips': !!props.chips,
@@ -13763,6 +13800,7 @@ const VCombobox = genericComponent()({
         }],
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
         "readonly": props.readonly,
+        "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
         "onFocus": () => isFocused.value = true,
@@ -13809,7 +13847,8 @@ const VCombobox = genericComponent()({
                 } = _ref2;
                 return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
-                  "ripple": false
+                  "ripple": false,
+                  "tabindex": "-1"
                 }, null) : undefined;
               },
               title: () => {
@@ -14219,7 +14258,6 @@ const VFileInput = genericComponent()({
     multiple: Boolean,
     hint: String,
     persistentHint: Boolean,
-    placeholder: String,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -17435,6 +17473,7 @@ const VTextarea = genericComponent()({
       validator: v => !isNaN(parseFloat(v))
     },
     suffix: String,
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   },
@@ -17499,12 +17538,14 @@ const VTextarea = genericComponent()({
     }
     function onInput(e) {
       const el = e.target;
-      const caretPosition = [el.selectionStart, el.selectionEnd];
       model.value = el.value;
-      nextTick(() => {
-        el.selectionStart = caretPosition[0];
-        el.selectionEnd = caretPosition[1];
-      });
+      if (props.modelModifiers?.trim) {
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
+      }
     }
     const sizerRef = ref();
     function calculateInputHeight() {
@@ -17993,6 +18034,177 @@ const VValidation = genericComponent()({
   }
 });
 
+const VVirtualScrollItem = genericComponent()({
+  name: 'VVirtualScrollItem',
+  props: {
+    dynamicHeight: Boolean
+  },
+  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(() => createVNode("div", {
+      "ref": props.dynamicHeight ? resizeRef : undefined,
+      "class": "v-virtual-scroll__item"
+    }, [slots.default?.()]));
+  }
+});
+
+// Types
+
+const UP$1 = -1;
+const DOWN$1 = 1;
+const VVirtualScroll = genericComponent()({
+  name: 'VVirtualScroll',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    itemHeight: [Number, String],
+    visibleItems: [Number, String],
+    ...makeDimensionProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const first = ref(0);
+    const baseItemHeight = ref(props.itemHeight);
+    const itemHeight = computed({
+      get: () => parseInt(baseItemHeight.value ?? 0, 10),
+      set(val) {
+        baseItemHeight.value = val;
+      }
+    });
+    const rootEl = ref();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    watchEffect(() => {
+      resizeRef.value = rootEl.value;
+    });
+    const display = useDisplay();
+    const sizeMap = new Map();
+    let sizes = createRange(props.items.length).map(() => itemHeight.value);
+    const visibleItems = computed(() => {
+      return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
+    });
+    function handleItemResize(index, height) {
+      itemHeight.value = Math.max(itemHeight.value, height);
+      sizes[index] = height;
+      sizeMap.set(props.items[index], height);
+    }
+    function calculateOffset(index) {
+      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
+    }
+    function calculateMidPointIndex(scrollTop) {
+      let start = 0;
+      let end = props.items.length;
+      while (start <= end) {
+        const middle = start + Math.floor((end - start) / 2);
+        const middleOffset = calculateOffset(middle);
+        if (middleOffset === scrollTop) {
+          return middle;
+        } else if (middleOffset < scrollTop) {
+          start = middle + 1;
+        } else if (middleOffset > scrollTop) {
+          end = middle - 1;
+        }
+      }
+      return start;
+    }
+    let lastScrollTop = 0;
+    function handleScroll() {
+      if (!rootEl.value || !contentRect.value) return;
+      const height = contentRect.value.height;
+      const scrollTop = rootEl.value.scrollTop;
+      const direction = scrollTop < lastScrollTop ? UP$1 : DOWN$1;
+      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
+      const buffer = Math.round(visibleItems.value / 3);
+      if (direction === UP$1 && midPointIndex <= first.value + buffer * 2 - 1) {
+        first.value = clamp(midPointIndex - buffer, 0, props.items.length);
+      } else if (direction === DOWN$1 && midPointIndex >= first.value + buffer * 2 - 1) {
+        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
+      }
+      lastScrollTop = rootEl.value.scrollTop;
+    }
+    function scrollToIndex(index) {
+      if (!rootEl.value) return;
+      const offset = calculateOffset(index);
+      rootEl.value.scrollTop = offset;
+    }
+    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
+    const computedItems = computed(() => props.items.slice(first.value, last.value));
+    const paddingTop = computed(() => calculateOffset(first.value));
+    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    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(() => props.items.length, () => {
+      sizes = createRange(props.items.length).map(() => itemHeight.value);
+      sizeMap.forEach((height, item) => {
+        const index = props.items.indexOf(item);
+        if (index === -1) {
+          sizeMap.delete(item);
+        } else {
+          sizes[index] = height;
+        }
+      });
+    });
+    useRender(() => createVNode("div", {
+      "ref": rootEl,
+      "class": "v-virtual-scroll",
+      "onScroll": handleScroll,
+      "style": dimensionStyles.value
+    }, [createVNode("div", {
+      "class": "v-virtual-scroll__container",
+      "style": {
+        paddingTop: convertToUnit(paddingTop.value),
+        paddingBottom: convertToUnit(paddingBottom.value)
+      }
+    }, [computedItems.value.map((item, index) => createVNode(VVirtualScrollItem, {
+      "key": index,
+      "dynamicHeight": !props.itemHeight,
+      "onUpdate:height": height => handleItemResize(index + first.value, height)
+    }, {
+      default: () => [slots.default?.({
+        item,
+        index: index + first.value
+      })]
+    }))])]));
+    return {
+      scrollToIndex
+    };
+  }
+});
+
 const VDataTableColumn = defineFunctionalComponent({
   align: {
     type: String,
@@ -18848,10 +19060,8 @@ const VDataTableRows = genericComponent()({
       type: String,
       default: '$vuetify.noDataText'
     },
-    rowHeight: Number
-  },
-  emits: {
-    'click:row': (event, value) => true
+    rowHeight: Number,
+    'onClick:row': Function
   },
   setup(props, _ref) {
     let {
@@ -18915,14 +19125,14 @@ const VDataTableRows = genericComponent()({
       };
       return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : createVNode(VDataTableRow, {
         "key": `item_${item.value}`,
-        "onClick": event => {
+        "onClick": expandOnClick.value || props['onClick:row'] ? event => {
           if (expandOnClick.value) {
             toggleExpand(item);
           }
-          emit('click:row', event, {
+          props['onClick:row']?.(event, {
             item
           });
-        },
+        } : undefined,
         "index": index,
         "item": item
       }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
@@ -19233,7 +19443,8 @@ const makeVDataTableProps = propsFactory({
   height: [String, Number],
   width: [String, Number],
   fixedHeader: Boolean,
-  fixedFooter: Boolean
+  fixedFooter: Boolean,
+  'onClick:row': Function
 }, 'v-data-table');
 const VDataTable = genericComponent()({
   name: 'VDataTable',
@@ -19254,8 +19465,7 @@ const VDataTable = genericComponent()({
     'update:sortBy': value => true,
     'update:options': value => true,
     'update:groupBy': value => true,
-    'update:expanded': value => true,
-    'click:row': (event, value) => true
+    'update:expanded': value => true
   },
   setup(props, _ref) {
     let {
@@ -19361,7 +19571,7 @@ const VDataTable = genericComponent()({
         "multiSort": props.multiSort
       }, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": paginatedItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots)]), slots.tbody?.(), slots.tfoot?.()])),
       bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
@@ -19385,8 +19595,8 @@ const makeDataTableVirtualProps = propsFactory({
     default: 52
   }
 }, 'virtual');
-const UP$1 = -1;
-const DOWN$1 = 1;
+const UP = -1;
+const DOWN = 1;
 
 // TODO: Replace this with composable from v-virtual-scroll
 function useVirtual(props, items) {
@@ -19424,12 +19634,12 @@ function useVirtual(props, items) {
       isScrolling.value = false;
     }, 100);
     const scrollTop = containerRef.value.scrollTop;
-    const direction = scrollTop < lastScrollTop ? UP$1 : DOWN$1;
+    const direction = scrollTop < lastScrollTop ? UP : DOWN;
     const midPointIndex = calculateMidPointIndex(scrollTop);
     const buffer = Math.round(visibleItems.value / 3);
-    if (direction === UP$1 && midPointIndex <= startIndex.value) {
+    if (direction === UP && midPointIndex <= startIndex.value) {
       startIndex.value = Math.max(midPointIndex - buffer, 0);
-    } else if (direction === DOWN$1 && midPointIndex >= startIndex.value + buffer * 2) {
+    } else if (direction === DOWN && midPointIndex >= startIndex.value + buffer * 2) {
       startIndex.value = Math.min(Math.max(0, midPointIndex - buffer), items.value.length - visibleItems.value);
     }
     lastScrollTop = containerRef.value.scrollTop;
@@ -19472,7 +19682,7 @@ const VDataTableVirtual = genericComponent()({
     'update:options': value => true,
     'update:groupBy': value => true,
     'update:expanded': value => true,
-    'click:row': (event, value) => true
+    'click:row': (e, value) => true
   },
   setup(props, _ref) {
     let {
@@ -19556,8 +19766,10 @@ const VDataTableVirtual = genericComponent()({
       "style": {
         '--v-table-row-height': convertToUnit(itemHeight.value)
       },
+      "fixedHeader": props.fixedHeader,
+      "fixedFooter": props.fixedFooter,
       "height": props.height,
-      "fixedHeader": props.fixedHeader
+      "hover": props.hover
     }, {
       top: slots.top,
       wrapper: () => createVNode("div", {
@@ -19583,7 +19795,7 @@ const VDataTableVirtual = genericComponent()({
         }
       }, null)]), createVNode(VDataTableRows, {
         "items": visibleItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots), createVNode("tr", {
         "style": {
           height: convertToUnit(paddingBottom.value),
@@ -19633,7 +19845,7 @@ const VDataTableServer = genericComponent()({
     'update:options': options => true,
     'update:expanded': options => true,
     'update:groupBy': value => true,
-    'click:row': (event, value) => true
+    'click:row': (e, value) => true
   },
   setup(props, _ref) {
     let {
@@ -19711,7 +19923,8 @@ const VDataTableServer = genericComponent()({
       }],
       "fixedHeader": props.fixedHeader,
       "fixedFooter": props.fixedFooter,
-      "height": props.height
+      "height": props.height,
+      "hover": props.hover
     }, {
       top: slots.top,
       default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
@@ -19728,7 +19941,7 @@ const VDataTableServer = genericComponent()({
         "role": "rowgroup"
       }, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": flatItems.value,
-        "onClick:row": (event, value) => emit('click:row', event, value)
+        "onClick:row": props['onClick:row']
       }, slots)]), slots.tbody?.(), slots.tfoot?.()])),
       bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
@@ -19868,177 +20081,6 @@ const VSkeletonLoader = genericComponent()({
   }
 });
 
-const VVirtualScrollItem = genericComponent()({
-  name: 'VVirtualScrollItem',
-  props: {
-    dynamicHeight: Boolean
-  },
-  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(() => createVNode("div", {
-      "ref": props.dynamicHeight ? resizeRef : undefined,
-      "class": "v-virtual-scroll__item"
-    }, [slots.default?.()]));
-  }
-});
-
-// Types
-
-const UP = -1;
-const DOWN = 1;
-const VVirtualScroll = genericComponent()({
-  name: 'VVirtualScroll',
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    itemHeight: [Number, String],
-    visibleItems: [Number, String],
-    ...makeDimensionProps()
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const first = ref(0);
-    const baseItemHeight = ref(props.itemHeight);
-    const itemHeight = computed({
-      get: () => parseInt(baseItemHeight.value ?? 0, 10),
-      set(val) {
-        baseItemHeight.value = val;
-      }
-    });
-    const rootEl = ref();
-    const {
-      resizeRef,
-      contentRect
-    } = useResizeObserver();
-    watchEffect(() => {
-      resizeRef.value = rootEl.value;
-    });
-    const display = useDisplay();
-    const sizeMap = new Map();
-    let sizes = createRange(props.items.length).map(() => itemHeight.value);
-    const visibleItems = computed(() => {
-      return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
-    });
-    function handleItemResize(index, height) {
-      itemHeight.value = Math.max(itemHeight.value, height);
-      sizes[index] = height;
-      sizeMap.set(props.items[index], height);
-    }
-    function calculateOffset(index) {
-      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
-    }
-    function calculateMidPointIndex(scrollTop) {
-      let start = 0;
-      let end = props.items.length;
-      while (start <= end) {
-        const middle = start + Math.floor((end - start) / 2);
-        const middleOffset = calculateOffset(middle);
-        if (middleOffset === scrollTop) {
-          return middle;
-        } else if (middleOffset < scrollTop) {
-          start = middle + 1;
-        } else if (middleOffset > scrollTop) {
-          end = middle - 1;
-        }
-      }
-      return start;
-    }
-    let lastScrollTop = 0;
-    function handleScroll() {
-      if (!rootEl.value || !contentRect.value) return;
-      const height = contentRect.value.height;
-      const scrollTop = rootEl.value.scrollTop;
-      const direction = scrollTop < lastScrollTop ? UP : DOWN;
-      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
-      const buffer = Math.round(visibleItems.value / 3);
-      if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-        first.value = clamp(midPointIndex - buffer, 0, props.items.length);
-      } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
-      }
-      lastScrollTop = rootEl.value.scrollTop;
-    }
-    function scrollToIndex(index) {
-      if (!rootEl.value) return;
-      const offset = calculateOffset(index);
-      rootEl.value.scrollTop = offset;
-    }
-    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-    const computedItems = computed(() => props.items.slice(first.value, last.value));
-    const paddingTop = computed(() => calculateOffset(first.value));
-    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
-    const {
-      dimensionStyles
-    } = useDimension(props);
-    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(() => props.items.length, () => {
-      sizes = createRange(props.items.length).map(() => itemHeight.value);
-      sizeMap.forEach((height, item) => {
-        const index = props.items.indexOf(item);
-        if (index === -1) {
-          sizeMap.delete(item);
-        } else {
-          sizes[index] = height;
-        }
-      });
-    });
-    useRender(() => createVNode("div", {
-      "ref": rootEl,
-      "class": "v-virtual-scroll",
-      "onScroll": handleScroll,
-      "style": dimensionStyles.value
-    }, [createVNode("div", {
-      "class": "v-virtual-scroll__container",
-      "style": {
-        paddingTop: convertToUnit(paddingTop.value),
-        paddingBottom: convertToUnit(paddingBottom.value)
-      }
-    }, [computedItems.value.map((item, index) => createVNode(VVirtualScrollItem, {
-      "key": index,
-      "dynamicHeight": !props.itemHeight,
-      "onUpdate:height": height => handleItemResize(index + first.value, height)
-    }, {
-      default: () => [slots.default?.({
-        item,
-        index: index + first.value
-      })]
-    }))])]));
-    return {
-      scrollToIndex
-    };
-  }
-});
-
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   VAlert: VAlert,
@@ -20391,7 +20433,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.2.0-dev-20230405.0";
+const version$1 = "3.2.0-dev-20230415.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20403,7 +20445,7 @@ function inject(key) {
   }
 }
 
-const version = "3.2.0-dev-20230405.0";
+const version = "3.2.0-dev-20230415.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};