@vuetify/nightly 3.5.3-dev.2024-02-08 → 3.5.3-dev.2024-02-14

package/dist/vuetify-labs.d.ts

@@ -712,6 +712,7 @@ interface LayoutItem extends Layer {
     position: Position;
 }
 declare function useLayout(): {
+    layoutIsReady: Promise<void>;
     getLayoutItem: (id: string) => LayoutItem | undefined;
     mainRect: Ref<Layer>;
     mainStyles: Ref<CSSProperties>;
@@ -806,7 +807,7 @@ declare const VApp: {
             right: number;
             id: string;
         } | undefined;
-        items: vue.ComputedRef<{
+        items: Readonly<vue.Ref<{
             size: number;
             position: "left" | "top" | "bottom" | "right";
             top: number;
@@ -814,7 +815,7 @@ declare const VApp: {
             left: number;
             right: number;
             id: string;
-        }[]>;
+        }[]>>;
         theme: ThemeInstance;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
@@ -872,7 +873,7 @@ declare const VApp: {
             right: number;
             id: string;
         } | undefined;
-        items: vue.ComputedRef<{
+        items: Readonly<vue.Ref<{
             size: number;
             position: "left" | "top" | "bottom" | "right";
             top: number;
@@ -880,7 +881,7 @@ declare const VApp: {
             left: number;
             right: number;
             id: string;
-        }[]>;
+        }[]>>;
         theme: ThemeInstance;
     }, {}, {}, {}, {
         style: vue.StyleValue;
@@ -915,7 +916,7 @@ declare const VApp: {
         right: number;
         id: string;
     } | undefined;
-    items: vue.ComputedRef<{
+    items: Readonly<vue.Ref<{
         size: number;
         position: "left" | "top" | "bottom" | "right";
         top: number;
@@ -923,7 +924,7 @@ declare const VApp: {
         left: number;
         right: number;
         id: string;
-    }[]>;
+    }[]>>;
     theme: ThemeInstance;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     style: vue.StyleValue;
@@ -1376,7 +1377,7 @@ declare const VAppBar: {
         "v-slot:extension"?: false | (() => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         'update:modelValue': (value: boolean) => boolean;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
@@ -1599,7 +1600,7 @@ declare const VAppBar: {
     "v-slot:extension"?: false | (() => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (value: boolean) => boolean;
 }, string, {
     flat: boolean;
@@ -9625,7 +9626,7 @@ declare const VBottomNavigation: {
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
-    } & {}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+    } & {}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => boolean;
     }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         absolute: boolean;
@@ -9742,7 +9743,7 @@ declare const VBottomNavigation: {
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
     bgColor?: string | undefined;
-} & {}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
+} & {}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (value: any) => boolean;
 }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue">, string, {
     absolute: boolean;
@@ -36361,7 +36362,7 @@ declare const VLayout: {
             right: number;
             id: string;
         } | undefined;
-        items: vue.ComputedRef<{
+        items: Readonly<vue.Ref<{
             size: number;
             position: "left" | "top" | "bottom" | "right";
             top: number;
@@ -36369,7 +36370,7 @@ declare const VLayout: {
             left: number;
             right: number;
             id: string;
-        }[]>;
+        }[]>>;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
         fullHeight: boolean;
@@ -36424,7 +36425,7 @@ declare const VLayout: {
             right: number;
             id: string;
         } | undefined;
-        items: vue.ComputedRef<{
+        items: Readonly<vue.Ref<{
             size: number;
             position: "left" | "top" | "bottom" | "right";
             top: number;
@@ -36432,7 +36433,7 @@ declare const VLayout: {
             left: number;
             right: number;
             id: string;
-        }[]>;
+        }[]>>;
     }, {}, {}, {}, {
         style: vue.StyleValue;
         fullHeight: boolean;
@@ -36465,7 +36466,7 @@ declare const VLayout: {
         right: number;
         id: string;
     } | undefined;
-    items: vue.ComputedRef<{
+    items: Readonly<vue.Ref<{
         size: number;
         position: "left" | "top" | "bottom" | "right";
         top: number;
@@ -36473,7 +36474,7 @@ declare const VLayout: {
         left: number;
         right: number;
         id: string;
-    }[]>;
+    }[]>>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     style: vue.StyleValue;
     fullHeight: boolean;
@@ -36520,7 +36521,7 @@ declare const VLayoutItem: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         absolute: boolean;
         order: string | number;
         position: "left" | "top" | "bottom" | "right";
@@ -36575,7 +36576,7 @@ declare const VLayoutItem: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, () => JSX.Element, {}, {}, {}, {
+    }, {}, {}, {}, {}, {
         absolute: boolean;
         order: string | number;
         style: vue.StyleValue;
@@ -36604,7 +36605,7 @@ declare const VLayoutItem: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     absolute: boolean;
     order: string | number;
     style: vue.StyleValue;
@@ -38683,7 +38684,7 @@ declare const VMain: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
         tag: string;
         scrollable: boolean;
@@ -38751,7 +38752,7 @@ declare const VMain: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     style: vue.StyleValue;
     tag: string;
     scrollable: boolean;

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.5.3-dev.2024-02-08
+* Vuetify v3.5.3-dev.2024-02-14
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, Suspense, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -545,6 +545,16 @@ function defer(timeout, cb) {
   const timeoutId = window.setTimeout(cb, timeout);
   return () => window.clearTimeout(timeoutId);
 }
+function eagerComputed(fn, options) {
+  const result = shallowRef();
+  watchEffect(() => {
+    result.value = fn();
+  }, {
+    flush: 'sync',
+    ...options
+  });
+  return readonly(result);
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -1609,7 +1619,9 @@ const makeLayoutItemProps = propsFactory({
 function useLayout() {
   const layout = inject$1(VuetifyLayoutKey);
   if (!layout) throw new Error('[Vuetify] Could not find injected layout');
+  const layoutIsReady = nextTick();
   return {
+    layoutIsReady,
     getLayoutItem: layout.getLayoutItem,
     mainRect: layout.mainRect,
     mainStyles: layout.mainStyles
@@ -1626,6 +1638,7 @@ function useLayoutItem(options) {
   const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
+  const layoutIsReady = nextTick();
   const {
     layoutItemStyles,
     layoutItemScrimStyles
@@ -1638,7 +1651,8 @@ function useLayoutItem(options) {
   return {
     layoutItemStyles,
     layoutRect: layout.layoutRect,
-    layoutItemScrimStyles
+    layoutItemScrimStyles,
+    layoutIsReady
   };
 }
 const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -1684,29 +1698,7 @@ function createLayout(props) {
     resizeRef,
     contentRect: layoutRect
   } = useResizeObserver();
-  const computedOverlaps = computed(() => {
-    const map = new Map();
-    const overlaps = props.overlaps ?? [];
-    for (const overlap of overlaps.filter(item => item.includes(':'))) {
-      const [top, bottom] = overlap.split(':');
-      if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue;
-      const topPosition = positions.get(top);
-      const bottomPosition = positions.get(bottom);
-      const topAmount = layoutSizes.get(top);
-      const bottomAmount = layoutSizes.get(bottom);
-      if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue;
-      map.set(bottom, {
-        position: topPosition.value,
-        amount: parseInt(topAmount.value, 10)
-      });
-      map.set(top, {
-        position: bottomPosition.value,
-        amount: -parseInt(bottomAmount.value, 10)
-      });
-    }
-    return map;
-  });
-  const layers = computed(() => {
+  const layers = eagerComputed(() => {
     const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b);
     const layout = [];
     for (const p of uniquePriorities) {
@@ -1732,7 +1724,7 @@ function createLayout(props) {
       })
     };
   });
-  const items = computed(() => {
+  const items = eagerComputed(() => {
     return layers.value.slice(1).map((_ref, index) => {
       let {
         id
@@ -1754,10 +1746,7 @@ function createLayout(props) {
     return items.value.find(item => item.id === id);
   };
   const rootVm = getCurrentInstance('createLayout');
-  const isMounted = shallowRef(false);
-  onMounted(() => {
-    isMounted.value = true;
-  });
+  const layoutIsReady = nextTick();
   provide(VuetifyLayoutKey, {
     register: (vm, _ref2) => {
       let {
@@ -1793,13 +1782,9 @@ function createLayout(props) {
             transition: 'none'
           })
         };
-        if (!isMounted.value) return styles;
+        if (index.value < 0) throw new Error(`Layout item "${id}" is missing`);
         const item = items.value[index.value];
         if (!item) throw new Error(`[Vuetify] Could not find layout item "${id}"`);
-        const overlap = computedOverlaps.value.get(id);
-        if (overlap) {
-          item[overlap.position] += overlap.amount;
-        }
         return {
           ...styles,
           height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : elementSize.value ? `${elementSize.value}px` : undefined,
@@ -1832,7 +1817,8 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
-    rootZIndex
+    rootZIndex,
+    layoutIsReady
   });
   const layoutClasses = computed(() => ['v-layout', {
     'v-layout--full-height': props.fullHeight
@@ -1848,6 +1834,7 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
+    layoutIsReady,
     layoutRef: resizeRef
   };
 }
@@ -2542,7 +2529,9 @@ const VApp = genericComponent()({
       "style": [props.style]
     }, [createVNode("div", {
       "class": "v-application__wrap"
-    }, [slots.default?.()])]));
+    }, [createVNode(Suspense, null, {
+      default: () => [createVNode(Fragment, null, [slots.default?.()])]
+    })])]));
     return {
       getLayoutItem,
       items,
@@ -3875,9 +3864,8 @@ const VAppBar = genericComponent()({
     const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
-      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
-      const height = vToolbarRef.value?.contentHeight ?? 0;
-      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
+      const height = Number(vToolbarRef.value?.contentHeight ?? props.height);
+      const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0);
       return height + extensionHeight;
     });
     useToggleScope(computed(() => !!props.scrollBehavior), () => {
@@ -3897,7 +3885,8 @@ const VAppBar = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -3925,7 +3914,7 @@ const VAppBar = genericComponent()({
         "flat": isFlat.value
       }), slots);
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -12921,9 +12910,10 @@ const VBottomNavigation = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const height = computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
-    const isActive = toRef(props, 'active');
+    const isActive = useProxiedModel(props, 'modelValue', props.modelValue);
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -12961,7 +12951,7 @@ const VBottomNavigation = genericComponent()({
         }, [slots.default()])]
       });
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -21532,7 +21522,8 @@ const VFooter = genericComponent()({
     });
     const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -21549,7 +21540,7 @@ const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return {};
+    return props.app ? layoutIsReady : {};
   }
 });
 
@@ -21972,7 +21963,9 @@ const VLayout = genericComponent()({
       "ref": layoutRef,
       "class": [layoutClasses.value, props.class],
       "style": [layoutStyles.value, props.style]
-    }, [slots.default?.()]));
+    }, [createVNode(Suspense, null, {
+      default: () => [createVNode(Fragment, null, [slots.default?.()])]
+    })]));
     return {
       getLayoutItem,
       items
@@ -22003,7 +21996,8 @@ const VLayoutItem = genericComponent()({
       slots
     } = _ref;
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22013,10 +22007,11 @@ const VLayoutItem = genericComponent()({
       active: toRef(props, 'modelValue'),
       absolute: toRef(props, 'absolute')
     });
-    return () => createVNode("div", {
+    useRender(() => createVNode("div", {
       "class": ['v-layout-item', props.class],
       "style": [layoutItemStyles.value, props.style]
-    }, [slots.default?.()]);
+    }, [slots.default?.()]));
+    return layoutIsReady;
   }
 });
 
@@ -22123,7 +22118,8 @@ const VMain = genericComponent()({
       slots
     } = _ref;
     const {
-      mainStyles
+      mainStyles,
+      layoutIsReady
     } = useLayout();
     const {
       ssrBootStyles
@@ -22138,7 +22134,7 @@ const VMain = genericComponent()({
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -22563,10 +22559,9 @@ const VNavigationDrawer = genericComponent()({
     watch(() => props.permanent, val => {
       if (val) isActive.value = true;
     });
-    onBeforeMount(() => {
-      if (props.modelValue != null || isTemporary.value) return;
+    if (props.modelValue == null && !isTemporary.value) {
       isActive.value = props.permanent || !mobile.value;
-    });
+    }
     const {
       isDragging,
       dragProgress,
@@ -22584,7 +22579,8 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutItemScrimStyles
+      layoutItemScrimStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22668,9 +22664,9 @@ const VNavigationDrawer = genericComponent()({
         }, scopeId), null)]
       })]);
     });
-    return {
+    return layoutIsReady.then(() => ({
       isStuck
-    };
+    }));
   }
 });
 
@@ -26223,7 +26219,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.3-dev.2024-02-08";
+const version$1 = "3.5.3-dev.2024-02-14";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26237,7 +26233,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.3-dev.2024-02-08";
+const version = "3.5.3-dev.2024-02-14";
 
 /* eslint-disable local-rules/sort-imports */