vue-modaller 1.0.10 → 1.0.12

package/dist/style.css

@@ -1 +1 @@
-:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.35s;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.25s;animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-fill-mode:both}:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{display:flex;position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:grid;justify-content:flex-end}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow-y:auto;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%;overflow:hidden;display:flex;flex-direction:column}.__modal-content--side .__modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}@media (max-width: 900px){.__modal-content--side{max-width:30rem}}.__modal-wrapper--panel{display:flex;justify-content:center;align-items:flex-end;top:0;left:0}.__modal-content--panel{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0}.__modal-wrapper--draggable{display:flex;justify-content:center}.__modal-content--dragable.dragging{transition:none}.__modal-content--draggable{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0;touch-action:none;overflow:hidden}.__modal-content--draggable.__modal-content--dragging{transition:none}.__modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.__modal-header__title{color:var(--dark);font-weight:600}.__modal-header__title--standard{font-size:1.25rem;line-height:1.75rem}.__modal-header__title--side{font-size:1.5rem;line-height:2rem}.__modal-header__close-btn{cursor:pointer;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-gray);border-radius:9999px;background-color:transparent;font-size:1.25rem;color:var(--dark)}.__modal-header__close-btn:hover{background-color:#f3f4f6}.__modal-body{padding:var(--modal-padding)}@media (min-width: 768px){.__modal-body{padding:var(--modal-padding)}}.__modal-drag-handle{cursor:grab;background:var(--modal-draggable-handle-color);height:var(--modal-draggable-handle-height);width:var(--modal-draggable-handle-width);border-radius:var(--modal-draggable-handle-radius);margin-top:var(--modal-draggable-handle-margin-top);margin-bottom:var(--modal-draggable-handle-margin-bottom);margin-left:auto;margin-right:auto;transition:background-color .2s}.__modal-drag-handle:hover{background:var(--modal-draggable-handle-hover-color)}.__modal-drag-handle:active{cursor:grabbing;background:var(--modal-draggable-handle-active-color)}.__hidden{display:none}
+:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.35s;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.25s;animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-fill-mode:both}:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{display:flex;position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:grid;justify-content:flex-end}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%;overflow:hidden;display:flex;flex-direction:column}.__modal-content--side .__modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}@media (max-width: 900px){.__modal-content--side{max-width:30rem}}.__modal-wrapper--panel{display:flex;justify-content:center;align-items:flex-end;top:0;left:0}.__modal-content--panel{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0}.__modal-wrapper--draggable{display:flex;justify-content:center}.__modal-content--dragable.dragging{transition:none}.__modal-content--draggable{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0;touch-action:none;overflow:hidden}.__modal-content--draggable.__modal-content--dragging{transition:none}.__modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.__modal-header__title{color:var(--dark);font-weight:600}.__modal-header__title--standard{font-size:1.25rem;line-height:1.75rem}.__modal-header__title--side{font-size:1.5rem;line-height:2rem}.__modal-header__close-btn{cursor:pointer;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-gray);border-radius:9999px;background-color:transparent;font-size:1.25rem;color:var(--dark)}.__modal-header__close-btn:hover{background-color:#f3f4f6}.__modal-body{padding:var(--modal-padding);flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}@media (min-width: 768px){.__modal-body{padding:var(--modal-padding)}}.__modal-drag-handle{cursor:grab;background:var(--modal-draggable-handle-color);height:var(--modal-draggable-handle-height);width:var(--modal-draggable-handle-width);border-radius:var(--modal-draggable-handle-radius);margin-top:var(--modal-draggable-handle-margin-top);margin-bottom:var(--modal-draggable-handle-margin-bottom);margin-left:auto;margin-right:auto;transition:background-color .2s}.__modal-drag-handle:hover{background:var(--modal-draggable-handle-hover-color)}.__modal-drag-handle:active{cursor:grabbing;background:var(--modal-draggable-handle-active-color)}.__hidden{display:none}

package/dist/vue-modaller.js

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

package/dist/vue-modaller.umd.cjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-modaller",
   "author": "Classydev (https://github.com/classyrazy)",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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,