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

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.5.3-dev.2024-02-08
+* Vuetify v3.5.3-dev.2024-02-25
 * 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
@@ -539,6 +539,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'];
@@ -1603,7 +1613,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
@@ -1620,6 +1632,7 @@ function useLayoutItem(options) {
   const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
+  const layoutIsReady = nextTick();
   const {
     layoutItemStyles,
     layoutItemScrimStyles
@@ -1632,7 +1645,8 @@ function useLayoutItem(options) {
   return {
     layoutItemStyles,
     layoutRect: layout.layoutRect,
-    layoutItemScrimStyles
+    layoutItemScrimStyles,
+    layoutIsReady
   };
 }
 const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -1678,29 +1692,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) {
@@ -1726,7 +1718,7 @@ function createLayout(props) {
       })
     };
   });
-  const items = computed(() => {
+  const items = eagerComputed(() => {
     return layers.value.slice(1).map((_ref, index) => {
       let {
         id
@@ -1748,10 +1740,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 {
@@ -1787,13 +1776,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,
@@ -1826,7 +1811,8 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
-    rootZIndex
+    rootZIndex,
+    layoutIsReady
   });
   const layoutClasses = computed(() => ['v-layout', {
     'v-layout--full-height': props.fullHeight
@@ -1842,6 +1828,7 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
+    layoutIsReady,
     layoutRef: resizeRef
   };
 }
@@ -2536,7 +2523,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,
@@ -3869,9 +3858,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), () => {
@@ -3891,7 +3879,8 @@ const VAppBar = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -3919,7 +3908,7 @@ const VAppBar = genericComponent()({
         "flat": isFlat.value
       }), slots);
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -12915,9 +12904,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)),
@@ -12955,7 +12945,7 @@ const VBottomNavigation = genericComponent()({
         }, [slots.default()])]
       });
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -21526,7 +21516,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)),
@@ -21543,7 +21534,7 @@ const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return {};
+    return props.app ? layoutIsReady : {};
   }
 });
 
@@ -21966,7 +21957,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
@@ -21997,7 +21990,8 @@ const VLayoutItem = genericComponent()({
       slots
     } = _ref;
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22007,10 +22001,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;
   }
 });
 
@@ -22117,7 +22112,8 @@ const VMain = genericComponent()({
       slots
     } = _ref;
     const {
-      mainStyles
+      mainStyles,
+      layoutIsReady
     } = useLayout();
     const {
       ssrBootStyles
@@ -22132,7 +22128,7 @@ const VMain = genericComponent()({
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -22557,10 +22553,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,
@@ -22578,7 +22573,8 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutItemScrimStyles
+      layoutItemScrimStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22662,9 +22658,9 @@ const VNavigationDrawer = genericComponent()({
         }, scopeId), null)]
       })]);
     });
-    return {
+    return layoutIsReady.then(() => ({
       isStuck
-    };
+    }));
   }
 });
 
@@ -25665,7 +25661,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.3-dev.2024-02-08";
+const version$1 = "3.5.3-dev.2024-02-25";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25690,7 +25686,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.5.3-dev.2024-02-08";
+const version = "3.5.3-dev.2024-02-25";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };