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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* 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.
 */
@@ -543,6 +543,16 @@
     const timeoutId = window.setTimeout(cb, timeout);
     return () => window.clearTimeout(timeoutId);
   }
+  function eagerComputed(fn, options) {
+    const result = vue.shallowRef();
+    vue.watchEffect(() => {
+      result.value = fn();
+    }, {
+      flush: 'sync',
+      ...options
+    });
+    return vue.readonly(result);
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -1607,7 +1617,9 @@
   function useLayout() {
     const layout = vue.inject(VuetifyLayoutKey);
     if (!layout) throw new Error('[Vuetify] Could not find injected layout');
+    const layoutIsReady = vue.nextTick();
     return {
+      layoutIsReady,
       getLayoutItem: layout.getLayoutItem,
       mainRect: layout.mainRect,
       mainStyles: layout.mainStyles
@@ -1624,6 +1636,7 @@
     const isKeptAlive = vue.shallowRef(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
+    const layoutIsReady = vue.nextTick();
     const {
       layoutItemStyles,
       layoutItemScrimStyles
@@ -1636,7 +1649,8 @@
     return {
       layoutItemStyles,
       layoutRect: layout.layoutRect,
-      layoutItemScrimStyles
+      layoutItemScrimStyles,
+      layoutIsReady
     };
   }
   const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -1682,29 +1696,7 @@
       resizeRef,
       contentRect: layoutRect
     } = useResizeObserver();
-    const computedOverlaps = vue.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 = vue.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) {
@@ -1730,7 +1722,7 @@
         })
       };
     });
-    const items = vue.computed(() => {
+    const items = eagerComputed(() => {
       return layers.value.slice(1).map((_ref, index) => {
         let {
           id
@@ -1752,10 +1744,7 @@
       return items.value.find(item => item.id === id);
     };
     const rootVm = getCurrentInstance('createLayout');
-    const isMounted = vue.shallowRef(false);
-    vue.onMounted(() => {
-      isMounted.value = true;
-    });
+    const layoutIsReady = vue.nextTick();
     vue.provide(VuetifyLayoutKey, {
       register: (vm, _ref2) => {
         let {
@@ -1791,13 +1780,9 @@
               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,
@@ -1830,7 +1815,8 @@
       getLayoutItem,
       items,
       layoutRect,
-      rootZIndex
+      rootZIndex,
+      layoutIsReady
     });
     const layoutClasses = vue.computed(() => ['v-layout', {
       'v-layout--full-height': props.fullHeight
@@ -1846,6 +1832,7 @@
       getLayoutItem,
       items,
       layoutRect,
+      layoutIsReady,
       layoutRef: resizeRef
     };
   }
@@ -2540,7 +2527,9 @@
         "style": [props.style]
       }, [vue.createVNode("div", {
         "class": "v-application__wrap"
-      }, [slots.default?.()])]));
+      }, [vue.createVNode(vue.Suspense, null, {
+        default: () => [vue.createVNode(vue.Fragment, null, [slots.default?.()])]
+      })])]));
       return {
         getLayoutItem,
         items,
@@ -3873,9 +3862,8 @@
       const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.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(vue.computed(() => !!props.scrollBehavior), () => {
@@ -3895,7 +3883,8 @@
         ssrBootStyles
       } = useSsrBoot();
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -3923,7 +3912,7 @@
           "flat": isFlat.value
         }), slots);
       });
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -12919,9 +12908,10 @@
         ssrBootStyles
       } = useSsrBoot();
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
-      const isActive = vue.toRef(props, 'active');
+      const isActive = useProxiedModel(props, 'modelValue', props.modelValue);
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -12959,7 +12949,7 @@
           }, [slots.default()])]
         });
       });
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -21530,7 +21520,8 @@
       });
       const height = vue.computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -21547,7 +21538,7 @@
           height: convertToUnit(props.height)
         }, props.style]
       }, slots));
-      return {};
+      return props.app ? layoutIsReady : {};
     }
   });
 
@@ -21970,7 +21961,9 @@
         "ref": layoutRef,
         "class": [layoutClasses.value, props.class],
         "style": [layoutStyles.value, props.style]
-      }, [slots.default?.()]));
+      }, [vue.createVNode(vue.Suspense, null, {
+        default: () => [vue.createVNode(vue.Fragment, null, [slots.default?.()])]
+      })]));
       return {
         getLayoutItem,
         items
@@ -22001,7 +21994,8 @@
         slots
       } = _ref;
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -22011,10 +22005,11 @@
         active: vue.toRef(props, 'modelValue'),
         absolute: vue.toRef(props, 'absolute')
       });
-      return () => vue.createVNode("div", {
+      useRender(() => vue.createVNode("div", {
         "class": ['v-layout-item', props.class],
         "style": [layoutItemStyles.value, props.style]
-      }, [slots.default?.()]);
+      }, [slots.default?.()]));
+      return layoutIsReady;
     }
   });
 
@@ -22121,7 +22116,8 @@
         slots
       } = _ref;
       const {
-        mainStyles
+        mainStyles,
+        layoutIsReady
       } = useLayout();
       const {
         ssrBootStyles
@@ -22136,7 +22132,7 @@
           "class": "v-main__scroller"
         }, [slots.default?.()]) : slots.default?.()]
       }));
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -22561,10 +22557,9 @@
       vue.watch(() => props.permanent, val => {
         if (val) isActive.value = true;
       });
-      vue.onBeforeMount(() => {
-        if (props.modelValue != null || isTemporary.value) return;
+      if (props.modelValue == null && !isTemporary.value) {
         isActive.value = props.permanent || !mobile.value;
-      });
+      }
       const {
         isDragging,
         dragProgress,
@@ -22582,7 +22577,8 @@
       });
       const {
         layoutItemStyles,
-        layoutItemScrimStyles
+        layoutItemScrimStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -22666,9 +22662,9 @@
           }, scopeId), null)]
         })]);
       });
-      return {
+      return layoutIsReady.then(() => ({
         isStuck
-      };
+      }));
     }
   });
 
@@ -25669,7 +25665,7 @@
       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
@@ -25694,7 +25690,7 @@
       ...options
     });
   };
-  const version = "3.5.3-dev.2024-02-08";
+  const version = "3.5.3-dev.2024-02-25";
   createVuetify.version = version;
 
   exports.components = components;