@vuetify/nightly 3.5.7-master.2024-03-05 → 3.5.8-dev.2024-03-13

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.7-master.2024-03-05
+* Vuetify v3.5.8-dev.2024-03-13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -549,6 +549,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);
+  }
   function isClickInsideElement(event, targetDiv) {
     const mouseX = event.clientX;
     const mouseY = event.clientY;
@@ -1623,7 +1633,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
@@ -1640,6 +1652,7 @@
     const isKeptAlive = vue.shallowRef(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
+    const layoutIsReady = vue.nextTick();
     const {
       layoutItemStyles,
       layoutItemScrimStyles
@@ -1652,7 +1665,8 @@
     return {
       layoutItemStyles,
       layoutRect: layout.layoutRect,
-      layoutItemScrimStyles
+      layoutItemScrimStyles,
+      layoutIsReady
     };
   }
   const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -1698,29 +1712,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) {
@@ -1746,7 +1738,7 @@
         })
       };
     });
-    const items = vue.computed(() => {
+    const items = eagerComputed(() => {
       return layers.value.slice(1).map((_ref, index) => {
         let {
           id
@@ -1768,10 +1760,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 {
@@ -1807,13 +1796,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,
@@ -1846,7 +1831,8 @@
       getLayoutItem,
       items,
       layoutRect,
-      rootZIndex
+      rootZIndex,
+      layoutIsReady
     });
     const layoutClasses = vue.computed(() => ['v-layout', {
       'v-layout--full-height': props.fullHeight
@@ -1862,6 +1848,7 @@
       getLayoutItem,
       items,
       layoutRect,
+      layoutIsReady,
       layoutRef: resizeRef
     };
   }
@@ -2556,7 +2543,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,
@@ -2699,14 +2688,16 @@
           type: String,
           default: mode
         },
-        disabled: Boolean
+        disabled: Boolean,
+        group: Boolean
       },
       setup(props, _ref2) {
         let {
           slots
         } = _ref2;
+        const tag = props.group ? vue.TransitionGroup : vue.Transition;
         return () => {
-          return vue.h(vue.Transition, {
+          return vue.h(tag, {
             name: props.disabled ? '' : name,
             css: !props.disabled,
             // mode: props.mode, // TODO: vuejs/vue-next#3104
@@ -3164,17 +3155,19 @@
     const {
       transition,
       disabled,
+      group,
       ...rest
     } = props;
     const {
-      component = vue.Transition,
+      component = group ? vue.TransitionGroup : vue.Transition,
       ...customProps
     } = typeof transition === 'object' ? transition : {};
     return vue.h(component, vue.mergeProps(typeof transition === 'string' ? {
       name: disabled ? '' : transition
-    } : customProps, rest, {
-      disabled
-    }), slots);
+    } : customProps, typeof transition === 'string' ? {} : {
+      disabled,
+      group
+    }, rest), slots);
   };
 
   // Utilities
@@ -3893,9 +3886,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), () => {
@@ -3915,7 +3907,8 @@
         ssrBootStyles
       } = useSsrBoot();
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -3943,7 +3936,7 @@
           "flat": isFlat.value
         }), slots);
       });
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -4490,7 +4483,8 @@
         ...aliases,
         /* eslint-disable max-len */
         vuetify: ['M8.2241 14.2009L12 21L22 3H14.4459L8.2241 14.2009Z', ['M7.26303 12.4733L7.00113 12L2 3H12.5261C12.5261 3 12.5261 3 12.5261 3L7.26303 12.4733Z', 0.6]],
-        'vuetify-outline': 'svg:M7.26 12.47 12.53 3H2L7.26 12.47ZM14.45 3 8.22 14.2 12 21 22 3H14.45ZM18.6 5 12 16.88 10.51 14.2 15.62 5ZM7.26 8.35 5.4 5H9.13L7.26 8.35Z'
+        'vuetify-outline': 'svg:M7.26 12.47 12.53 3H2L7.26 12.47ZM14.45 3 8.22 14.2 12 21 22 3H14.45ZM18.6 5 12 16.88 10.51 14.2 15.62 5ZM7.26 8.35 5.4 5H9.13L7.26 8.35Z',
+        'vuetify-play': ['m6.376 13.184-4.11-7.192C1.505 4.66 2.467 3 4.003 3h8.532l-.953 1.576-.006.01-.396.677c-.429.732-.214 1.507.194 2.015.404.503 1.092.878 1.869.806a3.72 3.72 0 0 1 1.005.022c.276.053.434.143.523.237.138.146.38.635-.25 2.09-.893 1.63-1.553 1.722-1.847 1.677-.213-.033-.468-.158-.756-.406a4.95 4.95 0 0 1-.8-.927c-.39-.564-1.04-.84-1.66-.846-.625-.006-1.316.27-1.693.921l-.478.826-.911 1.506Z', ['M9.093 11.552c.046-.079.144-.15.32-.148a.53.53 0 0 1 .43.207c.285.414.636.847 1.046 1.2.405.35.914.662 1.516.754 1.334.205 2.502-.698 3.48-2.495l.014-.028.013-.03c.687-1.574.774-2.852-.005-3.675-.37-.391-.861-.586-1.333-.676a5.243 5.243 0 0 0-1.447-.044c-.173.016-.393-.073-.54-.257-.145-.18-.127-.316-.082-.392l.393-.672L14.287 3h5.71c1.536 0 2.499 1.659 1.737 2.992l-7.997 13.996c-.768 1.344-2.706 1.344-3.473 0l-3.037-5.314 1.377-2.278.004-.006.004-.007.481-.831Z', 0.6]]
         /* eslint-enable max-len */
       }
     }, options);
