@vuetify/nightly 3.10.9-dev.2025-11-05 → 3.10.9-dev.2025-11-06

package/lib/components/VMenu/VMenu.d.ts

@@ -11,6 +11,7 @@ export declare const makeVMenuProps: <Defaults extends {
     origin?: unknown;
     offset?: unknown;
     stickToTarget?: unknown;
+    viewportMargin?: unknown;
     scrollStrategy?: unknown;
     height?: unknown;
     maxHeight?: unknown;
@@ -115,6 +116,16 @@ export declare const makeVMenuProps: <Defaults extends {
         type: import("vue").PropType<unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"]>;
         default: unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"];
     };
+    viewportMargin: unknown extends Defaults["viewportMargin"] ? {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    } : Omit<{
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    }, "default" | "type"> & {
+        type: import("vue").PropType<unknown extends Defaults["viewportMargin"] ? string | number : string | number | Defaults["viewportMargin"]>;
+        default: unknown extends Defaults["viewportMargin"] ? string | number : Defaults["viewportMargin"] | NonNullable<string | number>;
+    };
     scrollStrategy: unknown extends Defaults["scrollStrategy"] ? Omit<{
         type: import("vue").PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;
@@ -871,6 +882,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         closeDelay: string | number;
         openDelay: string | number;
@@ -1023,6 +1035,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnClick: boolean;
@@ -1073,6 +1086,7 @@ export declare const VMenu: {
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             offset?: string | number | number[] | undefined;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             height?: string | number | undefined;
             maxHeight?: string | number | undefined;
@@ -1120,7 +1134,7 @@ export declare const VMenu: {
             "v-slot:default"?: false | ((arg: {
                 isActive: import("vue").Ref<boolean, boolean>;
             }) => import("vue").VNodeChild) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1152,6 +1166,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnHover: boolean;
@@ -1252,6 +1267,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnClick: boolean;
@@ -1308,6 +1324,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -1331,6 +1348,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnHover: boolean;
@@ -1409,7 +1427,7 @@ export declare const VMenu: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
         onKeydown?: ((e: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex")> & import("vue").ShallowUnwrapRef<{
+    }, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex")> & import("vue").ShallowUnwrapRef<{
         activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         target: import("vue").ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
@@ -1419,7 +1437,7 @@ export declare const VMenu: {
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
         localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
-    }> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
+    }> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
         _allExposed: {
             activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -1442,6 +1460,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor | undefined;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         closeDelay: string | number;
         openDelay: string | number;
@@ -1555,6 +1574,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         closeDelay: string | number;
         openDelay: string | number;
@@ -1707,6 +1727,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnClick: boolean;
@@ -1757,6 +1778,7 @@ export declare const VMenu: {
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             offset?: string | number | number[] | undefined;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             height?: string | number | undefined;
             maxHeight?: string | number | undefined;
@@ -1804,7 +1826,7 @@ export declare const VMenu: {
             "v-slot:default"?: false | ((arg: {
                 isActive: import("vue").Ref<boolean, boolean>;
             }) => import("vue").VNodeChild) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1836,6 +1858,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnHover: boolean;
@@ -1936,6 +1959,7 @@ export declare const VMenu: {
             location: import("../../util/index.js").Anchor;
             origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
             stickToTarget: boolean;
+            viewportMargin: string | number;
             scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
             activatorProps: Record<string, any>;
             openOnClick: boolean;
@@ -1992,6 +2016,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -2015,6 +2040,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnHover: boolean;
@@ -2093,7 +2119,7 @@ export declare const VMenu: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
         onKeydown?: ((e: KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex")> & import("vue").ShallowUnwrapRef<{
+    }, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex")> & import("vue").ShallowUnwrapRef<{
         activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         target: import("vue").ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
@@ -2103,7 +2129,7 @@ export declare const VMenu: {
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
         localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
-    }> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
+    }> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
         _allExposed: {
             activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -2124,6 +2150,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor | undefined;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         closeDelay: string | number;
         openDelay: string | number;
@@ -2221,6 +2248,7 @@ export declare const VMenu: {
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     closeDelay: string | number;
     openDelay: string | number;
@@ -2373,6 +2401,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -2423,6 +2452,7 @@ export declare const VMenu: {
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         offset?: string | number | number[] | undefined;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         height?: string | number | undefined;
         maxHeight?: string | number | undefined;
@@ -2470,7 +2500,7 @@ export declare const VMenu: {
         "v-slot:default"?: false | ((arg: {
             isActive: import("vue").Ref<boolean, boolean>;
         }) => import("vue").VNodeChild) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex">;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -2502,6 +2532,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnHover: boolean;
@@ -2602,6 +2633,7 @@ export declare const VMenu: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -2658,6 +2690,7 @@ export declare const VMenu: {
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     activatorProps: Record<string, any>;
     openOnClick: boolean;
@@ -2681,6 +2714,7 @@ export declare const VMenu: {
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     activatorProps: Record<string, any>;
     openOnHover: boolean;
@@ -2759,7 +2793,7 @@ export declare const VMenu: {
     "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     onKeydown?: ((e: KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex")> & import("vue").ShallowUnwrapRef<{
+}, "activatorEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "rootEl" | "scrimEl" | "target" | "updateLocation" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex")> & import("vue").ShallowUnwrapRef<{
     activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     target: import("vue").ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
@@ -2769,7 +2803,7 @@ export declare const VMenu: {
     globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
     localTop: Readonly<import("vue").Ref<boolean, boolean>>;
     updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
-}> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
+}> & {} & import("vue").ComponentCustomProperties & {}, "$children" | "activator" | "attach" | "class" | "closeDelay" | "contentClass" | "contentProps" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "offset" | "onAfterEnter" | "onAfterLeave" | "onClick:outside" | "onKeydown" | "onUpdate:modelValue" | "opacity" | "openDelay" | "target" | "theme" | "transition" | "v-slot:activator" | "v-slot:default" | "v-slots" | "width" | ("_disableGlobalStack" | "absolute" | "activatorProps" | "closeOnBack" | "closeOnContentClick" | "contained" | "disabled" | "eager" | "location" | "locationStrategy" | "modelValue" | "noClickAnimation" | "openOnClick" | "openOnFocus" | "openOnHover" | "origin" | "persistent" | "scrim" | "scrollStrategy" | "stickToTarget" | "style" | "viewportMargin" | "zIndex") | keyof import("vue").VNodeProps>, `$${any}`> & {
     _allExposed: {
         activatorEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         scrimEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -2792,6 +2826,7 @@ export declare const VMenu: {
     location: import("../../util/index.js").Anchor | undefined;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     closeDelay: string | number;
     openDelay: string | number;
@@ -2920,6 +2955,10 @@ export declare const VMenu: {
     };
     offset: import("vue").PropType<string | number | number[] | undefined>;
     stickToTarget: BooleanConstructor;
+    viewportMargin: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     scrollStrategy: Omit<{
         type: import("vue").PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;
@@ -3155,6 +3194,10 @@ export declare const VMenu: {
     };
     offset: import("vue").PropType<string | number | number[] | undefined>;
     stickToTarget: BooleanConstructor;
+    viewportMargin: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     scrollStrategy: Omit<{
         type: import("vue").PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;

package/lib/components/VOverlay/VOverlay.d.ts

@@ -22,6 +22,7 @@ export declare const makeVOverlayProps: <Defaults extends {
     origin?: unknown;
     offset?: unknown;
     stickToTarget?: unknown;
+    viewportMargin?: unknown;
     scrollStrategy?: unknown;
     height?: unknown;
     maxHeight?: unknown;
@@ -112,6 +113,16 @@ export declare const makeVOverlayProps: <Defaults extends {
         type: PropType<unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"]>;
         default: unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"];
     };
+    viewportMargin: unknown extends Defaults["viewportMargin"] ? {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    } : Omit<{
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["viewportMargin"] ? string | number : string | number | Defaults["viewportMargin"]>;
+        default: unknown extends Defaults["viewportMargin"] ? string | number : Defaults["viewportMargin"] | NonNullable<string | number>;
+    };
     scrollStrategy: unknown extends Defaults["scrollStrategy"] ? {
         type: PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;
@@ -298,6 +309,7 @@ export declare const VOverlay: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnHover: boolean;
@@ -398,6 +410,7 @@ export declare const VOverlay: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -441,6 +454,7 @@ export declare const VOverlay: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnHover: boolean;
@@ -535,6 +549,7 @@ export declare const VOverlay: {
         location: import("../../util/index.js").Anchor;
         origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
         stickToTarget: boolean;
+        viewportMargin: string | number;
         scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
         activatorProps: Record<string, any>;
         openOnClick: boolean;
@@ -562,6 +577,7 @@ export declare const VOverlay: {
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     activatorProps: Record<string, any>;
     openOnHover: boolean;
@@ -662,6 +678,7 @@ export declare const VOverlay: {
     location: import("../../util/index.js").Anchor;
     origin: "auto" | "overlap" | import("../../util/index.js").Anchor;
     stickToTarget: boolean;
+    viewportMargin: string | number;
     scrollStrategy: "block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction;
     activatorProps: Record<string, any>;
     openOnClick: boolean;
@@ -714,6 +731,10 @@ export declare const VOverlay: {
     };
     offset: PropType<string | number | number[] | undefined>;
     stickToTarget: BooleanConstructor;
+    viewportMargin: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     scrollStrategy: {
         type: PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;
@@ -792,6 +813,10 @@ export declare const VOverlay: {
     };
     offset: PropType<string | number | number[] | undefined>;
     stickToTarget: BooleanConstructor;
+    viewportMargin: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     scrollStrategy: {
         type: PropType<"block" | "close" | "none" | "reposition" | import("../../types.js").ScrollStrategyFunction>;
         default: string;

package/lib/components/VOverlay/locationStrategies.d.ts

@@ -21,6 +21,7 @@ export interface StrategyProps {
     origin: Anchor | 'auto' | 'overlap';
     offset?: number | string | number[];
     stickToTarget?: boolean;
+    viewportMargin?: number | string;
     maxHeight?: number | string;
     maxWidth?: number | string;
     minHeight?: number | string;
@@ -32,6 +33,7 @@ export declare const makeLocationStrategyProps: <Defaults extends {
     origin?: unknown;
     offset?: unknown;
     stickToTarget?: unknown;
+    viewportMargin?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     locationStrategy: unknown extends Defaults["locationStrategy"] ? {
         type: PropType<"connected" | "static" | LocationStrategyFunction>;
@@ -73,6 +75,16 @@ export declare const makeLocationStrategyProps: <Defaults extends {
         type: PropType<unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"]>;
         default: unknown extends Defaults["stickToTarget"] ? boolean : boolean | Defaults["stickToTarget"];
     };
+    viewportMargin: unknown extends Defaults["viewportMargin"] ? {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    } : Omit<{
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["viewportMargin"] ? string | number : string | number | Defaults["viewportMargin"]>;
+        default: unknown extends Defaults["viewportMargin"] ? string | number : Defaults["viewportMargin"] | NonNullable<string | number>;
+    };
 };
 export declare function useLocationStrategies(props: StrategyProps, data: LocationStrategyData): {
     contentStyles: Ref<{}, {}>;

package/lib/components/VOverlay/locationStrategies.js

@@ -24,7 +24,11 @@ export const makeLocationStrategyProps = propsFactory({
     default: 'auto'
   },
   offset: [Number, String, Array],
-  stickToTarget: Boolean
+  stickToTarget: Boolean,
+  viewportMargin: {
+    type: [Number, String],
+    default: 12
+  }
 }, 'VOverlay-location-strategies');
 export function useLocationStrategies(props, data) {
   const contentStyles = ref({});
@@ -211,8 +215,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
 
     const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
     const scrollParents = getScrollParents(data.contentEl.value);
-    const viewportMargin = props.stickToTarget ? 0 : 12; // TOOD: prop.viewportMargin
-
+    const viewportMargin = Number(props.viewportMargin);
     if (!scrollParents.length) {
       scrollParents.push(document.documentElement);
       if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {
@@ -233,10 +236,10 @@ function connectedLocationStrategy(data, props, contentStyles) {
       return scrollBox;
     }, undefined);
     if (props.stickToTarget) {
-      viewport.x += Math.min(0, targetBox.x);
-      viewport.y += Math.min(0, targetBox.y);
-      viewport.width = Math.max(viewport.width, targetBox.x + targetBox.width);
-      viewport.height = Math.max(viewport.height, targetBox.y + targetBox.height);
+      viewport.x += Math.min(viewportMargin, targetBox.x);
+      viewport.y += Math.min(viewportMargin, targetBox.y);
+      viewport.width = Math.max(viewport.width - viewportMargin * 2, targetBox.x + targetBox.width - viewportMargin);
+      viewport.height = Math.max(viewport.height - viewportMargin * 2, targetBox.y + targetBox.height - viewportMargin);
     } else {
       viewport.x += viewportMargin;
       viewport.y += viewportMargin;