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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-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, markRaw, 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);
+}
 function isClickInsideElement(event, targetDiv) {
   const mouseX = event.clientX;
   const mouseY = event.clientY;
@@ -1619,7 +1629,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
@@ -1636,6 +1648,7 @@ function useLayoutItem(options) {
   const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
+  const layoutIsReady = nextTick();
   const {
     layoutItemStyles,
     layoutItemScrimStyles
@@ -1648,7 +1661,8 @@ function useLayoutItem(options) {
   return {
     layoutItemStyles,
     layoutRect: layout.layoutRect,
-    layoutItemScrimStyles
+    layoutItemScrimStyles,
+    layoutIsReady
   };
 }
 const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -1694,29 +1708,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) {
@@ -1742,7 +1734,7 @@ function createLayout(props) {
       })
     };
   });
-  const items = computed(() => {
+  const items = eagerComputed(() => {
     return layers.value.slice(1).map((_ref, index) => {
       let {
         id
@@ -1764,10 +1756,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 {
@@ -1803,13 +1792,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,
@@ -1842,7 +1827,8 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
-    rootZIndex
+    rootZIndex,
+    layoutIsReady
   });
   const layoutClasses = computed(() => ['v-layout', {
     'v-layout--full-height': props.fullHeight
@@ -1858,6 +1844,7 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
+    layoutIsReady,
     layoutRef: resizeRef
   };
 }
@@ -2552,7 +2539,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,
@@ -2695,14 +2684,16 @@ function createJavascriptTransition(name, functions) {
         type: String,
         default: mode
       },
-      disabled: Boolean
+      disabled: Boolean,
+      group: Boolean
     },
     setup(props, _ref2) {
       let {
         slots
       } = _ref2;
+      const tag = props.group ? TransitionGroup : Transition;
       return () => {
-        return h(Transition, {
+        return h(tag, {
           name: props.disabled ? '' : name,
           css: !props.disabled,
           // mode: props.mode, // TODO: vuejs/vue-next#3104
@@ -3160,17 +3151,19 @@ const MaybeTransition = (props, _ref) => {
   const {
     transition,
     disabled,
+    group,
     ...rest
   } = props;
   const {
-    component = Transition,
+    component = group ? TransitionGroup : Transition,
     ...customProps
   } = typeof transition === 'object' ? transition : {};
   return h(component, mergeProps(typeof transition === 'string' ? {
     name: disabled ? '' : transition
-  } : customProps, rest, {
-    disabled
-  }), slots);
+  } : customProps, typeof transition === 'string' ? {} : {
+    disabled,
+    group
+  }, rest), slots);
 };
 
 // Utilities
@@ -3889,9 +3882,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), () => {
@@ -3911,7 +3903,8 @@ const VAppBar = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -3939,7 +3932,7 @@ const VAppBar = genericComponent()({
         "flat": isFlat.value
       }), slots);
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -4486,7 +4479,8 @@ function createIcons(options) {
       ...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);
@@ -6492,6 +6486,7 @@ function createForm(props) {
     register: _ref => {
       let {
         id,
+        vm,
         validate,
         reset,
         resetValidation
@@ -6504,6 +6499,7 @@ function createForm(props) {
         validate,
         reset,
         resetValidation,
+        vm: markRaw(vm),
         isValid: null,
         errorMessages: []
       });
@@ -6618,10 +6614,12 @@ function useValidation(props) {
       [`${name}--readonly`]: isReadonly.value
     };
   });
+  const vm = getCurrentInstance('validation');
   const uid = computed(() => props.name ?? unref(id));
   onBeforeMount(() => {
     form?.register({
       id: uid.value,
+      vm,
       validate,
       reset,
       resetValidation
@@ -12959,9 +12957,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)),
@@ -12999,7 +12998,7 @@ const VBottomNavigation = genericComponent()({
         }, [slots.default()])]
       });
     });
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -17335,6 +17334,9 @@ function getMonth(date) {
 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();
 }
@@ -17357,6 +17359,9 @@ function isValid(date) {
 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();
 }
@@ -17369,13 +17374,34 @@ function isSameDay(date, comparing) {
 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);
@@ -17465,6 +17491,9 @@ class VuetifyDateAdapter {
   isAfter(date, comparing) {
     return isAfter(date, comparing);
   }
+  isAfterDay(date, comparing) {
+    return isAfterDay(date, comparing);
+  }
   isBefore(date, comparing) {
     return !isAfter(date, comparing) && !isEqual(date, comparing);
   }
@@ -17474,6 +17503,9 @@ class VuetifyDateAdapter {
   isSameMonth(date, comparing) {
     return isSameMonth(date, comparing);
   }
+  isSameYear(date, comparing) {
+    return isSameYear(date, comparing);
+  }
   setMinutes(date, count) {
     return setMinutes(date, count);
   }
@@ -17501,6 +17533,9 @@ class VuetifyDateAdapter {
   getNextMonth(date) {
     return getNextMonth(date);
   }
+  getPreviousMonth(date) {
+    return getPreviousMonth(date);
+  }
   getHours(date) {
     return getHours(date);
   }
@@ -20570,7 +20605,7 @@ const VDatePickerMonth = genericComponent()({
         } 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);
@@ -21621,7 +21656,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)),
@@ -21638,7 +21674,7 @@ const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return {};
+    return props.app ? layoutIsReady : {};
   }
 });
 
@@ -22061,7 +22097,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
@@ -22092,7 +22130,8 @@ const VLayoutItem = genericComponent()({
       slots
     } = _ref;
     const {
-      layoutItemStyles
+      layoutItemStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22102,10 +22141,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;
   }
 });
 
@@ -22212,7 +22252,8 @@ const VMain = genericComponent()({
       slots
     } = _ref;
     const {
-      mainStyles
+      mainStyles,
+      layoutIsReady
     } = useLayout();
     const {
       ssrBootStyles
@@ -22227,7 +22268,7 @@ const VMain = genericComponent()({
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
-    return {};
+    return layoutIsReady;
   }
 });
 
@@ -22652,10 +22693,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,
@@ -22673,7 +22713,8 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutItemScrimStyles
+      layoutItemScrimStyles,
+      layoutIsReady
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -22757,9 +22798,9 @@ const VNavigationDrawer = genericComponent()({
         }, scopeId), null)]
       })]);
     });
