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

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 { makePositionStrategyProps, usePositionStrategies } from "./positionStrategies.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 { 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";
+import { useOverlay } from "../../composables/overlay.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, Transition, watch } from 'vue'; // Types
 
 function Scrim(props) {
   const {
@@ -50,134 +35,93 @@ 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'
-    },
-    eager: Boolean,
+    attach: [Boolean, String, Object],
+    contained: Boolean,
+    contentClass: null,
     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)
-    },
+    ...makeActivatorProps(),
+    ...makeDimensionProps(),
+    ...makePositionStrategyProps(),
+    ...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
-  }) {
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
     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 {
+      activatorEl,
+      activatorRef,
+      activatorEvents
+    } = useActivator(props, isActive);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      isTop
+    } = useStack(isActive);
+    const root = ref();
+    const contentEl = ref();
+    const {
+      contentStyles,
+      updatePosition
+    } = usePositionStrategies(props, {
+      contentEl,
+      activatorEl,
+      isActive
+    });
+    useScrollStrategies(props, {
+      root,
+      contentEl,
+      activatorEl,
+      isActive,
+      updatePosition
+    });
 
     function onClickOutside(e) {
       emit('click:outside', e);
@@ -185,18 +129,21 @@ 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();
@@ -204,26 +151,15 @@ export default defineComponent({
     }
 
     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();
-        } else {
-          var _activatorElement$val;
-
-          (_activatorElement$val = activatorElement.value) == null ? void 0 : _activatorElement$val.focus();
-        }
-      });
+      if (isTop.value && isActive.value) {
+        next(false);
+        if (!props.persistent) isActive.value = false;else animateClick();
+      } else {
+        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 +170,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 +185,63 @@ 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();
-        });
-      });
-    }
-
+    const {
+      overlayZIndex
+    } = useOverlay(isActive);
     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": {
+            top: convertToUnit(top.value),
+            zIndex: overlayZIndex.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
+            "ref": contentEl,
+            "class": ['v-overlay__content', props.contentClass],
+            "style": [dimensionStyles.value, contentStyles.value]
           }, [(_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
     };
   }
 

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,"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"}

package/lib/components/VOverlay/VOverlay.sass

@@ -1,54 +1,53 @@
-@import './index'
+@forward './variables'
+@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
 
 .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,"sources":["../../../src/components/VOverlay/index.ts"],"names":["VOverlay"],"mappings":"SAASA,Q","sourcesContent":["export { VOverlay } from './VOverlay'\n"],"file":"index.mjs"}