@evance/evance-ui 1.0.8 → 1.0.10

package/dist/esm/EvOverlay.vue_vue_type_script_setup_true_lang-DHWxztn_.mjs

@@ -0,0 +1,1680 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+/*! Evance UI v1.0.10 | MIT License */
+import { computed, ref, inject, watch, effectScope, onScopeDispose, watchEffect, nextTick, mergeProps, defineComponent, useAttrs, useSlots, toRef, shallowRef, resolveDirective, openBlock, createElementBlock, Fragment, createVNode, createBlock, Teleport, unref, createElementVNode, Transition, withCtx, createCommentVNode, withDirectives, renderSlot, vShow } from "vue";
+import { m as makeDimensionsProps, u as useDimensions } from "./dimensions-C_UpByPt.mjs";
+import { p as propsFactory } from "./props-B7gwn9ud.mjs";
+import { B as Browser, r as refElement, e as destructComputed, b as clamp } from "./helpers-BUsSaKUp.mjs";
+import { m as isOn, k as isNumber, f as isFunction } from "./is-functions-CjRiMGOr.mjs";
+import { e as eventName, a as addScrollEventListener } from "./events-li4HU2pK.mjs";
+import { g as getCurrentComponent } from "./components-CttqI8to.mjs";
+import { u as useToggleScope } from "./toggleScope-BDaUFA3B.mjs";
+import { a as getScrollParents, h as hasScrollbar, g as getScrollParent } from "./scroll-D1pewqb5.mjs";
+import { t as toWebUnit, p as pixelRound, a as pixelCeil } from "./units-DGI-OKZy.mjs";
+import { A as Anchor } from "./anchor-Bo7zfOvb.mjs";
+import { r as requestNewFrame, d as clickBlockedAnimation } from "./animate-CogBcMN8.mjs";
+import { m as makeComponentProps } from "./component-BsrvJke-.mjs";
+import { m as makeEvTransitionProps, u as useEvTransition, E as EvTransition } from "./EvTransition-Dew8ZhOJ.mjs";
+import { u as useModelProxy } from "./modelProxy-DVDtt5r5.mjs";
+import { u as useTeleport } from "./teleport-CNUOezif.mjs";
+import { u as useStack } from "./stack-X-25lf3S.mjs";
+import { a as useBackButton } from "./router-HLTAiwhz.mjs";
+import { b as useRtl } from "./locale-Dd-sRTg8.mjs";
+const handlers = /* @__PURE__ */ new WeakMap();
+function bindProps(el, props) {
+  Object.keys(props).forEach((k) => {
+    var _a;
+    if (isOn(k)) {
+      const name = eventName(k);
+      const handler = handlers.get(el);
+      if (props[k] == null) {
+        handler == null ? void 0 : handler.forEach((v) => {
+          const [n, fn] = v;
+          if (n === name) {
+            el.removeEventListener(name, fn);
+            handler.delete(v);
+          }
+        });
+      } else if (!handler || !((_a = [...handler]) == null ? void 0 : _a.some((v) => v[0] === name && v[1] === props[k]))) {
+        el.addEventListener(name, props[k]);
+        const _handler = handler || /* @__PURE__ */ new Set();
+        _handler.add([name, props[k]]);
+        if (!handlers.has(el)) {
+          handlers.set(el, _handler);
+        }
+      }
+    } else {
+      if (props[k] == null) {
+        el.removeAttribute(k);
+      } else {
+        el.setAttribute(k, props[k]);
+      }
+    }
+  });
+}
+function unbindProps(el, props) {
+  Object.keys(props).forEach((k) => {
+    if (isOn(k)) {
+      const name = eventName(k);
+      const handler = handlers.get(el);
+      handler == null ? void 0 : handler.forEach((v) => {
+        const [n, fn] = v;
+        if (n === name) {
+          el.removeEventListener(name, fn);
+          handler.delete(v);
+        }
+      });
+    } else {
+      el.removeAttribute(k);
+    }
+  });
+}
+class Rect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  get top() {
+    return this.y;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get left() {
+    return this.x;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  /**
+   * ## Add Offset
+   * @param offset
+   */
+  addOffset(offset) {
+    const rect = Rect.fromRect(this);
+    rect.x += offset.x;
+    rect.y += offset.y;
+    return rect;
+  }
+  /**
+   * ## From Element
+   * @param el
+   * @param beforeTransforms
+   */
+  static fromElement(el, beforeTransforms = false) {
+    if (!beforeTransforms) {
+      return Rect.fromRect(el.getBoundingClientRect());
+    }
+    return adjustedBoundingRect(el);
+  }
+  /**
+   * ## From Rect
+   * Kind of replicates DOMRect.fromRect()
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/fromRect_static
+   * @param rect
+   */
+  static fromRect(rect) {
+    return new Rect(rect.x, rect.y, rect.width, rect.height);
+  }
+  /**
+   * ## Get Overflow
+   * Returns the overflow margins based on a second Rect.
+   * @param b
+   */
+  getOverflow(b) {
+    return {
+      top: Math.max(0, b.top - this.top),
+      right: Math.max(0, this.right - b.right),
+      bottom: Math.max(0, this.bottom - b.bottom),
+      left: Math.max(0, b.left - this.left)
+    };
+  }
+}
+function adjustedBoundingRect(el) {
+  const rect = el.getBoundingClientRect();
+  const style = getComputedStyle(el);
+  const tx = style.transform;
+  if (tx) {
+    let ta, sx, sy, dx, dy;
+    if (tx.startsWith("matrix3d(")) {
+      ta = tx.slice(9, -1).split(/, /);
+      sx = +ta[0];
+      sy = +ta[5];
+      dx = +ta[12];
+      dy = +ta[13];
+    } else if (tx.startsWith("matrix(")) {
+      ta = tx.slice(7, -1).split(/, /);
+      sx = +ta[0];
+      sy = +ta[3];
+      dx = +ta[4];
+      dy = +ta[5];
+    } else {
+      return Rect.fromRect(rect);
+    }
+    const to = style.transformOrigin;
+    const x = rect.x - dx - (1 - sx) * parseFloat(to);
+    const y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(" ") + 1));
+    const w = sx ? rect.width / sx : el.offsetWidth + 1;
+    const h = sy ? rect.height / sy : el.offsetHeight + 1;
+    return new Rect(x, y, w, h);
+  } else {
+    return Rect.fromRect(rect);
+  }
+}
+function getTargetRect(target) {
+  if (Array.isArray(target)) {
+    return new Rect(target[0], target[1], 0, 0);
+  } else {
+    return target.getBoundingClientRect();
+  }
+}
+function isFixedPosition(el) {
+  while (el) {
+    if (window.getComputedStyle(el).position === "fixed") {
+      return true;
+    }
+    el = el.offsetParent;
+  }
+  return false;
+}
+function toFixedPosition(style, isRtl = false) {
+  Object.assign(style, {
+    position: "fixed",
+    top: 0,
+    [isRtl ? "right" : "left"]: 0
+  });
+}
+const makeDelayOpenCloseProps = propsFactory(
+  {
+    closeDelay: [Number, String],
+    openDelay: [Number, String]
+  },
+  "delay"
+);
+function useDelayOpenClose(props, callback) {
+  const delays = {};
+  const createDelay = (prop) => {
+    return () => {
+      const isOpening = prop === "openDelay";
+      if (delays.closeDelay) {
+        window.clearTimeout(delays.closeDelay);
+      }
+      if (delays.openDelay) {
+        window.clearTimeout(delays.openDelay);
+      }
+      return new Promise((resolve) => {
+        const duration = parseInt((props[prop] ?? 0).toString(), 10);
+        delays[prop] = window.setTimeout(() => {
+          callback == null ? void 0 : callback(isOpening);
+          resolve(isOpening);
+        }, duration);
+      });
+    };
+  };
+  return {
+    delayClose: createDelay("closeDelay"),
+    delayOpen: createDelay("openDelay")
+  };
+}
+const EvMenuSymbol = Symbol.for("ev:menu");
+const makeActivatorProps = propsFactory(
+  {
+    activator: [String, Object],
+    activatorProps: {
+      type: Object,
+      default: () => ({})
+    },
+    openOnClick: {
+      type: Boolean,
+      default: void 0
+    },
+    openOnHover: Boolean,
+    openOnFocus: {
+      type: Boolean,
+      default: void 0
+    },
+    closeOnContentClick: Boolean,
+    ...makeDelayOpenCloseProps()
+  },
+  "EvOverlay/activator"
+);
+function useActivator(props, isActive, isTopOfStack) {
+  return new Activator(props, isActive, isTopOfStack);
+}
+class Activator {
+  constructor(props, isActive, isTopOfStack) {
+    __publicField(this, "activatorEl", ref());
+    __publicField(this, "activatorEvents");
+    __publicField(this, "activatorRef", ref());
+    __publicField(this, "availableEvents");
+    __publicField(this, "component");
+    __publicField(this, "contentEvents");
+    __publicField(this, "delayClose");
+    __publicField(this, "delayOpen");
+    __publicField(this, "openOnClick");
+    __publicField(this, "openOnFocus");
+    __publicField(this, "veilEvents");
+    __publicField(this, "isHovered", false);
+    __publicField(this, "isFocused", false);
+    __publicField(this, "firstEnter", true);
+    __publicField(this, "watcher");
+    __publicField(this, "scope");
+    this.props = props;
+    this.isActive = isActive;
+    this.isTopOfStack = isTopOfStack;
+    this.component = getCurrentComponent("Activator");
+    this.openOnFocus = computed(
+      () => props.openOnFocus || props.openOnFocus == null && props.openOnHover
+    );
+    this.openOnClick = computed(
+      () => props.openOnClick || props.openOnClick == null && !props.openOnHover && !this.openOnFocus.value
+    );
+    const { delayOpen, delayClose } = this.createDelayFunctions();
+    this.delayOpen = delayOpen;
+    this.delayClose = delayClose;
+    this.availableEvents = this.getAvailableEvents();
+    this.activatorEvents = this.createActivatorEvents();
+    this.contentEvents = this.createContentEvents();
+    this.veilEvents = this.createVeilEvents();
+    this.watchIsTopOfStack();
+    this.watchActivatorEl();
+    this.watchActivatorProp();
+  }
+  /**
+   * ## Create Activator Events
+   * Returns a computed set of partially available events.
+   * @private
+   */
+  createActivatorEvents() {
+    return computed(() => {
+      const events = {};
+      if (this.isOpenOnClick()) {
+        events.onClick = this.availableEvents.onClick;
+      }
+      if (this.isOpenOnHover()) {
+        events.onMouseenter = this.availableEvents.onMouseenter;
+        events.onMouseleave = this.availableEvents.onMouseleave;
+      }
+      if (this.isOpenOnFocus()) {
+        events.onFocus = this.availableEvents.onFocus;
+        events.onBlur = this.availableEvents.onBlur;
+      }
+      return events;
+    });
+  }
+  /**
+   * ## Create Content Events
+   * @private
+   */
+  createContentEvents() {
+    return computed(() => {
+      const events = {};
+      if (this.isOpenOnHover()) {
+        events.onMouseenter = () => {
+          this.isHovered = true;
+          this.delayOpen();
+        };
+        events.onMouseleave = () => {
+          this.isHovered = false;
+          this.delayClose();
+        };
+      }
+      if (this.isOpenOnFocus()) {
+        events.onFocusin = () => {
+          this.isFocused = true;
+          this.delayOpen();
+        };
+        events.onFocusout = () => {
+          this.isFocused = false;
+          this.delayClose();
+        };
+      }
+      if (this.isCloseOnContentClick()) {
+        const menu = inject(EvMenuSymbol, null);
+        events.onClick = () => {
+          this.isActive.value = false;
+          menu == null ? void 0 : menu.closeParents();
+        };
+      }
+      return events;
+    });
+  }
+  /**
+   * ## Create Delay Functions
+   * @private
+   */
+  createDelayFunctions() {
+    return useDelayOpenClose(this.props, (value) => {
+      const canOpenHover = this.props.openOnHover && this.isHovered;
+      const canOpenFocus = this.openOnFocus.value && this.isFocused;
+      if (value === (canOpenHover || canOpenFocus) && !(this.props.openOnHover && this.isActive.value && !this.isTopOfStack.value)) {
+        if (this.isActive.value !== value) {
+          this.firstEnter = true;
+        }
+        this.isActive.value = value;
+      }
+    });
+  }
+  /**
+   * ## Create Veil Events
+   * @private
+   */
+  createVeilEvents() {
+    return computed(() => {
+      const events = {};
+      if (this.isOpenOnHover()) {
+        events.onMouseenter = () => {
+          if (this.firstEnter) {
+            this.isHovered = true;
+            this.firstEnter = false;
+            this.delayOpen();
+          }
+        };
+        events.onMouseleave = () => {
+          this.isHovered = false;
+          this.delayClose();
+        };
+      }
+      return events;
+    });
+  }
+  /**
+   *
+   * @param selector
+   * @private
+   */
+  getActivatorEl(selector = this.props.activator) {
+    var _a, _b, _c;
+    let activator;
+    if (selector) {
+      if (selector === "parent") {
+        let el = (_c = (_b = (_a = this.component) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$el) == null ? void 0 : _c.parentNode;
+        while (el.hasAttribute("data-no-activator")) {
+          el = el.parentNode;
+        }
+        activator = el;
+      } else if (typeof selector === "string") {
+        activator = document.querySelector(selector);
+      } else if ("$el" in selector) {
+        activator = selector.$el;
+      } else {
+        activator = selector;
+      }
+    }
+    return this.setActivatorEl(activator);
+  }
+  /**
+   * ## Get Available Events
+   */
+  getAvailableEvents() {
+    return {
+      onBlur: this.onBlur.bind(this),
+      onClick: this.onClick.bind(this),
+      onFocus: this.onFocus.bind(this),
+      onMouseenter: this.onMouseenter.bind(this),
+      onMouseleave: this.onMouseleave.bind(this)
+    };
+  }
+  /**
+   * ## Is Close on Content Click?
+   * Should we close overlays when the content of the overlay is clicked.
+   * For example, when a menu item is clicked.
+   */
+  isCloseOnContentClick() {
+    return this.props.closeOnContentClick;
+  }
+  /**
+   * ## Is Open On Click?
+   */
+  isOpenOnClick() {
+    return this.openOnClick.value;
+  }
+  /**
+   * ## Is Open on Hover?
+   */
+  isOpenOnHover() {
+    return this.props.openOnHover;
+  }
+  /**
+   * ## Is Open on Focus?
+   */
+  isOpenOnFocus() {
+    return this.openOnFocus.value;
+  }
+  /**
+   * ## On Blur
+   * @param e
+   */
+  onBlur(e) {
+    e.stopPropagation();
+    this.isFocused = false;
+    this.delayClose();
+  }
+  /**
+   * ## On Click
+   * @param e
+   */
+  onClick(e) {
+    e.stopPropagation();
+    this.activatorEl.value = e.currentTarget || e.target;
+    this.isActive.value = !this.isActive.value;
+  }
+  /**
+   * ## On Focus
+   * @param e
+   */
+  onFocus(e) {
+    if (Browser.supportsFocusVisible && !e.target.matches(":focus-visible")) {
+      return;
+    }
+    e.stopPropagation();
+    this.isFocused = true;
+    this.activatorEl.value = e.currentTarget || e.target;
+    this.delayOpen();
+  }
+  /**
+   * ## On Mouse Enter (Hover)
+   * @param e
+   */
+  onMouseenter(e) {
+    var _a;
+    if ((_a = e.sourceCapabilities) == null ? void 0 : _a.firesTouchEvents) {
+      return;
+    }
+    this.isHovered = true;
+    this.activatorEl.value = e.currentTarget || e.target;
+    this.delayOpen();
+  }
+  /**
+   * ## On Mouse Leave
+   * @param e
+   */
+  onMouseleave(e) {
+    this.isHovered = false;
+    this.delayClose();
+  }
+  /**
+   * ## Set Activator Element
+   * @param activator
+   */
+  setActivatorEl(activator) {
+    this.activatorEl.value = (activator == null ? void 0 : activator.nodeType) === Node.ELEMENT_NODE ? activator : void 0;
+    return this.activatorEl.value;
+  }
+  /**
+   * ## Watch Activator Prop
+   * @private
+   */
+  watchActivatorProp() {
+    watch(
+      () => !!this.props.activator,
+      (value) => {
+        if (value && Browser.hasWindow) {
+          this.scope = effectScope();
+          this.scope.run(() => {
+            this.watcher = new ActivatorWatcher(this);
+          });
+        } else if (this.scope) {
+          this.scope.stop();
+        }
+      },
+      { flush: "post", immediate: true }
+    );
+    onScopeDispose(() => {
+      var _a;
+      (_a = this.scope) == null ? void 0 : _a.stop();
+      if (this.watcher) {
+        this.watcher = void 0;
+      }
+    });
+  }
+  /**
+   * ## Watch for changes in `activatorEl`
+   * @private
+   */
+  watchActivatorEl() {
+    watchEffect(() => {
+      if (!this.activatorRef.value) {
+        return;
+      }
+      nextTick(() => {
+        this.activatorEl.value = refElement(this.activatorRef.value);
+      });
+    });
+  }
+  /**
+   * ## Watch for changes in `isTopOfStack`.
+   * @private
+   */
+  watchIsTopOfStack() {
+    watch(this.isTopOfStack, (value) => {
+      if (value && (this.isOpenOnHover() && !this.isHovered && (!this.isOpenOnFocus() || !this.isFocused) || this.isOpenOnFocus() && !this.isFocused && (!this.isOpenOnHover() || !this.isHovered))) {
+        this.isActive.value = false;
+      }
+    });
+  }
+}
+class ActivatorWatcher {
+  constructor(activator) {
+    this.activator = activator;
+    this.watchActivator();
+  }
+  addActivatorPropsEventListeners(el = this.activator.getActivatorEl(), activatorProps = this.activator.props.activatorProps) {
+    if (!el) {
+      return;
+    }
+    bindProps(
+      el,
+      mergeProps(this.activator.activatorEvents.value, activatorProps)
+    );
+  }
+  removeActivatorPropsEventListeners(el = this.activator.getActivatorEl(), activatorProps = this.activator.props.activatorProps) {
+    if (!el) {
+      return;
+    }
+    unbindProps(
+      el,
+      mergeProps(this.activator.activatorEvents.value, activatorProps)
+    );
+  }
+  watchActivator() {
+    watch(
+      () => this.activator.props.activator,
+      (value, oldValue) => {
+        if (oldValue && value !== oldValue) {
+          const activator = this.activator.getActivatorEl(oldValue);
+          activator && this.removeActivatorPropsEventListeners(activator);
+        }
+        if (value) {
+          nextTick(() => this.addActivatorPropsEventListeners());
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => this.activator.props.activatorProps,
+      () => {
+        this.addActivatorPropsEventListeners();
+      }
+    );
+    onScopeDispose(() => {
+      this.removeActivatorPropsEventListeners();
+    });
+  }
+}
+function connectedPositionStrategy(data, props, contentStyles) {
+  const manager = new ConnectedPosition(data, props, contentStyles);
+  return {
+    updatePosition: manager.updatePosition.bind(manager)
+  };
+}
+class ConnectedPosition {
+  constructor(data, props, contentStyles) {
+    __publicField(this, "contentScrollParents");
+    __publicField(this, "contentRect");
+    __publicField(this, "maxHeight");
+    __publicField(this, "maxWidth");
+    __publicField(this, "minHeight");
+    __publicField(this, "minWidth");
+    __publicField(this, "observe", false);
+    __publicField(this, "observer");
+    __publicField(this, "offset");
+    __publicField(this, "preferredPosition");
+    __publicField(this, "preferredOrigin");
+    __publicField(this, "targetRect");
+    __publicField(this, "viewportRect");
+    __publicField(this, "viewportMargin", 12);
+    __publicField(this, "zoneCalculator");
+    this.data = data;
+    this.props = props;
+    this.contentStyles = contentStyles;
+    this.resolveFixedActivator();
+    this.minWidth = this.computedNumericProp("minWidth");
+    this.maxWidth = this.computedNumericProp("maxWidth");
+    this.minHeight = this.computedNumericProp("minHeight");
+    this.maxHeight = this.computedNumericProp("maxHeight");
+    this.offset = this.computedOffset();
+    this.zoneCalculator = new ZoneCalculator();
+    this.calculatePreferences();
+    this.addResizeObserver();
+    this.watch();
+  }
+  /**
+   * ## Add Resize Observer
+   *
+   * Watch for changes to the size and element of the activator as well as the overlay content.
+   *
+   * @private
+   */
+  addResizeObserver() {
+    this.observe = false;
+    this.observer = new ResizeObserver(() => {
+      if (this.observe) {
+        this.updatePosition();
+      }
+    });
+    watch(
+      [this.data.activatorEl, this.data.contentEl],
+      ([newActivatorEl, newContentEl], [oldActivatorEl, oldContentEl]) => {
+        var _a, _b, _c, _d;
+        if (oldActivatorEl) {
+          (_a = this.observer) == null ? void 0 : _a.unobserve(oldActivatorEl);
+        }
+        if (newActivatorEl) {
+          (_b = this.observer) == null ? void 0 : _b.observe(newActivatorEl);
+        }
+        if (oldContentEl) {
+          (_c = this.observer) == null ? void 0 : _c.unobserve(oldContentEl);
+        }
+        if (newContentEl) {
+          (_d = this.observer) == null ? void 0 : _d.observe(newContentEl);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onScopeDispose(() => {
+      var _a;
+      (_a = this.observer) == null ? void 0 : _a.disconnect();
+    });
+  }
+  /**
+   * ## Calculate Preferences (for position and origin anchor points)
+   * @private
+   */
+  calculatePreferences() {
+    const { preferredPosition, preferredOrigin } = destructComputed(() => {
+      const position = Anchor.fromSelector(
+        this.props.position,
+        this.data.isRtl.value
+      );
+      let origin;
+      if (this.props.origin === "overlap") {
+        origin = position;
+      } else if (this.props.origin === "auto") {
+        origin = position.flipSide();
+      } else {
+        origin = Anchor.fromSelector(
+          this.props.origin,
+          this.data.isRtl.value
+        );
+      }
+      if (position.side === origin.side && position.alignment === origin.flipAlignment().alignment) {
+        return {
+          preferredPosition: position.flipCorner(),
+          preferredOrigin: origin.flipCorner()
+        };
+      } else {
+        return {
+          preferredPosition: position,
+          preferredOrigin: origin
+        };
+      }
+    });
+    this.preferredPosition = preferredPosition;
+    this.preferredOrigin = preferredOrigin;
+  }
+  /**
+   * ## Computed Numeric Prop
+   * @param key
+   * @private
+   */
+  computedNumericProp(key) {
+    return computed(() => {
+      const value = parseFloat(
+        this.props[key]
+      );
+      return isNaN(value) ? Infinity : value;
+    });
+  }
+  /**
+   * ## Computed Offset
+   *
+   * Returns an array, with the following indexes:
+   * - `0` - represents `side` offset.
+   * - `1` - represents `alignment` offset.
+   *
+   * @private
+   */
+  computedOffset() {
+    return computed(() => {
+      if (Array.isArray(this.props.offset)) {
+        return this.props.offset;
+      }
+      if (typeof this.props.offset === "string") {
+        const offset = this.props.offset.split(" ").map(parseFloat);
+        if (offset.length < 2) {
+          offset.push(0);
+        }
+        return offset;
+      }
+      return isNumber(this.props.offset) ? [this.props.offset, 0] : [0, 0];
+    });
+  }
+  /**
+   * # Get Content Rect
+   *
+   * Returns a Rect adjusted for the original elements position, whilst accommodating RTL direction.
+   */
+  getContentRect() {
+    const el = this.data.contentEl.value;
+    const isRtl = this.data.isRtl.value;
+    const rect = Rect.fromElement(el, true);
+    if (isRtl) {
+      rect.x += parseFloat(el.style.right || 0);
+    } else {
+      rect.x -= parseFloat(el.style.left || 0);
+    }
+    rect.y -= parseFloat(el.style.top || 0);
+    return rect;
+  }
+  /**
+   * ## Get Content Scroll Parents
+   * @private
+   */
+  getContentScrollParents() {
+    const scrollParents = getScrollParents(this.data.contentEl.value);
+    const contentEl = this.data.contentEl.value;
+    if (!scrollParents.length) {
+      scrollParents.push(document.documentElement);
+      if (!(contentEl.style.top && contentEl.style.left)) {
+        this.contentRect.x -= parseFloat(
+          document.documentElement.style.getPropertyValue(
+            "--ev-body-scroll-x"
+          ) || "0"
+        );
+        this.contentRect.y -= parseFloat(
+          document.documentElement.style.getPropertyValue(
+            "--ev-body-scroll-y"
+          ) || "0"
+        );
+      }
+    }
+    return scrollParents;
+  }
+  /**
+   * ## Get Viewport Rect
+   *
+   * Calculates the viewport viewable area for the content taking into account the viewport margins.
+   * i.e. how close are we allowed to place content to the edges of the viewport?
+   *
+   * @private
+   */
+  getViewportRect() {
+    const viewportRect = this.contentScrollParents.reduce(
+      (currentRect, el) => {
+        const elRect = Rect.fromElement(el);
+        const isDocEl = el === document.documentElement;
+        const scrollRect = new Rect(
+          isDocEl ? 0 : elRect.x,
+          isDocEl ? 0 : elRect.y,
+          el.clientWidth,
+          el.clientHeight
+        );
+        if (!currentRect) {
+          return scrollRect;
+        }
+        return new Rect(
+          Math.max(currentRect.left, scrollRect.left),
+          Math.max(currentRect.top, scrollRect.top),
+          Math.min(currentRect.right, scrollRect.right) - Math.max(currentRect.left, scrollRect.left),
+          Math.min(currentRect.bottom, scrollRect.bottom) - Math.max(currentRect.top, scrollRect.top)
+        );
+      },
+      void 0
+    );
+    viewportRect.x += this.viewportMargin;
+    viewportRect.y += this.viewportMargin;
+    viewportRect.width -= this.viewportMargin * 2;
+    viewportRect.height -= this.viewportMargin * 2;
+    return viewportRect;
+  }
+  /**
+   * ## Resolve Fixed Activator
+   * @private
+   */
+  resolveFixedActivator() {
+    const isActivatorFixed = isFixedPosition(this.data.activatorEl.value);
+    if (isActivatorFixed) {
+      toFixedPosition(this.contentStyles.value, this.data.isRtl.value);
+    }
+  }
+  /**
+   * ## Update Position
+   */
+  updatePosition() {
+    var _a;
+    this.observe = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => this.observe = true);
+    });
+    if (!this.data.activatorEl.value || !this.data.contentEl.value) {
+      return;
+    }
+    this.targetRect = Rect.fromElement(this.data.activatorEl.value);
+    this.contentRect = this.getContentRect();
+    this.contentScrollParents = this.getContentScrollParents();
+    this.viewportRect = this.getViewportRect();
+    const zones = this.zoneCalculator.getAvailable(
+      this.targetRect,
+      this.viewportRect,
+      this.offset.value,
+      this.contentRect
+    );
+    const placement = {
+      position: this.preferredPosition.value,
+      origin: this.preferredOrigin.value
+    };
+    if (placement.position.side === "auto") {
+      const autoZone = this.getAutoZone(placement.position, zones);
+      placement.position = autoZone.position;
+      placement.origin = placement.position.flipSide();
+    }
+    const zone = placement.position.side === "center" ? this.getCenterZone(zones) : this.getBestZone(placement.position, zones);
+    placement.position = zone.position;
+    placement.origin = placement.position.flipSide();
+    let { x, y } = zone.rect;
+    if (placement.position.side === "center") {
+      y = zone.rect.y + (zone.rect.height - this.contentRect.height) / 2;
+      x = zone.rect.x + (zone.rect.width - this.contentRect.width) / 2;
+    } else {
+      if (placement.position.side === "top") {
+        y = zone.rect.bottom - this.contentRect.height;
+      } else if (placement.position.side === "left") {
+        x = zone.rect.right - this.contentRect.width;
+      }
+      if (placement.position.alignment !== "start") {
+        const divider = placement.position.alignment === "center" ? 2 : 1;
+        if (placement.position.axis === "x") {
+          y = this.targetRect.y + (this.targetRect.height - this.contentRect.height) / divider;
+        } else {
+          x = this.targetRect.x + (this.targetRect.width - this.contentRect.width) / divider;
+        }
+      }
+    }
+    if (y < this.viewportRect.y) {
+      y = this.viewportRect.y;
+    }
+    if (x < this.viewportRect.x) {
+      x = this.viewportRect.x;
+    }
+    Object.assign(this.contentStyles.value, {
+      "--ev-overlay-position": placement.position.toCssValue(),
+      transformOrigin: placement.origin.toCssValue(),
+      top: toWebUnit(pixelRound(y)),
+      left: toWebUnit(pixelRound(x)),
+      minWidth: toWebUnit(
+        placement.position.axis === "y" ? Math.min(this.minWidth.value, this.targetRect.width) : this.minWidth.value
+      ),
+      maxWidth: toWebUnit(
+        pixelCeil(
+          clamp(
+            zone.rect.width,
+            this.minWidth.value === Infinity ? 0 : this.minWidth.value,
+            this.maxWidth.value
+          )
+        )
+      ),
+      maxHeight: toWebUnit(
+        pixelCeil(
+          clamp(
+            zone.rect.height,
+            this.minHeight.value === Infinity ? 0 : this.minHeight.value,
+            this.maxHeight.value
+          )
+        )
+      )
+    });
+    (_a = this.data.contentEl.value) == null ? void 0 : _a.setAttribute(
+      "data-position",
+      placement.position.toString()
+    );
+    return {
+      zoneRect: zone.rect,
+      contentRect: this.contentRect
+    };
+  }
+  getAutoZone(position, zones) {
+    const matches = zones.filter((zone) => {
+      if (zone.position.side === "center") {
+        return false;
+      }
+      return position.alignment === "auto" || zone.position.alignment === position.alignment;
+    });
+    return matches[0];
+  }
+  /**
+   * ## Get Best Zone
+   * Returns the zone that fits the content, or the zone with the largest available area.
+   * @param position
+   * @param zones
+   * @private
+   */
+  getBestZone(position, zones) {
+    const positions = [
+      position,
+      position.centerAlign(),
+      position.flipSide(),
+      position.flipSide().centerAlign(),
+      position.flipCorner(),
+      position.flipCorner().centerAlign(),
+      position.flipCorner().flipSide(),
+      position.flipCorner().flipSide().centerAlign()
+    ];
+    for (const newPosition of positions) {
+      const zone = zones.find((zone2) => {
+        return zone2.position.toString() === newPosition.toString();
+      });
+      if (zone == null ? void 0 : zone.isFitsContent) {
+        return zone;
+      }
+    }
+    for (const newPosition of positions) {
+      const zone = zones.find((zone2) => {
+        return zone2.position.toString() === newPosition.toString();
+      });
+      if (!zone) {
+        continue;
+      }
+      const dimension = newPosition.axis === "x" ? "width" : "height";
+      if (zone.available[dimension] >= 0) {
+        return zone;
+      }
+    }
+    return this.getAutoZone(position, zones);
+  }
+  /**
+   * ## Get Center Zone
+   * Returns the zone for centering content in the viewport, which is basically the whole viewport.
+   * @param zones
+   * @private
+   */
+  getCenterZone(zones) {
+    return zones.find((zone) => {
+      return zone.position.side === "center" && zone.position.alignment === "center";
+    });
+  }
+  /**
+   * ## Watch
+   *
+   * Watch for changes that affect position calculations.
+   *
+   * @private
+   */
+  watch() {
+    watch(
+      () => {
+        var _a, _b;
+        return [
+          (_a = this.preferredPosition) == null ? void 0 : _a.value,
+          (_b = this.preferredOrigin) == null ? void 0 : _b.value,
+          this.props.offset,
+          this.props.minWidth,
+          this.props.minHeight,
+          this.props.maxWidth,
+          this.props.maxHeight
+        ];
+      },
+      () => this.updatePosition()
+    );
+    nextTick(() => {
+      const result = this.updatePosition();
+      if (!result) {
+        return;
+      }
+    });
+  }
+}
+class Zone {
+  constructor(position, rect, content) {
+    __publicField(this, "available");
+    __publicField(this, "isFitsContent");
+    this.position = position;
+    this.rect = rect;
+    this.content = content;
+    this.available = {
+      width: this.rect.width - content.width,
+      height: this.rect.height - content.height
+    };
+    this.isFitsContent = this.rect.width >= content.width && this.rect.height >= content.height;
+  }
+  get availableArea() {
+    return this.available.width * this.available.height;
+  }
+}
+class ZoneCalculator {
+  /**
+   * ## Get Available
+   *
+   * Returns all available zones around the target.
+   *
+   * @param target
+   * @param viewport
+   * @param offset
+   * @param content
+   */
+  getAvailable(target, viewport, offset, content) {
+    const [offsetSide, offsetAlign] = offset;
+    const sides = {
+      top: {
+        y: viewport.top,
+        height: target.top - viewport.top - offsetSide,
+        align: "x"
+      },
+      bottom: {
+        y: target.bottom + offsetSide,
+        height: viewport.bottom - target.bottom - offsetSide,
+        align: "x"
+      },
+      left: {
+        x: viewport.left,
+        width: target.left - viewport.left - offsetSide,
+        align: "y"
+      },
+      right: {
+        x: target.right + offsetSide,
+        width: viewport.right - target.right - offsetSide,
+        align: "y"
+      },
+      center: { x: viewport.left, width: viewport.width, align: "y" }
+    };
+    const alignments = {
+      x: {
+        center: { x: viewport.left, width: viewport.width },
+        start: {
+          x: target.left + offsetAlign,
+          width: viewport.width - target.left - offsetAlign
+        },
+        end: {
+          x: viewport.left,
+          width: target.right - viewport.left - offsetAlign
+        }
+      },
+      y: {
+        center: { y: viewport.top, height: viewport.height },
+        start: {
+          y: target.top + offsetAlign,
+          height: viewport.bottom - target.top - offsetAlign
+        },
+        end: {
+          y: viewport.top,
+          height: target.bottom - viewport.top - offsetAlign
+        }
+      }
+    };
+    const zones = [];
+    for (const [side, sideAttrs] of Object.entries(sides)) {
+      for (const [align, alignAttrs] of Object.entries(
+        alignments[sideAttrs.align]
+      )) {
+        const anchor = new Anchor(
+          side,
+          align
+        );
+        const rectProps = Object.assign(
+          {
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0
+          },
+          sideAttrs,
+          alignAttrs
+        );
+        const rect = Rect.fromRect(rectProps);
+        zones.push(new Zone(anchor, rect, content));
+      }
+    }
+    zones.sort((zoneA, zoneB) => {
+      return zoneB.availableArea - zoneA.availableArea;
+    });
+    return zones;
+  }
+}
+function staticPositionStrategy(data, props, contentStyles) {
+}
+const positionStrategies = {
+  static: staticPositionStrategy,
+  // specific viewport position, usually centered
+  connected: connectedPositionStrategy
+  // connected to a certain element
+};
+const makePositionStrategyProps = propsFactory(
+  {
+    positionStrategy: {
+      type: [String, Function],
+      default: "connected",
+      validator: (value) => typeof value === "function" || value in positionStrategies
+    },
+    position: {
+      type: String,
+      default: "auto"
+    },
+    origin: {
+      type: String,
+      default: "auto"
+    },
+    offset: [Number, String, Array]
+  },
+  "EvOverlay/position"
+);
+function usePositionStrategies(props, data) {
+  const contentStyles = ref({});
+  const updatePosition = ref();
+  function onResize(e) {
+    var _a;
+    (_a = updatePosition.value) == null ? void 0 : _a.call(updatePosition, e);
+  }
+  if (Browser.hasWindow) {
+    useToggleScope(
+      () => {
+        return !!(data.isActive.value && props.positionStrategy);
+      },
+      (reset) => {
+        var _a;
+        watch(() => props.positionStrategy, reset);
+        onScopeDispose(() => {
+          updatePosition.value = void 0;
+        });
+        let positionStrategyFn;
+        if (isFunction(props.positionStrategy)) {
+          positionStrategyFn = props.positionStrategy;
+        } else {
+          positionStrategyFn = positionStrategies[props.positionStrategy];
+        }
+        updatePosition.value = (_a = positionStrategyFn(
+          data,
+          props,
+          contentStyles
+        )) == null ? void 0 : _a.updatePosition;
+      }
+    );
+    window.addEventListener("resize", onResize, { passive: true });
+    onScopeDispose(() => {
+      window.removeEventListener("resize", onResize);
+      updatePosition.value = void 0;
+    });
+  }
+  return {
+    contentStyles,
+    updatePosition
+  };
+}
+function blockScrollStrategy(data, props) {
+  var _a, _b;
+  const offsetParent = (_a = data.containerEl.value) == null ? void 0 : _a.offsetParent;
+  const scrollElements = [
+    .../* @__PURE__ */ new Set([
+      ...getScrollParents(
+        data.activatorEl.value,
+        props.contained ? offsetParent : void 0
+      ),
+      ...getScrollParents(
+        data.contentEl.value,
+        props.contained ? offsetParent : void 0
+      )
+    ])
+  ].filter((el) => !el.classList.contains("ev-overlay-scroll-blocked"));
+  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
+  const scrollableParent = ((el) => hasScrollbar(el) && el)(
+    offsetParent || document.documentElement
+  );
+  if (scrollableParent) {
+    (_b = data.containerEl.value) == null ? void 0 : _b.classList.add("ev-overlay--scroll-blocked");
+  }
+  scrollElements.forEach((el, i) => {
+    el.style.setProperty(
+      "--ev-body-scroll-x",
+      toWebUnit(-el.scrollLeft) ?? null
+    );
+    el.style.setProperty(
+      "--ev-body-scroll-y",
+      toWebUnit(-el.scrollTop) ?? null
+    );
+    if (el !== document.documentElement) {
+      el.style.setProperty(
+        "--ev-scrollbar-offset",
+        toWebUnit(scrollbarWidth) ?? null
+      );
+    }
+    el.classList.add("ev-overlay-scroll-blocked");
+  });
+  onScopeDispose(() => {
+    var _a2;
+    scrollElements.forEach((el, i) => {
+      const x = parseFloat(
+        el.style.getPropertyValue("--ev-body-scroll-x")
+      );
+      const y = parseFloat(
+        el.style.getPropertyValue("--ev-body-scroll-y")
+      );
+      el.style.removeProperty("--ev-body-scroll-x");
+      el.style.removeProperty("--ev-body-scroll-y");
+      el.style.removeProperty("--ev-scrollbar-offset");
+      el.classList.remove("ev-overlay-scroll-blocked");
+      el.scrollLeft = -x;
+      el.scrollTop = -y;
+    });
+    if (scrollableParent) {
+      (_a2 = data.containerEl.value) == null ? void 0 : _a2.classList.remove(
+        "ev-overlay--scroll-blocked"
+      );
+    }
+  });
+}
+function closeScrollStrategy(data) {
+  function onScroll(e) {
+    data.isActive.value = false;
+  }
+  addScrollEventListener(
+    data.activatorEl.value ?? data.contentEl.value,
+    onScroll
+  );
+}
+function repositionScrollStrategy(data, props, scope) {
+  let slow = false;
+  let raf = -1;
+  let ric = -1;
+  function update(e) {
+    requestNewFrame(() => {
+      var _a, _b;
+      const start = performance.now();
+      (_b = (_a = data.updatePosition).value) == null ? void 0 : _b.call(_a, e);
+      const time = performance.now() - start;
+      slow = time / (1e3 / 60) > 2;
+    });
+  }
+  ric = (typeof requestIdleCallback === "undefined" ? (cb) => cb() : requestIdleCallback)(() => {
+    scope.run(() => {
+      addScrollEventListener(
+        data.activatorEl.value ?? data.contentEl.value,
+        (e) => {
+          if (slow) {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(() => {
+              raf = requestAnimationFrame(() => {
+                update(e);
+              });
+            });
+          } else {
+            update(e);
+          }
+        }
+      );
+    });
+  });
+  onScopeDispose(() => {
+    typeof cancelIdleCallback !== "undefined" && cancelIdleCallback(ric);
+    cancelAnimationFrame(raf);
+  });
+}
+const scrollStrategies = {
+  none: null,
+  close: closeScrollStrategy,
+  block: blockScrollStrategy,
+  reposition: repositionScrollStrategy
+};
+const makeScrollStrategyProps = propsFactory(
+  {
+    scrollStrategy: {
+      type: [String, Function],
+      default: "block",
+      validator: (val) => typeof val === "function" || val in scrollStrategies
+    }
+  },
+  "EvOverlay/scroll"
+);
+function useScrollStrategies(props, data) {
+  if (!Browser.hasWindow) {
+    return;
+  }
+  let scope;
+  watchEffect(async () => {
+    scope == null ? void 0 : scope.stop();
+    if (!(data.isActive.value && props.scrollStrategy)) {
+      return;
+    }
+    scope = effectScope();
+    await nextTick();
+    scope.active && scope.run(() => {
+      var _a;
+      if (typeof props.scrollStrategy === "function") {
+        props.scrollStrategy(data, props, scope);
+      } else {
+        (_a = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _a.call(
+          scrollStrategies,
+          data,
+          props,
+          scope
+        );
+      }
+    });
+  });
+  onScopeDispose(() => {
+    scope == null ? void 0 : scope.stop();
+  });
+}
+const makeEvOverlayProps = propsFactory(
+  {
+    absolute: Boolean,
+    attach: [Boolean, String, Object],
+    closeOnBack: {
+      type: Boolean,
+      default: true
+    },
+    contained: Boolean,
+    contentClass: null,
+    contentProps: null,
+    disabled: Boolean,
+    modelValue: [Boolean, Object],
+    persistent: Boolean,
+    veil: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 2e3
+    },
+    ...makeActivatorProps(),
+    ...makeDimensionsProps(),
+    ...makePositionStrategyProps(),
+    ...makeScrollStrategyProps(),
+    ...makeEvTransitionProps(),
+    ...makeComponentProps()
+  },
+  "EvOverlay"
+);
+/*!
+  * vue-router v4.2.4
+  * (c) 2023 Eduardo San Martin Morote
+  * @license MIT
+  */
+var NavigationType;
+(function(NavigationType2) {
+  NavigationType2["pop"] = "pop";
+  NavigationType2["push"] = "push";
+})(NavigationType || (NavigationType = {}));
+var NavigationDirection;
+(function(NavigationDirection2) {
+  NavigationDirection2["back"] = "back";
+  NavigationDirection2["forward"] = "forward";
+  NavigationDirection2["unknown"] = "";
+})(NavigationDirection || (NavigationDirection = {}));
+Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
+var NavigationFailureType;
+(function(NavigationFailureType2) {
+  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
+  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
+  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
+})(NavigationFailureType || (NavigationFailureType = {}));
+Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
+const routerKey = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
+Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
+function useRouter() {
+  return inject(routerKey);
+}
+function useScopeId() {
+  const component = getCurrentComponent("useScopeId");
+  const scopeId = component.vnode.scopeId;
+  return {
+    scopeId: scopeId ? { [scopeId]: "" } : void 0
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "EvOverlay",
+  props: {
+    disableGlobalStack: Boolean,
+    ...makeEvOverlayProps()
+  },
+  emits: ["click:outside", "update:modelValue", "afterLeave"],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const router = useRouter();
+    const model = useModelProxy(props, "modelValue");
+    const containerEl = ref(void 0);
+    const contentEl = ref(void 0);
+    const contentTransition = useEvTransition(props);
+    const dimensions = useDimensions(props);
+    const { scopeId } = useScopeId();
+    const isActiveContent = computed({
+      get: () => model.value,
+      set: (value) => {
+        if (!(value && props.disabled)) {
+          model.value = value;
+        }
+      }
+    });
+    const { isTopGlobal, isTopLocal, stackStyles } = useStack(
+      isActiveContent,
+      toRef(props, "zIndex"),
+      props.disableGlobalStack
+    );
+    const {
+      activatorEl,
+      activatorRef,
+      activatorEvents,
+      contentEvents,
+      veilEvents
+    } = useActivator(props, isActiveContent, isTopLocal);
+    const teleportTarget = useTeleport(
+      computed(() => {
+        return props.attach || props.contained;
+      })
+    );
+    const { rtlClasses, isRtl } = useRtl();
+    const { contentStyles, updatePosition } = usePositionStrategies(props, {
+      isRtl,
+      contentEl,
+      activatorEl,
+      isActive: isActiveContent
+    });
+    useScrollStrategies(props, {
+      containerEl,
+      contentEl,
+      activatorEl,
+      isActive: isActiveContent,
+      updatePosition
+    });
+    __expose({
+      activatorEl,
+      contentEl,
+      isTopGlobal,
+      isTopLocal,
+      updatePosition
+    });
+    watch(
+      () => props.disabled,
+      (value) => {
+        if (value) {
+          isActiveContent.value = false;
+        }
+      }
+    );
+    const isActiveVeil = computed(() => {
+      return isActiveContent.value && !!props.veil;
+    });
+    const isActiveTeleport = shallowRef(false);
+    watch(isActiveContent, () => {
+      isActiveTeleport.value = true;
+    });
+    function clickOutsideCondition() {
+      return isActiveContent.value && isTopGlobal.value;
+    }
+    function dismiss(focusActivator = false) {
+      var _a, _b;
+      if (props.persistent) {
+        clickBlockedAnimation(contentEl.value);
+        return;
+      }
+      isActiveContent.value = false;
+      if (focusActivator && ((_a = contentEl.value) == null ? void 0 : _a.contains(document.activeElement))) {
+        (_b = activatorEl.value) == null ? void 0 : _b.focus();
+      }
+    }
+    function onAfterLeave() {
+      isActiveTeleport.value = false;
+      emit("afterLeave");
+    }
+    const clickOutsideDirectiveArgs = {
+      handler: onClickOutside,
+      condition: clickOutsideCondition,
+      include: () => [activatorEl.value]
+    };
+    function onClickOutside(e) {
+      emit("click:outside", e);
+      dismiss(false);
+    }
+    function onKeydown(e) {
+      if (e.key === "Escape" && isTopGlobal.value) {
+        dismiss(true);
+      }
+    }
+    watch(
+      isActiveContent,
+      (active) => {
+        if (active) {
+          window.addEventListener("keydown", onKeydown);
+        } else {
+          window.removeEventListener("keydown", onKeydown);
+        }
+      },
+      { immediate: true }
+    );
+    useToggleScope(
+      () => props.closeOnBack,
+      () => {
+        useBackButton(router, (next) => {
+          if (isTopGlobal.value && isActiveContent.value) {
+            next(false);
+            dismiss(false);
+          } else {
+            next();
+          }
+        });
+      }
+    );
+    const top = ref();
+    watch(
+      () => isActiveContent.value && (props.absolute || props.contained) && teleportTarget.value == null,
+      (value) => {
+        if (value) {
+          const scrollParent = getScrollParent(containerEl.value);
+          if (scrollParent && scrollParent !== document.scrollingElement) {
+            top.value = scrollParent.scrollTop;
+          }
+        }
+      }
+    );
+    const activatorSlot = () => {
+      var _a;
+      return (_a = slots.activator) == null ? void 0 : _a.call(slots, {
+        isActive: isActiveContent.value,
+        props: mergeProps(
+          { ref: activatorRef },
+          activatorEvents.value,
+          props.activatorProps
+        )
+      });
+    };
+    const contentAttributes = mergeProps(contentEvents.value, props.contentProps);
+    const overlayAttributes = {
+      ...scopeId,
+      ...attrs
+    };
+    return (_ctx, _cache) => {
+      const _directive_click_outside = resolveDirective("click-outside");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(activatorSlot),
+        isActiveTeleport.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          disabled: !unref(teleportTarget),
+          to: unref(teleportTarget)
+        }, [
+          createElementVNode("div", mergeProps({
+            ref_key: "containerEl",
+            ref: containerEl,
+            class: [
+              "ev-overlay",
+              {
+                "is-active": isActiveContent.value
+              },
+              unref(rtlClasses),
+              props.class
+            ],
+            style: [
+              unref(stackStyles),
+              {
+                top: unref(toWebUnit)(top.value)
+              },
+              props.style
+            ]
+          }, overlayAttributes), [
+            createVNode(Transition, {
+              appear: "",
+              name: "transition-fade"
+            }, {
+              default: withCtx(() => [
+                isActiveVeil.value ? (openBlock(), createElementBlock("div", mergeProps({
+                  key: 0,
+                  class: "ev-overlay--veil"
+                }, unref(veilEvents)), null, 16)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(EvTransition), {
+              appear: "",
+              transition: unref(contentTransition),
+              target: unref(activatorEl),
+              onAfterLeave
+            }, {
+              default: withCtx(() => [
+                withDirectives((openBlock(), createElementBlock("div", mergeProps({
+                  ref_key: "contentEl",
+                  ref: contentEl,
+                  class: ["ev-overlay--content", [props.contentClass]],
+                  style: [unref(dimensions), unref(contentStyles)]
+                }, unref(contentAttributes)), [
+                  renderSlot(_ctx.$slots, "default")
+                ], 16)), [
+                  [vShow, isActiveContent.value],
+                  [_directive_click_outside, clickOutsideDirectiveArgs]
+                ])
+              ]),
+              _: 3
+            }, 8, ["transition", "target"])
+          ], 16)
+        ], 8, ["disabled", "to"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  EvMenuSymbol as E,
+  Rect as R,
+  _sfc_main as _,
+  makePositionStrategyProps as a,
+  usePositionStrategies as b,
+  makeScrollStrategyProps as c,
+  useScrollStrategies as d,
+  makeEvOverlayProps as e,
+  adjustedBoundingRect as f,
+  getTargetRect as g,
+  makeActivatorProps as m,
+  useActivator as u
+};
+//# sourceMappingURL=EvOverlay.vue_vue_type_script_setup_true_lang-DHWxztn_.mjs.map