@@ -6496,6 +6490,7 @@
       register: _ref => {
         let {
           id,
+          vm,
           validate,
           reset,
           resetValidation
@@ -6508,6 +6503,7 @@
           validate,
           reset,
           resetValidation,
+          vm: vue.markRaw(vm),
           isValid: null,
           errorMessages: []
         });
@@ -6622,10 +6618,12 @@
         [`${name}--readonly`]: isReadonly.value
       };
     });
+    const vm = getCurrentInstance('validation');
     const uid = vue.computed(() => props.name ?? vue.unref(id));
     vue.onBeforeMount(() => {
       form?.register({
         id: uid.value,
+        vm,
         validate,
         reset,
         resetValidation
@@ -12963,9 +12961,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)),
@@ -13003,7 +13002,7 @@
           }, [slots.default()])]
         });
       });
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -17339,6 +17338,9 @@
   function getNextMonth(date) {
     return new Date(date.getFullYear(), date.getMonth() + 1, 1);
   }
+  function getPreviousMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() - 1, 1);
+  }
   function getHours(date) {
     return date.getHours();
   }
@@ -17361,6 +17363,9 @@
   function isAfter(date, comparing) {
     return date.getTime() > comparing.getTime();
   }
+  function isAfterDay(date, comparing) {
+    return isAfter(startOfDay(date), startOfDay(comparing));
+  }
   function isBefore(date, comparing) {
     return date.getTime() < comparing.getTime();
   }
@@ -17373,13 +17378,34 @@
   function isSameMonth(date, comparing) {
     return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
   }
+  function isSameYear(date, comparing) {
+    return date.getFullYear() === comparing.getFullYear();
+  }
   function getDiff(date, comparing, unit) {
     const d = new Date(date);
     const c = new Date(comparing);
-    if (unit === 'month') {
-      return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12;
+    switch (unit) {
+      case 'years':
+        return d.getFullYear() - c.getFullYear();
+      case 'quarters':
+        return Math.floor((d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12) / 4);
+      case 'months':
+        return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12;
+      case 'weeks':
+        return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24 * 7));
+      case 'days':
+        return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
+      case 'hours':
+        return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60));
+      case 'minutes':
+        return Math.floor((d.getTime() - c.getTime()) / (1000 * 60));
+      case 'seconds':
+        return Math.floor((d.getTime() - c.getTime()) / 1000);
+      default:
+        {
+          return d.getTime() - c.getTime();
+        }
     }
-    return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
   }
   function setHours(date, count) {
     const d = new Date(date);
@@ -17469,6 +17495,9 @@
     isAfter(date, comparing) {
       return isAfter(date, comparing);
     }
+    isAfterDay(date, comparing) {
+      return isAfterDay(date, comparing);
+    }
     isBefore(date, comparing) {
       return !isAfter(date, comparing) && !isEqual(date, comparing);
     }
@@ -17478,6 +17507,9 @@
     isSameMonth(date, comparing) {
       return isSameMonth(date, comparing);
     }
+    isSameYear(date, comparing) {
+      return isSameYear(date, comparing);
+    }
     setMinutes(date, count) {
       return setMinutes(date, count);
     }
@@ -17505,6 +17537,9 @@
     getNextMonth(date) {
       return getNextMonth(date);
     }
+    getPreviousMonth(date) {
+      return getPreviousMonth(date);
+    }
     getHours(date) {
       return getHours(date);
     }
@@ -20574,7 +20609,7 @@
           } else {
             rangeStop.value = _value;
           }
