vuetify 3.2.3 → 3.2.4

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.3
+* Vuetify v3.2.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1288,7 +1288,7 @@ function useLayoutItem(options) {
   provide(VuetifyLayoutItemKey, {
     id
   });
-  const isKeptAlive = ref(false);
+  const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
   const {
@@ -1419,7 +1419,7 @@ function createLayout(props) {
     return items.value.find(item => item.id === id);
   };
   const rootVm = getCurrentInstance('createLayout');
-  const isMounted = ref(false);
+  const isMounted = shallowRef(false);
   onMounted(() => {
     isMounted.value = true;
   });
@@ -2013,6 +2013,10 @@ var en = {
   }
 };
 
+// Composables
+
+// Types
+
 const LANG_PREFIX = '$vuetify.';
 const replace = (str, params) => {
   return str.replace(/\{(\d+)\}/g, (match, index) => {
@@ -2085,8 +2089,8 @@ function createProvideFunction(state) {
   };
 }
 function createVuetifyAdapter(options) {
-  const current = ref(options?.locale ?? 'en');
-  const fallback = ref(options?.fallback ?? 'en');
+  const current = shallowRef(options?.locale ?? 'en');
+  const fallback = shallowRef(options?.fallback ?? 'en');
   const messages = ref({
     en,
     ...options?.messages
@@ -2750,6 +2754,7 @@ const MaybeTransition = (props, _ref) => {
   } = _ref;
   const {
     transition,
+    disabled,
     ...rest
   } = props;
   const {
@@ -2757,8 +2762,10 @@ const MaybeTransition = (props, _ref) => {
     ...customProps
   } = typeof transition === 'object' ? transition : {};
   return h(component, mergeProps(typeof transition === 'string' ? {
-    name: transition
-  } : customProps, rest), slots);
+    name: disabled ? '' : transition
+  } : customProps, rest, {
+    disabled
+  }), slots);
 };
 
 // Types
@@ -2806,11 +2813,11 @@ const VImg = genericComponent()({
       emit,
       slots
     } = _ref;
-    const currentSrc = ref(''); // Set from srcset
+    const currentSrc = shallowRef(''); // Set from srcset
     const image = ref();
-    const state = ref(props.eager ? 'loading' : 'idle');
-    const naturalWidth = ref();
-    const naturalHeight = ref();
+    const state = shallowRef(props.eager ? 'loading' : 'idle');
+    const naturalWidth = shallowRef();
+    const naturalHeight = shallowRef();
     const normalisedSrc = computed(() => {
       return props.src && typeof props.src === 'object' ? {
         src: props.src.src,
@@ -2964,7 +2971,7 @@ const VImg = genericComponent()({
         }
       }, null);
     };
-    const isBooted = ref(false);
+    const isBooted = shallowRef(false);
     {
       const stop = watch(aspectRatio, val => {
         if (val) {
@@ -3250,7 +3257,7 @@ const VToolbar = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const isExtended = ref(!!(props.extended || slots.extension?.()));
+    const isExtended = shallowRef(!!(props.extended || slots.extension?.()));
     const contentHeight = 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 = 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({
@@ -3357,11 +3364,11 @@ function useScroll(props) {
   } = args;
   let previousScroll = 0;
   const target = ref(null);
-  const currentScroll = ref(0);
-  const savedScroll = ref(0);
-  const currentThreshold = ref(0);
-  const isScrollActive = ref(false);
-  const isScrollingUp = ref(false);
+  const currentScroll = shallowRef(0);
+  const savedScroll = shallowRef(0);
+  const currentThreshold = shallowRef(0);
+  const isScrollActive = shallowRef(false);
+  const isScrollingUp = shallowRef(false);
   const scrollThreshold = computed(() => {
     return Number(props.scrollThreshold);
   });
@@ -3431,7 +3438,7 @@ function useScroll(props) {
 
 // Composables
 function useSsrBoot() {
-  const isBooted = ref(false);
+  const isBooted = shallowRef(false);
   onMounted(() => {
     window.requestAnimationFrame(() => {
       isBooted.value = true;
@@ -3542,7 +3549,7 @@ const VAppBar = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'location'),
       layoutSize: height,
-      elementSize: ref(undefined),
+      elementSize: shallowRef(undefined),
       active: isActive,
       absolute: toRef(props, 'absolute')
     });
@@ -4232,7 +4239,7 @@ const VIcon = genericComponent()({
 // Utilities
 function useIntersectionObserver(callback, options) {
   const intersectionRef = ref();
-  const isIntersecting = ref(false);
+  const isIntersecting = shallowRef(false);
   if (SUPPORTS_INTERSECTION) {
     const observer = new IntersectionObserver(entries => {
       callback?.(entries, observer);
@@ -5245,34 +5252,6 @@ const VAppBarNavIcon = genericComponent()({
   }
 });
 
-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: toRef(props, 'color'),
-        height: 'inherit',
-        variant: toRef(props, 'variant')
-      }
-    });
-    useRender(() => createVNode("div", {
-      "class": ['v-toolbar-items', props.class],
-      "style": props.style
-    }, [slots.default?.()]));
-    return {};
-  }
-});
-
 // Types
 
 const VAppBarTitle = genericComponent()({
@@ -5405,7 +5384,6 @@ const VAlert = genericComponent()({
     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 && createVNode(props.tag, {
         "class": ['v-alert', props.border && {
@@ -5445,7 +5423,7 @@ const VAlert = genericComponent()({
           "key": "title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && createVNode("div", {
+        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createVNode("div", {
           "key": "append",
           "class": "v-alert__append"
         }, [slots.append()]), hasClose && createVNode("div", {
@@ -5889,7 +5867,7 @@ const VMessages = genericComponent()({
   }
 });
 
-// Utilities
+// Composables
 
 // Types
 
@@ -5911,7 +5889,7 @@ function createForm(props) {
   const model = useProxiedModel(props, 'modelValue');
   const isDisabled = computed(() => props.disabled);
   const isReadonly = computed(() => props.readonly);
-  const isValidating = ref(false);
+  const isValidating = shallowRef(false);
   const items = ref([]);
   const errors = ref([]);
   async function validate() {
@@ -6050,7 +6028,7 @@ function useValidation(props) {
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
   const form = useForm();
   const internalErrorMessages = ref([]);
-  const isPristine = ref(true);
+  const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
   const isDisabled = computed(() => !!(props.disabled || form?.isDisabled.value));
   const isReadonly = computed(() => !!(props.readonly || form?.isReadonly.value));
@@ -6062,7 +6040,7 @@ function useValidation(props) {
     if (!props.rules.length) return true;
     return isPristine.value ? null : true;
   });
-  const isValidating = ref(false);
+  const isValidating = shallowRef(false);
   const validationClasses = computed(() => {
     return {
       [`${name}--error`]: isValid.value === false,
@@ -6760,8 +6738,8 @@ const VSelectionControl = genericComponent()({
     } = useSelectionControl(props);
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
-    const isFocused = ref(false);
-    const isFocusVisible = ref(false);
+    const isFocused = shallowRef(false);
+    const isFocusVisible = shallowRef(false);
     const input = ref();
     group?.onForceUpdate(() => {
       if (input.value) {
@@ -7378,11 +7356,11 @@ const VDivider = genericComponent()({
 const ListKey = Symbol.for('vuetify:list');
 function createList() {
   const parent = inject$1(ListKey, {
-    hasPrepend: ref(false),
+    hasPrepend: shallowRef(false),
     updateHasPrepend: () => null
   });
   const data = {
-    hasPrepend: ref(false),
+    hasPrepend: shallowRef(false),
     updateHasPrepend: value => {
       if (value) data.hasPrepend.value = value;
     }
@@ -7649,11 +7627,13 @@ const classicSelectStrategy = mandatory => {
   return strategy;
 };
 
+// Composables
+
 // Types
 
 const VNestedSymbol = Symbol.for('vuetify:nested');
 const emptyNested = {
-  id: ref(),
+  id: shallowRef(),
   root: {
     register: () => null,
     unregister: () => null,
@@ -7722,7 +7702,7 @@ const useNested = props => {
   }
   const vm = getCurrentInstance('nested');
   const nested = {
-    id: ref(),
+    id: shallowRef(),
     root: {
       opened,
       selected,
@@ -8502,7 +8482,7 @@ const VList = genericComponent()({
         variant: toRef(props, 'variant')
       }
     });
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     const contentRef = ref();
     function onFocusin(e) {
       isFocused.value = true;
@@ -8899,7 +8879,7 @@ const makeLazyProps = propsFactory({
   eager: Boolean
 }, 'lazy');
 function useLazy(props, active) {
-  const isBooted = ref(false);
+  const isBooted = shallowRef(false);
   const hasContent = computed(() => isBooted.value || props.eager || active.value);
   watch(active, () => isBooted.value = true);
   function onAfterLeave() {
@@ -9059,7 +9039,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     Object.assign(contentStyles.value, {
       position: 'fixed',
       top: 0,
-      left: 0
+      [data.isRtl.value ? 'right' : 'left']: 0
     });
   }
   const {
@@ -9561,10 +9541,10 @@ function createDisplay(options, ssr) {
     thresholds,
     mobileBreakpoint
   } = parseDisplayOptions(options);
-  const height = ref(getClientHeight(ssr));
+  const height = shallowRef(getClientHeight(ssr));
   const platform = shallowRef(getPlatform(ssr));
   const state = reactive({});
-  const width = ref(getClientWidth(ssr));
+  const width = shallowRef(getClientWidth(ssr));
   function updateSize() {
     height.value = getClientHeight();
     width.value = getClientWidth();
@@ -9624,20 +9604,20 @@ function useDisplay() {
   return display;
 }
 
-// Utilities
+// Composables
 function useHydration() {
-  if (!IN_BROWSER) return ref(false);
+  if (!IN_BROWSER) return shallowRef(false);
   const {
     ssr
   } = useDisplay();
   if (ssr) {
-    const isMounted = ref(false);
+    const isMounted = shallowRef(false);
     onMounted(() => {
       isMounted.value = true;
     });
     return isMounted;
   } else {
-    return ref(true);
+    return shallowRef(true);
   }
 }
 
@@ -9651,6 +9631,8 @@ function useScopeId() {
   };
 }
 
+// Composables
+
 // Types
 
 const StackSymbol = Symbol.for('vuetify:stack');
@@ -9663,7 +9645,7 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     activeChildren: new Set()
   });
   provide(StackSymbol, stack);
-  const _zIndex = ref(+zIndex.value);
+  const _zIndex = shallowRef(+zIndex.value);
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1];
     _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
@@ -9679,7 +9661,7 @@ function useStack(isActive, zIndex, disableGlobalStack) {
       parent?.activeChildren.delete(vm.uid);
     });
   });
-  const globalTop = ref(true);
+  const globalTop = shallowRef(true);
   if (createStackEntry) {
     watchEffect(() => {
       const _isTop = globalStack.at(-1)?.[0] === vm.uid;
@@ -10095,7 +10077,7 @@ const VMenu = genericComponent()({
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
-    const openChildren = ref(0);
+    const openChildren = shallowRef(0);
     provide(VMenuSymbol, {
       register() {
         ++openChildren.value;
@@ -10238,7 +10220,7 @@ const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     let keyboardLookupPrefix = '';
     let keyboardLookupLastTime;
     const displayItems = computed(() => {
@@ -10614,8 +10596,8 @@ const VAutocomplete = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const isFocused = ref(false);
-    const isPristine = ref(true);
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -10625,7 +10607,7 @@ const VAutocomplete = genericComponent()({
         _menu.value = v;
       }
     });
-    const selectionIndex = ref(-1);
+    const selectionIndex = shallowRef(-1);
     const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
@@ -10736,7 +10718,7 @@ const VAutocomplete = genericComponent()({
     function onFocusin(e) {
       isFocused.value = true;
     }
-    const isSelecting = ref(false);
+    const isSelecting = shallowRef(false);
     function select(item) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -11869,14 +11851,14 @@ const VWindow = genericComponent()({
     const group = useGroup(props, VWindowGroupSymbol);
     const rootRef = ref();
     const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
-    const isReversed = ref(false);
+    const isReversed = shallowRef(false);
     const transition = 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 = ref(0);
+    const transitionCount = shallowRef(0);
     const transitionHeight = ref(undefined);
     const activeIndex = computed(() => {
       return group.items.value.findIndex(item => group.selected.value.includes(item.id));
@@ -12130,8 +12112,8 @@ const VWindowItem = genericComponent()({
       isBooted
     } = useSsrBoot();
     if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-    const isTransitioning = ref(false);
-    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+    const isTransitioning = shallowRef(false);
+    const hasTransition = computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
     function onAfterTransition() {
       if (!isTransitioning.value || !window) {
         return;
@@ -12321,8 +12303,8 @@ const VColorPickerCanvas = defineComponent({
     let {
       emit
     } = _ref;
-    const isInteracting = ref(false);
-    const isOutsideUpdate = ref(false);
+    const isInteracting = shallowRef(false);
+    const isOutsideUpdate = shallowRef(false);
     const dotPosition = ref({
       x: 0,
       y: 0
@@ -12340,8 +12322,8 @@ const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
-    const canvasWidth = ref(parseFloat(props.width));
-    const canvasHeight = ref(parseFloat(props.height));
+    const canvasWidth = shallowRef(parseFloat(props.width));
+    const canvasHeight = shallowRef(parseFloat(props.height));
     const {
       resizeRef
     } = useResizeObserver(entries => {
@@ -12873,8 +12855,8 @@ const useSlider = _ref => {
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
-  const mousePressed = ref(false);
-  const startOffset = ref(0);
+  const mousePressed = shallowRef(false);
+  const startOffset = shallowRef(0);
   const trackContainerRef = ref();
   const activeThumbRef = ref();
   function parseMouseMove(e) {
@@ -14052,8 +14034,8 @@ const VCombobox = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const isFocused = ref(false);
-    const isPristine = ref(true);
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -14063,7 +14045,7 @@ const VCombobox = genericComponent()({
         _menu.value = v;
       }
     });
-    const selectionIndex = ref(-1);
+    const selectionIndex = shallowRef(-1);
     let cleared = false;
     const color = computed(() => vTextFieldRef.value?.color);
     const {
@@ -14080,7 +14062,7 @@ const VCombobox = genericComponent()({
       return props.multiple ? transformed : transformed[0] ?? null;
     });
     const form = useForm();
-    const _search = ref(!props.multiple ? model.value[0]?.title ?? '' : '');
+    const _search = shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
     const search = computed({
       get: () => {
         return _search.value;
@@ -14971,7 +14953,7 @@ const VFooter = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    const autoHeight = ref(32);
+    const autoHeight = shallowRef(32);
     const {
       resizeRef
     } = useResizeObserver(entries => {
@@ -15629,14 +15611,18 @@ const VMain = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
 function useSticky(_ref) {
   let {
     rootEl,
     isSticky,
     layoutItemStyles
   } = _ref;
-  const isStuck = ref(false);
-  const stuckPosition = ref(0);
+  const isStuck = shallowRef(false);
+  const stuckPosition = shallowRef(0);
   const stickyStyles = computed(() => {
     const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
     return [isSticky.value ? {
@@ -15836,9 +15822,9 @@ function useTouch(_ref) {
     getVelocity
   } = useVelocity();
   let maybeDragging = false;
-  const isDragging = ref(false);
-  const dragProgress = ref(0);
-  const offset = ref(0);
+  const isDragging = shallowRef(false);
+  const dragProgress = shallowRef(0);
+  const offset = 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);
@@ -16019,7 +16005,7 @@ const VNavigationDrawer = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const rootEl = ref();
-    const isHovering = ref(false);
+    const isHovering = shallowRef(false);
     const width = computed(() => {
       return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
     });
@@ -16287,7 +16273,7 @@ const VPagination = genericComponent()({
     const {
       width
     } = useDisplay();
-    const maxButtons = ref(-1);
+    const maxButtons = shallowRef(-1);
     provideDefaults(undefined, {
       scoped: true
     });
@@ -16963,7 +16949,7 @@ const VRating = genericComponent()({
     const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length));
     const range = computed(() => createRange(Number(props.length), 1));
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
-    const hoverIndex = ref(-1);
+    const hoverIndex = shallowRef(-1);
     const itemState = computed(() => increments.value.map(value => {
       const isHovering = props.hover && hoverIndex.value > -1;
       const isFilled = normalizedValue.value >= value;
@@ -17182,10 +17168,10 @@ const VSlideGroup = genericComponent()({
       mobile
     } = useDisplay();
     const group = useGroup(props, props.symbol);
-    const isOverflowing = ref(false);
-    const scrollOffset = ref(0);
-    const containerSize = ref(0);
-    const contentSize = ref(0);
+    const isOverflowing = shallowRef(false);
+    const scrollOffset = shallowRef(0);
+    const containerSize = shallowRef(0);
+    const contentSize = shallowRef(0);
     const isHorizontal = computed(() => props.direction === 'horizontal');
     const {
       resizeRef: containerRef,
@@ -17241,7 +17227,7 @@ const VSlideGroup = genericComponent()({
         });
       });
     }
-    const disableTransition = ref(false);
+    const disableTransition = shallowRef(false);
     let startTouch = 0;
     let startOffset = 0;
     function onTouchstart(e) {
@@ -17270,7 +17256,7 @@ const VSlideGroup = genericComponent()({
       if (!containerRef.value) return;
       containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
     }
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     function onFocusin(e) {
       isFocused.value = true;
       if (!isOverflowing.value || !contentRef.value) return;
@@ -17756,7 +17742,7 @@ const VSystemBar = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: ref('top'),
+      position: shallowRef('top'),
       layoutSize: height,
       elementSize: height,
       active: computed(() => true),
@@ -17774,6 +17760,8 @@ const VSystemBar = genericComponent()({
 
 const VTabsSymbol = Symbol.for('vuetify:v-tabs');
 
+// Types
+
 const makeVTabProps = propsFactory({
   fixed: Boolean,
   sliderColor: String,
@@ -17800,7 +17788,7 @@ const VTab = genericComponent()({
       textColorStyles: sliderColorStyles
     } = useTextColor(props, 'sliderColor');
     const isHorizontal = computed(() => props.direction === 'horizontal');
-    const isSelected = ref(false);
+    const isSelected = shallowRef(false);
     const rootEl = ref();
     const sliderEl = ref();
     function updateSlider(_ref2) {
@@ -18065,7 +18053,7 @@ const VTextarea = genericComponent()({
     }
     const vInputRef = ref();
     const vFieldRef = ref();
-    const controlHeight = ref('');
+    const controlHeight = shallowRef('');
     const textareaRef = ref();
     const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
@@ -18462,7 +18450,7 @@ const VTimelineItem = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    const dotSize = ref(0);
+    const dotSize = shallowRef(0);
     const dotRef = ref();
     watch(dotRef, newValue => {
       if (!newValue) return;
@@ -18500,6 +18488,34 @@ const VTimelineItem = genericComponent()({
   }
 });
 
+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: toRef(props, 'color'),
+        height: 'inherit',
+        variant: toRef(props, 'variant')
+      }
+    });
+    useRender(() => createVNode("div", {
+      "class": ['v-toolbar-items', props.class],
+      "style": props.style
+    }, [slots.default?.()]));
+    return {};
+  }
+});
+
 // Types
 
 const makeVTooltipProps = propsFactory({
@@ -18656,8 +18672,8 @@ const VVirtualScroll = genericComponent()({
     let {
       slots
     } = _ref;
-    const first = ref(0);
-    const baseItemHeight = ref(props.itemHeight);
+    const first = shallowRef(0);
+    const baseItemHeight = shallowRef(props.itemHeight);
     const itemHeight = computed({
       get: () => parseInt(baseItemHeight.value ?? 0, 10),
       set(val) {
@@ -20152,7 +20168,8 @@ const VDataTable = genericComponent()({
       return createVNode(VTable, mergeProps({
         "class": ['v-data-table', {
           'v-data-table--show-select': props.showSelect
-        }]
+        }, props.class],
+        "style": props.style
       }, tableProps), {
         top: slots.top,
         default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
@@ -20188,11 +20205,11 @@ const DOWN = 1;
 
 // TODO: Replace this with composable from v-virtual-scroll
 function useVirtual(props, items) {
-  const startIndex = ref(0);
+  const startIndex = shallowRef(0);
   const itemHeight = computed(() => parseInt(props.itemHeight, 10));
   const visibleItems = computed(() => parseInt(props.visibleItems, 10));
   const containerRef = ref();
-  const isScrolling = ref(false);
+  const isScrolling = shallowRef(false);
   function calculateOffset(index) {
     return index * itemHeight.value;
   }
@@ -20331,8 +20348,8 @@ const VDataTableVirtual = genericComponent()({
     });
     useOptions({
       sortBy,
-      page: ref(1),
-      itemsPerPage: ref(-1),
+      page: shallowRef(1),
+      itemsPerPage: shallowRef(-1),
       groupBy,
       search
     });
@@ -20347,10 +20364,10 @@ const VDataTableVirtual = genericComponent()({
       const [dataTableRowsProps] = VDataTableRows.filterProps(props);
       const [tableProps] = VTable.filterProps(props);
       return createVNode(VTable, 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: () => createVNode("div", {
@@ -20496,7 +20513,8 @@ const VDataTableServer = genericComponent()({
       return createVNode(VTable, mergeProps({
         "class": ['v-data-table', {
           'v-data-table--loading': props.loading
-        }]
+        }, props.class],
+        "style": props.style
       }, tableProps), {
         top: slots.top,
         default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
@@ -21632,7 +21650,7 @@ function createVuetify$1() {
     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
@@ -21644,7 +21662,7 @@ function inject(key) {
   }
 }
 
-const version = "3.2.3";
+const version = "3.2.4";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};