@dsplce-co/vue-modal 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -3,30 +3,76 @@ import { Component } from 'vue';
 import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { MaybeRefOrGetter } from 'vue';
 import { Plugin as Plugin_2 } from 'vue';
 import { PublicProps } from 'vue';
 import { VNodeProps } from 'vue';
 
+declare const __VLS_component: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type MaybeReactive<R> = {
+    [K in keyof R]: MaybeRefOrGetter<R[K]>;
+};
+
+declare type MaybeReactivePropsOf<C> = MaybeReactive<PropsOf<C>>;
+
 /**
  * Teleport-like component for displaying active modal
  */
-export declare const ModalCollector: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+export declare const ModalCollector: __VLS_WithTemplateSlots<DefineComponent<    {
+/**
+* Duration of the overlay animation
+* @default 0.5s
+*/
+transitionDuration?: string;
+}, {
+payload: ComputedRef<Record<PropertyKey, unknown>>;
+component: ComputedRef<Component | null>;
+close: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+/**
+* Duration of the overlay animation
+* @default 0.5s
+*/
+transitionDuration?: string;
+}> & Readonly<{}>, {
+transitionDuration: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {
         component: Component | null;
-        payload: MaybeRefOrGetter<Record<PropertyKey, unknown>>;
+        payload: Record<PropertyKey, unknown>;
         close: () => void;
     }): any;
 }>;
 
