feat(VOverlay): add viewport-margin prop (#22243)

Author: J-Sek

packages/api-generator/src/locale/en/VOverlay-location-strategies.json

@@ -2,6 +2,7 @@
   "props": {
     "locationStrategy": "A function used to specifies how the component should position relative to its activator.",
     "offset": "Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target.",
-    "stickToTarget": "Enables the overlay content to go off-screen when scrolling."
+    "stickToTarget": "Enables the overlay content to go off-screen when scrolling.",
+    "viewportMargin": "Sets custom viewport margin for the overlay content"
   }
 }

packages/docs/src/data/new-in.json

@@ -141,7 +141,8 @@
   },
   "VDialog": {
     "props": {
-      "stickToTarget": "3.10.0"
+      "stickToTarget": "3.10.0",
+      "viewportMargin": "3.11.0"
     }
   },
   "VDivider": {
@@ -202,7 +203,8 @@
   "VMenu": {
     "props": {
       "stickToTarget": "3.10.0",
-      "submenu": "3.7.0"
+      "submenu": "3.7.0",
+      "viewportMargin": "3.11.0"
     }
   },
   "VNavigationDrawer": {
@@ -217,7 +219,8 @@
   },
   "VOverlay": {
     "props": {
-      "stickToTarget": "3.10.0"
+      "stickToTarget": "3.10.0",
+      "viewportMargin": "3.11.0"
     }
   },
   "VPicker": {
@@ -332,7 +335,8 @@
     "props": {
       "eager": "3.2.0",
       "interactive": "3.8.0",
-      "stickToTarget": "3.10.0"
+      "stickToTarget": "3.10.0",
+      "viewportMargin": "3.11.0"
     }
   },
   "VVirtualScroll": {

packages/vuetify/src/components/VOverlay/locationStrategies.ts

@@ -52,6 +52,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
@@ -74,6 +75,10 @@ export const makeLocationStrategyProps = propsFactory({
   },
   offset: [Number, String, Array] as PropType<StrategyProps['offset']>,
   stickToTarget: Boolean,
+  viewportMargin: {
+    type: [Number, String],
+    default: 12,
+  },
 }, 'VOverlay-location-strategies')
 
 export function useLocationStrategies (
@@ -279,7 +284,7 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
 
     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)
@@ -304,10 +309,16 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
     }, 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

packages/vuetify/src/components/VSnackbar/VSnackbar.tsx

@@ -88,7 +88,14 @@ export const makeVSnackbarProps = propsFactory({
   ...makeThemeProps(),
   ...omit(makeVOverlayProps({
     transition: 'v-snackbar-transition',
-  }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy', 'stickToTarget']),
+  }), [
+    'persistent',
+    'noClickAnimation',
+    'scrim',
+    'scrollStrategy',
+    'stickToTarget',
+    'viewportMargin',
+  ]),
 }, 'VSnackbar')
 
 export const VSnackbar = genericComponent<VSnackbarSlots>()({