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

package/lib/components/VOverlay/VOverlay.mjs

@@ -1,87 +1,249 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
-import "./VOverlay.sass"; // Mixins
+import "./VOverlay.css"; // Composables
+
+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";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { makeLazyProps, useLazy } from "../../composables/lazy.mjs";
+import { useStack } from "../../composables/stack.mjs"; // Directives
 
-import Colorable from "./../../mixins/colorable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs";
-import Toggleable from "./../../mixins/toggleable/index.mjs"; // Utilities
+import { ClickOutside } from "../../directives/click-outside/index.mjs"; // Utilities
 
-import mixins from "../../util/mixins.mjs"; // Types
+import { convertToUnit, genericComponent, getScrollParent, IN_BROWSER, standardEasing, useRender } from "../../util/index.mjs";
+import { computed, mergeProps, ref, Teleport, toHandlers, Transition, watch } from 'vue'; // Types
 
-/* @vue/component */
-export default mixins(Colorable, Themeable, Toggleable).extend({
-  name: 'v-overlay',
+function Scrim(props) {
+  const {
+    modelValue,
+    color,
+    ...rest
+  } = props;
+  return _createVNode(Transition, {
+    "name": "fade-transition",
+    "appear": true
+  }, {
+    default: () => [props.modelValue && _createVNode("div", _mergeProps({
+      "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
+      "style": props.color.backgroundColorStyles.value
+    }, rest), null)]
+  });
+}
+
+export const VOverlay = genericComponent()({
+  name: 'VOverlay',
+  directives: {
+    ClickOutside
+  },
+  inheritAttrs: false,
   props: {
     absolute: Boolean,
-    color: {
-      type: String,
-      default: '#212121'
-    },
-    dark: {
-      type: Boolean,
+    attach: [Boolean, String, Object],
+    contained: Boolean,
+    contentClass: null,
+    noClickAnimation: Boolean,
+    modelValue: Boolean,
+    persistent: Boolean,
+    scrim: {
+      type: [String, Boolean],
       default: true
     },
-    opacity: {
-      type: [Number, String],
-      default: 0.46
-    },
-    value: {
-      default: true
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 5
-    }
+    ...makeActivatorProps(),
+    ...makeDimensionProps(),
+    ...makePositionStrategyProps(),
+    ...makeScrollStrategyProps(),
+    ...makeThemeProps(),
+    ...makeTransitionProps(),
+    ...makeLazyProps()
+  },
+  emits: {
+    'click:outside': e => true,
+    'update:modelValue': value => true,
+    afterLeave: () => true
   },
-  computed: {
-    __scrim() {
-      const data = this.setBackgroundColor(this.color, {
-        staticClass: 'v-overlay__scrim',
-        style: {
-          opacity: this.computedOpacity
-        }
-      });
-      return this.$createElement('div', data);
-    },
 
-    classes() {
-      return {
-        'v-overlay--absolute': this.absolute,
-        'v-overlay--active': this.isActive,
-        ...this.themeClasses
-      };
-    },
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      teleportTarget
+    } = useTeleport(computed(() => props.attach || props.contained));
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      rtlClasses
+    } = useRtl();
+    const {
+      hasContent,
+      onAfterLeave
+    } = useLazy(props, isActive);
+    const scrimColor = useBackgroundColor(computed(() => {
+      return typeof props.scrim === 'string' ? props.scrim : null;
+    }));
+    const {
+      isTop
+    } = useStack(isActive);
+    const {
+      activatorEl,
+      activatorRef,
+      activatorEvents,
+      contentEvents
+    } = useActivator(props, {
+      isActive,
+      isTop
+    });
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const root = ref();
+    const contentEl = ref();
+    const {
+      contentStyles,
+      updatePosition
+    } = usePositionStrategies(props, {
+      contentEl,
+      activatorEl,
+      isActive
+    });
+    useScrollStrategies(props, {
+      root,
+      contentEl,
+      activatorEl,
+      isActive,
+      updatePosition
+    });
 
-    computedOpacity() {
-      return Number(this.isActive ? this.opacity : 0);
-    },
+    function onClickOutside(e) {
+      emit('click:outside', e);
+      if (!props.persistent) isActive.value = false;else animateClick();
+    }
 
-    styles() {
-      return {
-        zIndex: this.zIndex
-      };
+    function closeConditional() {
+      return isActive.value && isTop.value;
     }
 
-  },
-  methods: {
-    genContent() {
-      return this.$createElement('div', {
-        staticClass: 'v-overlay__content'
-      }, this.$slots.default);
+    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' && isTop.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 top = ref();
+    watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
+      if (val) {
+        const scrollParent = getScrollParent(root.value);
+
+        if (scrollParent && scrollParent !== document.scrollingElement) {
+          top.value = scrollParent.scrollTop;
+        }
+      }
+    }); // 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([{
+        transformOrigin: 'center'
+      }, {
+        transform: 'scale(1.03)'
+      }, {
+        transformOrigin: 'center'
+      }], {
+        duration: 150,
+        easing: standardEasing
+      });
+    }
+
+    useRender(() => {
+      var _slots$activator, _slots$default;
 
-  render(h) {
-    const children = [this.__scrim];
-    if (this.isActive) children.push(this.genContent());
-    return h('div', {
-      staticClass: 'v-overlay',
-      class: this.classes,
-      style: this.styles
-    }, children);
+      return _createVNode(_Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
+        isActive: isActive.value,
+        props: mergeProps({
+          ref: activatorRef
+        }, toHandlers(activatorEvents.value), props.activatorProps)
+      }), IN_BROWSER && _createVNode(Teleport, {
+        "disabled": !teleportTarget.value,
+        "to": teleportTarget.value
+      }, {
+        default: () => [hasContent.value && _createVNode("div", _mergeProps({
+          "class": ['v-overlay', {
+            'v-overlay--absolute': props.absolute || props.contained,
+            'v-overlay--active': isActive.value,
+            'v-overlay--contained': props.contained
+          }, themeClasses.value, rtlClasses.value],
+          "style": {
+            top: convertToUnit(top.value)
+          },
+          "ref": root
+        }, attrs), [_createVNode(Scrim, {
+          "color": scrimColor,
+          "modelValue": isActive.value && !!props.scrim
+        }, null), _createVNode(MaybeTransition, {
+          "appear": true,
+          "persisted": true,
+          "transition": props.transition,
+          "target": activatorEl.value,
+          "onAfterLeave": () => {
+            onAfterLeave();
+            emit('afterLeave');
+          }
+        }, {
+          default: () => [_withDirectives(_createVNode("div", _mergeProps({
+            "ref": contentEl,
+            "class": ['v-overlay__content', props.contentClass],
+            "style": [dimensionStyles.value, contentStyles.value]
+          }, toHandlers(contentEvents.value)), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+            isActive
+          })]), [[_vShow, isActive.value], [_resolveDirective("click-outside"), {
+            handler: onClickOutside,
+            closeConditional,
+            include: () => [activatorEl.value]
+          }]])]
+        })])]
+      })]);
+    });
+    return {
+      animateClick,
+      contentEl,
+      activatorEl,
+      isTop,
+      updatePosition
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VOverlay/VOverlay.ts"],"names":["Colorable","Themeable","Toggleable","mixins","extend","name","props","absolute","Boolean","color","type","String","default","dark","opacity","Number","value","zIndex","computed","__scrim","data","setBackgroundColor","staticClass","style","computedOpacity","$createElement","classes","isActive","themeClasses","styles","methods","genContent","$slots","render","h","children","push","class"],"mappings":"AAAA;;AACA;AAEA;AACA,yB,CAEA;;OACOA,S;OACAC,S;OACAC,U,6CAEP;;OACOC,M,+BAEP;;AAGA;AACA,eAAeA,MAAM,CACnBH,SADmB,EAEnBC,SAFmB,EAGnBC,UAHmB,CAAN,CAIbE,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,WADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,MADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KAFF;AAMLC,IAAAA,IAAI,EAAE;AACJH,MAAAA,IAAI,EAAEF,OADF;AAEJI,MAAAA,OAAO,EAAE;AAFL,KAND;AAULE,IAAAA,OAAO,EAAE;AACPJ,MAAAA,IAAI,EAAE,CAACK,MAAD,EAASJ,MAAT,CADC;AAEPC,MAAAA,OAAO,EAAE;AAFF,KAVJ;AAcLI,IAAAA,KAAK,EAAE;AACLJ,MAAAA,OAAO,EAAE;AADJ,KAdF;AAiBLK,IAAAA,MAAM,EAAE;AACNP,MAAAA,IAAI,EAAE,CAACK,MAAD,EAASJ,MAAT,CADA;AAENC,MAAAA,OAAO,EAAE;AAFH;AAjBH,GAHA;AA0BPM,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAW;AAChB,YAAMC,IAAI,GAAG,KAAKC,kBAAL,CAAwB,KAAKZ,KAA7B,EAAoC;AAC/Ca,QAAAA,WAAW,EAAE,kBADkC;AAE/CC,QAAAA,KAAK,EAAE;AACLT,UAAAA,OAAO,EAAE,KAAKU;AADT;AAFwC,OAApC,CAAb;AAOA,aAAO,KAAKC,cAAL,CAAoB,KAApB,EAA2BL,IAA3B,CAAP;AACD,KAVO;;AAWRM,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,+BAAuB,KAAKnB,QADvB;AAEL,6BAAqB,KAAKoB,QAFrB;AAGL,WAAG,KAAKC;AAHH,OAAP;AAKD,KAjBO;;AAkBRJ,IAAAA,eAAe,GAAY;AACzB,aAAOT,MAAM,CAAC,KAAKY,QAAL,GAAgB,KAAKb,OAArB,GAA+B,CAAhC,CAAb;AACD,KApBO;;AAqBRe,IAAAA,MAAM,GAAY;AAChB,aAAO;AACLZ,QAAAA,MAAM,EAAE,KAAKA;AADR,OAAP;AAGD;;AAzBO,GA1BH;AAsDPa,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKN,cAAL,CAAoB,KAApB,EAA2B;AAChCH,QAAAA,WAAW,EAAE;AADmB,OAA3B,EAEJ,KAAKU,MAAL,CAAYpB,OAFR,CAAP;AAGD;;AALM,GAtDF;;AA8DPqB,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,UAAMC,QAAQ,GAAG,CAAC,KAAKhB,OAAN,CAAjB;AAEA,QAAI,KAAKQ,QAAT,EAAmBQ,QAAQ,CAACC,IAAT,CAAc,KAAKL,UAAL,EAAd;AAEnB,WAAOG,CAAC,CAAC,KAAD,EAAQ;AACdZ,MAAAA,WAAW,EAAE,WADC;AAEde,MAAAA,KAAK,EAAE,KAAKX,OAFE;AAGdH,MAAAA,KAAK,EAAE,KAAKM;AAHE,KAAR,EAILM,QAJK,CAAR;AAKD;;AAxEM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VOverlay.sass'\n\n// Mixins\nimport Colorable from './../../mixins/colorable'\nimport Themeable from '../../mixins/themeable'\nimport Toggleable from './../../mixins/toggleable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\n\n/* @vue/component */\nexport default mixins(\n  Colorable,\n  Themeable,\n  Toggleable\n).extend({\n  name: 'v-overlay',\n\n  props: {\n    absolute: Boolean,\n    color: {\n      type: String,\n      default: '#212121',\n    },\n    dark: {\n      type: Boolean,\n      default: true,\n    },\n    opacity: {\n      type: [Number, String],\n      default: 0.46,\n    },\n    value: {\n      default: true,\n    },\n    zIndex: {\n      type: [Number, String],\n      default: 5,\n    },\n  },\n\n  computed: {\n    __scrim (): VNode {\n      const data = this.setBackgroundColor(this.color, {\n        staticClass: 'v-overlay__scrim',\n        style: {\n          opacity: this.computedOpacity,\n        },\n      })\n\n      return this.$createElement('div', data)\n    },\n    classes (): object {\n      return {\n        'v-overlay--absolute': this.absolute,\n        'v-overlay--active': this.isActive,\n        ...this.themeClasses,\n      }\n    },\n    computedOpacity (): number {\n      return Number(this.isActive ? this.opacity : 0)\n    },\n    styles (): object {\n      return {\n        zIndex: this.zIndex,\n      }\n    },\n  },\n\n  methods: {\n    genContent () {\n      return this.$createElement('div', {\n        staticClass: 'v-overlay__content',\n      }, this.$slots.default)\n    },\n  },\n\n  render (h): VNode {\n    const children = [this.__scrim]\n\n    if (this.isActive) children.push(this.genContent())\n\n    return h('div', {\n      staticClass: 'v-overlay',\n      class: this.classes,\n      style: this.styles,\n    }, children)\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","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","isTop","activatorEl","activatorRef","activatorEvents","contentEvents","dimensionStyles","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","activator","activatorProps","transition","handler","include"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,kB,EAAoBC,Y;SACpBC,yB,EAA2BC,qB;SAC3BC,uB,EAAyBC,mB;SACzBC,c,EAAgBC,Y;SAChBC,mB,EAAqBC,e;SACrBC,a;SACAC,kB;SACAC,e;SACAC,M;SACAC,W;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,Q,uCAET;;SACSC,Y,oDAET;;SAEEC,a,EACAC,gB,EACAC,e,EACAC,U,EACAC,c,EACAC,S;AAEF,SACEC,QADF,EAEEC,UAFF,EAGEC,GAHF,EAIEC,QAJF,EAKEC,UALF,EAMEC,UANF,EAOEC,KAPF,QAQO,KARP,C,CAUA;;AAUA,SAASC,KAAT,CAAgBC,KAAhB,EAAmC;AACjC,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA,KAAd;AAAqB,OAAGC;AAAxB,MAAiCH,KAAvC;AACA;AAAA,YACmB,iBADnB;AAAA;AAAA;AAAA,oBAEMA,KAAK,CAACC,UAAN;AAAA,eAES,CACL,kBADK,EAELD,KAAK,CAACE,KAAN,CAAYE,sBAAZ,CAAmCC,KAF9B,CAFT;AAAA,eAMUL,KAAK,CAACE,KAAN,CAAYI,qBAAZ,CAAkCD;AAN5C,OAOOF,IAPP,QAFN;AAAA;AAcD;;AAOD,OAAO,MAAMI,QAAQ,GAAGpB,gBAAgB,GAEnC;AACHqB,EAAAA,IAAI,EAAE,UADH;AAGHC,EAAAA,UAAU,EAAE;AAAExB,IAAAA;AAAF,GAHT;AAKHyB,EAAAA,YAAY,EAAE,KALX;AAOHV,EAAAA,KAAK,EAAE;AACLW,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,MAAM,EAAE,CAACD,OAAD,EAAUE,MAAV,EAAkBC,MAAlB,CAFH;AAGLC,IAAAA,SAAS,EAAEJ,OAHN;AAILK,IAAAA,YAAY,EAAE,IAJT;AAKLC,IAAAA,gBAAgB,EAAEN,OALb;AAMLX,IAAAA,UAAU,EAAEW,OANP;AAOLO,IAAAA,UAAU,EAAEP,OAPP;AAQLQ,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAE,CAACP,MAAD,EAASF,OAAT,CADD;AAELU,MAAAA,OAAO,EAAE;AAFJ,KARF;AAaL,OAAGzD,kBAAkB,EAbhB;AAcL,OAAGe,kBAAkB,EAdhB;AAeL,OAAGb,yBAAyB,EAfvB;AAgBL,OAAGE,uBAAuB,EAhBrB;AAiBL,OAAGE,cAAc,EAjBZ;AAkBL,OAAGE,mBAAmB,EAlBjB;AAmBL,OAAGS,aAAa;AAnBX,GAPJ;AA6BHyC,EAAAA,KAAK,EAAE;AACL,qBAAkBC,CAAD,IAAmB,IAD/B;AAEL,yBAAsBnB,KAAD,IAAoB,IAFpC;AAGLoB,IAAAA,UAAU,EAAE,MAAM;AAHb,GA7BJ;;AAmCHC,EAAAA,KAAK,CAAE1B,KAAF,QAAiC;AAAA,QAAxB;AAAE2B,MAAAA,KAAF;AAASC,MAAAA,KAAT;AAAgBC,MAAAA;AAAhB,KAAwB;AACpC,UAAMC,QAAQ,GAAGrD,eAAe,CAACuB,KAAD,EAAQ,YAAR,CAAhC;AACA,UAAM;AAAE+B,MAAAA;AAAF,QAAqBpD,WAAW,CAACa,QAAQ,CAAC,MAAMQ,KAAK,CAACa,MAAN,IAAgBb,KAAK,CAACgB,SAA7B,CAAT,CAAtC;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAmB5D,YAAY,CAAC4B,KAAD,CAArC;AACA,UAAM;AAAEiC,MAAAA;AAAF,QAAiBvD,MAAM,EAA7B;AACA,UAAM;AAAEwD,MAAAA,UAAF;AAAcC,MAAAA;AAAd,QAA+BpD,OAAO,CAACiB,KAAD,EAAQ8B,QAAR,CAA5C;AACA,UAAMM,UAAU,GAAG5D,kBAAkB,CAACgB,QAAQ,CAAC,MAAM;AACnD,aAAO,OAAOQ,KAAK,CAACoB,KAAb,KAAuB,QAAvB,GAAkCpB,KAAK,CAACoB,KAAxC,GAAgD,IAAvD;AACD,KAF6C,CAAT,CAArC;AAGA,UAAM;AAAEiB,MAAAA;AAAF,QAAYrD,QAAQ,CAAC8C,QAAD,CAA1B;AACA,UAAM;AAAEQ,MAAAA,WAAF;AAAeC,MAAAA,YAAf;AAA6BC,MAAAA,eAA7B;AAA8CC,MAAAA;AAA9C,QAAgE3E,YAAY,CAACkC,KAAD,EAAQ;AAAE8B,MAAAA,QAAF;AAAYO,MAAAA;AAAZ,KAAR,CAAlF;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAsB7D,YAAY,CAACmB,KAAD,CAAxC;AAEA,UAAM2C,IAAI,GAAGjD,GAAG,EAAhB;AACA,UAAMkD,SAAS,GAAGlD,GAAG,EAArB;AACA,UAAM;AAAEmD,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAoC9E,qBAAqB,CAACgC,KAAD,EAAQ;AACrE4C,MAAAA,SADqE;AAErEN,MAAAA,WAFqE;AAGrER,MAAAA;AAHqE,KAAR,CAA/D;AAKA5D,IAAAA,mBAAmB,CAAC8B,KAAD,EAAQ;AACzB2C,MAAAA,IADyB;AAEzBC,MAAAA,SAFyB;AAGzBN,MAAAA,WAHyB;AAIzBR,MAAAA,QAJyB;AAKzBgB,MAAAA;AALyB,KAAR,CAAnB;;AAQA,aAASC,cAAT,CAAyBvB,CAAzB,EAAwC;AACtCK,MAAAA,IAAI,CAAC,eAAD,EAAkBL,CAAlB,CAAJ;AAEA,UAAI,CAACxB,KAAK,CAACmB,UAAX,EAAuBW,QAAQ,CAACzB,KAAT,GAAiB,KAAjB,CAAvB,KACK2C,YAAY;AAClB;;AAED,aAASC,gBAAT,GAA6B;AAC3B,aAAOnB,QAAQ,CAACzB,KAAT,IAAkBgC,KAAK,CAAChC,KAA/B;AACD;;AAEDhB,IAAAA,UAAU,IAAIS,KAAK,CAACgC,QAAD,EAAWoB,GAAG,IAAI;AACnC,UAAIA,GAAJ,EAAS;AACPC,QAAAA,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmCC,SAAnC;AACD,OAFD,MAEO;AACLF,QAAAA,MAAM,CAACG,mBAAP,CAA2B,SAA3B,EAAsCD,SAAtC;AACD;AACF,KANkB,EAMhB;AAAEE,MAAAA,SAAS,EAAE;AAAb,KANgB,CAAnB;;AAQA,aAASF,SAAT,CAAoB7B,CAApB,EAAsC;AACpC,UAAIA,CAAC,CAACgC,GAAF,KAAU,QAAV,IAAsBnB,KAAK,CAAChC,KAAhC,EAAuC;AACrC,YAAI,CAACL,KAAK,CAACmB,UAAX,EAAuB;AACrBW,UAAAA,QAAQ,CAACzB,KAAT,GAAiB,KAAjB;AACD,SAFD,MAEO2C,YAAY;AACpB;AACF;;AAEDzE,IAAAA,aAAa,CAACkF,IAAI,IAAI;AACpB,UAAIpB,KAAK,CAAChC,KAAN,IAAeyB,QAAQ,CAACzB,KAA5B,EAAmC;AACjCoD,QAAAA,IAAI,CAAC,KAAD,CAAJ;AACA,YAAI,CAACzD,KAAK,CAACmB,UAAX,EAAuBW,QAAQ,CAACzB,KAAT,GAAiB,KAAjB,CAAvB,KACK2C,YAAY;AAClB,OAJD,MAIO;AACLS,QAAAA,IAAI;AACL;AACF,KARY,CAAb;AAUA,UAAMC,GAAG,GAAGhE,GAAG,EAAf;AACAI,IAAAA,KAAK,CAAC,MAAMgC,QAAQ,CAACzB,KAAT,KAAmBL,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACgB,SAA3C,KAAyDe,cAAc,CAAC1B,KAAf,IAAwB,IAAxF,EAA8F6C,GAAG,IAAI;AACxG,UAAIA,GAAJ,EAAS;AACP,cAAMS,YAAY,GAAGvE,eAAe,CAACuD,IAAI,CAACtC,KAAN,CAApC;;AACA,YAAIsD,YAAY,IAAIA,YAAY,KAAKC,QAAQ,CAACC,gBAA9C,EAAgE;AAC9DH,UAAAA,GAAG,CAACrD,KAAJ,GAAYsD,YAAY,CAACG,SAAzB;AACD;AACF;AACF,KAPI,CAAL,CAlEoC,CA2EpC;;AACA,aAASd,YAAT,GAAyB;AAAA;;AACvB,UAAIhD,KAAK,CAACkB,gBAAV,EAA4B;AAE5B,0BAAA0B,SAAS,CAACvC,KAAV,sCAAiB0D,OAAjB,CAAyB,CACvB;AAAEC,QAAAA,eAAe,EAAE;AAAnB,OADuB,EAEvB;AAAEC,QAAAA,SAAS,EAAE;AAAb,OAFuB,EAGvB;AAAED,QAAAA,eAAe,EAAE;AAAnB,OAHuB,CAAzB,EAIG;AACDE,QAAAA,QAAQ,EAAE,GADT;AAEDC,QAAAA,MAAM,EAAE7E;AAFP,OAJH;AAQD;;AAEDC,IAAAA,SAAS,CAAC;AAAA;;AAAA,gEAEJoC,KAAK,CAACyC,SAFF,qBAEJ,sBAAAzC,KAAK,EAAa;AAClBG,QAAAA,QAAQ,EAAEA,QAAQ,CAACzB,KADD;AAElBL,QAAAA,KAAK,EAAEP,UAAU,CAAC;AAChBC,UAAAA,GAAG,EAAE6C;AADW,SAAD,EAEd3C,UAAU,CAAC4C,eAAe,CAACnC,KAAjB,CAFI,EAEqBL,KAAK,CAACqE,cAF3B;AAFC,OAAb,CAFD,EASJhF,UAAU;AAAA,oBAEG,CAAC0C,cAAc,CAAC1B,KAFnB;AAAA,cAGH0B,cAAc,CAAC1B;AAHZ;AAAA,wBAKN6B,UAAU,CAAC7B,KAAX;AAAA,mBAES,CACL,WADK,EAEL;AACE,mCAAuBL,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACgB,SADjD;AAEE,iCAAqBc,QAAQ,CAACzB,KAFhC;AAGE,oCAAwBL,KAAK,CAACgB;AAHhC,WAFK,EAOLgB,YAAY,CAAC3B,KAPR,EAQL4B,UAAU,CAAC5B,KARN,CAFT;AAAA,mBAYS;AACLqD,YAAAA,GAAG,EAAExE,aAAa,CAACwE,GAAG,CAACrD,KAAL;AADb,WAZT;AAAA,iBAeQsC;AAfR,WAgBMf,KAhBN;AAAA,mBAmBYQ,UAnBZ;AAAA,wBAoBiBN,QAAQ,CAACzB,KAAT,IAAkB,CAAC,CAACL,KAAK,CAACoB;AApB3C;AAAA;AAAA;AAAA,wBAyBiBpB,KAAK,CAACsE,UAzBvB;AAAA,oBA0BahC,WAAW,CAACjC,KA1BzB;AAAA,0BA2BkB,MAAM;AAAE8B,YAAAA,YAAY;AAAIN,YAAAA,IAAI,CAAC,YAAD,CAAJ;AAAoB;AA3B9D;AAAA;AAAA,mBA8BYe,SA9BZ;AAAA,qBAiCa,CACL,oBADK,EAEL5C,KAAK,CAACiB,YAFD,CAjCb;AAAA,qBAqCa,CACLyB,eAAe,CAACrC,KADX,EAELwC,aAAa,CAACxC,KAFT;AArCb,aAyCWT,UAAU,CAAC6C,aAAa,CAACpC,KAAf,CAzCrB,sBA2CQsB,KAAK,CAACL,OA3Cd,qBA2CQ,oBAAAK,KAAK,EAAW;AAAEG,YAAAA;AAAF,WAAX,CA3Cb,cA+BeA,QAAQ,CAACzB,KA/BxB,wCAgCuB;AAAEkE,YAAAA,OAAO,EAAExB,cAAX;AAA2BE,YAAAA,gBAA3B;AAA6CuB,YAAAA,OAAO,EAAE,MAAM,CAAClC,WAAW,CAACjC,KAAb;AAA5D,WAhCvB;AAAA,YALM;AAAA,QATN;AAAA,KAAD,CAAT;AAmEA,WAAO;AACL2C,MAAAA,YADK;AAELJ,MAAAA,SAFK;AAGLN,MAAAA,WAHK;AAILD,MAAAA,KAJK;AAKLS,MAAAA;AALK,KAAP;AAOD;;AAtME,CAFmC,CAAjC","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'\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 { isTop } = useStack(isActive)\n    const { activatorEl, activatorRef, activatorEvents, contentEvents } = useActivator(props, { isActive, isTop })\n    const { dimensionStyles } = useDimension(props)\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    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                }}\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                  >\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      updatePosition,\n    }\n  },\n})\n\nexport type VOverlay = InstanceType<typeof VOverlay>\n"],"file":"VOverlay.mjs"}

package/lib/components/VOverlay/VOverlay.sass

@@ -1,42 +1,62 @@
-@import './_variables.scss'
-
-// Theme
-+theme(v-overlay) using ($material)
-  color: map-deep-get($material, 'text', 'primary')
+@forward './variables'
+@use 'sass:selector'
+@use './variables' as *
 
 // Block
+.v-overlay-container
+  contain: layout
+  left: 0
+  pointer-events: none
+  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
-  justify-content: center
+  left: 0
+  pointer-events: none
   position: fixed
   top: 0
-  left: 0
-  right: 0
   bottom: 0
-  pointer-events: none
-  transition: $overlay-transition
+  right: 0
+  z-index: $overlay-z-index
 
 // Element
 .v-overlay__content
-  position: relative
+  outline: none
+  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
-  position: absolute
+  opacity: $overlay-opacity
+  position: fixed
   right: 0
   top: 0
-  transition: inherit
-  width: 100%
-  will-change: opacity
 
 // 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,3 +1,4 @@
-@import '../../styles/styles.sass';
-
-$overlay-transition: $primary-transition, z-index 1ms !default;
+// Defaults
+$overlay-opacity: 32%;
+$overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default;
+$overlay-z-index: 2000;

package/lib/components/VOverlay/index.mjs

@@ -1,4 +1,2 @@
-import VOverlay from "./VOverlay.mjs";
-export { VOverlay };
-export default 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;AAEA,eAAeA,QAAf","sourcesContent":["import VOverlay from './VOverlay'\n\nexport { VOverlay }\n\nexport default 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"}

package/lib/components/VOverlay/positionStrategies.mjs

@@ -0,0 +1,207 @@
+// Utilities
+import { computed, effectScope, nextTick, onScopeDispose, ref, watch, watchEffect } from 'vue';
+import { convertToUnit, getScrollParent, IN_BROWSER, isFixedPosition, nullifyTransforms, propsFactory } from "../../util/index.mjs";
+import { oppositeAnchor, parseAnchor, physicalAnchor } from "./util/anchor.mjs";
+import { anchorToPoint, getOffset } from "./util/point.mjs"; // Types
+
+import { Box } from "../../util/box.mjs";
+const positionStrategies = {
+  static: staticPositionStrategy,
+  // specific viewport position, usually centered
+  connected: connectedPositionStrategy // connected to a certain element
+
+};
+export const makePositionStrategyProps = propsFactory({
+  positionStrategy: {
+    type: [String, Function],
+    default: 'static',
+    validator: val => typeof val === 'function' || val in positionStrategies
+  },
+  anchor: {
+    type: String,
+    default: 'bottom'
+  },
+  origin: {
+    type: String,
+    default: 'auto'
+  },
+  offset: [Number, String]
+});
+export function usePositionStrategies(props, data) {
+  const contentStyles = ref({});
+  const updatePosition = ref();
+  let scope;
+  watchEffect(async () => {
+    var _scope;
+
+    (_scope = scope) == null ? void 0 : _scope.stop();
+    updatePosition.value = undefined;
+    if (!(IN_BROWSER && data.isActive.value && props.positionStrategy)) return;
+    scope = effectScope();
+    await nextTick();
+    scope.run(() => {
+      if (typeof props.positionStrategy === 'function') {
+        var _props$positionStrate;
+
+        updatePosition.value = (_props$positionStrate = props.positionStrategy(data, props, contentStyles)) == null ? void 0 : _props$positionStrate.updatePosition;
+      } else {
+        var _positionStrategies$p;
+
+        updatePosition.value = (_positionStrategies$p = positionStrategies[props.positionStrategy](data, props, contentStyles)) == null ? void 0 : _positionStrategies$p.updatePosition;
+      }
+    });
+  });
+  IN_BROWSER && window.addEventListener('resize', onResize, {
+    passive: true
+  });
+  onScopeDispose(() => {
+    var _scope2;
+
+    IN_BROWSER && window.removeEventListener('resize', onResize);
+    updatePosition.value = undefined;
+    (_scope2 = scope) == null ? void 0 : _scope2.stop();
+  });
+
+  function onResize(e) {
+    var _updatePosition$value;
+
+    (_updatePosition$value = updatePosition.value) == null ? void 0 : _updatePosition$value.call(updatePosition, e);
+  }
+
+  return {
+    contentStyles,
+    updatePosition
+  };
+}
+
+function staticPositionStrategy() {// TODO
+}
+
+function connectedPositionStrategy(data, props, contentStyles) {
+  const activatorFixed = isFixedPosition(data.activatorEl.value);
+
+  if (activatorFixed) {
+    Object.assign(contentStyles.value, {
+      position: 'fixed'
+    });
+  }
+
+  const preferredAnchor = computed(() => parseAnchor(props.anchor));
+  const preferredOrigin = computed(() => props.origin === 'overlap' ? preferredAnchor.value : props.origin === 'auto' ? oppositeAnchor(preferredAnchor.value) : parseAnchor(props.origin));
+  const doesOverlap = computed(() => {
+    return preferredAnchor.value.side === preferredOrigin.value.side;
+  });
+  const configuredMaxHeight = computed(() => {
+    const val = parseFloat(props.maxHeight);
+    return isNaN(val) ? Infinity : val;
+  });
+  const configuredMinWidth = computed(() => {
+    const val = parseFloat(props.minWidth);
+    return isNaN(val) ? Infinity : val;
+  });
+  let observe = false;
+
+  if (IN_BROWSER) {
+    const observer = new ResizeObserver(() => {
+      if (observe) updatePosition();
+    });
+    observer.observe(data.activatorEl.value);
+    observer.observe(data.contentEl.value);
+    onScopeDispose(() => {
+      observer.disconnect();
+    });
+  } // eslint-disable-next-line max-statements
+
+
+  function updatePosition() {
+    var _props$maxWidth;
+
+    observe = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => observe = true);
+    });
+    const targetBox = data.activatorEl.value.getBoundingClientRect(); // TODO: offset shouldn't affect width
+
+    if (props.offset) {
+      targetBox.x -= +props.offset;
+      targetBox.y -= +props.offset;
+      targetBox.width += +props.offset * 2;
+      targetBox.height += +props.offset * 2;
+    }
+
+    const scrollParent = getScrollParent(data.contentEl.value);
+    const viewportWidth = scrollParent.clientWidth;
+    const viewportHeight = Math.min(scrollParent.clientHeight, window.innerHeight);
+    let contentBox;
+    {
+      const scrollables = new Map();
+      data.contentEl.value.querySelectorAll('*').forEach(el => {
+        const x = el.scrollLeft;
+        const y = el.scrollTop;
+
+        if (x || y) {
+          scrollables.set(el, [x, y]);
+        }
+      });
+      const initialMaxWidth = data.contentEl.value.style.maxWidth;
+      const initialMaxHeight = data.contentEl.value.style.maxHeight;
+      data.contentEl.value.style.removeProperty('max-width');
+      data.contentEl.value.style.removeProperty('max-height');
+      contentBox = nullifyTransforms(data.contentEl.value);
+      contentBox.x -= parseFloat(data.contentEl.value.style.left) || 0;
+      contentBox.y -= parseFloat(data.contentEl.value.style.top) || 0;
+      data.contentEl.value.style.maxWidth = initialMaxWidth;
+      data.contentEl.value.style.maxHeight = initialMaxHeight;
+      scrollables.forEach((position, el) => {
+        el.scrollTo(...position);
+      });
+    }
+    const contentHeight = Math.min(configuredMaxHeight.value, contentBox.height); // Regard undefined maxWidth as maximally occupying whole remaining space by default
+
+    const maxFreeSpaceWidth = props.maxWidth === undefined ? Number.MAX_VALUE : parseInt((_props$maxWidth = props.maxWidth) != null ? _props$maxWidth : 0, 10);
+    const viewportMargin = 12;
+    const freeSpace = {
+      top: targetBox.top - viewportMargin,
+      bottom: viewportHeight - targetBox.bottom - viewportMargin,
+      left: Math.min(targetBox.left - viewportMargin, maxFreeSpaceWidth),
+      right: Math.min(viewportWidth - targetBox.right - viewportMargin, maxFreeSpaceWidth)
+    };
+    const fitsY = preferredAnchor.value.side === 'bottom' && contentHeight <= freeSpace.bottom || preferredAnchor.value.side === 'top' && contentHeight <= freeSpace.top;
+    const anchor = fitsY ? preferredAnchor.value : preferredAnchor.value.side === 'bottom' && freeSpace.top > freeSpace.bottom || preferredAnchor.value.side === 'top' && freeSpace.bottom > freeSpace.top ? oppositeAnchor(preferredAnchor.value) : preferredAnchor.value;
+    const origin = fitsY ? preferredOrigin.value : oppositeAnchor(anchor);
+    const canFill = doesOverlap.value || ['center', 'top', 'bottom'].includes(anchor.side);
+    const maxWidth = canFill ? Math.min(viewportWidth, Math.max(targetBox.width, viewportWidth - viewportMargin * 2)) : anchor.side === 'end' ? freeSpace.right : anchor.side === 'start' ? freeSpace.left : null;
+    const minWidth = Math.min(configuredMinWidth.value, maxWidth, targetBox.width);
+    const maxHeight = fitsY ? configuredMaxHeight.value : Math.min(configuredMaxHeight.value, Math.floor(anchor.side === 'top' ? freeSpace.top : freeSpace.bottom));
+    const targetPoint = anchorToPoint(anchor, targetBox);
+    const contentPoint = anchorToPoint(origin, new Box({ ...contentBox,
+      height: Math.min(contentHeight, maxHeight)
+    }));
+    const {
+      x,
+      y
+    } = getOffset(targetPoint, contentPoint);
+    Object.assign(contentStyles.value, {
+      '--v-overlay-anchor-origin': physicalAnchor(anchor, data.activatorEl.value),
+      top: convertToUnit(Math.round(y)),
+      left: convertToUnit(Math.round(x)),
+      // TODO: right for origin="end", rtl
+      transformOrigin: physicalAnchor(origin, data.activatorEl.value),
+      minWidth: convertToUnit(minWidth),
+      maxWidth: convertToUnit(maxWidth),
+      maxHeight: convertToUnit(maxHeight)
+    });
+  }
+
+  watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset], () => updatePosition(), {
+    immediate: !activatorFixed
+  });
+  if (activatorFixed) nextTick(() => updatePosition());
+  requestAnimationFrame(() => {
+    if (contentStyles.value.maxHeight) updatePosition();
+  });
+  return {
+    updatePosition
+  };
+}
+//# sourceMappingURL=positionStrategies.mjs.map