@edgar208/sileo-vue 1.2.1 → 1.2.2

package/dist/sileo-vue.js

@@ -1,11 +1,11 @@
-import { reactive as M, markRaw as B, defineComponent as X, ref as w, computed as x, onUnmounted as R, openBlock as c, createElementBlock as d, normalizeStyle as T, normalizeClass as z, createElementVNode as l, createBlock as I, resolveDynamicComponent as V, toDisplayString as k, createCommentVNode as b, withModifiers as D, Fragment as O, renderList as S, createVNode as W, TransitionGroup as F, withCtx as G, unref as U, createApp as q, h as H } from "vue";
-const p = M([]), C = M({
+import { reactive as X, markRaw as D, defineComponent as I, ref as x, computed as k, onUnmounted as N, openBlock as l, createElementBlock as d, normalizeStyle as L, normalizeClass as B, createElementVNode as s, createCommentVNode as h, createBlock as z, resolveDynamicComponent as R, toDisplayString as b, withModifiers as O, Fragment as M, renderList as S, createVNode as V, TransitionGroup as W, withCtx as Z, unref as F, createApp as G, h as U } from "vue";
+const y = X([]), C = X({
   position: "top-right",
   duration: 4e3,
   maxToasts: 5
-}), J = () => Math.random().toString(36).substring(2, 9);
-function j() {
-  const e = (t) => {
+}), q = () => Math.random().toString(36).substring(2, 9);
+function A() {
+  const t = (e) => {
     const o = {
       type: "default",
       duration: C.duration || 4e3,
@@ -13,161 +13,161 @@ function j() {
       showProgress: !0,
       closeOnClick: !0,
       swipeToDismiss: !0
-    }, i = typeof t == "string" ? { message: t } : t;
-    p.length >= (C.maxToasts || 5) && p.shift();
-    const n = J(), s = {
+    }, r = typeof e == "string" ? { message: e } : e;
+    y.length >= (C.maxToasts || 5) && y.shift();
+    const n = q(), i = {
       ...o,
-      ...i,
+      ...r,
       id: n,
       createdAt: Date.now()
     };
-    return s.icon && typeof s.icon != "string" && (s.icon = B(s.icon)), p.push(s), s.duration > 0 && setTimeout(() => {
-      f(n);
-    }, s.duration), n;
-  }, f = (t) => {
-    const o = p.findIndex((i) => i.id === t);
-    o !== -1 && p.splice(o, 1);
-  }, y = (t, o) => {
-    const i = p.findIndex((n) => n.id === t);
-    if (i !== -1) {
-      const n = { ...p[i], ...o };
-      typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon = B(o.icon)), p[i] = n;
+    return i.icon && typeof i.icon != "string" && (i.icon = D(i.icon)), y.push(i), i.duration > 0 && setTimeout(() => {
+      v(n);
+    }, i.duration), n;
+  }, v = (e) => {
+    const o = y.findIndex((r) => r.id === e);
+    o !== -1 && y.splice(o, 1);
+  }, f = (e, o) => {
+    const r = y.findIndex((n) => n.id === e);
+    if (r !== -1) {
+      const n = { ...y[r], ...o };
+      typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon = D(o.icon)), y[r] = n;
     }
-  }, m = Object.assign(e, {
-    success: (t) => e(typeof t == "string" ? { message: t, type: "success" } : { ...t, type: "success" }),
-    error: (t) => e(typeof t == "string" ? { message: t, type: "error" } : { ...t, type: "error" }),
-    warning: (t) => e(typeof t == "string" ? { message: t, type: "warning" } : { ...t, type: "warning" }),
-    info: (t) => e(typeof t == "string" ? { message: t, type: "info" } : { ...t, type: "info" }),
-    promise: async (t, o) => {
-      const i = e(typeof o.loading == "string" ? { message: o.loading, type: "default", duration: 0 } : { ...o.loading, type: "default", duration: 0 });
+  }, g = Object.assign(t, {
+    success: (e) => t(typeof e == "string" ? { message: e, type: "success" } : { ...e, type: "success" }),
+    error: (e) => t(typeof e == "string" ? { message: e, type: "error" } : { ...e, type: "error" }),
+    warning: (e) => t(typeof e == "string" ? { message: e, type: "warning" } : { ...e, type: "warning" }),
+    info: (e) => t(typeof e == "string" ? { message: e, type: "info" } : { ...e, type: "info" }),
+    promise: async (e, o) => {
+      const r = t(typeof o.loading == "string" ? { message: o.loading, type: "default", duration: 0 } : { ...o.loading, type: "default", duration: 0 });
       try {
-        const n = await t, s = typeof o.success == "function" ? o.success(n) : o.success, a = typeof s == "string" ? { message: s, type: "success" } : { ...s, type: "success" };
-        return y(i, { ...a, duration: a.duration || 4e3 }), setTimeout(() => f(i), a.duration || 4e3), n;
+        const n = await e, i = typeof o.success == "function" ? o.success(n) : o.success, c = typeof i == "string" ? { message: i, type: "success" } : { ...i, type: "success" };
+        return f(r, { ...c, duration: c.duration || 4e3 }), setTimeout(() => v(r), c.duration || 4e3), n;
       } catch (n) {
-        const s = typeof o.error == "function" ? o.error(n) : o.error, a = typeof s == "string" ? { message: s, type: "error" } : { ...s, type: "error" };
-        throw y(i, { ...a, duration: a.duration || 4e3 }), setTimeout(() => f(i), a.duration || 4e3), n;
+        const i = typeof o.error == "function" ? o.error(n) : o.error, c = typeof i == "string" ? { message: i, type: "error" } : { ...i, type: "error" };
+        throw f(r, { ...c, duration: c.duration || 4e3 }), setTimeout(() => v(r), c.duration || 4e3), n;
       }
     },
-    clear: () => p.length = 0,
-    config: (t) => Object.assign(C, t)
+    clear: () => y.length = 0,
+    config: (e) => Object.assign(C, e)
   });
   return {
-    toasts: p,
-    toast: m,
-    removeToast: f,
-    updateToast: y
+    toasts: y,
+    toast: g,
+    removeToast: v,
+    updateToast: f
   };
 }
-const L = j(), K = { class: "sileo-combined-shape" }, Q = {
-  class: "sileo-icon-wrapper",
-  style: { width: "18px", height: "18px", display: "flex", "align-items": "center", "justify-content": "center", "flex-shrink": "0" }
-}, Y = {
+const E = A(), H = { class: "sileo-combined-shape" }, J = { class: "sileo-header-pill" }, K = {
+  key: 0,
+  class: "sileo-sweep-left"
+}, Q = {
+  key: 1,
+  class: "sileo-sweep-right"
+}, Y = { class: "sileo-icon-wrapper" }, _ = {
   key: 1,
-  style: { "font-size": "16px", "line-height": "1" }
-}, Z = {
+  class: "sileo-emoji"
+}, tt = {
   key: 2,
-  style: { width: "18px", height: "18px", display: "flex", "align-items": "center", "justify-content": "center" }
-}, _ = {
+  class: "sileo-default-icon"
+}, et = {
   key: 0,
   class: "sileo-spin",
-  viewBox: "0 0 50 50",
-  style: { width: "18px !important", height: "18px !important" }
-}, tt = {
+  viewBox: "0 0 50 50"
+}, ot = {
   key: 1,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  style: { width: "18px !important", height: "18px !important" }
-}, et = {
+  class: "sileo-icon-circle bg-success"
+}, st = {
   key: 2,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  style: { width: "18px !important", height: "18px !important" }
-}, ot = {
-  key: 3,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  style: { width: "18px !important", height: "18px !important" }
+  class: "sileo-icon-circle bg-error"
 }, nt = {
-  key: 4,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  style: { width: "18px !important", height: "18px !important" }
-}, st = {
-  key: 0,
-  class: "sileo-title-text"
+  key: 3,
+  class: "sileo-icon-circle bg-warning"
 }, it = {
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "3",
-  style: { width: "12px", height: "12px" }
-}, rt = { class: "sileo-main-body" }, lt = { class: "sileo-body-content" }, at = { class: "sileo-message" }, ct = {
+  key: 4,
+  class: "sileo-icon-circle bg-info"
+}, at = { class: "sileo-main-body" }, rt = { class: "sileo-body-content" }, lt = { class: "sileo-message" }, ct = {
   key: 0,
   class: "sileo-timer"
-}, ut = /* @__PURE__ */ X({
+}, dt = /* @__PURE__ */ I({
   __name: "Toast",
   props: {
     toast: {}
   },
   emits: ["close"],
-  setup(e, { emit: f }) {
-    const y = e, m = f, t = w(null), o = w(!1), i = w(0), n = w(0), s = x(() => y.toast.icon), a = x(() => y.toast.duration === 0 && (y.toast.type === "default" || !y.toast.type)), g = x(() => {
-      const u = y.toast.position || "top-right";
+  setup(t, { emit: v }) {
+    const f = t, g = v, e = x(null), o = x(!1), r = x(0), n = x(0), i = k(() => f.toast.icon), c = k(() => f.toast.duration === 0 && (f.toast.type === "default" || !f.toast.type)), m = k(() => {
+      const u = f.toast.position || "top-right";
       return u.includes("center") ? "center" : u.includes("left") ? "left" : "right";
-    }), A = x(() => {
-      const u = n.value, r = Math.max(0, 1 - Math.abs(u) / 300), E = o.value ? 0.95 : 1, N = g.value === "center" ? "center" : g.value === "left" ? "flex-start" : "flex-end";
+    }), P = k(() => {
+      const u = n.value, a = Math.max(0, 1 - Math.abs(u) / 300), T = o.value ? 0.95 : 1, j = m.value === "center" ? "center" : m.value === "left" ? "flex-start" : "flex-end";
       return {
-        transform: `translateX(${u}px) scale(${E})`,
-        opacity: r,
+        transform: `translateX(${u}px) scale(${T})`,
+        opacity: a,
         transition: o.value ? "none" : "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
         display: "flex",
         flexDirection: "column",
-        alignItems: N,
+        alignItems: j,
         width: "100%",
         pointerEvents: "auto",
         marginBottom: "16px"
       };
-    }), P = x(() => ({
-      alignSelf: g.value === "center" ? "center" : g.value === "left" ? "flex-start" : "flex-end"
-    })), $ = (u) => {
-      y.toast.swipeToDismiss && (o.value = !0, i.value = "touches" in u ? u.touches[0].clientX : u.clientX, "touches" in u ? (window.addEventListener("touchmove", v), window.addEventListener("touchend", h)) : (window.addEventListener("mousemove", v), window.addEventListener("mouseup", h)));
-    }, v = (u) => {
+    }), $ = (u) => {
+      f.toast.swipeToDismiss && (o.value = !0, r.value = "touches" in u ? u.touches[0].clientX : u.clientX, "touches" in u ? (window.addEventListener("touchmove", p), window.addEventListener("touchend", w)) : (window.addEventListener("mousemove", p), window.addEventListener("mouseup", w)));
+    }, p = (u) => {
       if (!o.value) return;
-      const r = "touches" in u ? u.touches[0].clientX : u.clientX;
-      n.value = (r - i.value) * 0.8;
-    }, h = () => {
-      o.value && (o.value = !1, Math.abs(n.value) > 100 ? m("close") : n.value = 0, window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", v), window.removeEventListener("touchend", h));
+      const a = "touches" in u ? u.touches[0].clientX : u.clientX;
+      n.value = (a - r.value) * 0.8;
+    }, w = () => {
+      o.value && (o.value = !1, Math.abs(n.value) > 100 ? g("close") : n.value = 0, window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", w));
     };
-    return R(() => {
-      window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", v), window.removeEventListener("touchend", h);
-    }), (u, r) => (c(), d("div", {
+    return N(() => {
+      window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", w);
+    }), (u, a) => (l(), d("div", {
       ref_key: "toastRef",
-      ref: t,
-      class: z(["sileo-toast-outer", [`sileo-type-${e.toast.type}`, `sileo-align-${g.value}`, { "sileo-is-dragging": o.value }]]),
-      style: T(A.value),
+      ref: e,
+      class: B(["sileo-toast-outer", [`sileo-type-${t.toast.type || "default"}`, `sileo-align-${m.value}`, { "sileo-is-dragging": o.value }]]),
+      style: L(P.value),
       onMousedown: $,
       onTouchstart: $
     }, [
-      l("div", K, [
-        l("div", {
-          class: "sileo-header-pill",
-          style: T(P.value)
-        }, [
-          l("div", Q, [
-            typeof e.toast.icon != "string" && e.toast.icon ? (c(), I(V(s.value), {
+      s("div", H, [
+        s("div", J, [
+          m.value !== "left" ? (l(), d("div", K, [...a[2] || (a[2] = [
+            s("svg", {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              s("path", {
+                d: "M12 0 C 5.373 0 0 5.373 0 12 L 12 12 Z",
+                fill: "#1c1c1e"
+              })
+            ], -1)
+          ])])) : h("", !0),
+          m.value !== "right" ? (l(), d("div", Q, [...a[3] || (a[3] = [
+            s("svg", {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              s("path", {
+                d: "M0 0 C 6.627 0 12 5.373 12 12 L 0 12 Z",
+                fill: "#1c1c1e"
+              })
+            ], -1)
+          ])])) : h("", !0),
+          s("div", Y, [
+            typeof t.toast.icon != "string" && t.toast.icon ? (l(), z(R(i.value), {
               key: 0,
-              style: { width: "18px !important", height: "18px !important", display: "block" }
-            })) : typeof e.toast.icon == "string" ? (c(), d("span", Y, k(e.toast.icon), 1)) : (c(), d("div", Z, [
-              a.value ? (c(), d("svg", _, [...r[2] || (r[2] = [
-                l("circle", {
+              class: "sileo-custom-icon"
+            })) : typeof t.toast.icon == "string" ? (l(), d("span", _, b(t.toast.icon), 1)) : (l(), d("div", tt, [
+              c.value ? (l(), d("svg", et, [...a[4] || (a[4] = [
+                s("circle", {
                   cx: "25",
                   cy: "25",
                   r: "20",
@@ -175,140 +175,170 @@ const L = j(), K = { class: "sileo-combined-shape" }, Q = {
                   stroke: "currentColor",
                   "stroke-width": "5"
                 }, null, -1)
-              ])])) : e.toast.type === "success" ? (c(), d("svg", tt, [...r[3] || (r[3] = [
-                l("polyline", { points: "20 6 9 17 4 12" }, null, -1)
-              ])])) : e.toast.type === "error" ? (c(), d("svg", et, [...r[4] || (r[4] = [
-                l("line", {
-                  x1: "18",
-                  y1: "6",
-                  x2: "6",
-                  y2: "18"
-                }, null, -1),
-                l("line", {
-                  x1: "6",
-                  y1: "6",
-                  x2: "18",
-                  y2: "18"
-                }, null, -1)
-              ])])) : e.toast.type === "warning" ? (c(), d("svg", ot, [...r[5] || (r[5] = [
-                l("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, null, -1),
-                l("line", {
-                  x1: "12",
-                  y1: "9",
-                  x2: "12",
-                  y2: "13"
-                }, null, -1),
-                l("line", {
-                  x1: "12",
-                  y1: "17",
-                  x2: "12.01",
-                  y2: "17"
-                }, null, -1)
-              ])])) : (c(), d("svg", nt, [...r[6] || (r[6] = [
-                l("circle", {
-                  cx: "12",
-                  cy: "12",
-                  r: "10"
-                }, null, -1),
-                l("line", {
-                  x1: "12",
-                  y1: "16",
-                  x2: "12",
-                  y2: "12"
-                }, null, -1),
-                l("line", {
-                  x1: "12",
-                  y1: "8",
-                  x2: "12.01",
-                  y2: "8"
-                }, null, -1)
+              ])])) : t.toast.type === "success" ? (l(), d("div", ot, [...a[5] || (a[5] = [
+                s("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  class: "sileo-stroke-icon"
+                }, [
+                  s("polyline", { points: "20 6 9 17 4 12" })
+                ], -1)
+              ])])) : t.toast.type === "error" ? (l(), d("div", st, [...a[6] || (a[6] = [
+                s("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  class: "sileo-stroke-icon"
+                }, [
+                  s("line", {
+                    x1: "18",
+                    y1: "6",
+                    x2: "6",
+                    y2: "18"
+                  }),
+                  s("line", {
+                    x1: "6",
+                    y1: "6",
+                    x2: "18",
+                    y2: "18"
+                  })
+                ], -1)
+              ])])) : t.toast.type === "warning" ? (l(), d("div", nt, [...a[7] || (a[7] = [
+                s("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  class: "sileo-stroke-icon"
+                }, [
+                  s("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                  s("line", {
+                    x1: "12",
+                    y1: "9",
+                    x2: "12",
+                    y2: "13"
+                  }),
+                  s("line", {
+                    x1: "12",
+                    y1: "17",
+                    x2: "12.01",
+                    y2: "17"
+                  })
+                ], -1)
+              ])])) : (l(), d("div", it, [...a[8] || (a[8] = [
+                s("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  class: "sileo-stroke-icon"
+                }, [
+                  s("circle", {
+                    cx: "12",
+                    cy: "12",
+                    r: "10"
+                  }),
+                  s("line", {
+                    x1: "12",
+                    y1: "16",
+                    x2: "12",
+                    y2: "12"
+                  }),
+                  s("line", {
+                    x1: "12",
+                    y1: "8",
+                    x2: "12.01",
+                    y2: "8"
+                  })
+                ], -1)
               ])]))
             ]))
           ]),
-          e.toast.title ? (c(), d("span", st, k(e.toast.title), 1)) : b("", !0),
-          e.toast.closeOnClick ? (c(), d("button", {
-            key: 1,
+          t.toast.title ? (l(), d("span", {
+            key: 2,
+            class: B(["sileo-title-text", `text-${t.toast.type || "default"}`])
+          }, b(t.toast.title), 3)) : h("", !0),
+          t.toast.closeOnClick ? (l(), d("button", {
+            key: 3,
             class: "sileo-close-btn",
-            onClick: r[0] || (r[0] = D((E) => u.$emit("close"), ["stop"]))
-          }, [
-            (c(), d("svg", it, [...r[7] || (r[7] = [
-              l("line", {
+            onClick: a[0] || (a[0] = O((T) => u.$emit("close"), ["stop"]))
+          }, [...a[9] || (a[9] = [
+            s("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none"
+            }, [
+              s("line", {
                 x1: "18",
                 y1: "6",
                 x2: "6",
                 y2: "18"
-              }, null, -1),
-              l("line", {
+              }),
+              s("line", {
                 x1: "6",
                 y1: "6",
                 x2: "18",
                 y2: "18"
-              }, null, -1)
-            ])]))
-          ])) : b("", !0)
-        ], 4),
-        l("div", rt, [
-          l("div", lt, [
-            l("p", at, k(e.toast.message), 1),
-            e.toast.action ? (c(), d("button", {
+              })
+            ], -1)
+          ])])) : h("", !0)
+        ]),
+        s("div", at, [
+          s("div", rt, [
+            s("p", lt, b(t.toast.message), 1),
+            t.toast.action ? (l(), d("button", {
               key: 0,
               class: "sileo-action-trigger",
-              onClick: r[1] || (r[1] = D((E) => e.toast.action.onClick(e.toast.id), ["stop"]))
-            }, k(e.toast.action.label), 1)) : b("", !0)
+              onClick: a[1] || (a[1] = O((T) => t.toast.action.onClick(t.toast.id), ["stop"]))
+            }, b(t.toast.action.label), 1)) : h("", !0)
           ]),
-          e.toast.duration > 0 && e.toast.showProgress ? (c(), d("div", ct, [
-            l("div", {
+          t.toast.duration > 0 && t.toast.showProgress ? (l(), d("div", ct, [
+            s("div", {
               class: "sileo-timer-fill",
-              style: T({ animationDuration: `${e.toast.duration}ms` })
+              style: L({ animationDuration: `${t.toast.duration}ms` })
             }, null, 4)
-          ])) : b("", !0)
+          ])) : h("", !0)
         ])
       ])
     ], 38));
   }
-}), dt = { class: "sileo-root-wrapper" }, yt = /* @__PURE__ */ X({
+}), ut = { class: "sileo-root-wrapper" }, ft = /* @__PURE__ */ I({
   __name: "ToastContainer",
-  setup(e) {
-    const { toasts: f, removeToast: y } = j(), m = [
+  setup(t) {
+    const { toasts: v, removeToast: f } = A(), g = [
       "top-left",
       "top-center",
       "top-right",
       "bottom-left",
       "bottom-center",
       "bottom-right"
-    ], t = (i) => f.filter((n) => n.position === i), o = (i) => {
-      const n = i.startsWith("top"), s = i.endsWith("left"), a = i.endsWith("center");
+    ], e = (r) => v.filter((n) => n.position === r), o = (r) => {
+      const n = r.startsWith("top"), i = r.endsWith("left"), c = r.endsWith("center");
       return {
         position: "absolute",
         top: n ? "0" : "auto",
         bottom: n ? "auto" : "0",
-        left: s ? "0" : a ? "50%" : "auto",
-        right: !s && !a ? "0" : "auto",
-        transform: a ? "translateX(-50%)" : "none",
+        left: i ? "0" : c ? "50%" : "auto",
+        right: !i && !c ? "0" : "auto",
+        transform: c ? "translateX(-50%)" : "none",
         padding: "24px",
         display: "flex",
         pointerEvents: "none",
         boxSizing: "border-box",
-        alignItems: s ? "flex-start" : a ? "center" : "flex-end",
+        alignItems: i ? "flex-start" : c ? "center" : "flex-end",
         flexDirection: n ? "column" : "column-reverse"
       };
     };
-    return (i, n) => (c(), d("div", dt, [
-      (c(), d(O, null, S(m, (s) => l("div", {
-        key: s,
-        class: z(["sileo-position-container", [`sileo-pos-${s}`]]),
-        style: T(o(s))
+    return (r, n) => (l(), d("div", ut, [
+      (l(), d(M, null, S(g, (i) => s("div", {
+        key: i,
+        class: B(["sileo-position-container", [`sileo-pos-${i}`]]),
+        style: L(o(i))
       }, [
-        W(F, {
+        V(W, {
           name: "sileo-list",
           tag: "div",
           class: "sileo-stack"
         }, {
-          default: G(() => [
-            (c(!0), d(O, null, S(t(s), (a) => (c(), I(ut, {
-              key: a.id,
-              toast: a,
-              onClose: (g) => U(y)(a.id)
+          default: Z(() => [
+            (l(!0), d(M, null, S(e(i), (c) => (l(), z(dt, {
+              key: c.id,
+              toast: c,
+              onClose: (m) => F(f)(c.id)
             }, null, 8, ["toast", "onClose"]))), 128))
           ]),
           _: 2
@@ -316,22 +346,22 @@ const L = j(), K = { class: "sileo-combined-shape" }, Q = {
       ], 6)), 64))
     ]));
   }
-}), mt = {
-  install(e, f = {}) {
-    if (Object.keys(f).length > 0 && L.toast.config(f), typeof document < "u") {
-      const y = "sileo-toast-container";
-      let m = document.getElementById(y);
-      m || (m = document.createElement("div"), m.id = y, document.body.appendChild(m), q({
-        render: () => H(yt)
-      }).mount(m));
+}), gt = {
+  install(t, v = {}) {
+    if (Object.keys(v).length > 0 && E.toast.config(v), typeof document < "u") {
+      const f = "sileo-toast-container";
+      let g = document.getElementById(f);
+      g || (g = document.createElement("div"), g.id = f, document.body.appendChild(g), G({
+        render: () => U(ft)
+      }).mount(g));
     }
-    e.config.globalProperties.$toast = L.toast, e.provide("toast", L.toast);
+    t.config.globalProperties.$toast = E.toast, t.provide("toast", E.toast);
   }
 };
 export {
-  mt as SileoPlugin,
-  ut as Toast,
-  yt as ToastContainer,
-  L as toastManager,
-  j as useToast
+  gt as SileoPlugin,
+  dt as Toast,
+  ft as ToastContainer,
+  E as toastManager,
+  A as useToast
 };

package/dist/sileo-vue.umd.cjs

@@ -1 +1 @@
-(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m.SileoVue={},m.Vue))})(this,function(m,t){"use strict";const y=t.reactive([]),k=t.reactive({position:"top-right",duration:4e3,maxToasts:5}),V=()=>Math.random().toString(36).substring(2,9);function w(){const o=e=>{const n={type:"default",duration:k.duration||4e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},l=typeof e=="string"?{message:e}:e;y.length>=(k.maxToasts||5)&&y.shift();const s=V(),i={...n,...l,id:s,createdAt:Date.now()};return i.icon&&typeof i.icon!="string"&&(i.icon=t.markRaw(i.icon)),y.push(i),i.duration>0&&setTimeout(()=>{p(s)},i.duration),s},p=e=>{const n=y.findIndex(l=>l.id===e);n!==-1&&y.splice(n,1)},d=(e,n)=>{const l=y.findIndex(s=>s.id===e);if(l!==-1){const s={...y[l],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(s.icon=t.markRaw(n.icon)),y[l]=s}},f=Object.assign(o,{success:e=>o(typeof e=="string"?{message:e,type:"success"}:{...e,type:"success"}),error:e=>o(typeof e=="string"?{message:e,type:"error"}:{...e,type:"error"}),warning:e=>o(typeof e=="string"?{message:e,type:"warning"}:{...e,type:"warning"}),info:e=>o(typeof e=="string"?{message:e,type:"info"}:{...e,type:"info"}),promise:async(e,n)=>{const l=o(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const s=await e,i=typeof n.success=="function"?n.success(s):n.success,a=typeof i=="string"?{message:i,type:"success"}:{...i,type:"success"};return d(l,{...a,duration:a.duration||4e3}),setTimeout(()=>p(l),a.duration||4e3),s}catch(s){const i=typeof n.error=="function"?n.error(s):n.error,a=typeof i=="string"?{message:i,type:"error"}:{...i,type:"error"};throw d(l,{...a,duration:a.duration||4e3}),setTimeout(()=>p(l),a.duration||4e3),s}},clear:()=>y.length=0,config:e=>Object.assign(k,e)});return{toasts:y,toast:f,removeToast:p,updateToast:d}}const x=w(),N={class:"sileo-combined-shape"},T={class:"sileo-icon-wrapper",style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center","flex-shrink":"0"}},S={key:1,style:{"font-size":"16px","line-height":"1"}},L={key:2,style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center"}},D={key:0,class:"sileo-spin",viewBox:"0 0 50 50",style:{width:"18px !important",height:"18px !important"}},$={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},O={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},z={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},M={key:4,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},X={key:0,class:"sileo-title-text"},j={viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"12px",height:"12px"}},I={class:"sileo-main-body"},P={class:"sileo-body-content"},A={class:"sileo-message"},R={key:0,class:"sileo-timer"},B=t.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(o,{emit:p}){const d=o,f=p,e=t.ref(null),n=t.ref(!1),l=t.ref(0),s=t.ref(0),i=t.computed(()=>d.toast.icon),a=t.computed(()=>d.toast.duration===0&&(d.toast.type==="default"||!d.toast.type)),g=t.computed(()=>{const c=d.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),q=t.computed(()=>{const c=s.value,r=Math.max(0,1-Math.abs(c)/300),E=n.value?.95:1,U=g.value==="center"?"center":g.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${E})`,opacity:r,transition:n.value?"none":"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",display:"flex",flexDirection:"column",alignItems:U,width:"100%",pointerEvents:"auto",marginBottom:"16px"}}),G=t.computed(()=>({alignSelf:g.value==="center"?"center":g.value==="left"?"flex-start":"flex-end"})),b=c=>{d.toast.swipeToDismiss&&(n.value=!0,l.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",u),window.addEventListener("touchend",h)):(window.addEventListener("mousemove",u),window.addEventListener("mouseup",h)))},u=c=>{if(!n.value)return;const r="touches"in c?c.touches[0].clientX:c.clientX;s.value=(r-l.value)*.8},h=()=>{n.value&&(n.value=!1,Math.abs(s.value)>100?f("close"):s.value=0,window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",h),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",h))};return t.onUnmounted(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",h),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",h)}),(c,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"toastRef",ref:e,class:t.normalizeClass(["sileo-toast-outer",[`sileo-type-${o.toast.type}`,`sileo-align-${g.value}`,{"sileo-is-dragging":n.value}]]),style:t.normalizeStyle(q.value),onMousedown:b,onTouchstart:b},[t.createElementVNode("div",N,[t.createElementVNode("div",{class:"sileo-header-pill",style:t.normalizeStyle(G.value)},[t.createElementVNode("div",T,[typeof o.toast.icon!="string"&&o.toast.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.value),{key:0,style:{width:"18px !important",height:"18px !important",display:"block"}})):typeof o.toast.icon=="string"?(t.openBlock(),t.createElementBlock("span",S,t.toDisplayString(o.toast.icon),1)):(t.openBlock(),t.createElementBlock("div",L,[a.value?(t.openBlock(),t.createElementBlock("svg",D,[...r[2]||(r[2]=[t.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):o.toast.type==="success"?(t.openBlock(),t.createElementBlock("svg",$,[...r[3]||(r[3]=[t.createElementVNode("polyline",{points:"20 6 9 17 4 12"},null,-1)])])):o.toast.type==="error"?(t.openBlock(),t.createElementBlock("svg",O,[...r[4]||(r[4]=[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)])])):o.toast.type==="warning"?(t.openBlock(),t.createElementBlock("svg",z,[...r[5]||(r[5]=[t.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"},null,-1),t.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"},null,-1),t.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"},null,-1)])])):(t.openBlock(),t.createElementBlock("svg",M,[...r[6]||(r[6]=[t.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),t.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"},null,-1),t.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"},null,-1)])]))]))]),o.toast.title?(t.openBlock(),t.createElementBlock("span",X,t.toDisplayString(o.toast.title),1)):t.createCommentVNode("",!0),o.toast.closeOnClick?(t.openBlock(),t.createElementBlock("button",{key:1,class:"sileo-close-btn",onClick:r[0]||(r[0]=t.withModifiers(E=>c.$emit("close"),["stop"]))},[(t.openBlock(),t.createElementBlock("svg",j,[...r[7]||(r[7]=[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)])]))])):t.createCommentVNode("",!0)],4),t.createElementVNode("div",I,[t.createElementVNode("div",P,[t.createElementVNode("p",A,t.toDisplayString(o.toast.message),1),o.toast.action?(t.openBlock(),t.createElementBlock("button",{key:0,class:"sileo-action-trigger",onClick:r[1]||(r[1]=t.withModifiers(E=>o.toast.action.onClick(o.toast.id),["stop"]))},t.toDisplayString(o.toast.action.label),1)):t.createCommentVNode("",!0)]),o.toast.duration>0&&o.toast.showProgress?(t.openBlock(),t.createElementBlock("div",R,[t.createElementVNode("div",{class:"sileo-timer-fill",style:t.normalizeStyle({animationDuration:`${o.toast.duration}ms`})},null,4)])):t.createCommentVNode("",!0)])])],38))}}),W={class:"sileo-root-wrapper"},C=t.defineComponent({__name:"ToastContainer",setup(o){const{toasts:p,removeToast:d}=w(),f=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],e=l=>p.filter(s=>s.position===l),n=l=>{const s=l.startsWith("top"),i=l.endsWith("left"),a=l.endsWith("center");return{position:"absolute",top:s?"0":"auto",bottom:s?"auto":"0",left:i?"0":a?"50%":"auto",right:!i&&!a?"0":"auto",transform:a?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:i?"flex-start":a?"center":"flex-end",flexDirection:s?"column":"column-reverse"}};return(l,s)=>(t.openBlock(),t.createElementBlock("div",W,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(f,i=>t.createElementVNode("div",{key:i,class:t.normalizeClass(["sileo-position-container",[`sileo-pos-${i}`]]),style:t.normalizeStyle(n(i))},[t.createVNode(t.TransitionGroup,{name:"sileo-list",tag:"div",class:"sileo-stack"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e(i),a=>(t.openBlock(),t.createBlock(B,{key:a.id,toast:a,onClose:g=>t.unref(d)(a.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],6)),64))]))}}),F={install(o,p={}){if(Object.keys(p).length>0&&x.toast.config(p),typeof document<"u"){const d="sileo-toast-container";let f=document.getElementById(d);f||(f=document.createElement("div"),f.id=d,document.body.appendChild(f),t.createApp({render:()=>t.h(C)}).mount(f))}o.config.globalProperties.$toast=x.toast,o.provide("toast",x.toast)}};m.SileoPlugin=F,m.Toast=B,m.ToastContainer=C,m.toastManager=x,m.useToast=w,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.SileoVue={},m.Vue))})(this,function(m,e){"use strict";const g=e.reactive([]),w=e.reactive({position:"top-right",duration:4e3,maxToasts:5}),b=()=>Math.random().toString(36).substring(2,9);function h(){const t=o=>{const n={type:"default",duration:w.duration||4e3,position:w.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},a=typeof o=="string"?{message:o}:o;g.length>=(w.maxToasts||5)&&g.shift();const s=b(),i={...n,...a,id:s,createdAt:Date.now()};return i.icon&&typeof i.icon!="string"&&(i.icon=e.markRaw(i.icon)),g.push(i),i.duration>0&&setTimeout(()=>{f(s)},i.duration),s},f=o=>{const n=g.findIndex(a=>a.id===o);n!==-1&&g.splice(n,1)},d=(o,n)=>{const a=g.findIndex(s=>s.id===o);if(a!==-1){const s={...g[a],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(s.icon=e.markRaw(n.icon)),g[a]=s}},y=Object.assign(t,{success:o=>t(typeof o=="string"?{message:o,type:"success"}:{...o,type:"success"}),error:o=>t(typeof o=="string"?{message:o,type:"error"}:{...o,type:"error"}),warning:o=>t(typeof o=="string"?{message:o,type:"warning"}:{...o,type:"warning"}),info:o=>t(typeof o=="string"?{message:o,type:"info"}:{...o,type:"info"}),promise:async(o,n)=>{const a=t(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const s=await o,i=typeof n.success=="function"?n.success(s):n.success,c=typeof i=="string"?{message:i,type:"success"}:{...i,type:"success"};return d(a,{...c,duration:c.duration||4e3}),setTimeout(()=>f(a),c.duration||4e3),s}catch(s){const i=typeof n.error=="function"?n.error(s):n.error,c=typeof i=="string"?{message:i,type:"error"}:{...i,type:"error"};throw d(a,{...c,duration:c.duration||4e3}),setTimeout(()=>f(a),c.duration||4e3),s}},clear:()=>g.length=0,config:o=>Object.assign(w,o)});return{toasts:g,toast:y,removeToast:f,updateToast:d}}const E=h(),C={class:"sileo-combined-shape"},T={class:"sileo-header-pill"},L={key:0,class:"sileo-sweep-left"},S={key:1,class:"sileo-sweep-right"},D={class:"sileo-icon-wrapper"},$={key:1,class:"sileo-emoji"},M={key:2,class:"sileo-default-icon"},O={key:0,class:"sileo-spin",viewBox:"0 0 50 50"},z={key:1,class:"sileo-icon-circle bg-success"},X={key:2,class:"sileo-icon-circle bg-error"},I={key:3,class:"sileo-icon-circle bg-warning"},P={key:4,class:"sileo-icon-circle bg-info"},j={class:"sileo-main-body"},A={class:"sileo-body-content"},R={class:"sileo-message"},W={key:0,class:"sileo-timer"},B=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(t,{emit:f}){const d=t,y=f,o=e.ref(null),n=e.ref(!1),a=e.ref(0),s=e.ref(0),i=e.computed(()=>d.toast.icon),c=e.computed(()=>d.toast.duration===0&&(d.toast.type==="default"||!d.toast.type)),p=e.computed(()=>{const r=d.toast.position||"top-right";return r.includes("center")?"center":r.includes("left")?"left":"right"}),q=e.computed(()=>{const r=s.value,l=Math.max(0,1-Math.abs(r)/300),x=n.value?.95:1,G=p.value==="center"?"center":p.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${r}px) scale(${x})`,opacity:l,transition:n.value?"none":"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",display:"flex",flexDirection:"column",alignItems:G,width:"100%",pointerEvents:"auto",marginBottom:"16px"}}),N=r=>{d.toast.swipeToDismiss&&(n.value=!0,a.value="touches"in r?r.touches[0].clientX:r.clientX,"touches"in r?(window.addEventListener("touchmove",k),window.addEventListener("touchend",u)):(window.addEventListener("mousemove",k),window.addEventListener("mouseup",u)))},k=r=>{if(!n.value)return;const l="touches"in r?r.touches[0].clientX:r.clientX;s.value=(l-a.value)*.8},u=()=>{n.value&&(n.value=!1,Math.abs(s.value)>100?y("close"):s.value=0,window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",u),window.removeEventListener("touchmove",k),window.removeEventListener("touchend",u))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",u),window.removeEventListener("touchmove",k),window.removeEventListener("touchend",u)}),(r,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:o,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${t.toast.type||"default"}`,`sileo-align-${p.value}`,{"sileo-is-dragging":n.value}]]),style:e.normalizeStyle(q.value),onMousedown:N,onTouchstart:N},[e.createElementVNode("div",C,[e.createElementVNode("div",T,[p.value!=="left"?(e.openBlock(),e.createElementBlock("div",L,[...l[2]||(l[2]=[e.createElementVNode("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M12 0 C 5.373 0 0 5.373 0 12 L 12 12 Z",fill:"#1c1c1e"})],-1)])])):e.createCommentVNode("",!0),p.value!=="right"?(e.openBlock(),e.createElementBlock("div",S,[...l[3]||(l[3]=[e.createElementVNode("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M0 0 C 6.627 0 12 5.373 12 12 L 0 12 Z",fill:"#1c1c1e"})],-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",D,[typeof t.toast.icon!="string"&&t.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value),{key:0,class:"sileo-custom-icon"})):typeof t.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",$,e.toDisplayString(t.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",M,[c.value?(e.openBlock(),e.createElementBlock("svg",O,[...l[4]||(l[4]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):t.toast.type==="success"?(e.openBlock(),e.createElementBlock("div",z,[...l[5]||(l[5]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",class:"sileo-stroke-icon"},[e.createElementVNode("polyline",{points:"20 6 9 17 4 12"})],-1)])])):t.toast.type==="error"?(e.openBlock(),e.createElementBlock("div",X,[...l[6]||(l[6]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",class:"sileo-stroke-icon"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):t.toast.type==="warning"?(e.openBlock(),e.createElementBlock("div",I,[...l[7]||(l[7]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",class:"sileo-stroke-icon"},[e.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})],-1)])])):(e.openBlock(),e.createElementBlock("div",P,[...l[8]||(l[8]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",class:"sileo-stroke-icon"},[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"}),e.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})],-1)])]))]))]),t.toast.title?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${t.toast.type||"default"}`])},e.toDisplayString(t.toast.title),3)):e.createCommentVNode("",!0),t.toast.closeOnClick?(e.openBlock(),e.createElementBlock("button",{key:3,class:"sileo-close-btn",onClick:l[0]||(l[0]=e.withModifiers(x=>r.$emit("close"),["stop"]))},[...l[9]||(l[9]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",j,[e.createElementVNode("div",A,[e.createElementVNode("p",R,e.toDisplayString(t.toast.message),1),t.toast.action?(e.openBlock(),e.createElementBlock("button",{key:0,class:"sileo-action-trigger",onClick:l[1]||(l[1]=e.withModifiers(x=>t.toast.action.onClick(t.toast.id),["stop"]))},e.toDisplayString(t.toast.action.label),1)):e.createCommentVNode("",!0)]),t.toast.duration>0&&t.toast.showProgress?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",{class:"sileo-timer-fill",style:e.normalizeStyle({animationDuration:`${t.toast.duration}ms`})},null,4)])):e.createCommentVNode("",!0)])])],38))}}),F={class:"sileo-root-wrapper"},V=e.defineComponent({__name:"ToastContainer",setup(t){const{toasts:f,removeToast:d}=h(),y=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],o=a=>f.filter(s=>s.position===a),n=a=>{const s=a.startsWith("top"),i=a.endsWith("left"),c=a.endsWith("center");return{position:"absolute",top:s?"0":"auto",bottom:s?"auto":"0",left:i?"0":c?"50%":"auto",right:!i&&!c?"0":"auto",transform:c?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:i?"flex-start":c?"center":"flex-end",flexDirection:s?"column":"column-reverse"}};return(a,s)=>(e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(y,i=>e.createElementVNode("div",{key:i,class:e.normalizeClass(["sileo-position-container",[`sileo-pos-${i}`]]),style:e.normalizeStyle(n(i))},[e.createVNode(e.TransitionGroup,{name:"sileo-list",tag:"div",class:"sileo-stack"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o(i),c=>(e.openBlock(),e.createBlock(B,{key:c.id,toast:c,onClose:p=>e.unref(d)(c.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],6)),64))]))}}),Z={install(t,f={}){if(Object.keys(f).length>0&&E.toast.config(f),typeof document<"u"){const d="sileo-toast-container";let y=document.getElementById(d);y||(y=document.createElement("div"),y.id=d,document.body.appendChild(y),e.createApp({render:()=>e.h(V)}).mount(y))}t.config.globalProperties.$toast=E.toast,t.provide("toast",E.toast)}};m.SileoPlugin=Z,m.Toast=B,m.ToastContainer=V,m.toastManager=E,m.useToast=h,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.sileo-toast-outer{position:relative!important;width:360px!important;max-width:90vw!important;-webkit-user-select:none!important;user-select:none!important;z-index:10000!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif!important;box-sizing:border-box!important}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 15px 35px rgba(0,0,0,.4))!important}.sileo-header-pill{display:flex!important;align-items:center!important;gap:10px!important;background:#1c1c1ef2!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;padding:6px 16px!important;height:38px!important;border-radius:20px 20px 0 0!important;border:1px solid rgba(255,255,255,.1)!important;border-bottom:none!important;color:#fff!important;box-sizing:border-box!important;width:fit-content!important;position:relative!important;z-index:2!important;transform:translateY(1px)!important}.sileo-align-left .sileo-header-pill{border-radius:20px 20px 20px 0!important;margin-left:20px!important}.sileo-align-right .sileo-header-pill{border-radius:20px 20px 0!important;margin-right:20px!important}.sileo-align-center .sileo-header-pill{border-radius:20px 20px 0 0!important}.sileo-main-body{background:#1c1c1ef2!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;padding:18px 22px!important;border-radius:28px!important;border:1px solid rgba(255,255,255,.1)!important;width:100%!important;box-sizing:border-box!important;position:relative!important;z-index:1!important}.sileo-align-left .sileo-main-body{border-top-left-radius:0!important}.sileo-align-right .sileo-main-body{border-top-right-radius:0!important}.sileo-body-content{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}.sileo-title-text{font-size:14px!important;font-weight:700!important;color:#fffffff2!important}.sileo-message{margin:0!important;font-size:15px!important;line-height:1.45!important;color:#ffffffe6!important;font-weight:500!important}.sileo-action-trigger{background:#fff!important;color:#000!important;border:none!important;border-radius:12px!important;padding:8px 16px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;white-space:nowrap!important}.sileo-close-btn{background:none!important;border:none!important;padding:2px!important;cursor:pointer!important;color:#fff6!important;display:flex!important;align-items:center!important}.sileo-timer{position:absolute!important;bottom:6px!important;left:20px!important;right:20px!important;height:2px!important;background:#ffffff0d!important;border-radius:10px!important;overflow:hidden!important}.sileo-timer-fill{height:100%!important;background:currentColor!important;width:100%!important;animation:sileo-anim-timer linear forwards!important}@keyframes sileo-anim-timer{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sileo-spin{to{transform:rotate(360deg)}}.sileo-spin{animation:sileo-spin 1.5s linear infinite!important}.sileo-spin circle{stroke:currentColor!important;stroke-linecap:round!important;animation:sileo-dash-pulse 1.5s ease-in-out infinite!important}@keyframes sileo-dash-pulse{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.sileo-type-success{color:#32d74b!important}.sileo-type-error{color:#ff453a!important}.sileo-type-warning{color:#ffd60a!important}.sileo-type-info{color:#0a84ff!important}.sileo-type-default{color:#fff9!important}.sileo-list-enter-active,.sileo-list-leave-active{transition:all .6s cubic-bezier(.23,1,.32,1)!important}.sileo-list-enter-from{opacity:0!important;transform:translateY(-30px) scale(.8)!important}.sileo-list-leave-to{opacity:0!important;transform:scale(.9)!important}.sileo-root-wrapper{pointer-events:none!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:999999!important;overflow:hidden!important}.sileo-stack{display:flex!important;flex-direction:column!important;gap:12px!important}.sileo-list-move{transition:transform .4s ease!important}
+.sileo-toast-outer{position:relative!important;width:380px!important;max-width:90vw!important;-webkit-user-select:none!important;user-select:none!important;z-index:10000!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif!important;box-sizing:border-box!important}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 0 1px rgba(255,255,255,.15)) drop-shadow(0 15px 35px rgba(0,0,0,.4))!important}.sileo-header-pill{display:flex!important;align-items:center!important;gap:8px!important;background:#1c1c1e!important;padding:6px 14px 6px 12px!important;height:36px!important;border-radius:18px 18px 0 0!important;color:#fff!important;box-sizing:border-box!important;width:fit-content!important;position:relative!important;z-index:2!important;margin-bottom:-1px!important}.sileo-align-center .sileo-header-pill{align-self:center!important}.sileo-align-left .sileo-header-pill{align-self:flex-start!important;border-bottom-left-radius:0!important;margin-left:20px!important}.sileo-align-right .sileo-header-pill{align-self:flex-end!important;border-bottom-right-radius:0!important;margin-right:20px!important}.sileo-sweep-left{position:absolute!important;bottom:0!important;left:-12px!important;width:12px!important;height:12px!important;z-index:2!important;pointer-events:none!important}.sileo-sweep-right{position:absolute!important;bottom:0!important;right:-12px!important;width:12px!important;height:12px!important;z-index:2!important;pointer-events:none!important}.sileo-sweep-left svg,.sileo-sweep-right svg{display:block!important;width:100%!important;height:100%!important}.sileo-icon-wrapper{width:22px!important;height:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.sileo-custom-icon{width:18px!important;height:18px!important;display:block!important}.sileo-emoji{font-size:16px!important;line-height:1!important}.sileo-default-icon{width:22px!important;height:22px!important;display:flex!important;align-items:center!important;justify-content:center!important}.sileo-icon-circle{width:22px!important;height:22px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important}.bg-success{background:#32d74b33!important;color:#32d74b!important}.bg-error{background:#ff453a33!important;color:#ff453a!important}.bg-warning{background:#ffd60a33!important;color:#ffd60a!important}.bg-info{background:#0a84ff33!important;color:#0a84ff!important}.sileo-stroke-icon{width:14px!important;height:14px!important;stroke:currentColor!important;stroke-width:3!important}.sileo-title-text{font-size:14px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important}.text-success{color:#32d74b!important}.text-error{color:#ff453a!important}.text-warning{color:#ffd60a!important}.text-info{color:#0a84ff!important}.text-default{color:#fffffff2!important}.sileo-close-btn{background:none!important;border:none!important;padding:2px!important;cursor:pointer!important;color:#fff6!important;display:flex!important;align-items:center!important}.sileo-close-btn svg{width:14px!important;height:14px!important;stroke:currentColor!important;stroke-width:3!important}.sileo-main-body{background:#1c1c1e!important;padding:16px 20px!important;border-radius:24px!important;width:100%!important;box-sizing:border-box!important;position:relative!important;z-index:1!important}.sileo-align-left .sileo-main-body{border-top-left-radius:0!important}.sileo-align-right .sileo-main-body{border-top-right-radius:0!important}.sileo-body-content{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}.sileo-message{margin:0!important;font-size:15px!important;line-height:1.45!important;color:#ffffffe6!important;font-weight:500!important}.sileo-action-trigger{background:#fff!important;color:#000!important;border:none!important;border-radius:12px!important;padding:8px 16px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;white-space:nowrap!important;flex-shrink:0!important}.sileo-action-trigger:hover{transform:scale(1.04)!important}.sileo-timer{position:absolute!important;bottom:6px!important;left:24px!important;right:24px!important;height:3px!important;background:#ffffff0d!important;border-radius:10px!important;overflow:hidden!important}.sileo-timer-fill{height:100%!important;background:currentColor!important;width:100%!important;animation:sileo-anim-timer linear forwards!important}@keyframes sileo-anim-timer{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sileo-spin{to{transform:rotate(360deg)}}.sileo-spin{animation:sileo-spin 1.5s linear infinite!important;width:20px!important;height:20px!important}.sileo-spin circle{stroke:currentColor!important;stroke-linecap:round!important;animation:sileo-dash-pulse 1.5s ease-in-out infinite!important}@keyframes sileo-dash-pulse{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.sileo-list-enter-active,.sileo-list-leave-active{transition:all .5s cubic-bezier(.19,1,.22,1)!important}.sileo-list-enter-from{opacity:0!important;transform:translateY(-20px) scale(.9)!important}.sileo-list-leave-to{opacity:0!important;transform:scale(.9)!important}.sileo-root-wrapper{pointer-events:none!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:999999!important;overflow:hidden!important}.sileo-stack{display:flex!important;flex-direction:column!important;gap:12px!important}.sileo-list-move{transition:transform .4s ease!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgar208/sileo-vue",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A production-ready Vue 3 toast notification library inspired by Sileo.",
   "type": "module",
   "main": "./dist/sileo-vue.umd.cjs",