vuetify 3.2.3 → 3.2.4

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.3
+* Vuetify v3.2.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1292,7 +1292,7 @@
     vue.provide(VuetifyLayoutItemKey, {
       id
     });
-    const isKeptAlive = vue.ref(false);
+    const isKeptAlive = vue.shallowRef(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
     const {
@@ -1423,7 +1423,7 @@
       return items.value.find(item => item.id === id);
     };
     const rootVm = getCurrentInstance('createLayout');
-    const isMounted = vue.ref(false);
+    const isMounted = vue.shallowRef(false);
     vue.onMounted(() => {
       isMounted.value = true;
     });
@@ -2017,6 +2017,10 @@
     }
   };
 
+  // Composables
+
+  // Types
+
   const LANG_PREFIX = '$vuetify.';
   const replace = (str, params) => {
     return str.replace(/\{(\d+)\}/g, (match, index) => {
@@ -2089,8 +2093,8 @@
     };
   }
   function createVuetifyAdapter(options) {
-    const current = vue.ref(options?.locale ?? 'en');
-    const fallback = vue.ref(options?.fallback ?? 'en');
+    const current = vue.shallowRef(options?.locale ?? 'en');
+    const fallback = vue.shallowRef(options?.fallback ?? 'en');
     const messages = vue.ref({
       en,
       ...options?.messages
@@ -2754,6 +2758,7 @@
     } = _ref;
     const {
       transition,
+      disabled,
       ...rest
     } = props;
     const {
@@ -2761,8 +2766,10 @@
       ...customProps
     } = typeof transition === 'object' ? transition : {};
     return vue.h(component, vue.mergeProps(typeof transition === 'string' ? {
-      name: transition
-    } : customProps, rest), slots);
+      name: disabled ? '' : transition
+    } : customProps, rest, {
+      disabled
+    }), slots);
   };
 
   // Types
@@ -2810,11 +2817,11 @@
         emit,
         slots
       } = _ref;
-      const currentSrc = vue.ref(''); // Set from srcset
+      const currentSrc = vue.shallowRef(''); // Set from srcset
       const image = vue.ref();
-      const state = vue.ref(props.eager ? 'loading' : 'idle');
-      const naturalWidth = vue.ref();
-      const naturalHeight = vue.ref();
+      const state = vue.shallowRef(props.eager ? 'loading' : 'idle');
+      const naturalWidth = vue.shallowRef();
+      const naturalHeight = vue.shallowRef();
       const normalisedSrc = vue.computed(() => {
         return props.src && typeof props.src === 'object' ? {
           src: props.src.src,
@@ -2968,7 +2975,7 @@
           }
         }, null);
       };
