vue-modaller 1.0.4 → 1.0.5

package/dist/index.d.ts

@@ -7,4 +7,4 @@ declare const createPlugin: (options?: any) => any;
 export * from './components';
 export * from './useModal';
 export { createPlugin, VueModaller };
-export default VueModaller;
+export default VueModaller;

package/dist/vue-modaller.js

@@ -1,5 +1,5 @@
-import { ref as h, onMounted as Pe, onUnmounted as He, defineComponent as $e, computed as K, createElementBlock as J, createCommentVNode as _e, openBlock as O, normalizeClass as q, createElementVNode as Y, normalizeStyle as ye, unref as C, renderSlot as we, markRaw as Le, toRaw as Be, createBlock as G, Teleport as Ae, Fragment as Fe, renderList as Me, createSlots as Te, withCtx as Q, resolveDynamicComponent as Ee, mergeProps as ke, toDisplayString as xe } from "vue";
-const Se = {
+import { ref as h, onMounted as $e, onUnmounted as He, defineComponent as Le, computed as K, createElementBlock as G, createCommentVNode as _e, openBlock as O, normalizeClass as U, createElementVNode as Y, normalizeStyle as ye, unref as C, renderSlot as we, markRaw as Be, toRaw as De, createBlock as p, Teleport as Ae, Fragment as Se, renderList as Me, createSlots as Te, withCtx as J, resolveDynamicComponent as ke, mergeProps as Ee, toDisplayString as Fe } from "vue";
+const xe = {
   initialPosition: "half",
   hideHandle: !1,
   handle: {
@@ -9,66 +9,66 @@ const Se = {
     hoverColor: "#999",
     activeColor: "#666"
   }
-}, ze = (l = Se, e) => {
-  const s = h(!1), a = h(0), y = h(!1), o = h(!1);
-  let g = 0, _ = 0, P = !1, $ = 0, c = { full: 0, half: 0, closed: 0 }, T = 0, L = 0, B = 0, E = 0;
-  const S = h(null), D = () => {
-    $ = window.innerHeight, c = {
+}, ze = (l = xe, e) => {
+  const g = h(!1), a = h(0), y = h(!1), c = h(!1);
+  let u = 0, _ = 0, P = !1, $ = 0, o = { full: 0, half: 0, closed: 0 }, T = 0, L = 0, B = 0, k = 0;
+  const x = h(null), D = () => {
+    $ = window.innerHeight, o = {
       full: 0,
       half: $ * 0.4,
       closed: $
-    }, a.value = c.closed, T = c.closed;
-  }, w = (u, i = 300) => new Promise((b) => {
-    if (o.value) return b();
-    o.value = !0;
-    const m = a.value, M = u - m, f = performance.now(), A = (F) => {
-      const x = F - f, U = Math.min(x / i, 1), j = 1 - Math.pow(1 - U, 3);
-      a.value = m + M * j, U < 1 ? requestAnimationFrame(A) : (o.value = !1, T = a.value, b());
+    }, a.value = o.closed, T = o.closed;
+  }, w = (f, i = 300) => new Promise((b) => {
+    if (c.value) return b();
+    c.value = !0;
+    const m = a.value, M = f - m, s = performance.now(), A = (S) => {
+      const F = S - s, j = Math.min(F / i, 1), q = 1 - Math.pow(1 - j, 3);
+      a.value = m + M * q, j < 1 ? requestAnimationFrame(A) : (c.value = !1, T = a.value, b());
     };
     requestAnimationFrame(A);
   }), H = async () => {
-    await w(c[l.initialPosition], 400);
-  }, k = async () => {
-    await w(c.closed, 300), e && setTimeout(() => e(), 50);
-  }, n = (u) => {
+    await w(o[l.initialPosition], 400);
+  }, E = async () => {
+    await w(o.closed, 300), e && setTimeout(() => e(), 50);
+  }, n = (f) => {
     var b, m;
-    if (o.value) return;
+    if (c.value) return;
     y.value = !0, P = !0;
-    const i = u;
-    g = i instanceof PointerEvent ? i.clientY : ((m = (b = i.touches) == null ? void 0 : b[0]) == null ? void 0 : m.clientY) || 0, E = g, B = Date.now(), document.addEventListener("pointermove", t), document.addEventListener("pointerup", r), document.addEventListener("touchmove", t, { passive: !1 }), document.addEventListener("touchend", r);
-  }, t = (u) => {
-    var F, x;
-    if (!P || o.value) return;
-    const i = u;
-    _ = i instanceof PointerEvent ? i.clientY : ((x = (F = i.touches) == null ? void 0 : F[0]) == null ? void 0 : x.clientY) || 0;
-    const b = _ - g, m = T + b, M = Date.now(), f = _ - E, A = M - B;
-    L = f / A, E = _, B = M, m < c.full ? a.value = c.full : m > c.closed ? a.value = c.closed : a.value = m;
+    const i = f;
+    u = i instanceof PointerEvent ? i.clientY : ((m = (b = i.touches) == null ? void 0 : b[0]) == null ? void 0 : m.clientY) || 0, k = u, B = Date.now(), document.addEventListener("pointermove", t), document.addEventListener("pointerup", r), document.addEventListener("touchmove", t, { passive: !1 }), document.addEventListener("touchend", r);
+  }, t = (f) => {
+    var S, F;
+    if (!P || c.value) return;
+    const i = f;
+    _ = i instanceof PointerEvent ? i.clientY : ((F = (S = i.touches) == null ? void 0 : S[0]) == null ? void 0 : F.clientY) || 0;
+    const b = _ - u, m = T + b, M = Date.now(), s = _ - k, A = M - B;
+    L = s / A, k = _, B = M, m < o.full ? a.value = o.full : m > o.closed ? a.value = o.closed : a.value = m;
   }, r = async () => {
     y.value = !1, P = !1, document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", r), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", r);
-    const u = a.value, i = Math.abs(u - c.full), b = Math.abs(u - c.half), m = Math.abs(u - c.closed), M = Math.min(i, b, m);
-    let f = c.half;
-    L > 0.5 ? T === c.full ? f = c.half : f = c.closed : L < -0.5 || M === i ? f = c.full : M === b ? f = c.half : f = c.closed, f === c.closed ? await k() : await w(f, 250);
+    const f = a.value, i = Math.abs(f - o.full), b = Math.abs(f - o.half), m = Math.abs(f - o.closed), M = Math.min(i, b, m);
+    let s = o.half;
+    L > 0.5 ? T === o.full ? s = o.half : s = o.closed : L < -0.5 || M === i ? s = o.full : M === b ? s = o.half : s = o.closed, s === o.closed ? await E() : await w(s, 250);
   }, v = () => {
-    k();
+    E();
   };
-  return Pe(() => {
+  return $e(() => {
     D();
   }), He(() => {
     document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", r), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", r);
   }), {
-    open: s,
+    open: g,
     translateY: a,
     isDragging: y,
-    isAnimating: o,
-    panel: S,
+    isAnimating: c,
+    panel: x,
     openPanel: H,
-    closePanel: k,
+    closePanel: E,
     startDrag: n,
     handleBackdropClick: v,
     initPositions: D,
     animateToPosition: w
   };
-}, Ve = { class: "__modal-body" }, We = { class: "__modal-header" }, De = /* @__PURE__ */ $e({
+}, Ve = { class: "__modal-body" }, We = { class: "__modal-header" }, je = /* @__PURE__ */ Le({
   __name: "modal",
   props: {
     config: Object,
@@ -76,12 +76,12 @@ const Se = {
   },
   emits: ["close"],
   setup(l, { emit: e }) {
-    var H, k;
-    const s = e, a = l, y = () => {
+    var H, E;
+    const g = e, a = l, y = () => {
       var n;
-      ((n = a.config) == null ? void 0 : n.type) === "draggable" ? $() : s("close");
-    }, { isDragging: o, translateY: g, startDrag: _, openPanel: P, closePanel: $, isAnimating: c } = ze((H = a.config) == null ? void 0 : H.draggableConfig, () => {
-      s("close");
+      ((n = a.config) == null ? void 0 : n.type) === "draggable" ? $() : g("close");
+    }, { isDragging: c, translateY: u, startDrag: _, openPanel: P, closePanel: $, isAnimating: o } = ze((H = a.config) == null ? void 0 : H.draggableConfig, () => {
+      g("close");
     }), T = () => {
       var n, t;
       (n = a.config) != null && n.closeable && (console.log("Modal closed from outside", (t = a.config) == null ? void 0 : t.closeable), y());
@@ -92,61 +92,61 @@ const Se = {
       var n, t, r, v;
       return (n = a.config) != null && n.height && a.config.type !== "draggable" ? typeof ((t = a.config) == null ? void 0 : t.height) == "number" ? `${(r = a.config) == null ? void 0 : r.height}px` : (v = a.config) == null ? void 0 : v.height : "100%";
     });
-    let E = h({
-      modal: { cls: "is-modal", anim_in: "zoomIn", anim_out: "zoomOut", style: `padding: ${(k = a.config) == null ? void 0 : k.padding}px;` },
+    let k = h({
+      modal: { cls: "is-modal", anim_in: "zoomIn", anim_out: "zoomOut", style: `padding: ${(E = a.config) == null ? void 0 : E.padding}px;` },
       panel: { cls: "is-panel", anim_in: "slideInBottom", anim_out: "slideOutBottom", style: "padding: 0" },
       draggable: { cls: "is-draggable", anim_in: "", anim_out: "", style: "padding: 0" },
       side: { cls: "is-side", anim_in: "slideInRight", anim_out: "slideOutRight", style: "padding: 0" }
     });
-    const S = K(() => {
+    const x = K(() => {
       var n, t, r;
-      return (n = a.config) != null && n.anim ? E.value[((t = a.config) == null ? void 0 : t.type) || "modal"].anim_in : E.value[((r = a.config) == null ? void 0 : r.type) || "modal"].anim_out;
+      return (n = a.config) != null && n.anim ? k.value[((t = a.config) == null ? void 0 : t.type) || "modal"].anim_in : k.value[((r = a.config) == null ? void 0 : r.type) || "modal"].anim_out;
     }), D = K(() => {
-      var r, v, u, i;
+      var r, v, f, i;
       let n = "__modal-wrapper--centered", t = "__modal-content __modal-content--standard";
-      return ((r = a.config) == null ? void 0 : r.type) == "modal" ? (n = "__modal-wrapper--centered", t = "__modal-content __modal-content--standard") : ((v = a.config) == null ? void 0 : v.type) == "side" ? (n = "__modal-wrapper--side", t = "__modal-content __modal-content--side") : ((u = a.config) == null ? void 0 : u.type) == "panel" ? (n = "__modal-wrapper--panel", t = "__modal-content __modal-content--panel") : ((i = a.config) == null ? void 0 : i.type) == "draggable" && (n = "__modal-wrapper--draggable", t = `__modal-content __modal-content--draggable ${o.value ? "__modal-content--dragging" : ""} ${c.value ? "__modal-content--animating" : ""}`), {
+      return ((r = a.config) == null ? void 0 : r.type) == "modal" ? (n = "__modal-wrapper--centered", t = "__modal-content __modal-content--standard") : ((v = a.config) == null ? void 0 : v.type) == "side" ? (n = "__modal-wrapper--side", t = "__modal-content __modal-content--side") : ((f = a.config) == null ? void 0 : f.type) == "panel" ? (n = "__modal-wrapper--panel", t = "__modal-content __modal-content--panel") : ((i = a.config) == null ? void 0 : i.type) == "draggable" && (n = "__modal-wrapper--draggable", t = `__modal-content __modal-content--draggable ${c.value ? "__modal-content--dragging" : ""} ${o.value ? "__modal-content--animating" : ""}`), {
         mainModalWrapperClass: n,
         mainModalClass: t
       };
     }), w = h(!1);
-    return Pe(() => {
+    return $e(() => {
       setTimeout(() => {
         var n;
         w.value = !0, ((n = a.config) == null ? void 0 : n.type) === "draggable" && (P(), console.log("opened draggable with animation"));
       }, 100);
     }), (n, t) => {
-      var r, v, u, i, b, m, M, f, A, F, x, U, j, Z, p, I, N, ee, ae, le, ne, te, ce, re, oe, de, ie, ge, ue, fe, se, me, he, ve, be, Ce;
-      return (r = l.config) != null && r.open ? (O(), J("div", {
+      var r, v, f, i, b, m, M, s, A, S, F, j, q, X, Z, I, N, ee, ae, le, ne, te, oe, re, ce, de, ie, ge, ue, fe, se, me, he, ve, be, Ce;
+      return (r = l.config) != null && r.open ? (O(), G("div", {
         key: 0,
-        class: q(["__modal-wrapper", D.value.mainModalWrapperClass])
+        class: U(["__modal-wrapper", D.value.mainModalWrapperClass])
       }, [
         Y("div", {
-          class: q(["__modal-backdrop", (v = l.config) != null && v.blur ? "__modal-backdrop--blur" : ""]),
+          class: U(["__modal-backdrop", (v = l.config) != null && v.blur ? "__modal-backdrop--blur" : ""]),
           onClick: T
         }, null, 2),
-        w.value ? (O(), J("div", {
+        w.value ? (O(), G("div", {
           key: 0,
           ref: "modalElement",
-          class: q([D.value.mainModalClass, (u = l.config) != null && u.background ? `bg-${(i = l.config) == null ? void 0 : i.background}` : "__modal-content", S.value]),
+          class: U([D.value.mainModalClass, (f = l.config) != null && f.background ? `bg-${(i = l.config) == null ? void 0 : i.background}` : "__modal-content", x.value]),
           onPointerdown: t[0] || (t[0] = //@ts-ignore
           (...Re) => C(_) && C(_)(...Re)),
           style: ye({
             width: L.value,
             maxHeight: B.value,
-            borderRadius: `${((b = l.config) == null ? void 0 : b.type) !== "side" && ((m = l.config) == null ? void 0 : m.type) !== "panel" && ((M = l.config) == null ? void 0 : M.type) !== "draggable" ? ((f = l.config) == null ? void 0 : f.corner) ?? "0.75rem" : "0"}`,
+            borderRadius: `${((b = l.config) == null ? void 0 : b.type) !== "side" && ((m = l.config) == null ? void 0 : m.type) !== "panel" && ((M = l.config) == null ? void 0 : M.type) !== "draggable" ? ((s = l.config) == null ? void 0 : s.corner) ?? "0.75rem" : "0"}`,
             marginTop: `${(A = l.config) != null && A.margin && l.config.type == "side" ? `${l.config.margin}px` : "0"}`,
-            transform: `translateY(${C(g)}px)`
+            transform: `translateY(${C(u)}px)`
           })
         }, [
           Y("div", Ve, [
             Y("div", {
-              class: q(["__modal-drag-handle", { __hidden: ((x = (F = l.config) == null ? void 0 : F.draggableConfig) == null ? void 0 : x.hideHandle) || ((U = l.config) == null ? void 0 : U.type) !== "draggable" }]),
+              class: U(["__modal-drag-handle", { __hidden: ((F = (S = l.config) == null ? void 0 : S.draggableConfig) == null ? void 0 : F.hideHandle) || ((j = l.config) == null ? void 0 : j.type) !== "draggable" }]),
               style: ye({
-                "--modal-draggable-handle-color": (p = (Z = (j = l.config) == null ? void 0 : j.draggableConfig) == null ? void 0 : Z.handle) == null ? void 0 : p.color,
+                "--modal-draggable-handle-color": (Z = (X = (q = l.config) == null ? void 0 : q.draggableConfig) == null ? void 0 : X.handle) == null ? void 0 : Z.color,
                 "--modal-draggable-handle-hover-color": (ee = (N = (I = l.config) == null ? void 0 : I.draggableConfig) == null ? void 0 : N.handle) == null ? void 0 : ee.hoverColor,
                 "--modal-draggable-handle-active-color": (ne = (le = (ae = l.config) == null ? void 0 : ae.draggableConfig) == null ? void 0 : le.handle) == null ? void 0 : ne.activeColor,
-                "--modal-draggable-handle-height": ((re = (ce = (te = l.config) == null ? void 0 : te.draggableConfig) == null ? void 0 : ce.handle) == null ? void 0 : re.height) || "5px",
-                "--modal-draggable-handle-width": ((ie = (de = (oe = l.config) == null ? void 0 : oe.draggableConfig) == null ? void 0 : de.handle) == null ? void 0 : ie.width) || "45px",
+                "--modal-draggable-handle-height": ((re = (oe = (te = l.config) == null ? void 0 : te.draggableConfig) == null ? void 0 : oe.handle) == null ? void 0 : re.height) || "5px",
+                "--modal-draggable-handle-width": ((ie = (de = (ce = l.config) == null ? void 0 : ce.draggableConfig) == null ? void 0 : de.handle) == null ? void 0 : ie.width) || "45px",
                 "--modal-draggable-handle-radius": ((fe = (ue = (ge = l.config) == null ? void 0 : ge.draggableConfig) == null ? void 0 : ue.handle) == null ? void 0 : fe.radius) || "4px",
                 "--modal-draggable-handle-margin-top": ((he = (me = (se = l.config) == null ? void 0 : se.draggableConfig) == null ? void 0 : me.handle) == null ? void 0 : he.marginTop) || "10px",
                 "--modal-draggable-handle-margin-bottom": ((Ce = (be = (ve = l.config) == null ? void 0 : ve.draggableConfig) == null ? void 0 : be.handle) == null ? void 0 : Ce.marginBottom) || "10px"
@@ -164,10 +164,10 @@ const Se = {
     };
   }
 }), Oe = h(!1), R = h([]), z = h([]), Ye = h(""), d = h([]), V = h([]), W = h([]), Je = (l, e) => new Promise(
-  (s) => {
-    var o, g, _, P, $, c, T, L, B, E, S, D, w, H, k, n, t, r;
+  (g) => {
+    var c, u, _, P, $, o, T, L, B, k, x, D, w, H, E, n, t, r;
     Oe.value = !0;
-    const a = Le(Be(l));
+    const a = Be(De(l));
     R.value.length > 0 ? R.value.push(a) : R.value = [a], Ye.value = (e == null ? void 0 : e.title) || "";
     const y = {
       width: (e == null ? void 0 : e.config.width) || 450,
@@ -184,16 +184,16 @@ const Se = {
       height: (e == null ? void 0 : e.config.height) || 0,
       mobileType: (e == null ? void 0 : e.config.mobileType) || "modal",
       draggableConfig: {
-        initialPosition: ((o = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : o.initialPosition) || "half",
-        hideHandle: ((g = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : g.hideHandle) || !1,
+        initialPosition: ((c = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : c.initialPosition) || "half",
+        hideHandle: ((u = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : u.hideHandle) || !1,
         handle: {
           color: ((P = (_ = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : _.handle) == null ? void 0 : P.color) || "#ccc",
-          height: ((c = ($ = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : $.handle) == null ? void 0 : c.height) || "5px",
+          height: ((o = ($ = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : $.handle) == null ? void 0 : o.height) || "5px",
           width: ((L = (T = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : T.handle) == null ? void 0 : L.width) || "45px",
-          radius: ((E = (B = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : B.handle) == null ? void 0 : E.radius) || "4px",
-          marginTop: ((D = (S = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : S.handle) == null ? void 0 : D.marginTop) || "10px",
+          radius: ((k = (B = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : B.handle) == null ? void 0 : k.radius) || "4px",
+          marginTop: ((D = (x = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : x.handle) == null ? void 0 : D.marginTop) || "10px",
           marginBottom: ((H = (w = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : w.handle) == null ? void 0 : H.marginBottom) || "10px",
-          hoverColor: ((n = (k = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : k.handle) == null ? void 0 : n.hoverColor) || "#999",
+          hoverColor: ((n = (E = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : E.handle) == null ? void 0 : n.hoverColor) || "#999",
           activeColor: ((r = (t = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : t.handle) == null ? void 0 : r.activeColor) || "#666"
         }
       }
@@ -201,7 +201,7 @@ const Se = {
     console.log("configToBeUsed in useModal:", y), d.value.push(y), V.value.push({
       ...e == null ? void 0 : e.props,
       onClose: (v) => {
-        s(v), X(
+        g(v), Q(
           v,
           d.value.length - 1
         );
@@ -209,58 +209,58 @@ const Se = {
     }), W.value.push((e == null ? void 0 : e.slots) || {}), e != null && e.config.onClosed ? z.value.push(e.config.onClosed) : z.value.push(() => {
     });
   }
-), X = (l, e) => (d.value[e] ? d.value[e].anim = !1 : d.value[d.value.length - 1].anim = !1, setTimeout(() => {
+), Q = (l, e) => (d.value[e] ? d.value[e].anim = !1 : d.value[d.value.length - 1].anim = !1, setTimeout(() => {
   if (e === d.value.length - 1) {
-    const s = d.value[d.value.length - 1];
-    s ? (s.open = !1, R.value.pop(), d.value.pop(), V.value.pop(), W.value.pop()) : (d.value = [], R.value = [], V.value = [], W.value = []);
+    const g = d.value[d.value.length - 1];
+    g ? (g.open = !1, R.value.pop(), d.value.pop(), V.value.pop(), W.value.pop()) : (d.value = [], R.value = [], V.value = [], W.value = []);
   } else
     d.value[e] && (d.value[e].open = !1, R.value.splice(e, 1), d.value.splice(e, 1), V.value.splice(e, 1), W.value.splice(e, 1));
   try {
     z.value[e] && typeof z.value[e] == "function" && (z.value[e](l), z.value.splice(e, 1));
-  } catch (s) {
-    throw console.log(s), new Error("Error in your onClosed function");
+  } catch (g) {
+    throw console.log(g), new Error("Error in your onClosed function");
   }
 }, 500), l), Ue = (l) => {
   setTimeout(() => (Oe.value = !1, R.value = [], Ye.value = "", d.value = [], V.value = [], W.value = [], l), 300);
-}, qe = ["onClick"], je = /* @__PURE__ */ $e({
+}, qe = ["onClick"], Ke = /* @__PURE__ */ Le({
   __name: "modalRoot",
   setup(l) {
-    const e = (s, a) => {
-      X(s, a);
+    const e = (g, a) => {
+      Q(g, a);
     };
-    return (s, a) => (O(), J("div", null, [
-      (O(), G(Ae, { to: "body" }, [
-        (O(!0), J(Fe, null, Me(C(R), (y, o) => (O(), G(De, {
-          onClose: (g) => e(g, o),
-          key: o,
-          config: C(d)[o],
-          "modal-key-index": o
+    return (g, a) => (O(), G("div", null, [
+      (O(), p(Ae, { to: "body" }, [
+        (O(!0), G(Se, null, Me(C(R), (y, c) => (O(), p(je, {
+          onClose: (u) => e(u, c),
+          key: c,
+          config: C(d)[c],
+          "modal-key-index": c
         }, Te({
-          default: Q(() => [
-            (O(), G(Ee(y), ke({
+          default: J(() => [
+            (O(), p(ke(y), Ee({
               data: C(d),
-              onClose: (g) => C(X)(g, o)
-            }, { ref_for: !0 }, C(V)[o], { onCloseAll: C(Ue) }), Te({ _: 2 }, [
-              Me(C(W)[o], (g, _) => ({
+              onClose: (u) => C(Q)(u, c)
+            }, { ref_for: !0 }, C(V)[c], { onCloseAll: C(Ue) }), Te({ _: 2 }, [
+              Me(C(W)[c], (u, _) => ({
                 name: _,
-                fn: Q(() => [
-                  (O(), G(Ee(Le(Be(g.component))), ke({ ref_for: !0 }, g.props), null, 16))
+                fn: J(() => [
+                  (O(), p(ke(Be(De(u.component))), Ee({ ref_for: !0 }, u.props), null, 16))
                 ])
               }))
             ]), 1040, ["data", "onClose", "onCloseAll"]))
           ]),
           _: 2
         }, [
-          C(d)[o].title ? {
+          C(d)[c].title ? {
             name: "header",
-            fn: Q(() => [
+            fn: J(() => [
               Y("h3", {
-                class: q(["__modal-header__title", C(d)[o].type == "modal" ? "__modal-header__title--standard" : "__modal-header__title--side"])
-              }, xe(C(d)[o].title), 3),
+                class: U(["__modal-header__title", C(d)[c].type == "modal" ? "__modal-header__title--standard" : "__modal-header__title--side"])
+              }, Fe(C(d)[c].title), 3),
               Y("button", {
                 type: "button",
                 class: "__modal-header__close-btn",
-                onClick: (g) => e(g, o)
+                onClick: (u) => e(u, c)
               }, [...a[0] || (a[0] = [
                 Y("span", null, "×", -1)
               ])], 8, qe)
@@ -271,21 +271,26 @@ const Se = {
       ]))
     ]));
   }
-}), Ke = {
+}), Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ModalRoot: Ke
+}, Symbol.toStringTag, { value: "Module" })), pe = {
   install(l, e) {
-    console.log("Installing VueModaller plugin with options:", e), l.component("Modal", De), l.component("ModalRoot", je);
+    console.log("Installing VueModaller plugin with options:", e);
+    for (const g in Pe)
+      l.component(g, Pe[g]);
   }
 }, Qe = (l) => (e) => {
-  Ke.install(e, l);
+  pe.install(e, l);
 };
 export {
-  je as ModalRoot,
-  Ke as VueModaller,
+  Ke as ModalRoot,
+  pe as VueModaller,
   Ue as closeAllModal,
-  X as closeModal,
+  Q as closeModal,
   R as compRef,
   Qe as createPlugin,
-  Ke as default,
+  pe as default,
   Oe as modalOpen,
   d as modalOptions,
   V as modalProps,

package/dist/vue-modaller.umd.cjs

@@ -1 +1 @@
-(function(g,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(g=typeof globalThis<"u"?globalThis:g||self,l(g.VueModaller={},g.Vue))})(this,function(g,l){"use strict";const _e={initialPosition:"half",hideHandle:!1,handle:{color:"#ccc",height:"5px",width:"45px",hoverColor:"#999",activeColor:"#666"}},ye=(n=_e,e)=>{const h=l.ref(!1),a=l.ref(0),w=l.ref(!1),d=l.ref(!1);let s=0,y=0,P=!1,V=0,r={full:0,half:0,closed:0},E=0,L=0,$=0,T=0;const F=l.ref(null),D=()=>{V=window.innerHeight,r={full:0,half:V*.4,closed:V},a.value=r.closed,E=r.closed},v=(m,f=300)=>new Promise(_=>{if(d.value)return _();d.value=!0;const b=a.value,k=m-b,u=performance.now(),z=A=>{const H=A-u,p=Math.min(H/f,1),j=1-Math.pow(1-p,3);a.value=b+k*j,p<1?requestAnimationFrame(z):(d.value=!1,E=a.value,_())};requestAnimationFrame(z)}),Y=async()=>{await v(r[n.initialPosition],400)},B=async()=>{await v(r.closed,300),e&&setTimeout(()=>e(),50)},t=m=>{var _,b;if(d.value)return;w.value=!0,P=!0;const f=m;s=f instanceof PointerEvent?f.clientY:((b=(_=f.touches)==null?void 0:_[0])==null?void 0:b.clientY)||0,T=s,$=Date.now(),document.addEventListener("pointermove",o),document.addEventListener("pointerup",c),document.addEventListener("touchmove",o,{passive:!1}),document.addEventListener("touchend",c)},o=m=>{var A,H;if(!P||d.value)return;const f=m;y=f instanceof PointerEvent?f.clientY:((H=(A=f.touches)==null?void 0:A[0])==null?void 0:H.clientY)||0;const _=y-s,b=E+_,k=Date.now(),u=y-T,z=k-$;L=u/z,T=y,$=k,b<r.full?a.value=r.full:b>r.closed?a.value=r.closed:a.value=b},c=async()=>{w.value=!1,P=!1,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c);const m=a.value,f=Math.abs(m-r.full),_=Math.abs(m-r.half),b=Math.abs(m-r.closed),k=Math.min(f,_,b);let u=r.half;L>.5?E===r.full?u=r.half:u=r.closed:L<-.5||k===f?u=r.full:k===_?u=r.half:u=r.closed,u===r.closed?await B():await v(u,250)},C=()=>{B()};return l.onMounted(()=>{D()}),l.onUnmounted(()=>{document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c)}),{open:h,translateY:a,isDragging:w,isAnimating:d,panel:F,openPanel:Y,closePanel:B,startDrag:t,handleBackdropClick:C,initPositions:D,animateToPosition:v}},we={class:"__modal-body"},ve={class:"__modal-header"},G=l.defineComponent({__name:"modal",props:{config:Object,modalKeyIndex:Number},emits:["close"],setup(n,{emit:e}){var Y,B;const h=e,a=n,w=()=>{var t;((t=a.config)==null?void 0:t.type)==="draggable"?V():h("close")},{isDragging:d,translateY:s,startDrag:y,openPanel:P,closePanel:V,isAnimating:r}=ye((Y=a.config)==null?void 0:Y.draggableConfig,()=>{h("close")}),E=()=>{var t,o;(t=a.config)!=null&&t.closeable&&(console.log("Modal closed from outside",(o=a.config)==null?void 0:o.closeable),w())},L=l.computed(()=>{var t,o,c;return((t=a.config)==null?void 0:t.type)=="side"?"100%":(o=a.config)!=null&&o.width?`${(c=a.config)==null?void 0:c.width}px`:"480px"}),$=l.computed(()=>{var t,o,c,C;return(t=a.config)!=null&&t.height&&a.config.type!=="draggable"?typeof((o=a.config)==null?void 0:o.height)=="number"?`${(c=a.config)==null?void 0:c.height}px`:(C=a.config)==null?void 0:C.height:"100%"});let T=l.ref({modal:{cls:"is-modal",anim_in:"zoomIn",anim_out:"zoomOut",style:`padding: ${(B=a.config)==null?void 0:B.padding}px;`},panel:{cls:"is-panel",anim_in:"slideInBottom",anim_out:"slideOutBottom",style:"padding: 0"},draggable:{cls:"is-draggable",anim_in:"",anim_out:"",style:"padding: 0"},side:{cls:"is-side",anim_in:"slideInRight",anim_out:"slideOutRight",style:"padding: 0"}});const F=l.computed(()=>{var t,o,c;return(t=a.config)!=null&&t.anim?T.value[((o=a.config)==null?void 0:o.type)||"modal"].anim_in:T.value[((c=a.config)==null?void 0:c.type)||"modal"].anim_out}),D=l.computed(()=>{var c,C,m,f;let t="__modal-wrapper--centered",o="__modal-content __modal-content--standard";return((c=a.config)==null?void 0:c.type)=="modal"?(t="__modal-wrapper--centered",o="__modal-content __modal-content--standard"):((C=a.config)==null?void 0:C.type)=="side"?(t="__modal-wrapper--side",o="__modal-content __modal-content--side"):((m=a.config)==null?void 0:m.type)=="panel"?(t="__modal-wrapper--panel",o="__modal-content __modal-content--panel"):((f=a.config)==null?void 0:f.type)=="draggable"&&(t="__modal-wrapper--draggable",o=`__modal-content __modal-content--draggable ${d.value?"__modal-content--dragging":""} ${r.value?"__modal-content--animating":""}`),{mainModalWrapperClass:t,mainModalClass:o}}),v=l.ref(!1);return l.onMounted(()=>{setTimeout(()=>{var t;v.value=!0,((t=a.config)==null?void 0:t.type)==="draggable"&&(P(),console.log("opened draggable with animation"))},100)}),(t,o)=>{var c,C,m,f,_,b,k,u,z,A,H,p,j,X,Z,N,x,I,ee,le,ae,ne,te,oe,re,ce,de,ie,ge,fe,se,me,ue,he,be,Ce;return(c=n.config)!=null&&c.open?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["__modal-wrapper",D.value.mainModalWrapperClass])},[l.createElementVNode("div",{class:l.normalizeClass(["__modal-backdrop",(C=n.config)!=null&&C.blur?"__modal-backdrop--blur":""]),onClick:E},null,2),v.value?(l.openBlock(),l.createElementBlock("div",{key:0,ref:"modalElement",class:l.normalizeClass([D.value.mainModalClass,(m=n.config)!=null&&m.background?`bg-${(f=n.config)==null?void 0:f.background}`:"__modal-content",F.value]),onPointerdown:o[0]||(o[0]=(...Te)=>l.unref(y)&&l.unref(y)(...Te)),style:l.normalizeStyle({width:L.value,maxHeight:$.value,borderRadius:`${((_=n.config)==null?void 0:_.type)!=="side"&&((b=n.config)==null?void 0:b.type)!=="panel"&&((k=n.config)==null?void 0:k.type)!=="draggable"?((u=n.config)==null?void 0:u.corner)??"0.75rem":"0"}`,marginTop:`${(z=n.config)!=null&&z.margin&&n.config.type=="side"?`${n.config.margin}px`:"0"}`,transform:`translateY(${l.unref(s)}px)`})},[l.createElementVNode("div",we,[l.createElementVNode("div",{class:l.normalizeClass(["__modal-drag-handle",{__hidden:((H=(A=n.config)==null?void 0:A.draggableConfig)==null?void 0:H.hideHandle)||((p=n.config)==null?void 0:p.type)!=="draggable"}]),style:l.normalizeStyle({"--modal-draggable-handle-color":(Z=(X=(j=n.config)==null?void 0:j.draggableConfig)==null?void 0:X.handle)==null?void 0:Z.color,"--modal-draggable-handle-hover-color":(I=(x=(N=n.config)==null?void 0:N.draggableConfig)==null?void 0:x.handle)==null?void 0:I.hoverColor,"--modal-draggable-handle-active-color":(ae=(le=(ee=n.config)==null?void 0:ee.draggableConfig)==null?void 0:le.handle)==null?void 0:ae.activeColor,"--modal-draggable-handle-height":((oe=(te=(ne=n.config)==null?void 0:ne.draggableConfig)==null?void 0:te.handle)==null?void 0:oe.height)||"5px","--modal-draggable-handle-width":((de=(ce=(re=n.config)==null?void 0:re.draggableConfig)==null?void 0:ce.handle)==null?void 0:de.width)||"45px","--modal-draggable-handle-radius":((fe=(ge=(ie=n.config)==null?void 0:ie.draggableConfig)==null?void 0:ge.handle)==null?void 0:fe.radius)||"4px","--modal-draggable-handle-margin-top":((ue=(me=(se=n.config)==null?void 0:se.draggableConfig)==null?void 0:me.handle)==null?void 0:ue.marginTop)||"10px","--modal-draggable-handle-margin-bottom":((Ce=(be=(he=n.config)==null?void 0:he.draggableConfig)==null?void 0:be.handle)==null?void 0:Ce.marginBottom)||"10px"})},null,6),l.createElementVNode("div",ve,[l.renderSlot(t.$slots,"header")]),l.createElementVNode("div",null,[l.renderSlot(t.$slots,"default")])])],38)):l.createCommentVNode("",!0)],2)):l.createCommentVNode("",!0)}}}),q=l.ref(!1),M=l.ref([]),O=l.ref([]),U=l.ref(""),i=l.ref([]),R=l.ref([]),S=l.ref([]),ke=(n,e)=>new Promise(h=>{var d,s,y,P,V,r,E,L,$,T,F,D,v,Y,B,t,o,c;q.value=!0;const a=l.markRaw(l.toRaw(n));M.value.length>0?M.value.push(a):M.value=[a],U.value=(e==null?void 0:e.title)||"";const w={width:(e==null?void 0:e.config.width)||450,background:(e==null?void 0:e.config.background)||"white",padding:(e==null?void 0:e.config.padding)||"20px",closeable:(e==null?void 0:e.config.closeable)??!0,blur:(e==null?void 0:e.config.blur)??!0,corner:(e==null?void 0:e.config.corner)??"10px",type:(e==null?void 0:e.config.type)||"modal",open:!0,anim:!0,title:(e==null?void 0:e.config.title)||"",margin:(e==null?void 0:e.config.margin)||0,height:(e==null?void 0:e.config.height)||0,mobileType:(e==null?void 0:e.config.mobileType)||"modal",draggableConfig:{initialPosition:((d=e==null?void 0:e.config.draggableConfig)==null?void 0:d.initialPosition)||"half",hideHandle:((s=e==null?void 0:e.config.draggableConfig)==null?void 0:s.hideHandle)||!1,handle:{color:((P=(y=e==null?void 0:e.config.draggableConfig)==null?void 0:y.handle)==null?void 0:P.color)||"#ccc",height:((r=(V=e==null?void 0:e.config.draggableConfig)==null?void 0:V.handle)==null?void 0:r.height)||"5px",width:((L=(E=e==null?void 0:e.config.draggableConfig)==null?void 0:E.handle)==null?void 0:L.width)||"45px",radius:((T=($=e==null?void 0:e.config.draggableConfig)==null?void 0:$.handle)==null?void 0:T.radius)||"4px",marginTop:((D=(F=e==null?void 0:e.config.draggableConfig)==null?void 0:F.handle)==null?void 0:D.marginTop)||"10px",marginBottom:((Y=(v=e==null?void 0:e.config.draggableConfig)==null?void 0:v.handle)==null?void 0:Y.marginBottom)||"10px",hoverColor:((t=(B=e==null?void 0:e.config.draggableConfig)==null?void 0:B.handle)==null?void 0:t.hoverColor)||"#999",activeColor:((c=(o=e==null?void 0:e.config.draggableConfig)==null?void 0:o.handle)==null?void 0:c.activeColor)||"#666"}}};console.log("configToBeUsed in useModal:",w),i.value.push(w),R.value.push({...e==null?void 0:e.props,onClose:C=>{h(C),W(C,i.value.length-1)}}),S.value.push((e==null?void 0:e.slots)||{}),e!=null&&e.config.onClosed?O.value.push(e.config.onClosed):O.value.push(()=>{})}),W=(n,e)=>(i.value[e]?i.value[e].anim=!1:i.value[i.value.length-1].anim=!1,setTimeout(()=>{if(e===i.value.length-1){const h=i.value[i.value.length-1];h?(h.open=!1,M.value.pop(),i.value.pop(),R.value.pop(),S.value.pop()):(i.value=[],M.value=[],R.value=[],S.value=[])}else i.value[e]&&(i.value[e].open=!1,M.value.splice(e,1),i.value.splice(e,1),R.value.splice(e,1),S.value.splice(e,1));try{O.value[e]&&typeof O.value[e]=="function"&&(O.value[e](n),O.value.splice(e,1))}catch(h){throw console.log(h),new Error("Error in your onClosed function")}},500),n),J=n=>{setTimeout(()=>(q.value=!1,M.value=[],U.value="",i.value=[],R.value=[],S.value=[],n),300)},Me=["onClick"],Q=l.defineComponent({__name:"modalRoot",setup(n){const e=(h,a)=>{W(h,a)};return(h,a)=>(l.openBlock(),l.createElementBlock("div",null,[(l.openBlock(),l.createBlock(l.Teleport,{to:"body"},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(l.unref(M),(w,d)=>(l.openBlock(),l.createBlock(G,{onClose:s=>e(s,d),key:d,config:l.unref(i)[d],"modal-key-index":d},l.createSlots({default:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(w),l.mergeProps({data:l.unref(i),onClose:s=>l.unref(W)(s,d)},{ref_for:!0},l.unref(R)[d],{onCloseAll:l.unref(J)}),l.createSlots({_:2},[l.renderList(l.unref(S)[d],(s,y)=>({name:y,fn:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(l.markRaw(l.toRaw(s.component))),l.mergeProps({ref_for:!0},s.props),null,16))])}))]),1040,["data","onClose","onCloseAll"]))]),_:2},[l.unref(i)[d].title?{name:"header",fn:l.withCtx(()=>[l.createElementVNode("h3",{class:l.normalizeClass(["__modal-header__title",l.unref(i)[d].type=="modal"?"__modal-header__title--standard":"__modal-header__title--side"])},l.toDisplayString(l.unref(i)[d].title),3),l.createElementVNode("button",{type:"button",class:"__modal-header__close-btn",onClick:s=>e(s,d)},[...a[0]||(a[0]=[l.createElementVNode("span",null,"×",-1)])],8,Me)]),key:"0"}:void 0]),1032,["onClose","config","modal-key-index"]))),128))]))]))}}),K={install(n,e){console.log("Installing VueModaller plugin with options:",e),n.component("Modal",G),n.component("ModalRoot",Q)}},Ee=n=>e=>{K.install(e,n)};g.ModalRoot=Q,g.VueModaller=K,g.closeAllModal=J,g.closeModal=W,g.compRef=M,g.createPlugin=Ee,g.default=K,g.modalOpen=q,g.modalOptions=i,g.modalProps=R,g.modalSlots=S,g.modalTitle=U,g.onClosedFunctions=O,g.useModal=ke,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(g,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(g=typeof globalThis<"u"?globalThis:g||self,l(g.VueModaller={},g.Vue))})(this,function(g,l){"use strict";const _e={initialPosition:"half",hideHandle:!1,handle:{color:"#ccc",height:"5px",width:"45px",hoverColor:"#999",activeColor:"#666"}},ye=(n=_e,e)=>{const s=l.ref(!1),a=l.ref(0),w=l.ref(!1),d=l.ref(!1);let m=0,y=0,P=!1,O=0,r={full:0,half:0,closed:0},E=0,V=0,L=0,T=0;const H=l.ref(null),$=()=>{O=window.innerHeight,r={full:0,half:O*.4,closed:O},a.value=r.closed,E=r.closed},v=(u,f=300)=>new Promise(_=>{if(d.value)return _();d.value=!0;const b=a.value,k=u-b,h=performance.now(),Y=p=>{const A=p-h,F=Math.min(A/f,1),W=1-Math.pow(1-F,3);a.value=b+k*W,F<1?requestAnimationFrame(Y):(d.value=!1,E=a.value,_())};requestAnimationFrame(Y)}),z=async()=>{await v(r[n.initialPosition],400)},B=async()=>{await v(r.closed,300),e&&setTimeout(()=>e(),50)},t=u=>{var _,b;if(d.value)return;w.value=!0,P=!0;const f=u;m=f instanceof PointerEvent?f.clientY:((b=(_=f.touches)==null?void 0:_[0])==null?void 0:b.clientY)||0,T=m,L=Date.now(),document.addEventListener("pointermove",o),document.addEventListener("pointerup",c),document.addEventListener("touchmove",o,{passive:!1}),document.addEventListener("touchend",c)},o=u=>{var p,A;if(!P||d.value)return;const f=u;y=f instanceof PointerEvent?f.clientY:((A=(p=f.touches)==null?void 0:p[0])==null?void 0:A.clientY)||0;const _=y-m,b=E+_,k=Date.now(),h=y-T,Y=k-L;V=h/Y,T=y,L=k,b<r.full?a.value=r.full:b>r.closed?a.value=r.closed:a.value=b},c=async()=>{w.value=!1,P=!1,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c);const u=a.value,f=Math.abs(u-r.full),_=Math.abs(u-r.half),b=Math.abs(u-r.closed),k=Math.min(f,_,b);let h=r.half;V>.5?E===r.full?h=r.half:h=r.closed:V<-.5||k===f?h=r.full:k===_?h=r.half:h=r.closed,h===r.closed?await B():await v(h,250)},C=()=>{B()};return l.onMounted(()=>{$()}),l.onUnmounted(()=>{document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c)}),{open:s,translateY:a,isDragging:w,isAnimating:d,panel:H,openPanel:z,closePanel:B,startDrag:t,handleBackdropClick:C,initPositions:$,animateToPosition:v}},we={class:"__modal-body"},ve={class:"__modal-header"},ke=l.defineComponent({__name:"modal",props:{config:Object,modalKeyIndex:Number},emits:["close"],setup(n,{emit:e}){var z,B;const s=e,a=n,w=()=>{var t;((t=a.config)==null?void 0:t.type)==="draggable"?O():s("close")},{isDragging:d,translateY:m,startDrag:y,openPanel:P,closePanel:O,isAnimating:r}=ye((z=a.config)==null?void 0:z.draggableConfig,()=>{s("close")}),E=()=>{var t,o;(t=a.config)!=null&&t.closeable&&(console.log("Modal closed from outside",(o=a.config)==null?void 0:o.closeable),w())},V=l.computed(()=>{var t,o,c;return((t=a.config)==null?void 0:t.type)=="side"?"100%":(o=a.config)!=null&&o.width?`${(c=a.config)==null?void 0:c.width}px`:"480px"}),L=l.computed(()=>{var t,o,c,C;return(t=a.config)!=null&&t.height&&a.config.type!=="draggable"?typeof((o=a.config)==null?void 0:o.height)=="number"?`${(c=a.config)==null?void 0:c.height}px`:(C=a.config)==null?void 0:C.height:"100%"});let T=l.ref({modal:{cls:"is-modal",anim_in:"zoomIn",anim_out:"zoomOut",style:`padding: ${(B=a.config)==null?void 0:B.padding}px;`},panel:{cls:"is-panel",anim_in:"slideInBottom",anim_out:"slideOutBottom",style:"padding: 0"},draggable:{cls:"is-draggable",anim_in:"",anim_out:"",style:"padding: 0"},side:{cls:"is-side",anim_in:"slideInRight",anim_out:"slideOutRight",style:"padding: 0"}});const H=l.computed(()=>{var t,o,c;return(t=a.config)!=null&&t.anim?T.value[((o=a.config)==null?void 0:o.type)||"modal"].anim_in:T.value[((c=a.config)==null?void 0:c.type)||"modal"].anim_out}),$=l.computed(()=>{var c,C,u,f;let t="__modal-wrapper--centered",o="__modal-content __modal-content--standard";return((c=a.config)==null?void 0:c.type)=="modal"?(t="__modal-wrapper--centered",o="__modal-content __modal-content--standard"):((C=a.config)==null?void 0:C.type)=="side"?(t="__modal-wrapper--side",o="__modal-content __modal-content--side"):((u=a.config)==null?void 0:u.type)=="panel"?(t="__modal-wrapper--panel",o="__modal-content __modal-content--panel"):((f=a.config)==null?void 0:f.type)=="draggable"&&(t="__modal-wrapper--draggable",o=`__modal-content __modal-content--draggable ${d.value?"__modal-content--dragging":""} ${r.value?"__modal-content--animating":""}`),{mainModalWrapperClass:t,mainModalClass:o}}),v=l.ref(!1);return l.onMounted(()=>{setTimeout(()=>{var t;v.value=!0,((t=a.config)==null?void 0:t.type)==="draggable"&&(P(),console.log("opened draggable with animation"))},100)}),(t,o)=>{var c,C,u,f,_,b,k,h,Y,p,A,F,W,X,Z,N,x,I,ee,le,ae,ne,te,oe,re,ce,de,ie,ge,fe,se,me,ue,he,be,Ce;return(c=n.config)!=null&&c.open?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["__modal-wrapper",$.value.mainModalWrapperClass])},[l.createElementVNode("div",{class:l.normalizeClass(["__modal-backdrop",(C=n.config)!=null&&C.blur?"__modal-backdrop--blur":""]),onClick:E},null,2),v.value?(l.openBlock(),l.createElementBlock("div",{key:0,ref:"modalElement",class:l.normalizeClass([$.value.mainModalClass,(u=n.config)!=null&&u.background?`bg-${(f=n.config)==null?void 0:f.background}`:"__modal-content",H.value]),onPointerdown:o[0]||(o[0]=(...Be)=>l.unref(y)&&l.unref(y)(...Be)),style:l.normalizeStyle({width:V.value,maxHeight:L.value,borderRadius:`${((_=n.config)==null?void 0:_.type)!=="side"&&((b=n.config)==null?void 0:b.type)!=="panel"&&((k=n.config)==null?void 0:k.type)!=="draggable"?((h=n.config)==null?void 0:h.corner)??"0.75rem":"0"}`,marginTop:`${(Y=n.config)!=null&&Y.margin&&n.config.type=="side"?`${n.config.margin}px`:"0"}`,transform:`translateY(${l.unref(m)}px)`})},[l.createElementVNode("div",we,[l.createElementVNode("div",{class:l.normalizeClass(["__modal-drag-handle",{__hidden:((A=(p=n.config)==null?void 0:p.draggableConfig)==null?void 0:A.hideHandle)||((F=n.config)==null?void 0:F.type)!=="draggable"}]),style:l.normalizeStyle({"--modal-draggable-handle-color":(Z=(X=(W=n.config)==null?void 0:W.draggableConfig)==null?void 0:X.handle)==null?void 0:Z.color,"--modal-draggable-handle-hover-color":(I=(x=(N=n.config)==null?void 0:N.draggableConfig)==null?void 0:x.handle)==null?void 0:I.hoverColor,"--modal-draggable-handle-active-color":(ae=(le=(ee=n.config)==null?void 0:ee.draggableConfig)==null?void 0:le.handle)==null?void 0:ae.activeColor,"--modal-draggable-handle-height":((oe=(te=(ne=n.config)==null?void 0:ne.draggableConfig)==null?void 0:te.handle)==null?void 0:oe.height)||"5px","--modal-draggable-handle-width":((de=(ce=(re=n.config)==null?void 0:re.draggableConfig)==null?void 0:ce.handle)==null?void 0:de.width)||"45px","--modal-draggable-handle-radius":((fe=(ge=(ie=n.config)==null?void 0:ie.draggableConfig)==null?void 0:ge.handle)==null?void 0:fe.radius)||"4px","--modal-draggable-handle-margin-top":((ue=(me=(se=n.config)==null?void 0:se.draggableConfig)==null?void 0:me.handle)==null?void 0:ue.marginTop)||"10px","--modal-draggable-handle-margin-bottom":((Ce=(be=(he=n.config)==null?void 0:he.draggableConfig)==null?void 0:be.handle)==null?void 0:Ce.marginBottom)||"10px"})},null,6),l.createElementVNode("div",ve,[l.renderSlot(t.$slots,"header")]),l.createElementVNode("div",null,[l.renderSlot(t.$slots,"default")])])],38)):l.createCommentVNode("",!0)],2)):l.createCommentVNode("",!0)}}}),q=l.ref(!1),M=l.ref([]),D=l.ref([]),U=l.ref(""),i=l.ref([]),S=l.ref([]),R=l.ref([]),Me=(n,e)=>new Promise(s=>{var d,m,y,P,O,r,E,V,L,T,H,$,v,z,B,t,o,c;q.value=!0;const a=l.markRaw(l.toRaw(n));M.value.length>0?M.value.push(a):M.value=[a],U.value=(e==null?void 0:e.title)||"";const w={width:(e==null?void 0:e.config.width)||450,background:(e==null?void 0:e.config.background)||"white",padding:(e==null?void 0:e.config.padding)||"20px",closeable:(e==null?void 0:e.config.closeable)??!0,blur:(e==null?void 0:e.config.blur)??!0,corner:(e==null?void 0:e.config.corner)??"10px",type:(e==null?void 0:e.config.type)||"modal",open:!0,anim:!0,title:(e==null?void 0:e.config.title)||"",margin:(e==null?void 0:e.config.margin)||0,height:(e==null?void 0:e.config.height)||0,mobileType:(e==null?void 0:e.config.mobileType)||"modal",draggableConfig:{initialPosition:((d=e==null?void 0:e.config.draggableConfig)==null?void 0:d.initialPosition)||"half",hideHandle:((m=e==null?void 0:e.config.draggableConfig)==null?void 0:m.hideHandle)||!1,handle:{color:((P=(y=e==null?void 0:e.config.draggableConfig)==null?void 0:y.handle)==null?void 0:P.color)||"#ccc",height:((r=(O=e==null?void 0:e.config.draggableConfig)==null?void 0:O.handle)==null?void 0:r.height)||"5px",width:((V=(E=e==null?void 0:e.config.draggableConfig)==null?void 0:E.handle)==null?void 0:V.width)||"45px",radius:((T=(L=e==null?void 0:e.config.draggableConfig)==null?void 0:L.handle)==null?void 0:T.radius)||"4px",marginTop:(($=(H=e==null?void 0:e.config.draggableConfig)==null?void 0:H.handle)==null?void 0:$.marginTop)||"10px",marginBottom:((z=(v=e==null?void 0:e.config.draggableConfig)==null?void 0:v.handle)==null?void 0:z.marginBottom)||"10px",hoverColor:((t=(B=e==null?void 0:e.config.draggableConfig)==null?void 0:B.handle)==null?void 0:t.hoverColor)||"#999",activeColor:((c=(o=e==null?void 0:e.config.draggableConfig)==null?void 0:o.handle)==null?void 0:c.activeColor)||"#666"}}};console.log("configToBeUsed in useModal:",w),i.value.push(w),S.value.push({...e==null?void 0:e.props,onClose:C=>{s(C),j(C,i.value.length-1)}}),R.value.push((e==null?void 0:e.slots)||{}),e!=null&&e.config.onClosed?D.value.push(e.config.onClosed):D.value.push(()=>{})}),j=(n,e)=>(i.value[e]?i.value[e].anim=!1:i.value[i.value.length-1].anim=!1,setTimeout(()=>{if(e===i.value.length-1){const s=i.value[i.value.length-1];s?(s.open=!1,M.value.pop(),i.value.pop(),S.value.pop(),R.value.pop()):(i.value=[],M.value=[],S.value=[],R.value=[])}else i.value[e]&&(i.value[e].open=!1,M.value.splice(e,1),i.value.splice(e,1),S.value.splice(e,1),R.value.splice(e,1));try{D.value[e]&&typeof D.value[e]=="function"&&(D.value[e](n),D.value.splice(e,1))}catch(s){throw console.log(s),new Error("Error in your onClosed function")}},500),n),G=n=>{setTimeout(()=>(q.value=!1,M.value=[],U.value="",i.value=[],S.value=[],R.value=[],n),300)},Ee=["onClick"],J=l.defineComponent({__name:"modalRoot",setup(n){const e=(s,a)=>{j(s,a)};return(s,a)=>(l.openBlock(),l.createElementBlock("div",null,[(l.openBlock(),l.createBlock(l.Teleport,{to:"body"},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(l.unref(M),(w,d)=>(l.openBlock(),l.createBlock(ke,{onClose:m=>e(m,d),key:d,config:l.unref(i)[d],"modal-key-index":d},l.createSlots({default:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(w),l.mergeProps({data:l.unref(i),onClose:m=>l.unref(j)(m,d)},{ref_for:!0},l.unref(S)[d],{onCloseAll:l.unref(G)}),l.createSlots({_:2},[l.renderList(l.unref(R)[d],(m,y)=>({name:y,fn:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(l.markRaw(l.toRaw(m.component))),l.mergeProps({ref_for:!0},m.props),null,16))])}))]),1040,["data","onClose","onCloseAll"]))]),_:2},[l.unref(i)[d].title?{name:"header",fn:l.withCtx(()=>[l.createElementVNode("h3",{class:l.normalizeClass(["__modal-header__title",l.unref(i)[d].type=="modal"?"__modal-header__title--standard":"__modal-header__title--side"])},l.toDisplayString(l.unref(i)[d].title),3),l.createElementVNode("button",{type:"button",class:"__modal-header__close-btn",onClick:m=>e(m,d)},[...a[0]||(a[0]=[l.createElementVNode("span",null,"×",-1)])],8,Ee)]),key:"0"}:void 0]),1032,["onClose","config","modal-key-index"]))),128))]))]))}}),Q=Object.freeze(Object.defineProperty({__proto__:null,ModalRoot:J},Symbol.toStringTag,{value:"Module"})),K={install(n,e){console.log("Installing VueModaller plugin with options:",e);for(const s in Q)n.component(s,Q[s])}},Te=n=>e=>{K.install(e,n)};g.ModalRoot=J,g.VueModaller=K,g.closeAllModal=G,g.closeModal=j,g.compRef=M,g.createPlugin=Te,g.default=K,g.modalOpen=q,g.modalOptions=i,g.modalProps=S,g.modalSlots=R,g.modalTitle=U,g.onClosedFunctions=D,g.useModal=Me,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-modaller",
   "author": "Classydev (https://github.com/classyrazy)",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
   "description": "A flexible and powerful modal system for Vue 3 applications with TypeScript support, featuring draggable modals, side panels, and smooth animations",
   "private": false,