@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VOverlay/VOverlay.mjs

@@ -1,41 +1,26 @@
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 // Styles
-import "./VOverlay.sass"; // Composables
+import "./VOverlay.css"; // Composables
 
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
+import { makeActivatorProps, useActivator } from "./useActivator.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 { useToggleScope } from "../../composables/toggleScope.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"; // Directives
+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"; // Directives
 
 import { ClickOutside } from "../../directives/click-outside/index.mjs"; // Utilities
 
-import { convertToUnit, getScrollParent, getScrollParents, standardEasing, useRender } from "../../util/index.mjs";
-import { makeProps } from "../../util/makeProps.mjs";
-import { computed, defineComponent, nextTick, ref, Teleport, toRef, Transition, watch, watchEffect } from 'vue'; // Types
-
-function useBooted(isActive, eager) {
-  const isBooted = ref(eager.value);
-  watchEffect(() => {
-    if (eager.value || isActive.value) {
-      isBooted.value = true;
-    }
-  });
-  return {
-    isBooted
-  };
-}
-
-const positionStrategies = ['global', // specific viewport position, usually centered
-'connected', // connected to a certain element
-'flexible' // connected to an element with the ability to overflow or shift if it doesn't fit in the screen
-];
-const scrollStrategies = ['close', 'block', 'reposition'];
+import { 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 {
@@ -50,134 +35,117 @@ function Scrim(props) {
     default: () => [props.modelValue && _createVNode("div", _mergeProps({
       "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
       "style": props.color.backgroundColorStyles.value
-    }, rest), null, 16)]
-  }, 8, ["appear"]);
-}
-
-class CloseScrollStrategy {
-  constructor({
-    content,
-    isActive
-  }) {
-    _defineProperty(this, "scrollElements", []);
-
-    this.content = content;
-    this.isActive = isActive;
-  }
-
-  enable() {
-    this.scrollElements = [document, ...getScrollParents(this.content.value)];
-    this.scrollElements.forEach(el => {
-      el.addEventListener('scroll', this.onScroll.bind(this), {
-        passive: true
-      });
-    });
-  }
-
-  disable() {
-    this.scrollElements.forEach(el => {
-      el.removeEventListener('scroll', this.onScroll.bind(this));
-    });
-  }
-
-  onScroll() {
-    this.isActive.value = false;
-  }
-
-}
-
-class BlockScrollStrategy {
-  constructor({
-    content
-  }) {
-    _defineProperty(this, "initialOverflow", []);
-
-    _defineProperty(this, "scrollElements", []);
-
-    this.content = content;
-  }
-
-  enable() {
-    this.scrollElements = getScrollParents(this.content.value);
-    const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
-    document.documentElement.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
-    this.scrollElements.forEach((el, i) => {
-      this.initialOverflow[i] = el.style.overflowY;
-      el.style.overflowY = 'hidden';
-      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
-    });
-  }
-
-  disable() {
-    this.scrollElements.forEach((el, i) => {
-      el.style.overflowY = this.initialOverflow[i];
-      el.style.removeProperty('--v-scrollbar-offset');
-    });
-    document.documentElement.style.removeProperty('--v-scrollbar-offset');
-  }
-
+    }, rest), null)]
+  });
 }
 