-declare type OpenFn<C extends Component> = RequiredProps<PropsOf<C>> extends never ? (payload?: PropsOf<C>) => void : (payload: PropsOf<C>) => void;
+export declare const ModalOverlay: __VLS_WithTemplateSlots_2<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+declare type OpenFn<C extends Component> = RequiredProps<PropsOf<C>> extends never ? (payload?: MaybeReactivePropsOf<C>) => void : (payload: MaybeReactivePropsOf<C>) => void;
 
 declare type PropsOf<C> = C extends new (...args: any) => {
     $props: infer P;

package/dist/index.mjs

@@ -1,14 +1,14 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._vue-modal__overlay_17xh1_2{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000040}._fade-enter-active_g101b_2,._fade-leave-active_g101b_3{transition:opacity .5s ease}._fade-enter-from_g101b_7,._fade-leave-to_g101b_8{opacity:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { inject as F, watch as P, toRef as G, readonly as q, ref as K, customRef as H, getCurrentScope as J, onScopeDispose as Q, computed as $, toValue as d, unref as j, shallowRef as _, defineComponent as I, h as U, createElementBlock as X, openBlock as k, normalizeClass as Y, renderSlot as W, createBlock as S, Teleport as Z, createVNode as R, Transition as x, withCtx as b, createCommentVNode as ee, resolveDynamicComponent as te, mergeProps as oe } from "vue";
-const D = /* @__PURE__ */ Symbol("State");
-function V() {
-  const e = F(D);
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._vue-modal__overlay_17xh1_2{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000040}._fade-enter-active_slnnl_2,._fade-leave-active_slnnl_3{transition:opacity var(--v379fe401) ease}._fade-enter-from_slnnl_7,._fade-leave-to_slnnl_8{opacity:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { inject as F, watch as P, toRef as G, readonly as q, ref as K, customRef as x, getCurrentScope as H, onScopeDispose as J, computed as M, toValue as d, unref as D, shallowRef as _, defineComponent as j, h as Q, createElementBlock as U, openBlock as k, normalizeClass as X, renderSlot as I, useCssVars as Y, createBlock as S, Teleport as Z, createVNode as R, Transition as ee, withCtx as C, createCommentVNode as te, resolveDynamicComponent as oe, mergeProps as ne } from "vue";
+const V = /* @__PURE__ */ Symbol("State");
+function W() {
+  const e = F(V);
   if (!e)
     throw new Error("VueModal plugin was not initalized, make sure to include it in the plugins list");
   return e;
 }
-function Ee(e) {
-  const { activeModal: o } = V();
+function Se(e) {
+  const { activeModal: o } = W();
   return {
     open: (l) => {
       o.component.value = e, o.payload.value = l ?? null;
@@ -18,22 +18,22 @@ function Ee(e) {
     }
   };
 }
-function ne(e, o) {
-  return J() ? (Q(e, o), !0) : !1;
+function le(e, o) {
+  return H() ? (J(e, o), !0) : !1;
 }
-const le = typeof window < "u" && typeof document < "u";
+const re = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const re = Object.prototype.toString, se = (e) => re.call(e) === "[object Object]", p = () => {
+const se = Object.prototype.toString, ae = (e) => se.call(e) === "[object Object]", m = () => {
 };
-function ae(...e) {
+function ue(...e) {
   if (e.length !== 1) return G(...e);
   const o = e[0];
-  return typeof o == "function" ? q(H(() => ({
+  return typeof o == "function" ? q(x(() => ({
     get: o,
-    set: p
+    set: m
   }))) : K(o);
 }
-function C(e) {
+function O(e) {
   return Array.isArray(e) ? e : [e];
 }
 function ce(e, o, n) {
@@ -42,153 +42,153 @@ function ce(e, o, n) {
     immediate: !0
   });
 }
-const B = le ? window : void 0;
+const B = re ? window : void 0;
 function y(e) {
   var o;
   const n = d(e);
   return (o = n?.$el) !== null && o !== void 0 ? o : n;
 }
 function w(...e) {
-  const o = (t, l, s, c) => (t.addEventListener(l, s, c), () => t.removeEventListener(l, s, c)), n = $(() => {
-    const t = C(d(e[0])).filter((l) => l != null);
+  const o = (t, l, a, r) => (t.addEventListener(l, a, r), () => t.removeEventListener(l, a, r)), n = M(() => {
+    const t = O(d(e[0])).filter((l) => l != null);
     return t.every((l) => typeof l != "string") ? t : void 0;
   });
   return ce(() => {
     var t, l;
     return [
-      (t = (l = n.value) === null || l === void 0 ? void 0 : l.map((s) => y(s))) !== null && t !== void 0 ? t : [B].filter((s) => s != null),
-      C(d(n.value ? e[1] : e[0])),
-      C(j(n.value ? e[2] : e[1])),
+      (t = (l = n.value) === null || l === void 0 ? void 0 : l.map((a) => y(a))) !== null && t !== void 0 ? t : [B].filter((a) => a != null),
+      O(d(n.value ? e[1] : e[0])),
+      O(D(n.value ? e[2] : e[1])),
       d(n.value ? e[3] : e[2])
     ];
-  }, ([t, l, s, c], f, u) => {
-    if (!t?.length || !l?.length || !s?.length) return;
-    const h = se(c) ? { ...c } : c, M = t.flatMap((v) => l.flatMap((g) => s.map((m) => o(v, g, m, h))));
-    u(() => {
-      M.forEach((v) => v());
+  }, ([t, l, a, r], f, c) => {
+    if (!t?.length || !l?.length || !a?.length) return;
+    const h = ae(r) ? { ...r } : r, $ = t.flatMap((v) => l.flatMap((g) => a.map((p) => o(v, g, p, h))));
+    c(() => {
+      $.forEach((v) => v());
     });
   }, { flush: "post" });
 }
-function ue(e, o, n = {}) {
-  const { window: t = B, ignore: l = [], capture: s = !0, detectIframe: c = !1, controls: f = !1 } = n;
+function ie(e, o, n = {}) {
+  const { window: t = B, ignore: l = [], capture: a = !0, detectIframe: r = !1, controls: f = !1 } = n;
   if (!t) return f ? {
-    stop: p,
-    cancel: p,
-    trigger: p
-  } : p;
-  let u = !0;
-  const h = (r) => d(l).some((a) => {
-    if (typeof a == "string") return Array.from(t.document.querySelectorAll(a)).some((i) => i === r.target || r.composedPath().includes(i));
+    stop: m,
+    cancel: m,
+    trigger: m
+  } : m;
+  let c = !0;
+  const h = (s) => d(l).some((u) => {
+    if (typeof u == "string") return Array.from(t.document.querySelectorAll(u)).some((i) => i === s.target || s.composedPath().includes(i));
     {
-      const i = y(a);
-      return i && (r.target === i || r.composedPath().includes(i));
+      const i = y(u);
+      return i && (s.target === i || s.composedPath().includes(i));
     }
   });
-  function M(r) {
-    const a = d(r);
-    return a && a.$.subTree.shapeFlag === 16;
+  function $(s) {
+    const u = d(s);
+    return u && u.$.subTree.shapeFlag === 16;
   }
-  function v(r, a) {
-    const i = d(r), E = i.$.subTree && i.$.subTree.children;
-    return E == null || !Array.isArray(E) ? !1 : E.some((L) => L.el === a.target || a.composedPath().includes(L.el));
+  function v(s, u) {
+    const i = d(s), E = i.$.subTree && i.$.subTree.children;
+    return E == null || !Array.isArray(E) ? !1 : E.some((L) => L.el === u.target || u.composedPath().includes(L.el));
   }
-  const g = (r) => {
-    const a = y(e);
-    if (r.target != null && !(!(a instanceof Element) && M(e) && v(e, r)) && !(!a || a === r.target || r.composedPath().includes(a))) {
-      if ("detail" in r && r.detail === 0 && (u = !h(r)), !u) {
-        u = !0;
+  const g = (s) => {
+    const u = y(e);
+    if (s.target != null && !(!(u instanceof Element) && $(e) && v(e, s)) && !(!u || u === s.target || s.composedPath().includes(u))) {
+      if ("detail" in s && s.detail === 0 && (c = !h(s)), !c) {
+        c = !0;
         return;
       }
-      o(r);
+      o(s);
     }
   };
-  let m = !1;
+  let p = !1;
   const z = [
-    w(t, "click", (r) => {
-      m || (m = !0, setTimeout(() => {
-        m = !1;
-      }, 0), g(r));
+    w(t, "click", (s) => {
+      p || (p = !0, setTimeout(() => {
+        p = !1;
+      }, 0), g(s));
     }, {
       passive: !0,
-      capture: s
+      capture: a
     }),
-    w(t, "pointerdown", (r) => {
-      const a = y(e);
-      u = !h(r) && !!(a && !r.composedPath().includes(a));
+    w(t, "pointerdown", (s) => {
+      const u = y(e);
+      c = !h(s) && !!(u && !s.composedPath().includes(u));
     }, { passive: !0 }),
-    c && w(t, "blur", (r) => {
+    r && w(t, "blur", (s) => {
       setTimeout(() => {
-        var a;
+        var u;
         const i = y(e);
-        ((a = t.document.activeElement) === null || a === void 0 ? void 0 : a.tagName) === "IFRAME" && !i?.contains(t.document.activeElement) && o(r);
+        ((u = t.document.activeElement) === null || u === void 0 ? void 0 : u.tagName) === "IFRAME" && !i?.contains(t.document.activeElement) && o(s);
       }, 0);
     }, { passive: !0 })
-  ].filter(Boolean), A = () => z.forEach((r) => r());
+  ].filter(Boolean), A = () => z.forEach((s) => s());
   return f ? {
     stop: A,
     cancel: () => {
-      u = !1;
+      c = !1;
     },
-    trigger: (r) => {
-      u = !0, g(r), u = !1;
+    trigger: (s) => {
+      c = !0, g(s), c = !1;
     }
   } : A;
 }
-function O(e) {
+function b(e) {
   return typeof Window < "u" && e instanceof Window ? e.document.documentElement : typeof Document < "u" && e instanceof Document ? e.documentElement : e;
 }
 const T = /* @__PURE__ */ new WeakMap();
-function ie(e, o = !1) {
+function de(e, o = !1) {
   const n = _(o);
   let t = "";
-  P(ae(e), (c) => {
-    const f = O(d(c));
+  P(ue(e), (r) => {
+    const f = b(d(r));
     if (f) {
-      const u = f;
-      if (T.get(u) || T.set(u, u.style.overflow), u.style.overflow !== "hidden" && (t = u.style.overflow), u.style.overflow === "hidden") return n.value = !0;
-      if (n.value) return u.style.overflow = "hidden";
+      const c = f;
+      if (T.get(c) || T.set(c, c.style.overflow), c.style.overflow !== "hidden" && (t = c.style.overflow), c.style.overflow === "hidden") return n.value = !0;
+      if (n.value) return c.style.overflow = "hidden";
     }
   }, { immediate: !0 });
   const l = () => {
-    const c = O(d(e));
-    !c || n.value || (c.style.overflow = "hidden", n.value = !0);
-  }, s = () => {
-    const c = O(d(e));
-    !c || !n.value || (c.style.overflow = t, T.delete(c), n.value = !1);
+    const r = b(d(e));
+    !r || n.value || (r.style.overflow = "hidden", n.value = !0);
+  }, a = () => {
+    const r = b(d(e));
+    !r || !n.value || (r.style.overflow = t, T.delete(r), n.value = !1);
   };
-  return ne(s), $({
+  return le(a), M({
     get() {
       return n.value;
     },
-    set(c) {
-      c ? l() : s();
+    set(r) {
+      r ? l() : a();
     }
   });
 }
-const de = /* @__PURE__ */ I((e, { slots: o, emit: n }) => {
+const fe = /* @__PURE__ */ j((e, { slots: o, emit: n }) => {
   const t = _();
-  return ue(t, (l) => {
+  return ie(t, (l) => {
     n("trigger", l);
   }, e.options), () => {
-    if (o.default) return U(e.as || "div", { ref: t }, o.default());
+    if (o.default) return Q(e.as || "div", { ref: t }, o.default());
   };
 }, {
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"]
 });
-function fe() {
+function ve() {
   let e = !1;
   const o = _(!1);
   return (n, t) => {
     if (o.value = t.value, e) return;
     e = !0;
-    const l = ie(n, t.value);
-    P(o, (s) => l.value = s);
+    const l = de(n, t.value);
+    P(o, (a) => l.value = a);
   };
 }
-fe();
-const ve = {
+ve();
+const pe = {
   "vue-modal__overlay": "_vue-modal__overlay_17xh1_2"
 }, N = (e, o) => {
   const n = e.__vccOpts || e;
@@ -196,62 +196,72 @@ const ve = {
     n[t] = l;
   return n;
 }, me = {};
-function pe(e, o) {
-  return k(), X("div", {
-    class: Y(e.$style["vue-modal__overlay"])
+function ye(e, o) {
+  return k(), U("div", {
+    class: X(e.$style["vue-modal__overlay"])
   }, [
-    W(e.$slots, "default")
+    I(e.$slots, "default")
   ], 2);
 }
-const ye = {
-  $style: ve
-}, _e = /* @__PURE__ */ N(me, [["render", pe], ["__cssModules", ye]]), he = {}, ge = /* @__PURE__ */ I({
-  ...he,
+const _e = {
+  $style: pe
+}, he = /* @__PURE__ */ N(me, [["render", ye], ["__cssModules", _e]]), ge = {}, ke = /* @__PURE__ */ j({
+  ...ge,
   __name: "ModalCollector",
-  setup(e) {
-    const { activeModal: o } = V(), n = $(() => o.payload.value ?? {}), t = $(() => o.component.value), l = () => {
-      o.payload.value = null, o.component.value = null;
+  props: {
+    transitionDuration: { default: "0.5s" }
+  },
+  setup(e, { expose: o }) {
+    Y((r) => ({
+      v379fe401: r.transitionDuration
+    }));
+    const { activeModal: n } = W(), t = M(() => n.payload.value ?? {}), l = M(() => n.component.value), a = () => {
+      n.payload.value = null, n.component.value = null;
     };
-    return w(document, "keydown", (s) => {
-      s.key === "Escape" && l();
-    }), (s, c) => (k(), S(Z, { to: "body" }, [
-      W(s.$slots, "default", {
-        component: t.value,
-        payload: n.value,
-        close: l
+    return w(document, "keydown", (r) => {
+      r.key === "Escape" && a();
+    }), o({
+      payload: t,
+      component: l,
+      close: a
+    }), (r, f) => (k(), S(Z, { to: "body" }, [
+      I(r.$slots, "default", {
+        component: l.value,
+        payload: t.value,
+        close: a
       }, () => [
-        R(x, {
-          "enter-active-class": s.$style["fade-enter-active"],
-          "leave-active-class": s.$style["fade-leave-active"],
-          "enter-from-class": s.$style["fade-enter-from"],
-          "leave-to-class": s.$style["fade-leave-to"]
+        R(ee, {
+          "enter-active-class": r.$style["fade-enter-active"],
+          "leave-active-class": r.$style["fade-leave-active"],
+          "enter-from-class": r.$style["fade-enter-from"],
+          "leave-to-class": r.$style["fade-leave-to"]
         }, {
-          default: b(() => [
-            t.value !== null ? (k(), S(_e, { key: 0 }, {
-              default: b(() => [
-                R(j(de), { onTrigger: l }, {
-                  default: b(() => [
-                    (k(), S(te(t.value), oe(n.value, { onClose: l }), null, 16))
+          default: C(() => [
+            l.value !== null ? (k(), S(he, { key: 0 }, {
+              default: C(() => [
+                R(D(fe), { onTrigger: a }, {
+                  default: C(() => [
+                    (k(), S(oe(l.value), ne(t.value, { onClose: a }), null, 16))
                   ]),
                   _: 1
                 })
               ]),
               _: 1
-            })) : ee("", !0)
+            })) : te("", !0)
           ]),
           _: 1
         }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
       ])
     ]));
   }
-}), ke = {
-  "fade-enter-active": "_fade-enter-active_g101b_2",
-  "fade-leave-active": "_fade-leave-active_g101b_3",
-  "fade-enter-from": "_fade-enter-from_g101b_7",
-  "fade-leave-to": "_fade-leave-to_g101b_8"
-}, we = {
-  $style: ke
-}, Se = /* @__PURE__ */ N(ge, [["__cssModules", we]]);
+}), we = {
+  "fade-enter-active": "_fade-enter-active_slnnl_2",
+  "fade-leave-active": "_fade-leave-active_slnnl_3",
+  "fade-enter-from": "_fade-enter-from_slnnl_7",
+  "fade-leave-to": "_fade-leave-to_slnnl_8"
+}, Me = {
+  $style: we
+}, Ce = /* @__PURE__ */ N(ke, [["__cssModules", Me]]);
 function $e() {
   return {
     activeModal: {
@@ -260,11 +270,12 @@ function $e() {
     }
   };
 }
-const be = (e) => {
-  e.provide(D, $e());
+const Oe = (e) => {
+  e.provide(V, $e());
 };
 export {
-  Se as ModalCollector,
-  be as VueModalPlugin,
-  Ee as useModal
+  Ce as ModalCollector,
+  he as ModalOverlay,
+  Oe as VueModalPlugin,
+  Se as useModal
 };

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@dsplce-co/vue-modal",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Utility library for displaying modals in Vue",
+  "repository": {
+    "url": "https://github.com/dsplce-co/vue-modal"
+  },
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.mjs"
     }
   },
   "keywords": [],

package/dist/index.cjs

@@ -1,2 +0,0 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._vue-modal__overlay_17xh1_2{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000040}._fade-enter-active_g101b_2,._fade-leave-active_g101b_3{transition:opacity .5s ease}._fade-enter-from_g101b_7,._fade-leave-to_g101b_8{opacity:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),E=Symbol("State");function V(){const e=t.inject(E);if(!e)throw new Error("VueModal plugin was not initalized, make sure to include it in the plugins list");return e}function R(e){const{activeModal:n}=V();return{open:r=>{n.component.value=e,n.payload.value=r??null},close:()=>{n.component.value=null,n.payload.value=null}}}function B(e,n){return t.getCurrentScope()?(t.onScopeDispose(e,n),!0):!1}const A=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const L=Object.prototype.toString,j=e=>L.call(e)==="[object Object]",m=()=>{};function I(...e){if(e.length!==1)return t.toRef(...e);const n=e[0];return typeof n=="function"?t.readonly(t.customRef(()=>({get:n,set:m}))):t.ref(n)}function M(e){return Array.isArray(e)?e:[e]}function W(e,n,l){return t.watch(e,n,{...l,immediate:!0})}const O=A?window:void 0;function y(e){var n;const l=t.toValue(e);return(n=l?.$el)!==null&&n!==void 0?n:l}function g(...e){const n=(o,r,c,s)=>(o.addEventListener(r,c,s),()=>o.removeEventListener(r,c,s)),l=t.computed(()=>{const o=M(t.toValue(e[0])).filter(r=>r!=null);return o.every(r=>typeof r!="string")?o:void 0});return W(()=>{var o,r;return[(o=(r=l.value)===null||r===void 0?void 0:r.map(c=>y(c)))!==null&&o!==void 0?o:[O].filter(c=>c!=null),M(t.toValue(l.value?e[1]:e[0])),M(t.unref(l.value?e[2]:e[1])),t.toValue(l.value?e[3]:e[2])]},([o,r,c,s],f,i)=>{if(!o?.length||!r?.length||!c?.length)return;const h=j(s)?{...s}:s,w=o.flatMap(v=>r.flatMap(_=>c.map(p=>n(v,_,p,h))));i(()=>{w.forEach(v=>v())})},{flush:"post"})}function D(e,n,l={}){const{window:o=O,ignore:r=[],capture:c=!0,detectIframe:s=!1,controls:f=!1}=l;if(!o)return f?{stop:m,cancel:m,trigger:m}:m;let i=!0;const h=a=>t.toValue(r).some(u=>{if(typeof u=="string")return Array.from(o.document.querySelectorAll(u)).some(d=>d===a.target||a.composedPath().includes(d));{const d=y(u);return d&&(a.target===d||a.composedPath().includes(d))}});function w(a){const u=t.toValue(a);return u&&u.$.subTree.shapeFlag===16}function v(a,u){const d=t.toValue(a),k=d.$.subTree&&d.$.subTree.children;return k==null||!Array.isArray(k)?!1:k.some(b=>b.el===u.target||u.composedPath().includes(b.el))}const _=a=>{const u=y(e);if(a.target!=null&&!(!(u instanceof Element)&&w(e)&&v(e,a))&&!(!u||u===a.target||a.composedPath().includes(u))){if("detail"in a&&a.detail===0&&(i=!h(a)),!i){i=!0;return}n(a)}};let p=!1;const P=[g(o,"click",a=>{p||(p=!0,setTimeout(()=>{p=!1},0),_(a))},{passive:!0,capture:c}),g(o,"pointerdown",a=>{const u=y(e);i=!h(a)&&!!(u&&!a.composedPath().includes(u))},{passive:!0}),s&&g(o,"blur",a=>{setTimeout(()=>{var u;const d=y(e);((u=o.document.activeElement)===null||u===void 0?void 0:u.tagName)==="IFRAME"&&!d?.contains(o.document.activeElement)&&n(a)},0)},{passive:!0})].filter(Boolean),C=()=>P.forEach(a=>a());return f?{stop:C,cancel:()=>{i=!1},trigger:a=>{i=!0,_(a),i=!1}}:C}function S(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}const $=new WeakMap;function N(e,n=!1){const l=t.shallowRef(n);let o="";t.watch(I(e),s=>{const f=S(t.toValue(s));if(f){const i=f;if($.get(i)||$.set(i,i.style.overflow),i.style.overflow!=="hidden"&&(o=i.style.overflow),i.style.overflow==="hidden")return l.value=!0;if(l.value)return i.style.overflow="hidden"}},{immediate:!0});const r=()=>{const s=S(t.toValue(e));!s||l.value||(s.style.overflow="hidden",l.value=!0)},c=()=>{const s=S(t.toValue(e));!s||!l.value||(s.style.overflow=o,$.delete(s),l.value=!1)};return B(c),t.computed({get(){return l.value},set(s){s?r():c()}})}const q=t.defineComponent((e,{slots:n,emit:l})=>{const o=t.shallowRef();return D(o,r=>{l("trigger",r)},e.options),()=>{if(n.default)return t.h(e.as||"div",{ref:o},n.default())}},{name:"OnClickOutside",props:["as","options"],emits:["trigger"]});function z(){let e=!1;const n=t.shallowRef(!1);return(l,o)=>{if(n.value=o.value,e)return;e=!0;const r=N(l,o.value);t.watch(n,c=>r.value=c)}}z();const F={"vue-modal__overlay":"_vue-modal__overlay_17xh1_2"},T=(e,n)=>{const l=e.__vccOpts||e;for(const[o,r]of n)l[o]=r;return l},G={};function K(e,n){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(e.$style["vue-modal__overlay"])},[t.renderSlot(e.$slots,"default")],2)}const x={$style:F},H=T(G,[["render",K],["__cssModules",x]]),J={},Q=t.defineComponent({...J,__name:"ModalCollector",setup(e){const{activeModal:n}=V(),l=t.computed(()=>n.payload.value??{}),o=t.computed(()=>n.component.value),r=()=>{n.payload.value=null,n.component.value=null};return g(document,"keydown",c=>{c.key==="Escape"&&r()}),(c,s)=>(t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.renderSlot(c.$slots,"default",{component:o.value,payload:l.value,close:r},()=>[t.createVNode(t.Transition,{"enter-active-class":c.$style["fade-enter-active"],"leave-active-class":c.$style["fade-leave-active"],"enter-from-class":c.$style["fade-enter-from"],"leave-to-class":c.$style["fade-leave-to"]},{default:t.withCtx(()=>[o.value!==null?(t.openBlock(),t.createBlock(H,{key:0},{default:t.withCtx(()=>[t.createVNode(t.unref(q),{onTrigger:r},{default:t.withCtx(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.value),t.mergeProps(l.value,{onClose:r}),null,16))]),_:1})]),_:1})):t.createCommentVNode("",!0)]),_:1},8,["enter-active-class","leave-active-class","enter-from-class","leave-to-class"])])]))}}),U={"fade-enter-active":"_fade-enter-active_g101b_2","fade-leave-active":"_fade-leave-active_g101b_3","fade-enter-from":"_fade-enter-from_g101b_7","fade-leave-to":"_fade-leave-to_g101b_8"},X={$style:U},Y=T(Q,[["__cssModules",X]]);function Z(){return{activeModal:{component:t.shallowRef(null),payload:t.shallowRef(null)}}}const ee=e=>{e.provide(E,Z())};exports.ModalCollector=Y;exports.VueModalPlugin=ee;exports.useModal=R;