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

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230405.0
+* Vuetify v3.2.0-dev-20230415.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -343,7 +343,7 @@
   }
   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' + vue.capitalize(name);
     return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
@@ -1707,7 +1707,7 @@
         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})`]);
         }
@@ -1845,7 +1845,8 @@
     });
     const model = vue.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);
@@ -2719,9 +2720,9 @@
       ...makeTransitionProps()
     },
     emits: {
-      loadstart: event => true,
-      load: event => true,
-      error: event => true
+      loadstart: value => true,
+      load: value => true,
+      error: value => true
     },
     setup(props, _ref) {
       let {
@@ -5346,9 +5347,9 @@
       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');
@@ -5894,8 +5895,8 @@
       default: 'horizontal',
       validator: v => ['horizontal', 'vertical'].includes(v)
     },
-    'onClick:prepend': EventProp,
-    'onClick:append': EventProp,
+    'onClick:prepend': EventProp(),
+    'onClick:append': EventProp(),
     ...makeDensityProps(),
     ...makeValidationProps()
   }, 'v-input');
@@ -6126,6 +6127,7 @@
       type: String,
       default: 'text'
     },
+    modelModifiers: Object,
     ...makeVInputProps(),
     ...makeVFieldProps()
   }, 'v-text-field');
@@ -6200,7 +6202,7 @@
       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];
           vue.nextTick(() => {
             el.selectionStart = caretPosition[0];
@@ -6837,8 +6839,8 @@
         type: Boolean,
         default: true
       },
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -7682,8 +7684,8 @@
       subtitle: [String, Number, Boolean],
       title: [String, Number, Boolean],
       value: null,
-      onClick: EventProp,
-      onClickOnce: EventProp,
+      onClick: EventProp(),
+      onClickOnce: EventProp(),
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
@@ -8225,7 +8227,8 @@
       }
       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)) {
@@ -8406,6 +8409,7 @@
         isActive.value = !isActive.value;
       },
       mouseenter: e => {
+        if (e.sourceCapabilities?.firesTouchEvents) return;
         isHovered = true;
         activatorEl.value = e.currentTarget || e.target;
         runOpenDelay();
@@ -9932,6 +9936,9 @@
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const isFocused = vue.ref(false);
+      let keyboardLookupPrefix = '';
+      let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
           return items.value.filter(item => !selections.value.some(s => s === item));
@@ -9968,6 +9975,26 @@
         } 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) {
@@ -9997,7 +10024,9 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -10005,8 +10034,10 @@
           "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,
@@ -10015,6 +10046,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": true,
+          "placeholder": placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onBlur": onBlur,
@@ -10063,7 +10095,8 @@
                     } = _ref2;
                     return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
-                      "ripple": false
+                      "ripple": false,
+                      "tabindex": "-1"
                     }, null) : undefined;
                   }
                 });
@@ -10390,6 +10423,7 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -10399,7 +10433,7 @@
             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,
@@ -10409,6 +10443,7 @@
           }],
           "appendInnerIcon": props.menuIcon,
           "readonly": props.readonly,
+          "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
           "onMousedown:control": onMousedownControl,
           "onFocus": () => isFocused.value = true,
@@ -10455,7 +10490,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -13571,7 +13607,7 @@
         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;
       });
@@ -13749,6 +13785,7 @@
       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 vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -13758,7 +13795,7 @@
             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,
@@ -13767,6 +13804,7 @@
           }],
           "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,
@@ -13813,7 +13851,8 @@
                   } = _ref2;
                   return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
-                    "ripple": false
+                    "ripple": false,
+                    "tabindex": "-1"
                   }, null) : undefined;
                 },
                 title: () => {
@@ -14223,7 +14262,6 @@
       multiple: Boolean,
       hint: String,
       persistentHint: Boolean,
-      placeholder: String,
       showSize: {
         type: [Boolean, Number],
         default: false,
@@ -17439,6 +17477,7 @@
         validator: v => !isNaN(parseFloat(v))
       },
       suffix: String,
+      modelModifiers: Object,
       ...makeVInputProps(),
       ...makeVFieldProps()
     },
@@ -17503,12 +17542,14 @@
       }
       function onInput(e) {
         const el = e.target;
-        const caretPosition = [el.selectionStart, el.selectionEnd];
         model.value = el.value;
-        vue.nextTick(() => {
-          el.selectionStart = caretPosition[0];
-          el.selectionEnd = caretPosition[1];
-        });
+        if (props.modelModifiers?.trim) {
+          const caretPosition = [el.selectionStart, el.selectionEnd];
+          vue.nextTick(() => {
+            el.selectionStart = caretPosition[0];
+            el.selectionEnd = caretPosition[1];
+          });
+        }
       }
       const sizerRef = vue.ref();
       function calculateInputHeight() {
@@ -17997,6 +18038,177 @@
     }
   });
 
+  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, () => {
+        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(() => vue.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 = vue.ref(0);
+      const baseItemHeight = vue.ref(props.itemHeight);
+      const itemHeight = vue.computed({
+        get: () => parseInt(baseItemHeight.value ?? 0, 10),
+        set(val) {
+          baseItemHeight.value = val;
+        }
+      });
+      const rootEl = vue.ref();
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      vue.watchEffect(() => {
+        resizeRef.value = rootEl.value;
+      });
+      const display = useDisplay();
+      const sizeMap = new Map();
+      let sizes = createRange(props.items.length).map(() => itemHeight.value);
+      const visibleItems = vue.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 = vue.computed(() => Math.min(props.items.length, first.value + visibleItems.value));
+      const computedItems = vue.computed(() => props.items.slice(first.value, last.value));
+      const paddingTop = vue.computed(() => calculateOffset(first.value));
+      const paddingBottom = vue.computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      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(() => 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(() => vue.createVNode("div", {
+        "ref": rootEl,
+        "class": "v-virtual-scroll",
+        "onScroll": handleScroll,
+        "style": dimensionStyles.value
+      }, [vue.createVNode("div", {
+        "class": "v-virtual-scroll__container",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value),
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, [computedItems.value.map((item, index) => vue.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,
@@ -18852,10 +19064,8 @@
         type: String,
         default: '$vuetify.noDataText'
       },
-      rowHeight: Number
-    },
-    emits: {
-      'click:row': (event, value) => true
+      rowHeight: Number,
+      'onClick:row': Function
     },
     setup(props, _ref) {
       let {
@@ -18919,14 +19129,14 @@
         };
         return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.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)]);
@@ -19237,7 +19447,8 @@
     height: [String, Number],
     width: [String, Number],
     fixedHeader: Boolean,
-    fixedFooter: Boolean
+    fixedFooter: Boolean,
+    'onClick:row': Function
   }, 'v-data-table');
   const VDataTable = genericComponent()({
     name: 'VDataTable',
@@ -19258,8 +19469,7 @@
       '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 {
@@ -19365,7 +19575,7 @@
           "multiSort": props.multiSort
         }, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.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 ?? (() => vue.createVNode(VDataTableFooter, null, {
           prepend: slots['footer.prepend']
@@ -19389,8 +19599,8 @@
       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) {
@@ -19428,12 +19638,12 @@
         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;
@@ -19476,7 +19686,7 @@
       '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 {
@@ -19560,8 +19770,10 @@
         "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: () => vue.createVNode("div", {
@@ -19587,7 +19799,7 @@
           }
         }, null)]), vue.createVNode(VDataTableRows, {
           "items": visibleItems.value,
-          "onClick:row": (event, value) => emit('click:row', event, value)
+          "onClick:row": props['onClick:row']
         }, slots), vue.createVNode("tr", {
           "style": {
             height: convertToUnit(paddingBottom.value),
@@ -19637,7 +19849,7 @@
       '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 {
@@ -19715,7 +19927,8 @@
         }],
         "fixedHeader": props.fixedHeader,
         "fixedFooter": props.fixedFooter,
-        "height": props.height
+        "height": props.height,
+        "hover": props.hover
       }, {
         top: slots.top,
         default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
@@ -19732,7 +19945,7 @@
           "role": "rowgroup"
         }, [slots.body ? slots.body() : vue.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 ?? (() => vue.createVNode(VDataTableFooter, null, {
           prepend: slots['footer.prepend']
@@ -19872,177 +20085,6 @@
     }
   });
 
-  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, () => {
-        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(() => vue.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 = vue.ref(0);
-      const baseItemHeight = vue.ref(props.itemHeight);
-      const itemHeight = vue.computed({
-        get: () => parseInt(baseItemHeight.value ?? 0, 10),
-        set(val) {
-          baseItemHeight.value = val;
-        }
-      });
-      const rootEl = vue.ref();
-      const {
-        resizeRef,
-        contentRect
-      } = useResizeObserver();
-      vue.watchEffect(() => {
-        resizeRef.value = rootEl.value;
-      });
-      const display = useDisplay();
-      const sizeMap = new Map();
-      let sizes = createRange(props.items.length).map(() => itemHeight.value);
-      const visibleItems = vue.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 = vue.computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-      const computedItems = vue.computed(() => props.items.slice(first.value, last.value));
-      const paddingTop = vue.computed(() => calculateOffset(first.value));
-      const paddingBottom = vue.computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
-      const {
-        dimensionStyles
-      } = useDimension(props);
-      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(() => 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(() => vue.createVNode("div", {
-        "ref": rootEl,
-        "class": "v-virtual-scroll",
-        "onScroll": handleScroll,
-        "style": dimensionStyles.value
-      }, [vue.createVNode("div", {
-        "class": "v-virtual-scroll__container",
-        "style": {
-          paddingTop: convertToUnit(paddingTop.value),
-          paddingBottom: convertToUnit(paddingBottom.value)
-        }
-      }, [computedItems.value.map((item, index) => vue.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,
@@ -20395,7 +20437,7 @@
       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
@@ -20407,7 +20449,7 @@
     }
   }
 
-  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] : {};