-          const diff = adapter.getDiff(rangeStop.value, rangeStart.value);
+          const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days');
           const datesInRange = [rangeStart.value];
           for (let i = 1; i < diff; i++) {
             const nextDate = adapter.addDays(rangeStart.value, i);
@@ -21625,7 +21660,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)),
@@ -21642,7 +21678,7 @@
           height: convertToUnit(props.height)
         }, props.style]
       }, slots));
-      return {};
+      return props.app ? layoutIsReady : {};
     }
   });
 
@@ -22065,7 +22101,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
@@ -22096,7 +22134,8 @@
         slots
       } = _ref;
       const {
-        layoutItemStyles
+        layoutItemStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -22106,10 +22145,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;
     }
   });
 
@@ -22216,7 +22256,8 @@
         slots
       } = _ref;
       const {
-        mainStyles
+        mainStyles,
+        layoutIsReady
       } = useLayout();
       const {
         ssrBootStyles
@@ -22231,7 +22272,7 @@
           "class": "v-main__scroller"
         }, [slots.default?.()]) : slots.default?.()]
       }));
-      return {};
+      return layoutIsReady;
     }
   });
 
@@ -22656,10 +22697,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,
@@ -22677,7 +22717,8 @@
       });
       const {
         layoutItemStyles,
-        layoutItemScrimStyles
+        layoutItemScrimStyles,
+        layoutIsReady
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -22761,9 +22802,9 @@
           }, scopeId), null)]
         })]);
       });
-      return {
+      return layoutIsReady.then(() => ({
         isStuck
-      };
+      }));
     }
   });
 
@@ -23763,6 +23804,8 @@
     }
   });
 
+  // Types
+
   function useCountdown(milliseconds) {
     const time = vue.shallowRef(milliseconds);
     let timer = -1;
@@ -23930,7 +23973,9 @@
           }, {
             default: () => [vue.createVNode("div", {
               "class": "v-snackbar__actions"
-            }, [slots.actions()])]
+            }, [slots.actions({
+              isActive
+            })])]
           })],
           activator: slots.activator
         });
@@ -25513,8 +25558,8 @@
         return vue.createVNode(VSheet, {
           "height": calcHeight().height,
           "density": "comfortable",
-          "style": `width: 100%; margin-top: ${calcHeight().margin}`,
-          "class": "align-center pa-1",
+          "style": `margin-top: ${calcHeight().margin}`,
+          "class": "v-calendar-internal-event",
           "color": props.event?.color ?? undefined,
           "rounded": props.event?.first && props.event?.last ? true : props.event?.first ? 't' : props.event?.last ? 'b' : false
         }, {
@@ -26472,6 +26517,52 @@
     }
   });
 
+  const makeVSpeedDialProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeVMenuProps({
+      offset: 8,
+      minWidth: 0,
+      location: 'top center'
+    }),
+    ...makeTransitionProps({
+      transition: 'fade-transition'
+    })
+  }, 'VSpeedDial');
+  const VSpeedDial = genericComponent()({
+    name: 'VSpeedDial',
+    props: makeVSpeedDialProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      useRender(() => {
+        const menuProps = VMenu.filterProps(props);
+        return vue.createVNode(VMenu, vue.mergeProps(menuProps, {
+          "class": props.class,
+          "style": props.style,
+          "contentClass": "v-speed-dial__content"
+        }), {
+          default: () => [vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: {
+                size: 'small'
+              }
+            }
+          }, {
+            default: () => [vue.createVNode(MaybeTransition, {
+              "appear": true,
+              "group": true,
+              "transition": props.transition
+            }, {
+              default: () => [slots.default?.()]
+            })]
+          })]
+        });
+      });
+      return {};
+    }
+  });
+
   // Types
 
   // Types
@@ -26749,6 +26840,7 @@
     VSnackbar: VSnackbar,
     VSpacer: VSpacer,
     VSparkline: VSparkline,
+    VSpeedDial: VSpeedDial,
     VStepper: VStepper,
     VStepperActions: VStepperActions,
     VStepperHeader: VStepperHeader,
@@ -26996,7 +27088,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.7-master.2024-03-05";
+  const version$1 = "3.5.8-dev.2024-03-13";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -27010,7 +27102,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.5.7-master.2024-03-05";
+  const version = "3.5.8-dev.2024-03-13";
 
   /* eslint-disable local-rules/sort-imports */