-      const isBooted = vue.ref(false);
+      const isBooted = vue.shallowRef(false);
       {
         const stop = vue.watch(aspectRatio, val => {
           if (val) {
@@ -3254,7 +3261,7 @@
       const {
         rtlClasses
       } = useRtl();
-      const isExtended = vue.ref(!!(props.extended || slots.extension?.()));
+      const isExtended = vue.shallowRef(!!(props.extended || slots.extension?.()));
       const contentHeight = vue.computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
       const extensionHeight = vue.computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
       provideDefaults({
@@ -3361,11 +3368,11 @@
     } = args;
     let previousScroll = 0;
     const target = vue.ref(null);
-    const currentScroll = vue.ref(0);
-    const savedScroll = vue.ref(0);
-    const currentThreshold = vue.ref(0);
-    const isScrollActive = vue.ref(false);
-    const isScrollingUp = vue.ref(false);
+    const currentScroll = vue.shallowRef(0);
+    const savedScroll = vue.shallowRef(0);
+    const currentThreshold = vue.shallowRef(0);
+    const isScrollActive = vue.shallowRef(false);
+    const isScrollingUp = vue.shallowRef(false);
     const scrollThreshold = vue.computed(() => {
       return Number(props.scrollThreshold);
     });
@@ -3435,7 +3442,7 @@
 
   // Composables
   function useSsrBoot() {
-    const isBooted = vue.ref(false);
+    const isBooted = vue.shallowRef(false);
     vue.onMounted(() => {
       window.requestAnimationFrame(() => {
         isBooted.value = true;
@@ -3546,7 +3553,7 @@
         order: vue.computed(() => parseInt(props.order, 10)),
         position: vue.toRef(props, 'location'),
         layoutSize: height,
-        elementSize: vue.ref(undefined),
+        elementSize: vue.shallowRef(undefined),
         active: isActive,
         absolute: vue.toRef(props, 'absolute')
       });
@@ -4236,7 +4243,7 @@
   // Utilities
   function useIntersectionObserver(callback, options) {
     const intersectionRef = vue.ref();
-    const isIntersecting = vue.ref(false);
+    const isIntersecting = vue.shallowRef(false);
     if (SUPPORTS_INTERSECTION) {
       const observer = new IntersectionObserver(entries => {
         callback?.(entries, observer);
@@ -5249,34 +5256,6 @@
     }
   });
 
-  const makeVToolbarItemsProps = propsFactory({
-    ...makeComponentProps(),
-    ...makeVariantProps({
-      variant: 'text'
-    })
-  }, 'v-toolbar-items');
-  const VToolbarItems = genericComponent()({
-    name: 'VToolbarItems',
-    props: makeVToolbarItemsProps(),
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      provideDefaults({
-        VBtn: {
-          color: vue.toRef(props, 'color'),
-          height: 'inherit',
-          variant: vue.toRef(props, 'variant')
-        }
-      });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-toolbar-items', props.class],
-        "style": props.style
-      }, [slots.default?.()]));
-      return {};
-    }
-  });
-
   // Types
 
   const VAppBarTitle = genericComponent()({
@@ -5409,7 +5388,6 @@
       return () => {
         const hasPrepend = !!(slots.prepend || icon.value);
         const hasTitle = !!(slots.title || props.title);
-        const hasText = !!(props.text || slots.text);
         const hasClose = !!(slots.close || props.closable);
         return isActive.value && vue.createVNode(props.tag, {
           "class": ['v-alert', props.border && {
@@ -5449,7 +5427,7 @@
             "key": "title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && vue.createVNode("div", {
+          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createVNode("div", {
             "key": "append",
             "class": "v-alert__append"
           }, [slots.append()]), hasClose && vue.createVNode("div", {
@@ -5893,7 +5871,7 @@
     }
   });
 
-  // Utilities
+  // Composables
 
   // Types
 
@@ -5915,7 +5893,7 @@
     const model = useProxiedModel(props, 'modelValue');
     const isDisabled = vue.computed(() => props.disabled);
     const isReadonly = vue.computed(() => props.readonly);
-    const isValidating = vue.ref(false);
+    const isValidating = vue.shallowRef(false);
     const items = vue.ref([]);
     const errors = vue.ref([]);
     async function validate() {
@@ -6054,7 +6032,7 @@
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
     const form = useForm();
     const internalErrorMessages = vue.ref([]);
-    const isPristine = vue.ref(true);
+    const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
     const isDisabled = vue.computed(() => !!(props.disabled || form?.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form?.isReadonly.value));
@@ -6066,7 +6044,7 @@
       if (!props.rules.length) return true;
       return isPristine.value ? null : true;
     });
-    const isValidating = vue.ref(false);
+    const isValidating = vue.shallowRef(false);
     const validationClasses = vue.computed(() => {
       return {
         [`${name}--error`]: isValid.value === false,
@@ -6764,8 +6742,8 @@
       } = useSelectionControl(props);
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
-      const isFocused = vue.ref(false);
-      const isFocusVisible = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
+      const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
       group?.onForceUpdate(() => {
         if (input.value) {
@@ -7382,11 +7360,11 @@
   const ListKey = Symbol.for('vuetify:list');
   function createList() {
     const parent = vue.inject(ListKey, {
-      hasPrepend: vue.ref(false),
+      hasPrepend: vue.shallowRef(false),
       updateHasPrepend: () => null
     });
     const data = {
-      hasPrepend: vue.ref(false),
+      hasPrepend: vue.shallowRef(false),
       updateHasPrepend: value => {
         if (value) data.hasPrepend.value = value;
       }
@@ -7653,11 +7631,13 @@
     return strategy;
   };
 
+  // Composables
+
   // Types
 
   const VNestedSymbol = Symbol.for('vuetify:nested');
   const emptyNested = {
-    id: vue.ref(),
+    id: vue.shallowRef(),
     root: {
       register: () => null,
       unregister: () => null,
@@ -7726,7 +7706,7 @@
     }
     const vm = getCurrentInstance('nested');
     const nested = {
-      id: vue.ref(),
+      id: vue.shallowRef(),
       root: {
         opened,
         selected,
@@ -8506,7 +8486,7 @@
           variant: vue.toRef(props, 'variant')
         }
       });
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       const contentRef = vue.ref();
       function onFocusin(e) {
         isFocused.value = true;
@@ -8903,7 +8883,7 @@
     eager: Boolean
   }, 'lazy');
   function useLazy(props, active) {
-    const isBooted = vue.ref(false);
+    const isBooted = vue.shallowRef(false);
     const hasContent = vue.computed(() => isBooted.value || props.eager || active.value);
     vue.watch(active, () => isBooted.value = true);
     function onAfterLeave() {
@@ -9063,7 +9043,7 @@
       Object.assign(contentStyles.value, {
         position: 'fixed',
         top: 0,
-        left: 0
+        [data.isRtl.value ? 'right' : 'left']: 0
       });
     }
     const {
@@ -9565,10 +9545,10 @@
       thresholds,
       mobileBreakpoint
     } = parseDisplayOptions(options);
-    const height = vue.ref(getClientHeight(ssr));
+    const height = vue.shallowRef(getClientHeight(ssr));
     const platform = vue.shallowRef(getPlatform(ssr));
     const state = vue.reactive({});
-    const width = vue.ref(getClientWidth(ssr));
+    const width = vue.shallowRef(getClientWidth(ssr));
     function updateSize() {
       height.value = getClientHeight();
       width.value = getClientWidth();
@@ -9628,20 +9608,20 @@
     return display;
   }
 
-  // Utilities
+  // Composables
   function useHydration() {
-    if (!IN_BROWSER) return vue.ref(false);
+    if (!IN_BROWSER) return vue.shallowRef(false);
     const {
       ssr
     } = useDisplay();
     if (ssr) {
-      const isMounted = vue.ref(false);
+      const isMounted = vue.shallowRef(false);
       vue.onMounted(() => {
         isMounted.value = true;
       });
       return isMounted;
     } else {
-      return vue.ref(true);
+      return vue.shallowRef(true);
     }
   }
 
@@ -9655,6 +9635,8 @@
     };
   }
 
+  // Composables
+
   // Types
 
   const StackSymbol = Symbol.for('vuetify:stack');
@@ -9667,7 +9649,7 @@
       activeChildren: new Set()
     });
     vue.provide(StackSymbol, stack);
-    const _zIndex = vue.ref(+zIndex.value);
+    const _zIndex = vue.shallowRef(+zIndex.value);
     useToggleScope(isActive, () => {
       const lastZIndex = globalStack.at(-1)?.[1];
       _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
@@ -9683,7 +9665,7 @@
         parent?.activeChildren.delete(vm.uid);
       });
     });
-    const globalTop = vue.ref(true);
+    const globalTop = vue.shallowRef(true);
     if (createStackEntry) {
       vue.watchEffect(() => {
         const _isTop = globalStack.at(-1)?.[0] === vm.uid;
@@ -10099,7 +10081,7 @@
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      const openChildren = vue.ref(0);
+      const openChildren = vue.shallowRef(0);
       vue.provide(VMenuSymbol, {
         register() {
           ++openChildren.value;
@@ -10242,7 +10224,7 @@
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       let keyboardLookupPrefix = '';
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
@@ -10618,8 +10600,8 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
-      const isPristine = vue.ref(true);
+      const isFocused = vue.shallowRef(false);
+      const isPristine = vue.shallowRef(true);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -10629,7 +10611,7 @@
           _menu.value = v;
         }
       });
-      const selectionIndex = vue.ref(-1);
+      const selectionIndex = vue.shallowRef(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
@@ -10740,7 +10722,7 @@
       function onFocusin(e) {
         isFocused.value = true;
       }
-      const isSelecting = vue.ref(false);
+      const isSelecting = vue.shallowRef(false);
       function select(item) {
         if (props.multiple) {
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -11873,14 +11855,14 @@
       const group = useGroup(props, VWindowGroupSymbol);
       const rootRef = vue.ref();
       const isRtlReverse = vue.computed(() => isRtl.value ? !props.reverse : props.reverse);
-      const isReversed = vue.ref(false);
+      const isReversed = vue.shallowRef(false);
       const transition = vue.computed(() => {
         const axis = props.direction === 'vertical' ? 'y' : 'x';
         const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
         const direction = reverse ? '-reverse' : '';
         return `v-window-${axis}${direction}-transition`;
       });
-      const transitionCount = vue.ref(0);
+      const transitionCount = vue.shallowRef(0);
       const transitionHeight = vue.ref(undefined);
       const activeIndex = vue.computed(() => {
         return group.items.value.findIndex(item => group.selected.value.includes(item.id));
@@ -12134,8 +12116,8 @@
         isBooted
       } = useSsrBoot();
       if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-      const isTransitioning = vue.ref(false);
-      const hasTransition = vue.computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+      const isTransitioning = vue.shallowRef(false);
+      const hasTransition = vue.computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
       function onAfterTransition() {
         if (!isTransitioning.value || !window) {
           return;
@@ -12325,8 +12307,8 @@
       let {
         emit
       } = _ref;
-      const isInteracting = vue.ref(false);
-      const isOutsideUpdate = vue.ref(false);
+      const isInteracting = vue.shallowRef(false);
+      const isOutsideUpdate = vue.shallowRef(false);
       const dotPosition = vue.ref({
         x: 0,
         y: 0
@@ -12344,8 +12326,8 @@
         };
       });
       const canvasRef = vue.ref();
-      const canvasWidth = vue.ref(parseFloat(props.width));
-      const canvasHeight = vue.ref(parseFloat(props.height));
+      const canvasWidth = vue.shallowRef(parseFloat(props.width));
+      const canvasHeight = vue.shallowRef(parseFloat(props.height));
       const {
         resizeRef
       } = useResizeObserver(entries => {
@@ -12877,8 +12859,8 @@
     const thumbColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
     const trackColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
     const trackFillColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
-    const mousePressed = vue.ref(false);
-    const startOffset = vue.ref(0);
+    const mousePressed = vue.shallowRef(false);
+    const startOffset = vue.shallowRef(0);
     const trackContainerRef = vue.ref();
     const activeThumbRef = vue.ref();
     function parseMouseMove(e) {
@@ -14056,8 +14038,8 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
-      const isPristine = vue.ref(true);
+      const isFocused = vue.shallowRef(false);
+      const isPristine = vue.shallowRef(true);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14067,7 +14049,7 @@
           _menu.value = v;
         }
       });
-      const selectionIndex = vue.ref(-1);
+      const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
@@ -14084,7 +14066,7 @@
         return props.multiple ? transformed : transformed[0] ?? null;
       });
       const form = useForm();
-      const _search = vue.ref(!props.multiple ? model.value[0]?.title ?? '' : '');
+      const _search = vue.shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
       const search = vue.computed({
         get: () => {
           return _search.value;
@@ -14975,7 +14957,7 @@
       const {
         roundedClasses
       } = useRounded(props);
-      const autoHeight = vue.ref(32);
+      const autoHeight = vue.shallowRef(32);
       const {
         resizeRef
       } = useResizeObserver(entries => {
@@ -15633,14 +15615,18 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
   function useSticky(_ref) {
     let {
       rootEl,
       isSticky,
       layoutItemStyles
     } = _ref;
-    const isStuck = vue.ref(false);
-    const stuckPosition = vue.ref(0);
+    const isStuck = vue.shallowRef(false);
+    const stuckPosition = vue.shallowRef(0);
     const stickyStyles = vue.computed(() => {
       const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
       return [isSticky.value ? {
@@ -15840,9 +15826,9 @@
       getVelocity
     } = useVelocity();
     let maybeDragging = false;
-    const isDragging = vue.ref(false);
-    const dragProgress = vue.ref(0);
-    const offset = vue.ref(0);
+    const isDragging = vue.shallowRef(false);
+    const dragProgress = vue.shallowRef(0);
+    const offset = vue.shallowRef(0);
     let start;
     function getOffset(pos, active) {
       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);
@@ -16023,7 +16009,7 @@
         ssrBootStyles
       } = useSsrBoot();
       const rootEl = vue.ref();
-      const isHovering = vue.ref(false);
+      const isHovering = vue.shallowRef(false);
       const width = vue.computed(() => {
         return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
       });
@@ -16291,7 +16277,7 @@
       const {
         width
       } = useDisplay();
-      const maxButtons = vue.ref(-1);
+      const maxButtons = vue.shallowRef(-1);
       provideDefaults(undefined, {
         scoped: true
       });
@@ -16967,7 +16953,7 @@
       const normalizedValue = vue.computed(() => clamp(parseFloat(rating.value), 0, +props.length));
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
-      const hoverIndex = vue.ref(-1);
+      const hoverIndex = vue.shallowRef(-1);
       const itemState = vue.computed(() => increments.value.map(value => {
         const isHovering = props.hover && hoverIndex.value > -1;
         const isFilled = normalizedValue.value >= value;
@@ -17186,10 +17172,10 @@
         mobile
       } = useDisplay();
       const group = useGroup(props, props.symbol);
-      const isOverflowing = vue.ref(false);
-      const scrollOffset = vue.ref(0);
-      const containerSize = vue.ref(0);
-      const contentSize = vue.ref(0);
+      const isOverflowing = vue.shallowRef(false);
+      const scrollOffset = vue.shallowRef(0);
+      const containerSize = vue.shallowRef(0);
+      const contentSize = vue.shallowRef(0);
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
       const {
         resizeRef: containerRef,
@@ -17245,7 +17231,7 @@
           });
         });
       }
-      const disableTransition = vue.ref(false);
+      const disableTransition = vue.shallowRef(false);
       let startTouch = 0;
       let startOffset = 0;
       function onTouchstart(e) {
@@ -17274,7 +17260,7 @@
         if (!containerRef.value) return;
         containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
       }
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       function onFocusin(e) {
         isFocused.value = true;
         if (!isOverflowing.value || !contentRef.value) return;
@@ -17760,7 +17746,7 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.ref('top'),
+        position: vue.shallowRef('top'),
         layoutSize: height,
         elementSize: height,
         active: vue.computed(() => true),
@@ -17778,6 +17764,8 @@
 
   const VTabsSymbol = Symbol.for('vuetify:v-tabs');
 
+  // Types
+
   const makeVTabProps = propsFactory({
     fixed: Boolean,
     sliderColor: String,
@@ -17804,7 +17792,7 @@
         textColorStyles: sliderColorStyles
       } = useTextColor(props, 'sliderColor');
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
-      const isSelected = vue.ref(false);
+      const isSelected = vue.shallowRef(false);
       const rootEl = vue.ref();
       const sliderEl = vue.ref();
       function updateSlider(_ref2) {
@@ -18069,7 +18057,7 @@
       }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
-      const controlHeight = vue.ref('');
+      const controlHeight = vue.shallowRef('');
       const textareaRef = vue.ref();
       const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
@@ -18466,7 +18454,7 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      const dotSize = vue.ref(0);
+      const dotSize = vue.shallowRef(0);
       const dotRef = vue.ref();
       vue.watch(dotRef, newValue => {
         if (!newValue) return;
@@ -18504,6 +18492,34 @@
     }
   });
 
+  const makeVToolbarItemsProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'v-toolbar-items');
+  const VToolbarItems = genericComponent()({
+    name: 'VToolbarItems',
+    props: makeVToolbarItemsProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      provideDefaults({
+        VBtn: {
+          color: vue.toRef(props, 'color'),
+          height: 'inherit',
+          variant: vue.toRef(props, 'variant')
+        }
+      });
+      useRender(() => vue.createVNode("div", {
+        "class": ['v-toolbar-items', props.class],
+        "style": props.style
+      }, [slots.default?.()]));
+      return {};
+    }
+  });
+
   // Types
 
   const makeVTooltipProps = propsFactory({
@@ -18660,8 +18676,8 @@
       let {
         slots
       } = _ref;
-      const first = vue.ref(0);
-      const baseItemHeight = vue.ref(props.itemHeight);
+      const first = vue.shallowRef(0);
+      const baseItemHeight = vue.shallowRef(props.itemHeight);
       const itemHeight = vue.computed({
         get: () => parseInt(baseItemHeight.value ?? 0, 10),
         set(val) {
@@ -20156,7 +20172,8 @@
         return vue.createVNode(VTable, vue.mergeProps({
           "class": ['v-data-table', {
             'v-data-table--show-select': props.showSelect
-          }]
+          }, props.class],
+          "style": props.style
         }, tableProps), {
           top: slots.top,
           default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
@@ -20192,11 +20209,11 @@
 
   // TODO: Replace this with composable from v-virtual-scroll
   function useVirtual(props, items) {
-    const startIndex = vue.ref(0);
+    const startIndex = vue.shallowRef(0);
     const itemHeight = vue.computed(() => parseInt(props.itemHeight, 10));
     const visibleItems = vue.computed(() => parseInt(props.visibleItems, 10));
     const containerRef = vue.ref();
-    const isScrolling = vue.ref(false);
+    const isScrolling = vue.shallowRef(false);
     function calculateOffset(index) {
       return index * itemHeight.value;
     }
@@ -20335,8 +20352,8 @@
       });
       useOptions({
         sortBy,
-        page: vue.ref(1),
-        itemsPerPage: vue.ref(-1),
+        page: vue.shallowRef(1),
+        itemsPerPage: vue.shallowRef(-1),
         groupBy,
         search
       });
@@ -20351,10 +20368,10 @@
         const [dataTableRowsProps] = VDataTableRows.filterProps(props);
         const [tableProps] = VTable.filterProps(props);
         return vue.createVNode(VTable, vue.mergeProps({
-          "class": "v-data-table",
-          "style": {
+          "class": ['v-data-table', props.class],
+          "style": [{
             '--v-table-row-height': convertToUnit(itemHeight.value)
-          }
+          }, props.style]
         }, tableProps), {
           top: slots.top,
           wrapper: () => vue.createVNode("div", {
@@ -20500,7 +20517,8 @@
         return vue.createVNode(VTable, vue.mergeProps({
           "class": ['v-data-table', {
             'v-data-table--loading': props.loading
-          }]
+          }, props.class],
+          "style": props.style
         }, tableProps), {
           top: slots.top,
           default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
@@ -21636,7 +21654,7 @@
       date
     };
   }
-  const version$1 = "3.2.3";
+  const version$1 = "3.2.4";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21648,7 +21666,7 @@
     }
   }
 
-  const version = "3.2.3";
+  const version = "3.2.4";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};