vue-modaller 1.0.12 → 1.0.13

package/dist/vue-modaller.js

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

package/dist/vue-modaller.umd.cjs

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