-export default defineComponent({
+export const VOverlay = genericComponent()({
   name: 'VOverlay',
   directives: {
     ClickOutside
   },
   inheritAttrs: false,
-  props: makeProps({
+  props: {
     absolute: Boolean,
-    attach: {
-      type: [Boolean, String, Object],
-      default: 'body'
+    attach: [Boolean, String, Object],
+    closeOnBack: {
+      type: Boolean,
+      default: true
     },
-    eager: Boolean,
+    contained: Boolean,
+    contentClass: null,
+    contentProps: null,
+    disabled: Boolean,
     noClickAnimation: Boolean,
     modelValue: Boolean,
-    origin: [String, Object],
     persistent: Boolean,
-    positionStrategy: {
-      type: String,
-      default: 'global',
-      validator: val => positionStrategies.includes(val)
-    },
     scrim: {
       type: [String, Boolean],
       default: true
     },
-    scrollStrategy: {
-      type: String,
-      default: 'block',
-      validator: val => scrollStrategies.includes(val)
+    zIndex: {
+      type: [Number, String],
+      default: 2000
     },
+    ...makeActivatorProps(),
+    ...makeDimensionProps(),
+    ...makeLocationStrategyProps(),
+    ...makeScrollStrategyProps(),
     ...makeThemeProps(),
-    ...makeTransitionProps()
-  }),
+    ...makeTransitionProps(),
+    ...makeLazyProps()
+  },
   emits: {
     'click:outside': e => true,
-    'update:modelValue': value => true
+    'update:modelValue': value => true,
+    afterLeave: () => true
   },
 
-  setup(props, {
-    slots,
-    attrs,
-    emit
-  }) {
-    const isActive = useProxiedModel(props, 'modelValue');
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const isActive = computed({
+      get: () => model.value,
+      set: v => {
+        if (!(v && props.disabled)) model.value = v;
+      }
+    });
     const {
       teleportTarget
-    } = useTeleport(toRef(props, 'attach'));
+    } = useTeleport(computed(() => props.attach || props.contained));
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
     const {
-      isBooted
-    } = useBooted(isActive, toRef(props, 'eager'));
+      hasContent,
+      onAfterLeave
+    } = useLazy(props, isActive);
     const scrimColor = useBackgroundColor(computed(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
     }));
+    const {
+      isTop,
+      stackStyles
+    } = useStack(isActive, toRef(props, 'zIndex'));
+    const {
+      activatorEl,
+      activatorRef,
+      activatorEvents,
+      contentEvents
+    } = useActivator(props, {
+      isActive,
+      isTop
+    });
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    watch(() => props.disabled, v => {
+      if (v) isActive.value = false;
+    });
+    const root = ref();
+    const contentEl = ref();
+    const {
+      contentStyles,
+      updateLocation
+    } = useLocationStrategies(props, {
+      contentEl,
+      activatorEl,
+      isActive
+    });
+    useScrollStrategies(props, {
+      root,
+      contentEl,
+      activatorEl,
+      isActive,
+      updateLocation
+    });
 
     function onClickOutside(e) {
       emit('click:outside', e);
@@ -185,45 +153,40 @@ export default defineComponent({
     }
 
     function closeConditional() {
-      return isActive.value;
+      return isActive.value && isTop.value;
     }
 
-    const activatorElement = ref();
-
-    function onActivatorClick(e) {
-      activatorElement.value = e.currentTarget || e.target;
-      isActive.value = !isActive.value;
-    }
+    IN_BROWSER && watch(isActive, val => {
+      if (val) {
+        window.addEventListener('keydown', onKeydown);
+      } else {
+        window.removeEventListener('keydown', onKeydown);
+      }
+    }, {
+      immediate: true
+    });
 
     function onKeydown(e) {
-      if (e.key === 'Escape') {
+      if (e.key === 'Escape' && isTop.value) {
         if (!props.persistent) {
           isActive.value = false;
         } else animateClick();
       }
     }
 
-    useBackButton(next => {
-      next(!isActive.value);
-      if (!props.persistent) isActive.value = false;else animateClick();
-    });
-    const content = ref();
-    watch(isActive, val => {
-      nextTick(() => {
-        if (val) {
-          var _content$value;
-
-          (_content$value = content.value) == null ? void 0 : _content$value.focus();
+    const router = useRouter();
+    useToggleScope(() => props.closeOnBack, () => {
+      useBackButton(router, next => {
+        if (isTop.value && isActive.value) {
+          next(false);
+          if (!props.persistent) isActive.value = false;else animateClick();
         } else {
-          var _activatorElement$val;
-
-          (_activatorElement$val = activatorElement.value) == null ? void 0 : _activatorElement$val.focus();
+          next();
         }
       });
     });
-    const root = ref();
     const top = ref();
-    watch(() => isActive.value && props.absolute && teleportTarget.value == null, val => {
+    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
       if (val) {
         const scrollParent = getScrollParent(root.value);
 
@@ -234,10 +197,10 @@ export default defineComponent({
     }); // Add a quick "bounce" animation to the content
 
     function animateClick() {
-      var _content$value2;
+      var _contentEl$value;
 
       if (props.noClickAnimation) return;
-      (_content$value2 = content.value) == null ? void 0 : _content$value2.animate([{
+      (_contentEl$value = contentEl.value) == null ? void 0 : _contentEl$value.animate([{
         transformOrigin: 'center'
       }, {
         transform: 'scale(1.03)'
@@ -249,72 +212,61 @@ export default defineComponent({
       });
     }
 
-    function onAfterLeave() {
-      if (!props.eager) isBooted.value = false;
-    }
-
-    const scrollStrategy = props.scrollStrategy === 'close' ? new CloseScrollStrategy({
-      content,
-      isActive
-    }) : props.scrollStrategy === 'block' ? new BlockScrollStrategy({
-      content
-    }) : null; // TODO: reactive
-
-    if (scrollStrategy) {
-      watch(isActive, val => {
-        nextTick(() => {
-          val ? scrollStrategy.enable() : scrollStrategy.disable();
-        });
-      });
-    }
-
     useRender(() => {
       var _slots$activator, _slots$default;
 
       return _createVNode(_Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
         isActive: isActive.value,
-        props: {
-          modelValue: isActive.value,
-          'onUpdate:modelValue': val => isActive.value = val,
-          onClick: onActivatorClick
-        }
-      }), _createVNode(Teleport, {
+        props: mergeProps({
+          ref: activatorRef
+        }, toHandlers(activatorEvents.value), props.activatorProps)
+      }), IN_BROWSER && _createVNode(Teleport, {
         "disabled": !teleportTarget.value,
-        "ref": root,
         "to": teleportTarget.value
       }, {
-        default: () => [isBooted.value && _createVNode("div", _mergeProps({
+        default: () => [hasContent.value && _createVNode("div", _mergeProps({
           "class": ['v-overlay', {
-            'v-overlay--absolute': props.absolute,
-            'v-overlay--active': isActive.value
+            'v-overlay--absolute': props.absolute || props.contained,
+            'v-overlay--active': isActive.value,
+            'v-overlay--contained': props.contained
           }, themeClasses.value, rtlClasses.value],
-          "style": top.value != null ? `top: ${convertToUnit(top.value)}` : undefined
+          "style": [stackStyles.value, {
+            top: convertToUnit(top.value)
+          }],
+          "ref": root
         }, attrs), [_createVNode(Scrim, {
           "color": scrimColor,
           "modelValue": isActive.value && !!props.scrim
-        }, null, 8, ["color", "modelValue"]), _createVNode(MaybeTransition, {
+        }, null), _createVNode(MaybeTransition, {
           "appear": true,
-          "onAfterLeave": onAfterLeave,
           "persisted": true,
-          "transition": props.transition
+          "transition": props.transition,
+          "target": activatorEl.value,
+          "onAfterLeave": () => {
+            onAfterLeave();
+            emit('afterLeave');
+          }
         }, {
-          default: () => [_withDirectives(_createVNode("div", {
-            "ref": content,
-            "class": "v-overlay__content",
-            "tabindex": -1,
-            "onKeydown": onKeydown
-          }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          default: () => [_withDirectives(_createVNode("div", _mergeProps({
+            "ref": contentEl,
+            "class": ['v-overlay__content', props.contentClass],
+            "style": [dimensionStyles.value, contentStyles.value]
+          }, toHandlers(contentEvents.value), props.contentProps), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             isActive
-          })], 40, ["tabindex", "onKeydown"]), [[_vShow, isActive.value], [_resolveDirective("click-outside"), {
+          })]), [[_vShow, isActive.value], [_resolveDirective("click-outside"), {
             handler: onClickOutside,
-            closeConditional
+            closeConditional,
+            include: () => [activatorEl.value]
           }]])]
-        }, 8, ["appear", "onAfterLeave", "persisted", "transition"])], 16)]
-      }, 8, ["disabled", "to"])]);
+        })])]
+      })]);
     });
     return {
       animateClick,
-      content
+      contentEl,
+      activatorEl,
+      isTop,
+      updateLocation
     };
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VOverlay/VOverlay.tsx"],"names":["makeThemeProps","useTheme","makeTransitionProps","MaybeTransition","useBackButton","useBackgroundColor","useProxiedModel","useRtl","useTeleport","ClickOutside","convertToUnit","getScrollParent","getScrollParents","standardEasing","useRender","makeProps","computed","defineComponent","nextTick","ref","Teleport","toRef","Transition","watch","watchEffect","useBooted","isActive","eager","isBooted","value","positionStrategies","scrollStrategies","Scrim","props","modelValue","color","rest","backgroundColorClasses","backgroundColorStyles","CloseScrollStrategy","constructor","content","enable","scrollElements","document","forEach","el","addEventListener","onScroll","bind","passive","disable","removeEventListener","BlockScrollStrategy","scrollbarWidth","window","innerWidth","documentElement","offsetWidth","style","setProperty","i","initialOverflow","overflowY","removeProperty","name","directives","inheritAttrs","absolute","Boolean","attach","type","String","Object","default","noClickAnimation","origin","persistent","positionStrategy","validator","val","includes","scrim","scrollStrategy","emits","e","setup","slots","attrs","emit","teleportTarget","themeClasses","rtlClasses","scrimColor","onClickOutside","animateClick","closeConditional","activatorElement","onActivatorClick","currentTarget","target","onKeydown","key","next","focus","root","top","scrollParent","scrollingElement","scrollTop","animate","transformOrigin","transform","duration","easing","onAfterLeave","activator","onClick","undefined","transition","handler"],"mappings":"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","sourcesContent":["// Styles\nimport './VOverlay.sass'\n\n// Composables\nimport { makeThemeProps, useTheme } 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'\n\n// Directives\nimport { ClickOutside } from '@/directives/click-outside'\n\n// Utilities\nimport { convertToUnit, getScrollParent, getScrollParents, standardEasing, useRender } from '@/util'\nimport { makeProps } from '@/util/makeProps'\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  ref,\n  Teleport,\n  toRef,\n  Transition,\n  watch,\n  watchEffect,\n} from 'vue'\n\n// Types\nimport type { BackgroundColorData } from '@/composables/color'\nimport type { Prop, PropType, Ref } from 'vue'\n\nfunction useBooted (isActive: Ref<boolean>, eager: Ref<boolean>) {\n  const isBooted = ref(eager.value)\n\n  watchEffect(() => {\n    if (eager.value || isActive.value) {\n      isBooted.value = true\n    }\n  })\n\n  return { isBooted }\n}\n\nconst positionStrategies = [\n  'global', // specific viewport position, usually centered\n  'connected', // connected to a certain element\n  'flexible', // connected to an element with the ability to overflow or shift if it doesn't fit in the screen\n] as const\n\nconst scrollStrategies = [\n  'close',\n  'block',\n  'reposition',\n] as const\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\ninterface ScrollStrategy {\n  enable (): void\n  disable (): void\n}\n\nclass CloseScrollStrategy implements ScrollStrategy {\n  private content: Ref<HTMLElement | undefined>\n  private scrollElements: EventTarget[] = []\n  private isActive: Ref<boolean>\n\n  constructor ({ content, isActive }: { content: Ref<HTMLElement | undefined>, isActive: Ref<boolean> }) {\n    this.content = content\n    this.isActive = isActive\n  }\n\n  enable () {\n    this.scrollElements = [document, ...getScrollParents(this.content.value)]\n\n    this.scrollElements.forEach(el => {\n      el.addEventListener('scroll', this.onScroll.bind(this), { passive: true })\n    })\n  }\n\n  disable () {\n    this.scrollElements.forEach(el => {\n      el.removeEventListener('scroll', this.onScroll.bind(this))\n    })\n  }\n\n  private onScroll () {\n    this.isActive.value = false\n  }\n}\n\nclass BlockScrollStrategy implements ScrollStrategy {\n  private initialOverflow: string[] = []\n  private scrollElements: HTMLElement[] = []\n  private content: Ref<HTMLElement | undefined>\n\n  constructor ({ content }: { content: Ref<HTMLElement | undefined> }) {\n    this.content = content\n  }\n\n  enable () {\n    this.scrollElements = getScrollParents(this.content.value)\n    const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth\n\n    document.documentElement.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))\n\n    this.scrollElements.forEach((el, i) => {\n      this.initialOverflow[i] = el.style.overflowY\n      el.style.overflowY = 'hidden'\n      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth))\n    })\n  }\n\n  disable () {\n    this.scrollElements.forEach((el, i) => {\n      el.style.overflowY = this.initialOverflow[i]\n      el.style.removeProperty('--v-scrollbar-offset')\n    })\n    document.documentElement.style.removeProperty('--v-scrollbar-offset')\n  }\n}\n\nexport default defineComponent({\n  name: 'VOverlay',\n\n  directives: { ClickOutside },\n\n  inheritAttrs: false,\n\n  props: makeProps({\n    absolute: Boolean,\n    attach: {\n      type: [Boolean, String, Object] as PropType<boolean | string | Element>,\n      default: 'body',\n    },\n    eager: Boolean,\n    noClickAnimation: Boolean,\n    modelValue: Boolean,\n    origin: [String, Object] as Prop<string | Element>,\n    persistent: Boolean,\n    positionStrategy: {\n      type: String as PropType<typeof positionStrategies[number]>,\n      default: 'global',\n      validator: (val: any) => positionStrategies.includes(val),\n    },\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n    scrollStrategy: {\n      type: String as PropType<typeof scrollStrategies[number]>,\n      default: 'block',\n      validator: (val: any) => scrollStrategies.includes(val),\n    },\n    ...makeThemeProps(),\n    ...makeTransitionProps(),\n  }),\n\n  emits: {\n    'click:outside': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots, attrs, emit }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    const { teleportTarget } = useTeleport(toRef(props, 'attach'))\n    const { themeClasses } = useTheme(props)\n    const { rtlClasses } = useRtl()\n    const { isBooted } = useBooted(isActive, toRef(props, 'eager'))\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\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\n    }\n\n    const activatorElement = ref<HTMLElement>()\n    function onActivatorClick (e: MouseEvent) {\n      activatorElement.value = (e.currentTarget || e.target) as HTMLElement\n      isActive.value = !isActive.value\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        if (!props.persistent) {\n          isActive.value = false\n        } else animateClick()\n      }\n    }\n\n    useBackButton(next => {\n      next(!isActive.value)\n\n      if (!props.persistent) isActive.value = false\n      else animateClick()\n    })\n\n    const content = ref<HTMLElement>()\n    watch(isActive, val => {\n      nextTick(() => {\n        if (val) {\n          content.value?.focus()\n        } else {\n          activatorElement.value?.focus()\n        }\n      })\n    })\n\n    const root = ref()\n    const top = ref<number>()\n    watch(() => isActive.value && props.absolute && 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      content.value?.animate([\n        { transformOrigin: 'center' },\n        { transform: 'scale(1.03)' },\n        { transformOrigin: 'center' },\n      ], {\n        duration: 150,\n        easing: standardEasing,\n      })\n    }\n\n    function onAfterLeave () {\n      if (!props.eager) isBooted.value = false\n    }\n\n    const scrollStrategy =\n      props.scrollStrategy === 'close' ? new CloseScrollStrategy({ content, isActive })\n      : props.scrollStrategy === 'block' ? new BlockScrollStrategy({ content })\n      : null\n\n    // TODO: reactive\n    if (scrollStrategy) {\n      watch(isActive, val => {\n        nextTick(() => {\n          val ? scrollStrategy.enable() : scrollStrategy.disable()\n        })\n      })\n    }\n\n    useRender(() => (\n      <>\n        { slots.activator?.({\n          isActive: isActive.value,\n          props: {\n            modelValue: isActive.value,\n            'onUpdate:modelValue': (val: boolean) => isActive.value = val,\n            onClick: onActivatorClick,\n          },\n        }) }\n        <Teleport\n          disabled={ !teleportTarget.value }\n          ref={ root }\n          to={ teleportTarget.value }\n        >\n          { isBooted.value && (\n            <div\n              class={[\n                'v-overlay',\n                {\n                  'v-overlay--absolute': props.absolute,\n                  'v-overlay--active': isActive.value,\n                },\n                themeClasses.value,\n                rtlClasses.value,\n              ]}\n              style={ top.value != null ? `top: ${convertToUnit(top.value)}` : undefined }\n              {...attrs}\n            >\n              <Scrim\n                color={ scrimColor }\n                modelValue={ isActive.value && !!props.scrim }\n              />\n              <MaybeTransition\n                appear\n                onAfterLeave={ onAfterLeave }\n                persisted\n                transition={ props.transition }\n              >\n                <div\n                  ref={ content }\n                  v-show={ isActive.value }\n                  v-click-outside={{ handler: onClickOutside, closeConditional }}\n                  class=\"v-overlay__content\"\n                  tabindex={ -1 }\n                  onKeydown={ onKeydown }\n                >\n                  { slots.default?.({ isActive }) }\n                </div>\n              </MaybeTransition>\n            </div>\n          )}\n        </Teleport>\n      </>\n    ))\n\n    return {\n      animateClick,\n      content,\n    }\n  },\n})\n"],"file":"VOverlay.mjs"}
+{"version":3,"file":"VOverlay.mjs","names":["makeActivatorProps","useActivator","makeLocationStrategyProps","useLocationStrategies","makeScrollStrategyProps","useScrollStrategies","makeThemeProps","provideTheme","makeTransitionProps","MaybeTransition","useBackButton","useRouter","useToggleScope","useBackgroundColor","useProxiedModel","useRtl","useTeleport","makeDimensionProps","useDimension","makeLazyProps","useLazy","useStack","ClickOutside","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","hasContent","onAfterLeave","scrimColor","isTop","stackStyles","activatorEl","activatorRef","activatorEvents","contentEvents","dimensionStyles","root","contentEl","contentStyles","updateLocation","onClickOutside","animateClick","closeConditional","val","window","addEventListener","onKeydown","removeEventListener","immediate","key","router","next","top","scrollParent","document","scrollingElement","scrollTop","animate","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 { 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 { useToggleScope } from '@/composables/toggleScope'\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'\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  toRef,\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    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    ...makeLocationStrategyProps(),\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 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 } = 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 { isTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'))\n    const { activatorEl, activatorRef, activatorEvents, contentEvents } = useActivator(props, { isActive, isTop })\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      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 && 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    const router = useRouter()\n    useToggleScope(() => props.closeOnBack, () => {\n      useBackButton(router, 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\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    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                />\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      animateClick,\n      contentEl,\n      activatorEl,\n      isTop,\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,54 +1,61 @@
-@import './index'
+@forward './variables'
+@use 'sass:selector'
+@use './variables' as *
 
 // Block
 .v-overlay-container
-  bottom: 0
-  contain: strict
+  contain: layout
   left: 0
   pointer-events: none
-  position: fixed
-  right: 0
+  position: absolute
   top: 0
+  display: contents
+
+.v-overlay-scroll-blocked
+  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
-  align-items: center
   border-radius: inherit
   display: flex
-  height: 100%
-  justify-content: center
   left: 0
   pointer-events: none
   position: fixed
-  right: 0
   top: 0
-  z-index: $overlay-z-index
-
-  @include ltr()
-    padding-right: $overlay-padding-x
-
-  @include rtl()
-    padding-left: $overlay-padding-x
+  bottom: 0
+  right: 0
 
 // Element
 .v-overlay__content
   outline: none
-  position: relative
+  position: absolute
+  pointer-events: auto
+  contain: layout
 
 .v-overlay__scrim
+  pointer-events: auto
   background: $overlay-scrim-background
   border-radius: inherit
   bottom: 0
-  height: 100%
   left: 0
   opacity: $overlay-opacity
-  position: absolute
+  position: fixed
   right: 0
   top: 0
-  width: 100%
 
 // Modifier
 .v-overlay--absolute
   position: absolute
 
-.v-overlay--active
-  pointer-events: auto
+.v-overlay--contained .v-overlay__scrim
+  position: absolute
+
+.v-overlay--scroll-blocked
+  padding-inline-end: var(--v-scrollbar-offset)

package/lib/components/VOverlay/_variables.scss

@@ -1,5 +1,3 @@
 // Defaults
 $overlay-opacity: 32%;
-$overlay-padding-x: var(--v-scrollbar-offset) !default;
 $overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default;
-$overlay-z-index: 800 !default;

package/lib/components/VOverlay/index.mjs

@@ -1,3 +1,2 @@
-import VOverlay from "./VOverlay.mjs";
-export { VOverlay };
+export { VOverlay } from "./VOverlay.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VOverlay/index.ts"],"names":["VOverlay"],"mappings":"OAAOA,Q;AAEP,SAASA,QAAT","sourcesContent":["import VOverlay from './VOverlay'\n\nexport { VOverlay }\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VOverlay"],"sources":["../../../src/components/VOverlay/index.ts"],"sourcesContent":["export { VOverlay } from './VOverlay'\n"],"mappings":"SAASA,Q"}