vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VMenu/VMenu.sass

@@ -1,18 +1,19 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-menu
-  > .v-overlay__content
-    display: flex
-    flex-direction: column
-    @include tools.rounded($menu-content-border-radius)
+@include tools.layer('components')
+  .v-menu
+    > .v-overlay__content
+      display: flex
+      flex-direction: column
+      @include tools.rounded($menu-content-border-radius)
 
-    > .v-card,
-    > .v-sheet,
-    > .v-list
-      background: rgb(var(--v-theme-surface))
-      border-radius: inherit
-      overflow: auto
-      height: 100%
+      > .v-card,
+      > .v-sheet,
+      > .v-list
+        background: rgb(var(--v-theme-surface))
+        border-radius: inherit
+        overflow: auto
+        height: 100%
 
-      @include tools.elevation($menu-elevation)
+        @include tools.elevation($menu-elevation)

package/lib/components/VMenu/index.d.mts

@@ -139,6 +139,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -150,6 +151,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -159,6 +161,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -246,6 +249,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -257,6 +261,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -265,6 +270,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
             onAfterEnter?: (() => any) | undefined;
@@ -323,6 +329,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -334,6 +341,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -343,6 +351,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -365,6 +374,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
@@ -426,6 +436,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -437,6 +448,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -446,6 +458,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -502,6 +515,7 @@ declare const VMenu: {
             activator: (arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
@@ -578,6 +592,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -589,6 +604,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -598,6 +614,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -669,6 +686,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -680,6 +698,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -689,6 +708,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -730,6 +750,7 @@ declare const VMenu: {
         activator: (arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -794,6 +815,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -805,6 +827,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -814,6 +837,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -901,6 +925,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -912,6 +937,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -920,6 +946,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
             onAfterEnter?: (() => any) | undefined;
@@ -978,6 +1005,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -989,6 +1017,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -998,6 +1027,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1020,6 +1050,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
@@ -1081,6 +1112,7 @@ declare const VMenu: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1092,6 +1124,7 @@ declare const VMenu: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -1101,6 +1134,7 @@ declare const VMenu: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1157,6 +1191,7 @@ declare const VMenu: {
             activator: (arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
@@ -1233,6 +1268,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -1244,6 +1280,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1253,6 +1290,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1355,6 +1393,7 @@ declare const VMenu: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | ((arg: {
         isActive: vue.Ref<boolean>;
@@ -1366,6 +1405,7 @@ declare const VMenu: {
         activator?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
@@ -1375,6 +1415,7 @@ declare const VMenu: {
     "v-slot:activator"?: false | ((arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: vue.Ref<any>;
     }) => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1462,6 +1503,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -1473,6 +1515,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
         "v-slot:default"?: false | ((arg: {
@@ -1481,6 +1524,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         onAfterEnter?: (() => any) | undefined;
@@ -1539,6 +1583,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -1550,6 +1595,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1559,6 +1605,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1581,6 +1628,7 @@ declare const VMenu: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[]) | undefined;
@@ -1642,6 +1690,7 @@ declare const VMenu: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -1653,6 +1702,7 @@ declare const VMenu: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1662,6 +1712,7 @@ declare const VMenu: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1718,6 +1769,7 @@ declare const VMenu: {
         activator: (arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -1794,6 +1846,7 @@ declare const VMenu: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | ((arg: {
         isActive: vue.Ref<boolean>;
@@ -1805,6 +1858,7 @@ declare const VMenu: {
         activator?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
@@ -1814,6 +1868,7 @@ declare const VMenu: {
     "v-slot:activator"?: false | ((arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: vue.Ref<any>;
     }) => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1869,6 +1924,7 @@ declare const VMenu: {
     activator: (arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: vue.Ref<any>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];

package/lib/components/VMessages/VMessages.sass

@@ -1,19 +1,20 @@
 @use '../../styles/settings'
+@use '../../styles/tools'
 @use './variables' as *
 
+@include tools.layer('components')
+  .v-messages
+    flex: 1 1 auto
+    font-size: $messages-font-size
+    min-height: $messages-min-height
+    min-width: 1px // Ensure takes up space with no messages and inside of flex
+    opacity: var(--v-medium-emphasis-opacity)
+    position: relative
 
-.v-messages
-  flex: 1 1 auto
-  font-size: $messages-font-size
-  min-height: $messages-min-height
-  min-width: 1px // Ensure takes up space with no messages and inside of flex
-  opacity: var(--v-medium-emphasis-opacity)
-  position: relative
-
-  &__message
-    line-height: $messages-line-height
-    word-break: break-word
-    overflow-wrap: break-word
-    word-wrap: break-word
-    hyphens: auto
-    transition-duration: $messages-transition-duration
+    &__message
+      line-height: $messages-line-height
+      word-break: break-word
+      overflow-wrap: break-word
+      word-wrap: break-word
+      hyphens: auto
+      transition-duration: $messages-transition-duration

package/lib/components/VNavigationDrawer/VNavigationDrawer.css

@@ -24,6 +24,10 @@
 .v-navigation-drawer--rounded {
   border-radius: 4px;
 }
+.v-navigation-drawer--top, .v-navigation-drawer--bottom {
+  max-height: -webkit-fill-available;
+  overflow-y: auto;
+}
 .v-navigation-drawer--top {
   top: 0;
   border-bottom-width: thin;

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -52,6 +52,7 @@ export const makeVNavigationDrawerProps = propsFactory({
   },
   image: String,
   temporary: Boolean,
+  persistent: Boolean,
   touchless: Boolean,
   width: {
     type: [Number, String],
@@ -133,6 +134,7 @@ export const VNavigationDrawer = genericComponent()({
     const location = computed(() => {
       return toPhysical(props.location, isRtl.value);
     });
+    const isPersistent = computed(() => props.persistent);
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
     const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
     useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -152,9 +154,9 @@ export const VNavigationDrawer = genericComponent()({
     }
     const {
       isDragging,
-      dragProgress,
-      dragStyles
+      dragProgress
     } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -165,6 +167,7 @@ export const VNavigationDrawer = genericComponent()({
       const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
       return isDragging.value ? size * dragProgress.value : size;
     });
+    const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
     const {
       layoutItemStyles,
       layoutItemScrimStyles,
@@ -174,7 +177,7 @@ export const VNavigationDrawer = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: location,
       layoutSize,
-      elementSize: width,
+      elementSize,
       active: computed(() => isActive.value || isDragging.value),
       disableTransitions: computed(() => isDragging.value),
       absolute: computed(() =>
@@ -216,10 +219,13 @@ export const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--is-hovering': isHovering.value,
           'v-navigation-drawer--rail': props.rail,
           'v-navigation-drawer--temporary': isTemporary.value,
+          'v-navigation-drawer--persistent': isPersistent.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style, ['top', 'bottom'].includes(location.value) ? {
+          height: 'auto'
+        } : {}]
       }, scopeId, attrs), {
         default: () => [hasImage && _createVNode("div", {
           "key": "image",
@@ -254,7 +260,10 @@ export const VNavigationDrawer = genericComponent()({
         default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && _createVNode("div", _mergeProps({
           "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
           "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
-          "onClick": () => isActive.value = false
+          "onClick": () => {
+            if (isPersistent.value) return;
+            isActive.value = false;
+          }
         }, scopeId), null)]
       })]);
     });