-    return {
+    return layoutIsReady.then(() => ({
       isStuck
-    };
+    }));
   }
 });
 
@@ -23759,6 +23800,8 @@ const VSlideGroupItem = genericComponent()({
   }
 });
 
+// Types
+
 function useCountdown(milliseconds) {
   const time = shallowRef(milliseconds);
   let timer = -1;
@@ -23926,7 +23969,9 @@ const VSnackbar = genericComponent()({
         }, {
           default: () => [createVNode("div", {
             "class": "v-snackbar__actions"
-          }, [slots.actions()])]
+          }, [slots.actions({
+            isActive
+          })])]
         })],
         activator: slots.activator
       });
@@ -25509,8 +25554,8 @@ const VCalendarIntervalEvent = genericComponent()({
       return 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
       }, {
@@ -26468,6 +26513,52 @@ const VSparkline = genericComponent()({
   }
 });
 
+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 createVNode(VMenu, mergeProps(menuProps, {
+        "class": props.class,
+        "style": props.style,
+        "contentClass": "v-speed-dial__content"
+      }), {
+        default: () => [createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              size: 'small'
+            }
+          }
+        }, {
+          default: () => [createVNode(MaybeTransition, {
+            "appear": true,
+            "group": true,
+            "transition": props.transition
+          }, {
+            default: () => [slots.default?.()]
+          })]
+        })]
+      });
+    });
+    return {};
+  }
+});
+
 // Types
 
 // Types
@@ -26745,6 +26836,7 @@ var components = /*#__PURE__*/Object.freeze({
   VSnackbar: VSnackbar,
   VSpacer: VSpacer,
   VSparkline: VSparkline,
+  VSpeedDial: VSpeedDial,
   VStepper: VStepper,
   VStepperActions: VStepperActions,
   VStepperHeader: VStepperHeader,
@@ -26992,7 +27084,7 @@ function createVuetify$1() {
     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
@@ -27006,7 +27098,7 @@ function inject(key) {
 
 /* 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 */