@vuetify/nightly 3.2.0-next-20230118.0 → 4.0.0-dev-20230211.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-next-20230118.0
+* Vuetify v4.0.0-dev-20230211.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -262,8 +262,12 @@
   }
   function toKebabCase() {
     let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase();
+    if (toKebabCase.cache.has(str)) return toKebabCase.cache.get(str);
+    const kebab = str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase();
+    toKebabCase.cache.set(str, kebab);
+    return kebab;
   }
+  toKebabCase.cache = new Map();
   function findChildrenWithProvide(key, vnode) {
     if (!vnode || typeof vnode !== 'object') return [];
     if (Array.isArray(vnode)) {
@@ -890,7 +894,7 @@
 
   const DefaultsSymbol = Symbol.for('vuetify:defaults');
   function createDefaults(options) {
-    return vue.ref(options ?? {});
+    return vue.ref(options);
   }
   function useDefaults() {
     const defaults = vue.inject(DefaultsSymbol);
@@ -922,23 +926,30 @@
     return newDefaults;
   }
 
-  function useToggleScope(source, cb) {
+  function useToggleScope(source, fn) {
     let scope;
+    function start() {
+      scope = vue.effectScope();
+      scope.run(() => fn.length ? fn(() => {
+        var _scope;
+        (_scope = scope) == null ? void 0 : _scope.stop();
+        start();
+      }) : fn());
+    }
     vue.watch(source, active => {
       if (active && !scope) {
-        scope = vue.effectScope();
-        scope.run(cb);
+        start();
       } else if (!active) {
-        var _scope;
-        (_scope = scope) == null ? void 0 : _scope.stop();
+        var _scope2;
+        (_scope2 = scope) == null ? void 0 : _scope2.stop();
         scope = undefined;
       }
     }, {
       immediate: true
     });
     vue.onScopeDispose(() => {
-      var _scope2;
-      (_scope2 = scope) == null ? void 0 : _scope2.stop();
+      var _scope3;
+      (_scope3 = scope) == null ? void 0 : _scope3.stop();
     });
   }
 
@@ -1007,33 +1018,36 @@
       options.props = propsFactory(options.props, toKebabCase(options.name))();
       options.props._as = String;
       options.setup = function setup(props, ctx) {
-        const vm = vue.getCurrentInstance();
         const defaults = useDefaults();
-        const _subcomponentDefaults = vue.shallowRef();
-        const _props = vue.shallowReactive({
-          ...vue.toRaw(props)
+
+        // Skip props proxy if defaults are not provided
+        if (!defaults.value) return options._setup(props, ctx);
+        const vm = vue.getCurrentInstance();
+        const componentDefaults = vue.computed(() => defaults.value[props._as ?? options.name]);
+        const _props = new Proxy(props, {
+          get(target, prop) {
+            if (!propIsDefined(vm.vnode, prop)) {
+              var _componentDefaults$va, _global;
+              return ((_componentDefaults$va = componentDefaults.value) == null ? void 0 : _componentDefaults$va[prop]) ?? ((_global = defaults.value.global) == null ? void 0 : _global[prop]) ?? target[prop];
+            }
+            return Reflect.get(target, prop);
+          }
         });
+        const _subcomponentDefaults = vue.shallowRef();
         vue.watchEffect(() => {
-          const globalDefaults = defaults.value.global;
-          const componentDefaults = defaults.value[props._as ?? options.name];
-          if (componentDefaults) {
-            const subComponents = Object.entries(componentDefaults).filter(_ref => {
+          if (componentDefaults.value) {
+            const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
               let [key] = _ref;
               return key.startsWith(key[0].toUpperCase());
             });
             if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
           }
-          for (const prop of Object.keys(props)) {
-            let newVal = props[prop];
-            if (!propIsDefined(vm.vnode, prop)) {
-              newVal = (componentDefaults == null ? void 0 : componentDefaults[prop]) ?? (globalDefaults == null ? void 0 : globalDefaults[prop]) ?? props[prop];
-            }
-            if (_props[prop] !== newVal) {
-              _props[prop] = newVal;
-            }
-          }
         });
         const setupBindings = options._setup(_props, ctx);
+
+        // If subcomponent defaults are provided, override any
+        // subcomponents provided by the component's setup function.
+        // This uses injectSelf so must be done after the original setup to work.
         useToggleScope(_subcomponentDefaults, () => {
           var _injectSelf;
           provideDefaults(mergeDeep(((_injectSelf = injectSelf(DefaultsSymbol)) == null ? void 0 : _injectSelf.value) ?? {}, _subcomponentDefaults.value));
@@ -1896,8 +1910,8 @@
         root: 'Pagination Navigation',
         next: 'Next page',
         previous: 'Previous page',
-        page: 'Goto Page {0}',
-        currentPage: 'Page {0}, Current Page',
+        page: 'Go to page {0}',
+        currentPage: 'Page {0}, Current page',
         first: 'First page',
         last: 'Last page'
       }
@@ -3372,18 +3386,21 @@
     };
   }
 
+  // Types
+
+  const makeVBtnGroupProps = propsFactory({
+    divided: Boolean,
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps()
+  }, 'v-btn-group');
   const VBtnGroup = defineComponent({
     name: 'VBtnGroup',
-    props: {
-      divided: Boolean,
-      ...makeBorderProps(),
-      ...makeDensityProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps()
-    },
+    props: makeVBtnGroupProps(),
     setup(props, _ref) {
       let {
         slots
@@ -3421,6 +3438,9 @@
       });
     }
   });
+  function filterVBtnGroupProps(props) {
+    return pick(props, Object.keys(VBtnGroup.props));
+  }
 
   // Composables
 
@@ -3628,7 +3648,10 @@
   const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
   const VBtnToggle = genericComponent()({
     name: 'VBtnToggle',
-    props: makeGroupProps(),
+    props: {
+      ...makeVBtnGroupProps(),
+      ...makeGroupProps()
+    },
     emits: {
       'update:modelValue': value => true
     },
@@ -3645,9 +3668,10 @@
       } = useGroup(props, VBtnToggleSymbol);
       useRender(() => {
         var _slots$default;
-        return vue.createVNode(VBtnGroup, {
+        const [btnGroupProps] = filterVBtnGroupProps(props);
+        return vue.createVNode(VBtnGroup, vue.mergeProps({
           "class": "v-btn-toggle"
-        }, {
+        }, btnGroupProps), {
           default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             isSelected,
             next,
@@ -4102,9 +4126,6 @@
     el.style.transform = value;
     el.style.webkitTransform = value;
   }
-  function opacity(el, value) {
-    el.style.opacity = `calc(${value} * var(--v-theme-overlay-multiplier))`;
-  }
   function isTouchEvent(e) {
     return e.constructor.name === 'TouchEvent';
   }
@@ -4180,13 +4201,11 @@
       animation.classList.add('v-ripple__animation--enter');
       animation.classList.add('v-ripple__animation--visible');
       transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`);
-      opacity(animation, 0);
       animation.dataset.activated = String(performance.now());
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--enter');
         animation.classList.add('v-ripple__animation--in');
         transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
-        opacity(animation, 0.08);
       }, 0);
     },
     hide(el) {
@@ -4201,14 +4220,14 @@
       setTimeout(() => {
         animation.classList.remove('v-ripple__animation--in');
         animation.classList.add('v-ripple__animation--out');
-        opacity(animation, 0);
         setTimeout(() => {
+          var _animation$parentNode;
           const ripples = el.getElementsByClassName('v-ripple__animation');
           if (ripples.length === 1 && el.dataset.previousPosition) {
             el.style.position = el.dataset.previousPosition;
             delete el.dataset.previousPosition;
           }
-          animation.parentNode && el.removeChild(animation.parentNode);
+          if (((_animation$parentNode = animation.parentNode) == null ? void 0 : _animation$parentNode.parentNode) === el) el.removeChild(animation.parentNode);
         }, 300);
       }, delay);
     }
@@ -4861,14 +4880,18 @@
       const isElevated = vue.computed(() => {
         return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
       });
+      const valueAttr = vue.computed(() => {
+        if (props.value === undefined) return undefined;
+        return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
+      });
       useSelectLink(link, group == null ? void 0 : group.select);
       useRender(() => {
-        var _slots$prepend, _slots$default, _slots$append, _slots$loader;
+        var _link$isActive2, _link$isActive3, _slots$prepend, _slots$default, _slots$append, _slots$loader;
         const Tag = link.isLink.value ? 'a' : props.tag;
-        const hasColor = !group || isActive.value;
         const hasPrepend = !!(props.prependIcon || slots.prepend);
         const hasAppend = !!(props.appendIcon || slots.append);
         const hasIcon = !!(props.icon && props.icon !== true);
+        const hasColor = (group == null ? void 0 : group.isSelected.value) && (!link.isLink.value || ((_link$isActive2 = link.isActive) == null ? void 0 : _link$isActive2.value)) || !group || ((_link$isActive3 = link.isActive) == null ? void 0 : _link$isActive3.value);
         return vue.withDirectives(vue.createVNode(Tag, {
           "type": Tag === 'a' ? undefined : 'button',
           "class": ['v-btn', group == null ? void 0 : group.selectedClass.value, {
@@ -4889,7 +4912,8 @@
             if (isDisabled.value) return;
             (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
             group == null ? void 0 : group.toggle();
-          }
+          },
+          "value": valueAttr.value
         }, {
           default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode(VDefaultsProvider, {
             "key": "prepend",
@@ -5363,32 +5387,34 @@
         if (hasLabel.value) {
           const el = labelRef.value.$el;
           const targetEl = floatingLabelRef.value.$el;
-          const rect = nullifyTransforms(el);
-          const targetRect = targetEl.getBoundingClientRect();
-          const x = targetRect.x - rect.x;
-          const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
-          const targetWidth = targetRect.width / 0.75;
-          const width = Math.abs(targetWidth - rect.width) > 1 ? {
-            maxWidth: convertToUnit(targetWidth)
-          } : undefined;
-          const style = getComputedStyle(el);
-          const targetStyle = getComputedStyle(targetEl);
-          const duration = parseFloat(style.transitionDuration) * 1000 || 150;
-          const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
-          const color = targetStyle.getPropertyValue('color');
-          el.style.visibility = 'visible';
-          targetEl.style.visibility = 'hidden';
-          animate(el, {
-            transform: `translate(${x}px, ${y}px) scale(${scale})`,
-            color,
-            ...width
-          }, {
-            duration,
-            easing: standardEasing,
-            direction: val ? 'normal' : 'reverse'
-          }).finished.then(() => {
-            el.style.removeProperty('visibility');
-            targetEl.style.removeProperty('visibility');
+          requestAnimationFrame(() => {
+            const rect = nullifyTransforms(el);
+            const targetRect = targetEl.getBoundingClientRect();
+            const x = targetRect.x - rect.x;
+            const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
+            const targetWidth = targetRect.width / 0.75;
+            const width = Math.abs(targetWidth - rect.width) > 1 ? {
+              maxWidth: convertToUnit(targetWidth)
+            } : undefined;
+            const style = getComputedStyle(el);
+            const targetStyle = getComputedStyle(targetEl);
+            const duration = parseFloat(style.transitionDuration) * 1000 || 150;
+            const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
+            const color = targetStyle.getPropertyValue('color');
+            el.style.visibility = 'visible';
+            targetEl.style.visibility = 'hidden';
+            animate(el, {
+              transform: `translate(${x}px, ${y}px) scale(${scale})`,
+              color,
+              ...width
+            }, {
+              duration,
+              easing: standardEasing,
+              direction: val ? 'normal' : 'reverse'
+            }).finished.then(() => {
+              el.style.removeProperty('visibility');
+              targetEl.style.removeProperty('visibility');
+            });
           });
         }
       }, {
@@ -5577,7 +5603,6 @@
   const makeFormProps = propsFactory({
     disabled: Boolean,
     fastFail: Boolean,
-    lazyValidation: Boolean,
     readonly: Boolean,
     modelValue: {
       type: Boolean,
@@ -6981,9 +7006,9 @@
         themeClasses
       } = provideTheme(props);
       const {
-        backgroundColorClasses,
-        backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.toRef(props, 'color'));
       const dividerStyles = vue.computed(() => {
         const styles = {};
         if (props.length) {
@@ -6999,8 +7024,8 @@
           'v-divider': true,
           'v-divider--inset': props.inset,
           'v-divider--vertical': props.vertical
-        }, themeClasses.value, backgroundColorClasses.value],
-        "style": [dividerStyles.value, backgroundColorStyles.value],
+        }, themeClasses.value, textColorClasses.value],
+        "style": [dividerStyles.value, textColorStyles.value],
         "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
         "role": `${attrs.role || 'separator'}`
       }, null));
@@ -7710,7 +7735,7 @@
         }
       }
       useRender(() => {
-        var _slots$prepend, _slots$title, _slots$subtitle, _slots$default, _slots$append;
+        var _slots$title, _slots$subtitle, _slots$default;
         const Tag = isLink.value ? 'a' : props.tag;
         const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
@@ -7733,7 +7758,18 @@
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
-          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode(VDefaultsProvider, {
+          default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode("div", {
+            "key": "prepend",
+            "class": "v-list-item__prepend"
+          }, [props.prependAvatar && vue.createVNode(VAvatar, {
+            "key": "prepend-avatar",
+            "density": props.density,
+            "image": props.prependAvatar
+          }, null), props.prependIcon && vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "density": props.density,
+            "icon": props.prependIcon
+          }, null), slots.prepend && vue.createVNode(VDefaultsProvider, {
             "key": "prepend",
             "defaults": {
               VAvatar: {
@@ -7749,14 +7785,8 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-list-item__prepend"
-            }, [props.prependAvatar && vue.createVNode(VAvatar, {
-              "key": "prepend-avatar"
-            }, null), props.prependIcon && vue.createVNode(VIcon, {
-              "key": "prepend-icon"
-            }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
-          }), vue.createVNode("div", {
+            default: () => [slots.prepend(slotProps.value)]
+          })]), vue.createVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
@@ -7771,7 +7801,10 @@
             default: () => [((_slots$subtitle = slots.subtitle) == null ? void 0 : _slots$subtitle.call(slots, {
               subtitle: props.subtitle
             })) ?? props.subtitle]
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && vue.createVNode(VDefaultsProvider, {
+          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && vue.createVNode("div", {
+            "key": "append",
+            "class": "v-list-item__append"
+          }, [slots.append && vue.createVNode(VDefaultsProvider, {
             "key": "append",
             "defaults": {
               VAvatar: {
@@ -7787,14 +7820,16 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-list-item__append"
-            }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && vue.createVNode(VIcon, {
-              "key": "append-icon"
-            }, null), props.appendAvatar && vue.createVNode(VAvatar, {
-              "key": "append-avatar"
-            }, null)])]
-          })]
+            default: () => [slots.append(slotProps.value)]
+          }), props.appendIcon && vue.createVNode(VIcon, {
+            "key": "append-icon",
+            "density": props.density,
+            "icon": props.appendIcon
+          }, null), props.appendAvatar && vue.createVNode(VAvatar, {
+            "key": "append-avatar",
+            "density": props.density,
+            "image": props.appendAvatar
+          }, null)])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
@@ -8008,9 +8043,12 @@
 
   // Types
 
+  function isPrimitive(value) {
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+  }
   function transformItem(props, item) {
     const type = getPropertyFromItem(item, props.itemType, 'item');
-    const title = typeof item === 'string' ? item : getPropertyFromItem(item, props.itemTitle);
+    const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
     const value = getPropertyFromItem(item, props.itemValue, undefined);
     const children = getPropertyFromItem(item, props.itemChildren);
     const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps);
@@ -8636,17 +8674,12 @@
   function useLocationStrategies(props, data) {
     const contentStyles = vue.ref({});
     const updateLocation = vue.ref();
-    let scope;
-    vue.watchEffect(async () => {
-      var _scope;
-      (_scope = scope) == null ? void 0 : _scope.stop();
-      updateLocation.value = undefined;
-      if (!(IN_BROWSER && data.isActive.value && props.locationStrategy)) return;
-      scope = vue.effectScope();
-      if (!(props.locationStrategy === 'connected')) {
-        await vue.nextTick();
-      }
-      scope.run(() => {
+    if (IN_BROWSER) {
+      useToggleScope(() => !!(data.isActive.value && props.locationStrategy), reset => {
+        vue.watch(() => props.locationStrategy, reset);
+        vue.onScopeDispose(() => {
+          updateLocation.value = undefined;
+        });
         if (typeof props.locationStrategy === 'function') {
           var _props$locationStrate;
           updateLocation.value = (_props$locationStrate = props.locationStrategy(data, props, contentStyles)) == null ? void 0 : _props$locationStrate.updateLocation;
@@ -8655,16 +8688,14 @@
           updateLocation.value = (_locationStrategies$p = locationStrategies[props.locationStrategy](data, props, contentStyles)) == null ? void 0 : _locationStrategies$p.updateLocation;
         }
       });
-    });
-    IN_BROWSER && window.addEventListener('resize', onResize, {
-      passive: true
-    });
-    vue.onScopeDispose(() => {
-      var _scope2;
-      IN_BROWSER && window.removeEventListener('resize', onResize);
-      updateLocation.value = undefined;
-      (_scope2 = scope) == null ? void 0 : _scope2.stop();
-    });
+      window.addEventListener('resize', onResize, {
+        passive: true
+      });
+      vue.onScopeDispose(() => {
+        window.removeEventListener('resize', onResize);
+        updateLocation.value = undefined;
+      });
+    }
     function onResize(e) {
       var _updateLocation$value;
       (_updateLocation$value = updateLocation.value) == null ? void 0 : _updateLocation$value.call(updateLocation, e);
@@ -8958,13 +8989,30 @@
         maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
         maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
       });
+      return {
+        available,
+        contentBox
+      };
     }
-    vue.watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation(), {
-      immediate: !activatorFixed
-    });
-    if (activatorFixed) vue.nextTick(() => updateLocation());
-    requestAnimationFrame(() => {
-      if (contentStyles.value.maxHeight) updateLocation();
+    vue.watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation());
+    vue.nextTick(() => {
+      const result = updateLocation();
+
+      // TODO: overflowing content should only require a single updateLocation call
+      // Icky hack to make sure the content is positioned consistently
+      if (!result) return;
+      const {
+        available,
+        contentBox
+      } = result;
+      if (contentBox.height > available.y) {
+        requestAnimationFrame(() => {
+          updateLocation();
+          requestAnimationFrame(() => {
+            updateLocation();
+          });
+        });
+      }
     });
     return {
       updateLocation
@@ -9032,10 +9080,10 @@
       await vue.nextTick();
       scope.run(() => {
         if (typeof props.scrollStrategy === 'function') {
-          props.scrollStrategy(data, props);
+          props.scrollStrategy(data, props, scope);
         } else {
           var _scrollStrategies$pro;
-          (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props);
+          (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props, scope);
         }
       });
     });
@@ -9081,9 +9129,10 @@
       }
     });
   }
-  function repositionScrollStrategy(data) {
+  function repositionScrollStrategy(data, props, scope) {
     let slow = false;
     let raf = -1;
+    let ric = -1;
     function update(e) {
       requestNewFrame(() => {
         var _data$updateLocation$, _data$updateLocation;
@@ -9093,21 +9142,29 @@
         slow = time / (1000 / 60) > 2;
       });
     }
-    bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
-      if (slow) {
-        // If the position calculation is slow,
-        // defer updates until scrolling is finished.
-        // Browsers usually fire one scroll event per frame so
-        // we just wait until we've got two frames without an event
-        cancelAnimationFrame(raf);
-        raf = requestAnimationFrame(() => {
-          raf = requestAnimationFrame(() => {
+    ric = requestIdleCallback(() => {
+      scope.run(() => {
+        bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+          if (slow) {
+            // If the position calculation is slow,
+            // defer updates until scrolling is finished.
+            // Browsers usually fire one scroll event per frame so
+            // we just wait until we've got two frames without an event
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(() => {
+              raf = requestAnimationFrame(() => {
+                update(e);
+              });
+            });
+          } else {
             update(e);
-          });
+          }
         });
-      } else {
-        update(e);
-      }
+      });
+    });
+    vue.onScopeDispose(() => {
+      cancelIdleCallback(ric);
+      cancelAnimationFrame(raf);
     });
   }
 
@@ -9750,6 +9807,11 @@
       function onClickOutside() {
         parent == null ? void 0 : parent.closeParents();
       }
+      const activatorProps = vue.computed(() => vue.mergeProps({
+        'aria-haspopup': 'menu',
+        'aria-expanded': String(isActive.value),
+        'aria-owns': id.value
+      }, props.activatorProps));
       useRender(() => {
         const [overlayProps] = filterVOverlayProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
@@ -9759,11 +9821,7 @@
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
           "absolute": true,
-          "activatorProps": vue.mergeProps({
-            'aria-haspopup': 'menu',
-            'aria-expanded': String(isActive.value),
-            'aria-owns': id.value
-          }, props.activatorProps),
+          "activatorProps": activatorProps.value,
           "onClick:outside": onClickOutside
         }, scopeId), {
           activator: slots.activator,
@@ -9877,8 +9935,10 @@
       }
       function onKeydown(e) {
         if (props.readonly || form != null && form.isReadonly.value) return;
-        if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
+        if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
           e.preventDefault();
+        }
+        if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
           menu.value = true;
         }
         if (['Escape', 'Tab'].includes(e.key)) {
@@ -9889,15 +9949,12 @@
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
-          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         } else if (e.key === 'Home') {
           var _listRef$value3;
-          e.preventDefault();
           (_listRef$value3 = listRef.value) == null ? void 0 : _listRef$value3.focus('first');
         } else if (e.key === 'End') {
           var _listRef$value4;
-          e.preventDefault();
           (_listRef$value4 = listRef.value) == null ? void 0 : _listRef$value4.focus('last');
         }
       }
@@ -10079,7 +10136,7 @@
     const customFiltersLength = Object.keys((options == null ? void 0 : options.customKeyFilter) ?? {}).length;
     if (!(items != null && items.length)) return array;
     loop: for (let i = 0; i < items.length; i++) {
-      const item = items[i].raw;
+      const item = items[i];
       const customMatches = {};
       const defaultMatches = {};
       let match = -1;
@@ -10119,7 +10176,7 @@
     }
     return array;
   }
-  function useFilter(props, items, query) {
+  function useFilter(props, items, query, options) {
     const strQuery = vue.computed(() => typeof (query == null ? void 0 : query.value) !== 'string' && typeof (query == null ? void 0 : query.value) !== 'number' ? '' : String(query.value));
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
@@ -10130,7 +10187,7 @@
       const results = filterItems(transformedItems, strQuery.value, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
-        filterKeys: props.filterKeys,
+        filterKeys: vue.unref(options == null ? void 0 : options.filterKeys) ?? props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter
       });
@@ -10241,6 +10298,9 @@
       }
       function onKeydown(e) {
         if (props.readonly || form != null && form.isReadonly.value) return;
+        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+          e.preventDefault();
+        }
         if (['Enter', 'ArrowDown'].includes(e.key)) {
           menu.value = true;
         }
@@ -10252,11 +10312,9 @@
         }
         if (e.key === 'ArrowDown') {
           var _listRef$value;
-          e.preventDefault();
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
-          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         }
       }
@@ -13585,7 +13643,9 @@
         if (props.readonly || form != null && form.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
         const length = selected.value.length;
-        if (selectionIndex.value > -1) e.preventDefault();
+        if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+          e.preventDefault();
+        }
         if (['Enter', 'ArrowDown'].includes(e.key)) {
           menu.value = true;
         }
@@ -13597,11 +13657,9 @@
         }
         if (e.key === 'ArrowDown') {
           var _listRef$value;
-          e.preventDefault();
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
-          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         }
         if (!props.multiple) return;
@@ -13896,6 +13954,10 @@
           });
         }
       });
+      const activatorProps = vue.computed(() => vue.mergeProps({
+        'aria-haspopup': 'dialog',
+        'aria-expanded': String(isActive.value)
+      }, props.activatorProps));
       useRender(() => {
         const [overlayProps] = filterVOverlayProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
@@ -13909,10 +13971,7 @@
           "onUpdate:modelValue": $event => isActive.value = $event,
           "aria-role": "dialog",
           "aria-modal": "true",
-          "activatorProps": vue.mergeProps({
-            'aria-haspopup': 'dialog',
-            'aria-expanded': String(isActive.value)
-          }, props.activatorProps)
+          "activatorProps": activatorProps.value
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -14261,12 +14320,15 @@
         onFocus();
         vue.nextTick(() => {
           model.value = [];
-          if (inputRef != null && inputRef.value) {
-            inputRef.value.value = '';
-          }
           callEvent(props['onClick:clear'], e);
         });
       }
+      vue.watch(model, newValue => {
+        const hasModelReset = !Array.isArray(newValue) || !newValue.length;
+        if (hasModelReset && inputRef.value) {
+          inputRef.value.value = '';
+        }
+      });
       useRender(() => {
         const hasCounter = !!(slots.counter || props.counter);
         const hasDetails = !!(hasCounter || slots.details);
@@ -15257,7 +15319,7 @@
       window.removeEventListener('touchmove', onTouchmove);
       window.removeEventListener('touchend', onTouchend);
     });
-    const isHorizontal = vue.computed(() => position.value !== 'bottom');
+    const isHorizontal = vue.computed(() => ['left', 'right'].includes(position.value));
     const {
       addMovement,
       endTouch,
@@ -15269,11 +15331,11 @@
     const offset = vue.ref(0);
     let start;
     function getOffset(pos, active) {
-      return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
+      return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'top' ? pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
     }
     function getProgress(pos) {
       let limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
+      const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'top' ? (pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
       return limit ? Math.max(0, Math.min(1, progress)) : progress;
     }
     function onTouchstart(e) {
@@ -15281,8 +15343,8 @@
       const touchX = e.changedTouches[0].clientX;
       const touchY = e.changedTouches[0].clientY;
       const touchZone = 25;
-      const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
-      const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
+      const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
+      const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
       if (inTouchZone || inElement || isActive.value && isTemporary.value) {
         maybeDragging = true;
         start = [touchX, touchY];
@@ -15334,6 +15396,7 @@
         isActive.value = velocity.direction === ({
           left: 'right',
           right: 'left',
+          top: 'down',
           bottom: 'up'
         }[position.value] || oops());
       } else {
@@ -15342,7 +15405,7 @@
     }
     const dragStyles = vue.computed(() => {
       return isDragging.value ? {
-        transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
+        transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
         transition: 'none'
       } : undefined;
     });
@@ -15358,7 +15421,7 @@
 
   // Types
 
-  const locations = ['start', 'end', 'left', 'right', 'bottom'];
+  const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
   const VNavigationDrawer = defineComponent({
     name: 'VNavigationDrawer',
     props: {
@@ -15815,7 +15878,7 @@
                 disabled: !!props.disabled || props.length < 2,
                 color: isActive ? props.activeColor : props.color,
                 ariaCurrent: isActive,
-                ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
+                ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
                 onClick: e => setValue(e, item)
               }
             };
@@ -17994,6 +18057,9 @@
         if (props.transition) return props.transition;
         return isActive.value ? 'scale-transition' : 'fade-transition';
       });
+      const activatorProps = vue.computed(() => vue.mergeProps({
+        'aria-describedby': id.value
+      }, props.activatorProps));
       useRender(() => {
         const [overlayProps] = filterVOverlayProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
@@ -18010,9 +18076,7 @@
           "persistent": true,
           "role": "tooltip",
           "eager": true,
-          "activatorProps": vue.mergeProps({
-            'aria-describedby': id.value
-          }, props.activatorProps),
+          "activatorProps": activatorProps.value,
           "_disableGlobalStack": true
         }, scopeId), {
           activator: slots.activator,
@@ -18961,7 +19025,7 @@
               });
             },
             "item": item
-          }, slots), isExpanded(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
+          }, slots), isExpanded(item) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
             item,
             columns: columns.value
           }))]);
@@ -18999,7 +19063,7 @@
       return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
     });
     const pageCount = vue.computed(() => {
-      if (itemsPerPage.value === -1) return 1;
+      if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
     vue.watchEffect(() => {
@@ -19054,6 +19118,30 @@
         type: String,
         default: '$last'
       },
+      itemsPerPageText: {
+        type: String,
+        default: '$vuetify.dataFooter.itemsPerPageText'
+      },
+      pageText: {
+        type: String,
+        default: '$vuetify.dataFooter.pageText'
+      },
+      firstPageLabel: {
+        type: String,
+        default: '$vuetify.dataFooter.firstPage'
+      },
+      prevPageLabel: {
+        type: String,
+        default: '$vuetify.dataFooter.prevPage'
+      },
+      nextPageLabel: {
+        type: String,
+        default: '$vuetify.dataFooter.nextPage'
+      },
+      lastPageLabel: {
+        type: String,
+        default: '$vuetify.dataFooter.lastPage'
+      },
       itemsPerPageOptions: {
         type: Array,
         default: () => [{
@@ -19070,7 +19158,7 @@
           title: '100'
         }, {
           value: -1,
-          title: 'All'
+          title: '$vuetify.dataFooter.itemsPerPageAll'
         }]
       },
       showCurrentPage: Boolean
@@ -19079,6 +19167,9 @@
       let {
         slots
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const {
         page,
         pageCount,
@@ -19087,14 +19178,18 @@
         itemsLength,
         itemsPerPage
       } = usePagination();
+      const itemsPerPageOptions = vue.computed(() => props.itemsPerPageOptions.map(option => ({
+        ...option,
+        title: t(option.title)
+      })));
       return () => {
         var _slots$prepend;
         return vue.createVNode("div", {
           "class": "v-data-table-footer"
         }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots), vue.createVNode("div", {
           "class": "v-data-table-footer__items-per-page"
-        }, [vue.createVNode("span", null, [vue.createTextVNode("Items per page:")]), vue.createVNode(VSelect, {
-          "items": props.itemsPerPageOptions,
+        }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+          "items": itemsPerPageOptions.value,
           "modelValue": itemsPerPage.value,
           "onUpdate:modelValue": v => itemsPerPage.value = Number(v),
           "density": "compact",
@@ -19102,30 +19197,35 @@
           "hide-details": true
         }, null)]), vue.createVNode("div", {
           "class": "v-data-table-footer__info"
-        }, [vue.createVNode("div", null, [(startIndex.value ?? -1) + 1, vue.createTextVNode(" - "), stopIndex.value ?? 0, vue.createTextVNode(" of "), itemsLength.value ?? 0])]), vue.createVNode("div", {
+        }, [vue.createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), vue.createVNode("div", {
           "class": "v-data-table-footer__pagination"
         }, [vue.createVNode(VBtn, {
           "icon": props.firstIcon,
           "variant": "plain",
           "onClick": () => page.value = 1,
-          "disabled": page.value === 1
+          "disabled": page.value === 1,
+          "aria-label": t(props.firstPageLabel)
         }, null), vue.createVNode(VBtn, {
           "icon": props.prevIcon,
           "variant": "plain",
           "onClick": () => page.value = Math.max(1, page.value - 1),
-          "disabled": page.value === 1
-        }, null), props.showCurrentPage && vue.createVNode("div", {
-          "key": "page"
-        }, [vue.createTextVNode("page.value")]), vue.createVNode(VBtn, {
+          "disabled": page.value === 1,
+          "aria-label": t(props.prevPageLabel)
+        }, null), props.showCurrentPage && vue.createVNode("span", {
+          "key": "page",
+          "class": "v-data-table-footer__page"
+        }, [page.value]), vue.createVNode(VBtn, {
           "icon": props.nextIcon,
           "variant": "plain",
           "onClick": () => page.value = Math.min(pageCount.value, page.value + 1),
-          "disabled": page.value === pageCount.value
+          "disabled": page.value === pageCount.value,
+          "aria-label": t(props.nextPageLabel)
         }, null), vue.createVNode(VBtn, {
           "icon": props.lastIcon,
           "variant": "plain",
           "onClick": () => page.value = pageCount.value,
-          "disabled": page.value === pageCount.value
+          "disabled": page.value === pageCount.value,
+          "aria-label": t(props.lastPageLabel)
         }, null)])]);
       };
     }
@@ -19170,18 +19270,14 @@
       page,
       itemsPerPage,
       sortBy,
-      startIndex,
-      stopIndex,
-      pageCount
+      groupBy
     } = _ref;
     const vm = getCurrentInstance('VDataTable');
     const options = vue.computed(() => ({
       page: page.value,
       itemsPerPage: itemsPerPage.value,
-      startIndex: startIndex.value,
-      stopIndex: stopIndex.value,
-      pageCount: pageCount.value,
-      sortBy: sortBy.value
+      sortBy: sortBy.value,
+      groupBy: groupBy.value
     }));
 
     // Reset page when sorting changes
@@ -19259,9 +19355,12 @@
       const {
         items
       } = useDataTableItems(props, columns);
+      const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
       const {
         filteredItems
-      } = useFilter(props, items, vue.toRef(props, 'search'));
+      } = useFilter(props, items, vue.toRef(props, 'search'), {
+        filterKeys
+      });
       const {
         sortBy
       } = createSort(props);
@@ -19280,8 +19379,7 @@
         page,
         itemsPerPage,
         startIndex,
-        stopIndex,
-        pageCount
+        stopIndex
       } = createPagination(props, flatItems);
       const {
         paginatedItems
@@ -19293,9 +19391,7 @@
         page,
         itemsPerPage,
         sortBy,
-        pageCount,
-        startIndex,
-        stopIndex
+        groupBy
       });
       provideDefaults({
         VDataTableRows: {
@@ -19451,9 +19547,12 @@
       const {
         items
       } = useDataTableItems(props, columns);
+      const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
       const {
         filteredItems
-      } = useFilter(props, items, vue.toRef(props, 'search'));
+      } = useFilter(props, items, vue.toRef(props, 'search'), {
+        filterKeys
+      });
       const {
         sortBy
       } = createSort(props);
@@ -19486,10 +19585,8 @@
       useOptions({
         sortBy,
         page: vue.ref(1),
-        startIndex: vue.ref(0),
-        stopIndex: vue.computed(() => flatItems.value.length - 1),
-        pageCount: vue.ref(1),
-        itemsPerPage: vue.ref(-1)
+        itemsPerPage: vue.ref(-1),
+        groupBy
       });
       provideDefaults({
         VDataTableRows: {
@@ -19565,7 +19662,8 @@
       ...makeDataTableItemProps(),
       ...makeDataTableSelectProps(),
       ...makeDataTableSortProps(),
-      ...makeDataTablePaginateProps()
+      ...makeDataTablePaginateProps(),
+      ...makeDataTableGroupProps()
     },
     emits: {
       'update:modelValue': value => true,
@@ -19574,6 +19672,7 @@
       'update:sortBy': sortBy => true,
       'update:options': options => true,
       'update:expanded': options => true,
+      'update:groupBy': value => true,
       'click:row': (event, value) => true
     },
     setup(props, _ref) {
@@ -19581,10 +19680,12 @@
         emit,
         slots
       } = _ref;
+      const groupBy = useProxiedModel(props, 'groupBy');
       createExpanded(props);
       const {
         columns
       } = createHeaders(props, {
+        groupBy,
         showSelect: vue.toRef(props, 'showSelect'),
         showExpand: vue.toRef(props, 'showExpand')
       });
@@ -19595,21 +19696,22 @@
         sortBy,
         toggleSort
       } = createSort(props);
+      const {
+        opened
+      } = createGroupBy(props, groupBy, sortBy);
       const {
         page,
-        itemsPerPage,
-        startIndex,
-        stopIndex,
-        pageCount
+        itemsPerPage
       } = createPagination(props, items);
+      const {
+        flatItems
+      } = useGroupedItems(items, groupBy, opened);
       createSelection(props, items);
       useOptions({
         page,
         itemsPerPage,
         sortBy,
-        startIndex,
-        stopIndex,
-        pageCount
+        groupBy
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -19645,7 +19747,7 @@
             "class": "v-data-table__tbody",
             "role": "rowgroup"
           }, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
-            "items": items.value,
+            "items": flatItems.value,
             "onClick:row": (event, value) => emit('click:row', event, value)
           }, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
         }),
@@ -19936,6 +20038,7 @@
     VDataTableRow: VDataTableRow,
     VDataTableVirtual: VDataTableVirtual,
     VDataTableServer: VDataTableServer,
+    VDataTableFooter: VDataTableFooter,
     VVirtualScroll: VVirtualScroll
   });
 
@@ -20151,7 +20254,7 @@
       locale
     };
   }
-  const version$1 = "3.2.0-next-20230118.0";
+  const version$1 = "4.0.0-dev-20230211.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20164,7 +20267,7 @@
     }
   }
 
-  const version = "3.2.0-next-20230118.0";
+  const version = "4.0.0-dev-20230211.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};