@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VOverlay/VOverlay.mjs

@@ -3,24 +3,24 @@ import { withDirectives as _withDirectives, resolveDirective as _resolveDirectiv
 import "./VOverlay.css"; // Composables
 
 import { makeActivatorProps, useActivator } from "./useActivator.mjs";
-import { makePositionStrategyProps, usePositionStrategies } from "./positionStrategies.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeLazyProps, useLazy } from "../../composables/lazy.mjs";
+import { makeLocationStrategyProps, useLocationStrategies } from "./locationStrategies.mjs";
 import { makeScrollStrategyProps, useScrollStrategies } from "./scrollStrategies.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
-import { useBackButton } from "../../composables/router.mjs";
+import { useBackButton, useRouter } from "../../composables/router.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useRtl } from "../../composables/rtl.mjs";
-import { useTeleport } from "../../composables/teleport.mjs";
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
-import { makeLazyProps, useLazy } from "../../composables/lazy.mjs";
 import { useStack } from "../../composables/stack.mjs";
-import { useOverlay } from "../../composables/overlay.mjs"; // Directives
+import { useTeleport } from "../../composables/teleport.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs"; // Directives
 
 import { ClickOutside } from "../../directives/click-outside/index.mjs"; // Utilities
 
-import { convertToUnit, genericComponent, getScrollParent, IN_BROWSER, standardEasing, useRender } from "../../util/index.mjs";
-import { computed, mergeProps, ref, Teleport, toHandlers, Transition, watch } from 'vue'; // Types
+import { animate, convertToUnit, genericComponent, getScrollParent, IN_BROWSER, standardEasing, useRender } from "../../util/index.mjs";
+import { computed, mergeProps, ref, Teleport, toHandlers, toRef, Transition, watch } from 'vue'; // Types
 
 function Scrim(props) {
   const {
@@ -48,8 +48,14 @@ export const VOverlay = genericComponent()({
   props: {
     absolute: Boolean,
     attach: [Boolean, String, Object],
+    closeOnBack: {
+      type: Boolean,
+      default: true
+    },
     contained: Boolean,
     contentClass: null,
+    contentProps: null,
+    disabled: Boolean,
     noClickAnimation: Boolean,
     modelValue: Boolean,
     persistent: Boolean,
@@ -57,13 +63,17 @@ export const VOverlay = genericComponent()({
       type: [String, Boolean],
       default: true
     },
+    zIndex: {
+      type: [Number, String],
+      default: 2000
+    },
     ...makeActivatorProps(),
     ...makeDimensionProps(),
-    ...makePositionStrategyProps(),
+    ...makeLazyProps(),
+    ...makeLocationStrategyProps(),
     ...makeScrollStrategyProps(),
     ...makeThemeProps(),
-    ...makeTransitionProps(),
-    ...makeLazyProps()
+    ...makeTransitionProps()
   },
   emits: {
     'click:outside': e => true,
@@ -77,7 +87,13 @@ export const VOverlay = genericComponent()({
       attrs,
       emit
     } = _ref;
-    const isActive = useProxiedModel(props, 'modelValue');
+    const model = useProxiedModel(props, 'modelValue');
+    const isActive = computed({
+      get: () => model.value,
+      set: v => {
+        if (!(v && props.disabled)) model.value = v;
+      }
+    });
     const {
       teleportTarget
     } = useTeleport(computed(() => props.attach || props.contained));
@@ -85,7 +101,8 @@ export const VOverlay = genericComponent()({
       themeClasses
     } = provideTheme(props);
     const {
-      rtlClasses
+      rtlClasses,
+      isRtl
     } = useRtl();
     const {
       hasContent,
@@ -94,23 +111,34 @@ export const VOverlay = genericComponent()({
     const scrimColor = useBackgroundColor(computed(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
     }));
+    const {
+      globalTop,
+      localTop,
+      stackStyles
+    } = useStack(isActive, toRef(props, 'zIndex'));
     const {
       activatorEl,
       activatorRef,
-      activatorEvents
-    } = useActivator(props, isActive);
+      activatorEvents,
+      contentEvents,
+      scrimEvents
+    } = useActivator(props, {
+      isActive,
+      isTop: localTop
+    });
     const {
       dimensionStyles
     } = useDimension(props);
-    const {
-      isTop
-    } = useStack(isActive);
+    watch(() => props.disabled, v => {
+      if (v) isActive.value = false;
+    });
     const root = ref();
     const contentEl = ref();
     const {
       contentStyles,
-      updatePosition
-    } = usePositionStrategies(props, {
+      updateLocation
+    } = useLocationStrategies(props, {
+      isRtl,
       contentEl,
       activatorEl,
       isActive
@@ -120,7 +148,7 @@ export const VOverlay = genericComponent()({
       contentEl,
       activatorEl,
       isActive,
-      updatePosition
+      updateLocation
     });
 
     function onClickOutside(e) {
@@ -129,7 +157,7 @@ export const VOverlay = genericComponent()({
     }
 
     function closeConditional() {
-      return isActive.value && isTop.value;
+      return isActive.value && globalTop.value;
     }
 
     IN_BROWSER && watch(isActive, val => {
@@ -143,20 +171,23 @@ export const VOverlay = genericComponent()({
     });
 
     function onKeydown(e) {
-      if (e.key === 'Escape' && isTop.value) {
+      if (e.key === 'Escape' && globalTop.value) {
         if (!props.persistent) {
           isActive.value = false;
         } else animateClick();
       }
     }
 
-    useBackButton(next => {
-      if (isTop.value && isActive.value) {
-        next(false);
-        if (!props.persistent) isActive.value = false;else animateClick();
-      } else {
-        next();
-      }
+    const router = useRouter();
+    useToggleScope(() => props.closeOnBack, () => {
+      useBackButton(router, next => {
+        if (globalTop.value && isActive.value) {
+          next(false);
+          if (!props.persistent) isActive.value = false;else animateClick();
+        } else {
+          next();
+        }
+      });
     });
     const top = ref();
     watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
@@ -170,10 +201,8 @@ export const VOverlay = genericComponent()({
     }); // Add a quick "bounce" animation to the content
 
     function animateClick() {
-      var _contentEl$value;
-
       if (props.noClickAnimation) return;
-      (_contentEl$value = contentEl.value) == null ? void 0 : _contentEl$value.animate([{
+      contentEl.value && animate(contentEl.value, [{
         transformOrigin: 'center'
       }, {
         transform: 'scale(1.03)'
@@ -185,9 +214,6 @@ export const VOverlay = genericComponent()({
       });
     }
 
-    const {
-      overlayZIndex
-    } = useOverlay(isActive);
     useRender(() => {
       var _slots$activator, _slots$default;
 
@@ -206,15 +232,14 @@ export const VOverlay = genericComponent()({
             'v-overlay--active': isActive.value,
             'v-overlay--contained': props.contained
           }, themeClasses.value, rtlClasses.value],
-          "style": {
-            top: convertToUnit(top.value),
-            zIndex: overlayZIndex.value
-          },
+          "style": [stackStyles.value, {
+            top: convertToUnit(top.value)
+          }],
           "ref": root
-        }, attrs), [_createVNode(Scrim, {
+        }, attrs), [_createVNode(Scrim, _mergeProps({
           "color": scrimColor,
           "modelValue": isActive.value && !!props.scrim
-        }, null), _createVNode(MaybeTransition, {
+        }, toHandlers(scrimEvents.value)), null), _createVNode(MaybeTransition, {
           "appear": true,
           "persisted": true,
           "transition": props.transition,
@@ -224,11 +249,11 @@ export const VOverlay = genericComponent()({
             emit('afterLeave');
           }
         }, {
-          default: () => [_withDirectives(_createVNode("div", {
+          default: () => [_withDirectives(_createVNode("div", _mergeProps({
             "ref": contentEl,
             "class": ['v-overlay__content', props.contentClass],
             "style": [dimensionStyles.value, contentStyles.value]
-          }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          }, toHandlers(contentEvents.value), props.contentProps), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             isActive
           })]), [[_vShow, isActive.value], [_resolveDirective("click-outside"), {
             handler: onClickOutside,
@@ -239,9 +264,12 @@ export const VOverlay = genericComponent()({
       })]);
     });
     return {
+      activatorEl,
       animateClick,
       contentEl,
-      activatorEl
+      globalTop,
+      localTop,
+      updateLocation
     };
   }
 

package/lib/components/VOverlay/VOverlay.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"names":["makeActivatorProps","useActivator","makePositionStrategyProps","usePositionStrategies","makeScrollStrategyProps","useScrollStrategies","makeThemeProps","provideTheme","makeTransitionProps","MaybeTransition","useBackButton","useBackgroundColor","useProxiedModel","useRtl","useTeleport","makeDimensionProps","useDimension","makeLazyProps","useLazy","useStack","useOverlay","ClickOutside","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","standardEasing","useRender","computed","mergeProps","ref","Teleport","toHandlers","Transition","watch","Scrim","props","modelValue","color","rest","backgroundColorClasses","value","backgroundColorStyles","VOverlay","name","directives","inheritAttrs","absolute","Boolean","attach","String","Object","contained","contentClass","noClickAnimation","persistent","scrim","type","default","emits","e","afterLeave","setup","slots","attrs","emit","isActive","teleportTarget","themeClasses","rtlClasses","hasContent","onAfterLeave","scrimColor","activatorEl","activatorRef","activatorEvents","dimensionStyles","isTop","root","contentEl","contentStyles","updatePosition","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","next","top","scrollParent","document","scrollingElement","scrollTop","animate","transformOrigin","transform","duration","easing","overlayZIndex","activator","activatorProps","zIndex","transition","handler","include"],"mappings":"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","sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { makePositionStrategyProps, usePositionStrategies } from './positionStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackButton } from '@/composables/router'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRtl } from '@/composables/rtl'\nimport { useTeleport } from '@/composables/teleport'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { useStack } from '@/composables/stack'\nimport { useOverlay } from '@/composables/overlay'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n  convertToUnit,\n  genericComponent,\n  getScrollParent,\n  IN_BROWSER,\n  standardEasing,\n  useRender,\n} from '@/util'\nimport {\n  computed,\n  mergeProps,\n  ref,\n  Teleport,\n  toHandlers,\n  Transition,\n  watch,\n} from 'vue'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { BackgroundColorData } from '@/composables/color'\n\ninterface ScrimProps {\n  [key: string]: unknown\n  modelValue: boolean\n  color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n  const { modelValue, color, ...rest } = props\n  return (\n    <Transition name=\"fade-transition\" appear>\n      { props.modelValue && (\n        <div\n          class={[\n            'v-overlay__scrim',\n            props.color.backgroundColorClasses.value,\n          ]}\n          style={ props.color.backgroundColorStyles.value }\n          { ...rest }\n        />\n      )}\n    </Transition>\n  )\n}\n\nexport type OverlaySlots = MakeSlots<{\n  default: [{ isActive: Ref<boolean> }]\n  activator: [{ isActive: boolean, props: Record<string, any> }]\n}>\n\nexport const VOverlay = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VOverlay',\n\n  directives: { ClickOutside },\n\n  inheritAttrs: false,\n\n  props: {\n    absolute: Boolean,\n    attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n    contained: Boolean,\n    contentClass: null,\n    noClickAnimation: Boolean,\n    modelValue: Boolean,\n    persistent: Boolean,\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n\n    ...makeActivatorProps(),\n    ...makeDimensionProps(),\n    ...makePositionStrategyProps(),\n    ...makeScrollStrategyProps(),\n    ...makeThemeProps(),\n    ...makeTransitionProps(),\n    ...makeLazyProps(),\n  },\n\n  emits: {\n    'click:outside': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { slots, attrs, emit }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses } = useRtl()\n    const { hasContent, onAfterLeave } = useLazy(props, isActive)\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const { activatorEl, activatorRef, activatorEvents } = useActivator(props, isActive)\n    const { dimensionStyles } = useDimension(props)\n    const { isTop } = useStack(isActive)\n\n    const root = ref<HTMLElement>()\n    const contentEl = ref<HTMLElement>()\n    const { contentStyles, updatePosition } = usePositionStrategies(props, {\n      contentEl,\n      activatorEl,\n      isActive,\n    })\n    useScrollStrategies(props, {\n      root,\n      contentEl,\n      activatorEl,\n      isActive,\n      updatePosition,\n    })\n\n    function onClickOutside (e: MouseEvent) {\n      emit('click:outside', e)\n\n      if (!props.persistent) isActive.value = false\n      else animateClick()\n    }\n\n    function closeConditional () {\n      return isActive.value && isTop.value\n    }\n\n    IN_BROWSER && watch(isActive, val => {\n      if (val) {\n        window.addEventListener('keydown', onKeydown)\n      } else {\n        window.removeEventListener('keydown', onKeydown)\n      }\n    }, { immediate: true })\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key === 'Escape' && isTop.value) {\n        if (!props.persistent) {\n          isActive.value = false\n        } else animateClick()\n      }\n    }\n\n    useBackButton(next => {\n      if (isTop.value && isActive.value) {\n        next(false)\n        if (!props.persistent) isActive.value = false\n        else animateClick()\n      } else {\n        next()\n      }\n    })\n\n    const top = ref<number>()\n    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n      if (val) {\n        const scrollParent = getScrollParent(root.value)\n        if (scrollParent && scrollParent !== document.scrollingElement) {\n          top.value = scrollParent.scrollTop\n        }\n      }\n    })\n\n    // Add a quick \"bounce\" animation to the content\n    function animateClick () {\n      if (props.noClickAnimation) return\n\n      contentEl.value?.animate([\n        { transformOrigin: 'center' },\n        { transform: 'scale(1.03)' },\n        { transformOrigin: 'center' },\n      ], {\n        duration: 150,\n        easing: standardEasing,\n      })\n    }\n\n    const { overlayZIndex } = useOverlay(isActive)\n\n    useRender(() => (\n      <>\n        { slots.activator?.({\n          isActive: isActive.value,\n          props: mergeProps({\n            ref: activatorRef,\n          }, toHandlers(activatorEvents.value), props.activatorProps),\n        }) }\n\n        { IN_BROWSER && (\n          <Teleport\n            disabled={ !teleportTarget.value }\n            to={ teleportTarget.value }\n          >\n            { hasContent.value && (\n              <div\n                class={[\n                  'v-overlay',\n                  {\n                    'v-overlay--absolute': props.absolute || props.contained,\n                    'v-overlay--active': isActive.value,\n                    'v-overlay--contained': props.contained,\n                  },\n                  themeClasses.value,\n                  rtlClasses.value,\n                ]}\n                style={{\n                  top: convertToUnit(top.value),\n                  zIndex: overlayZIndex.value,\n                }}\n                ref={ root }\n                {...attrs}\n              >\n                <Scrim\n                  color={ scrimColor }\n                  modelValue={ isActive.value && !!props.scrim }\n                />\n                <MaybeTransition\n                  appear\n                  persisted\n                  transition={ props.transition }\n                  target={ activatorEl.value }\n                  onAfterLeave={() => { onAfterLeave(); emit('afterLeave') }}\n                >\n                  <div\n                    ref={ contentEl }\n                    v-show={ isActive.value }\n                    v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n                    class={[\n                      'v-overlay__content',\n                      props.contentClass,\n                    ]}\n                    style={[\n                      dimensionStyles.value,\n                      contentStyles.value,\n                    ]}\n                  >\n                    { slots.default?.({ isActive }) }\n                  </div>\n                </MaybeTransition>\n              </div>\n            )}\n          </Teleport>\n        ) }\n      </>\n    ))\n\n    return {\n      animateClick,\n      contentEl,\n      activatorEl,\n    }\n  },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"file":"VOverlay.mjs"}
+{"version":3,"file":"VOverlay.mjs","names":["makeActivatorProps","useActivator","makeDimensionProps","useDimension","makeLazyProps","useLazy","makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeThemeProps","provideTheme","makeTransitionProps","MaybeTransition","useBackButton","useRouter","useBackgroundColor","useProxiedModel","useRtl","useStack","useTeleport","useToggleScope","ClickOutside","animate","convertToUnit","genericComponent","getScrollParent","IN_BROWSER","standardEasing","useRender","computed","mergeProps","ref","Teleport","toHandlers","toRef","Transition","watch","Scrim","props","modelValue","color","rest","backgroundColorClasses","value","backgroundColorStyles","VOverlay","name","directives","inheritAttrs","absolute","Boolean","attach","String","Object","closeOnBack","type","default","contained","contentClass","contentProps","disabled","noClickAnimation","persistent","scrim","zIndex","Number","emits","e","afterLeave","setup","slots","attrs","emit","model","isActive","get","set","v","teleportTarget","themeClasses","rtlClasses","isRtl","hasContent","onAfterLeave","scrimColor","globalTop","localTop","stackStyles","activatorEl","activatorRef","activatorEvents","contentEvents","scrimEvents","isTop","dimensionStyles","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","router","next","top","scrollParent","document","scrollingElement","scrollTop","transformOrigin","transform","duration","easing","activator","activatorProps","transition","handler","include"],"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeActivatorProps, useActivator } from './useActivator'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies'\nimport { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackButton, useRouter } from '@/composables/router'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRtl } from '@/composables/rtl'\nimport { useStack } from '@/composables/stack'\nimport { useTeleport } from '@/composables/teleport'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport {\n  animate,\n  convertToUnit,\n  genericComponent,\n  getScrollParent,\n  IN_BROWSER,\n  standardEasing,\n  useRender,\n} from '@/util'\nimport {\n  computed,\n  mergeProps,\n  ref,\n  Teleport,\n  toHandlers,\n  toRef,\n  Transition,\n  watch,\n} from 'vue'\n\n// Types\nimport type { BackgroundColorData } from '@/composables/color'\nimport type { MakeSlots } from '@/util'\nimport type { PropType, Ref } from 'vue'\n\ninterface ScrimProps {\n  [key: string]: unknown\n  modelValue: boolean\n  color: BackgroundColorData\n}\nfunction Scrim (props: ScrimProps) {\n  const { modelValue, color, ...rest } = props\n  return (\n    <Transition name=\"fade-transition\" appear>\n      { props.modelValue && (\n        <div\n          class={[\n            'v-overlay__scrim',\n            props.color.backgroundColorClasses.value,\n          ]}\n          style={ props.color.backgroundColorStyles.value }\n          { ...rest }\n        />\n      )}\n    </Transition>\n  )\n}\n\nexport type OverlaySlots = MakeSlots<{\n  default: [{ isActive: Ref<boolean> }]\n  activator: [{ isActive: boolean, props: Record<string, any> }]\n}>\n\nexport const VOverlay = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VOverlay',\n\n  directives: { ClickOutside },\n\n  inheritAttrs: false,\n\n  props: {\n    absolute: Boolean,\n    attach: [Boolean, String, Object] as PropType<boolean | string | Element>,\n    closeOnBack: {\n      type: Boolean,\n      default: true,\n    },\n    contained: Boolean,\n    contentClass: null,\n    contentProps: null,\n    disabled: Boolean,\n    noClickAnimation: Boolean,\n    modelValue: Boolean,\n    persistent: Boolean,\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n    zIndex: {\n      type: [Number, String],\n      default: 2000,\n    },\n\n    ...makeActivatorProps(),\n    ...makeDimensionProps(),\n    ...makeLazyProps(),\n    ...makeLocationStrategyProps(),\n    ...makeScrollStrategyProps(),\n    ...makeThemeProps(),\n    ...makeTransitionProps(),\n  },\n\n  emits: {\n    'click:outside': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    afterLeave: () => true,\n  },\n\n  setup (props, { slots, attrs, emit }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const isActive = computed({\n      get: () => model.value,\n      set: v => {\n        if (!(v && props.disabled)) model.value = v\n      },\n    })\n    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses, isRtl } = useRtl()\n    const { hasContent, onAfterLeave } = useLazy(props, isActive)\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'))\n    const { activatorEl, activatorRef, activatorEvents, contentEvents, scrimEvents } = useActivator(props, { isActive, isTop: localTop })\n    const { dimensionStyles } = useDimension(props)\n\n    watch(() => props.disabled, v => {\n      if (v) isActive.value = false\n    })\n\n    const root = ref<HTMLElement>()\n    const contentEl = ref<HTMLElement>()\n    const { contentStyles, updateLocation } = useLocationStrategies(props, {\n      isRtl,\n      contentEl,\n      activatorEl,\n      isActive,\n    })\n    useScrollStrategies(props, {\n      root,\n      contentEl,\n      activatorEl,\n      isActive,\n      updateLocation,\n    })\n\n    function onClickOutside (e: MouseEvent) {\n      emit('click:outside', e)\n\n      if (!props.persistent) isActive.value = false\n      else animateClick()\n    }\n\n    function closeConditional () {\n      return isActive.value && globalTop.value\n    }\n\n    IN_BROWSER && watch(isActive, val => {\n      if (val) {\n        window.addEventListener('keydown', onKeydown)\n      } else {\n        window.removeEventListener('keydown', onKeydown)\n      }\n    }, { immediate: true })\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key === 'Escape' && globalTop.value) {\n        if (!props.persistent) {\n          isActive.value = false\n        } else animateClick()\n      }\n    }\n\n    const router = useRouter()\n    useToggleScope(() => props.closeOnBack, () => {\n      useBackButton(router, next => {\n        if (globalTop.value && isActive.value) {\n          next(false)\n          if (!props.persistent) isActive.value = false\n          else animateClick()\n        } else {\n          next()\n        }\n      })\n    })\n\n    const top = ref<number>()\n    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {\n      if (val) {\n        const scrollParent = getScrollParent(root.value)\n        if (scrollParent && scrollParent !== document.scrollingElement) {\n          top.value = scrollParent.scrollTop\n        }\n      }\n    })\n\n    // Add a quick \"bounce\" animation to the content\n    function animateClick () {\n      if (props.noClickAnimation) return\n\n      contentEl.value && animate(contentEl.value, [\n        { transformOrigin: 'center' },\n        { transform: 'scale(1.03)' },\n        { transformOrigin: 'center' },\n      ], {\n        duration: 150,\n        easing: standardEasing,\n      })\n    }\n\n    useRender(() => (\n      <>\n        { slots.activator?.({\n          isActive: isActive.value,\n          props: mergeProps({\n            ref: activatorRef,\n          }, toHandlers(activatorEvents.value), props.activatorProps),\n        }) }\n\n        { IN_BROWSER && (\n          <Teleport\n            disabled={ !teleportTarget.value }\n            to={ teleportTarget.value }\n          >\n            { hasContent.value && (\n              <div\n                class={[\n                  'v-overlay',\n                  {\n                    'v-overlay--absolute': props.absolute || props.contained,\n                    'v-overlay--active': isActive.value,\n                    'v-overlay--contained': props.contained,\n                  },\n                  themeClasses.value,\n                  rtlClasses.value,\n                ]}\n                style={[stackStyles.value, { top: convertToUnit(top.value) }]}\n                ref={ root }\n                {...attrs}\n              >\n                <Scrim\n                  color={ scrimColor }\n                  modelValue={ isActive.value && !!props.scrim }\n                  { ...toHandlers(scrimEvents.value) }\n                />\n                <MaybeTransition\n                  appear\n                  persisted\n                  transition={ props.transition }\n                  target={ activatorEl.value }\n                  onAfterLeave={() => { onAfterLeave(); emit('afterLeave') }}\n                >\n                  <div\n                    ref={ contentEl }\n                    v-show={ isActive.value }\n                    v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}\n                    class={[\n                      'v-overlay__content',\n                      props.contentClass,\n                    ]}\n                    style={[\n                      dimensionStyles.value,\n                      contentStyles.value,\n                    ]}\n                    { ...toHandlers(contentEvents.value) }\n                    { ...props.contentProps }\n                  >\n                    { slots.default?.({ isActive }) }\n                  </div>\n                </MaybeTransition>\n              </div>\n            )}\n          </Teleport>\n        ) }\n      </>\n    ))\n\n    return {\n      activatorEl,\n      animateClick,\n      contentEl,\n      globalTop,\n      localTop,\n      updateLocation,\n    }\n  },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"mappings":"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"}

package/lib/components/VOverlay/VOverlay.sass

@@ -1,4 +1,4 @@
-@forward './variables'
+@use 'sass:selector'
 @use './variables' as *
 
 // Block
@@ -14,6 +14,13 @@
   padding-inline-end: var(--v-scrollbar-offset)
   overflow-y: hidden !important
 
+  @at-root #{selector.append(html, &)}
+    position: fixed
+    top: var(--v-body-scroll-y)
+    left: var(--v-body-scroll-x)
+    width: 100%
+    height: 100%
+
 .v-overlay
   border-radius: inherit
   display: flex

package/lib/components/VOverlay/_variables.scss

@@ -1,3 +1,3 @@
 // Defaults
-$overlay-opacity: 32%;
+$overlay-opacity: 32% !default;
 $overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default;