@edgar208/sileo-vue 1.7.5 → 1.7.7

package/dist/sileo-vue.js

@@ -1,10 +1,10 @@
-import { reactive as A, markRaw as M, defineComponent as P, resolveComponent as U, openBlock as u, createElementBlock as d, Fragment as I, renderList as S, createElementVNode as a, normalizeStyle as N, normalizeClass as $, createVNode as q, TransitionGroup as H, withCtx as J, createBlock as R, unref as X, createApp as K, h as Q, ref as C, computed as h, onMounted as Y, watch as z, onUnmounted as Z, createCommentVNode as x, resolveDynamicComponent as tt, toDisplayString as L, withModifiers as j } from "vue";
-const y = A([]), T = A({
+import { reactive as N, markRaw as X, defineComponent as R, ref as C, computed as h, onMounted as q, watch as I, onUnmounted as H, openBlock as u, createElementBlock as d, normalizeStyle as B, normalizeClass as D, createElementVNode as a, createCommentVNode as w, createBlock as V, resolveDynamicComponent as J, toDisplayString as $, withModifiers as z, Fragment as j, renderList as A, createVNode as K, TransitionGroup as Q, withCtx as Y, unref as P, createApp as Z, h as _ } from "vue";
+const y = N([]), T = N({
   position: "top-right",
   duration: 6e3,
   maxToasts: 5
-}), et = () => Math.random().toString(36).substring(2, 9);
-function V() {
+}), tt = () => Math.random().toString(36).substring(2, 9);
+function W() {
   const o = (t) => {
     const e = {
       type: "default",
@@ -14,45 +14,46 @@ function V() {
       closeOnClick: !0,
       swipeToDismiss: !0,
       theme: T.theme
-    }, r = typeof t == "string" ? { message: t } : t;
+    }, i = typeof t == "string" ? { message: t } : t;
     y.length >= (T.maxToasts || 5) && y.shift();
-    const n = et(), i = {
+    const n = tt(), r = {
       message: "",
       ...e,
-      ...r,
+      ...i,
       id: n,
-      createdAt: Date.now()
+      createdAt: Date.now(),
+      closing: !1
     };
-    return i.icon && typeof i.icon != "string" && (i.icon = M(i.icon)), y.push(i), i.duration && i.duration > 0 && setTimeout(() => {
-      m(n);
-    }, i.duration), n;
-  }, m = (t) => {
-    const e = y.find((r) => r.id === t);
+    return r.icon && typeof r.icon != "string" && (r.icon = X(r.icon)), y.push(r), r.duration && r.duration > 0 && setTimeout(() => {
+      v(n);
+    }, r.duration), n;
+  }, v = (t) => {
+    const e = y.find((i) => i.id === t);
     e && (e.closing = !0);
   }, s = (t) => {
-    const e = y.findIndex((r) => r.id === t);
+    const e = y.findIndex((i) => i.id === t);
     e > -1 && y.splice(e, 1);
   }, f = () => {
     y.forEach((t) => t.closing = !0);
   }, p = (t, e) => {
-    const r = y.findIndex((n) => n.id === t);
-    if (r !== -1) {
-      const n = { ...y[r], ...e };
-      typeof e.icon < "u" && e.icon && typeof e.icon != "string" && (n.icon = M(e.icon)), y[r] = n;
+    const i = y.findIndex((n) => n.id === t);
+    if (i !== -1) {
+      const n = { ...y[i], ...e };
+      typeof e.icon < "u" && e.icon && typeof e.icon != "string" && (n.icon = X(e.icon)), y[i] = n;
     }
-  }, v = (t) => Object.assign(T, t), w = Object.assign(o, {
+  }, g = (t) => Object.assign(T, t), x = Object.assign(o, {
     success: (t) => o(typeof t == "string" ? { message: t, type: "success" } : { ...t, type: "success" }),
     error: (t) => o(typeof t == "string" ? { message: t, type: "error" } : { ...t, type: "error" }),
     warning: (t) => o(typeof t == "string" ? { message: t, type: "warning" } : { ...t, type: "warning" }),
     info: (t) => o(typeof t == "string" ? { message: t, type: "info" } : { ...t, type: "info" }),
     promise: async (t, e) => {
-      const r = o(typeof e.loading == "string" ? { message: e.loading, type: "default", duration: 0 } : { ...e.loading, type: "default", duration: 0 });
+      const i = o(typeof e.loading == "string" ? { message: e.loading, type: "default", duration: 0 } : { ...e.loading, type: "default", duration: 0 });
       try {
-        const n = await t, i = typeof e.success == "function" ? e.success(n) : e.success, g = typeof i == "string" ? { message: i, type: "success" } : { ...i, type: "success" };
-        return p(r, { ...g, duration: g.duration || 4e3 }), setTimeout(() => m(r), g.duration || 4e3), n;
+        const n = await t, r = typeof e.success == "function" ? e.success(n) : e.success, m = typeof r == "string" ? { message: r, type: "success" } : { ...r, type: "success" };
+        return p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() => v(i), m.duration || 4e3), n;
       } catch (n) {
-        const i = typeof e.error == "function" ? e.error(n) : e.error, g = typeof i == "string" ? { message: i, type: "error" } : { ...i, type: "error" };
-        throw p(r, { ...g, duration: g.duration || 4e3 }), setTimeout(() => m(r), g.duration || 4e3), n;
+        const r = typeof e.error == "function" ? e.error(n) : e.error, m = typeof r == "string" ? { message: r, type: "error" } : { ...r, type: "error" };
+        throw p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() => v(i), m.duration || 4e3), n;
       }
     },
     clear: () => y.length = 0,
@@ -60,320 +61,324 @@ function V() {
   });
   return {
     toasts: y,
-    config: v,
+    config: g,
     addToast: o,
-    removeToast: m,
+    removeToast: v,
     destroyToast: s,
     clearToasts: f,
     updateToast: p,
-    toast: w
+    toast: x
   };
 }
-const B = V(), kt = B.toast, ot = { class: "sileo-root-wrapper" }, st = /* @__PURE__ */ P({
-  __name: "ToastContainer",
-  setup(o) {
-    const { toasts: m, removeToast: s, destroyToast: f } = V(), p = [
-      "top-left",
-      "top-center",
-      "top-right",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right"
-    ], v = (t) => m.filter((e) => e.position === t), w = (t) => {
-      const e = t.startsWith("top"), r = t.endsWith("left"), n = t.endsWith("center");
-      return {
-        position: "absolute",
-        top: e ? "0" : "auto",
-        bottom: e ? "auto" : "0",
-        left: r ? "0" : n ? "50%" : "auto",
-        right: !r && !n ? "0" : "auto",
-        transform: n ? "translateX(-50%)" : "none",
-        padding: "24px",
-        display: "flex",
-        pointerEvents: "none",
-        boxSizing: "border-box",
-        alignItems: r ? "flex-start" : n ? "center" : "flex-end",
-        flexDirection: e ? "column" : "column-reverse"
-      };
-    };
-    return (t, e) => {
-      const r = U("ToastItem");
-      return u(), d("div", ot, [
-        (u(), d(I, null, S(p, (n) => a("div", {
-          key: n,
-          class: $(["sileo-position-container", [`sileo-pos-${n}`]]),
-          style: N(w(n))
-        }, [
-          q(H, {
-            name: "sileo-list",
-            tag: "div",
-            class: "sileo-stack"
-          }, {
-            default: J(() => [
-              (u(!0), d(I, null, S(v(n), (i) => (u(), R(r, {
-                key: i.id,
-                toast: i,
-                onClose: (g) => X(s)(i.id),
-                onDestroy: (g) => X(f)(i.id)
-              }, null, 8, ["toast", "onClose", "onDestroy"]))), 128))
-            ]),
-            _: 2
-          }, 1024)
-        ], 6)), 64))
-      ]);
-    };
-  }
-}), bt = {
-  install(o, m = {}) {
-    if (Object.keys(m).length > 0 && B.toast.config(m), typeof document < "u") {
-      const s = "sileo-toast-container";
-      let f = document.getElementById(s);
-      f || (f = document.createElement("div"), f.id = s, document.body.appendChild(f), K({
-        render: () => Q(st)
-      }).mount(f));
-    }
-    o.config.globalProperties.$toast = B.toast, o.provide("toast", B.toast);
-  }
-}, nt = { class: "sileo-header-pill" }, it = {
+const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
   key: 0,
   class: "sileo-sweep-left"
-}, at = {
+}, st = {
   key: 1,
   class: "sileo-sweep-right"
-}, rt = { class: "sileo-icon-wrapper" }, lt = {
+}, nt = { class: "sileo-icon-wrapper" }, it = {
   key: 1,
   class: "sileo-emoji"
-}, ct = {
+}, at = {
   key: 2,
   class: "sileo-default-icon"
-}, ut = {
+}, rt = {
   key: 0,
   class: "sileo-spin",
   viewBox: "0 0 50 50"
-}, dt = {
+}, lt = {
   key: 1,
   class: "sileo-icon-circle bg-success"
-}, ft = {
+}, ct = {
   key: 2,
   class: "sileo-icon-circle bg-error"
-}, yt = {
+}, ut = {
   key: 3,
   class: "sileo-icon-circle bg-warning"
-}, mt = {
+}, dt = {
   key: 4,
   class: "sileo-icon-circle bg-info"
-}, vt = {
+}, ft = {
   key: 0,
   class: "sileo-main-body-animator"
-}, gt = { class: "sileo-main-wrapper" }, pt = { class: "sileo-main-body" }, ht = { class: "sileo-body-content" }, xt = {
+}, yt = { class: "sileo-main-wrapper" }, vt = { class: "sileo-main-body" }, gt = {
   key: 0,
   class: "sileo-message"
-}, Tt = /* @__PURE__ */ P({
+}, mt = /* @__PURE__ */ R({
   __name: "Toast",
   props: {
     toast: {}
   },
   emits: ["close", "destroy"],
-  setup(o, { emit: m }) {
-    const s = o, f = m, p = C(null), v = C(!1), w = C(0), t = C(0), e = C(!1), r = h(() => s.toast.title ? s.toast.title : !s.toast.title && s.toast.message && !s.toast.action ? s.toast.message : null), n = h(() => s.toast.title && s.toast.message || !s.toast.title && s.toast.message && s.toast.action ? s.toast.message : null), i = h(() => !!n.value || !!s.toast.action);
-    Y(() => {
-      i.value && setTimeout(() => {
+  setup(o, { emit: v }) {
+    const s = o, f = v, p = C(null), g = C(!1), x = C(0), t = C(0), e = C(!1), i = h(() => s.toast.title ? s.toast.title : !s.toast.title && s.toast.message && !s.toast.action ? s.toast.message : null), n = h(() => s.toast.title && s.toast.message || !s.toast.title && s.toast.message && s.toast.action ? s.toast.message : null), r = h(() => !!n.value || !!s.toast.action);
+    q(() => {
+      r.value && setTimeout(() => {
         e.value = !0;
       }, 500);
-    }), z(i, (c, l) => {
+    }), I(r, (c, l) => {
       c === !0 && l === !1 && (e.value = !0);
-    }), z(() => s.toast.closing, (c) => {
-      c && (i.value && e.value ? (e.value = !1, setTimeout(() => {
+    }), I(() => s.toast.closing, (c) => {
+      c === !0 && (r.value && e.value ? (e.value = !1, setTimeout(() => {
         f("destroy");
-      }, 1e3)) : f("destroy"));
-    });
-    const g = h(() => s.toast.icon), W = h(() => s.toast.duration === 0 && (s.toast.type === "default" || !s.toast.type)), E = h(() => {
+      }, 700)) : f("destroy"));
+    }, { immediate: !0 });
+    const m = h(() => s.toast.icon), F = h(() => s.toast.duration === 0 && (s.toast.type === "default" || !s.toast.type)), E = h(() => {
       const c = s.toast.position || "top-right";
       return c.includes("center") ? "center" : c.includes("left") ? "left" : "right";
-    }), _ = h(() => (s.toast.position || "top-right").includes("top")), F = h(() => {
-      const c = t.value, l = Math.max(0, 1 - Math.abs(c) / 300), D = v.value ? 0.95 : 1, G = E.value === "center" ? "center" : E.value === "left" ? "flex-start" : "flex-end";
+    }), G = h(() => (s.toast.position || "top-right").includes("top")), U = h(() => {
+      const c = t.value, l = Math.max(0, 1 - Math.abs(c) / 300), L = g.value ? 0.95 : 1, M = E.value === "center" ? "center" : E.value === "left" ? "flex-start" : "flex-end";
       return {
-        transform: `translateX(${c}px) scale(${D})`,
+        transform: `translateX(${c}px) scale(${L})`,
         opacity: l,
-        transition: v.value ? "none" : "opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        transition: g.value ? "none" : "opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
         display: "flex",
         flexDirection: "column",
-        alignItems: G,
+        alignItems: M,
         width: "100%",
         pointerEvents: "auto",
         marginBottom: "16px",
-        "--sileo-y-dir": _.value ? "-50px" : "50px"
+        "--sileo-y-dir": G.value ? "-50px" : "50px"
       };
-    }), O = (c) => {
-      s.toast.swipeToDismiss && (v.value = !0, w.value = "touches" in c ? c.touches[0].clientX : c.clientX, "touches" in c ? (window.addEventListener("touchmove", k), window.addEventListener("touchend", b)) : (window.addEventListener("mousemove", k), window.addEventListener("mouseup", b)));
+    }), S = (c) => {
+      s.toast.swipeToDismiss && (g.value = !0, x.value = "touches" in c ? c.touches[0].clientX : c.clientX, "touches" in c ? (window.addEventListener("touchmove", k), window.addEventListener("touchend", b)) : (window.addEventListener("mousemove", k), window.addEventListener("mouseup", b)));
     }, k = (c) => {
-      if (!v.value) return;
+      if (!g.value) return;
       const l = "touches" in c ? c.touches[0].clientX : c.clientX;
-      t.value = (l - w.value) * 0.8;
+      t.value = (l - x.value) * 0.8;
     }, b = () => {
-      v.value && (v.value = !1, Math.abs(t.value) > 100 ? f("close") : t.value = 0, window.removeEventListener("mousemove", k), window.removeEventListener("mouseup", b), window.removeEventListener("touchmove", k), window.removeEventListener("touchend", b));
+      g.value && (g.value = !1, Math.abs(t.value) > 100 ? f("close") : t.value = 0, window.removeEventListener("mousemove", k), window.removeEventListener("mouseup", b), window.removeEventListener("touchmove", k), window.removeEventListener("touchend", b));
     };
-    return Z(() => {
+    return H(() => {
       window.removeEventListener("mousemove", k), window.removeEventListener("mouseup", b), window.removeEventListener("touchmove", k), window.removeEventListener("touchend", b);
-    }), (c, l) => (u(), d("div", {
-      ref_key: "toastRef",
-      ref: p,
-      class: $(["sileo-toast-outer", [
-        `sileo-type-${o.toast.type || "default"}`,
-        `sileo-align-${E.value}`,
-        o.toast.theme === "light" ? "sileo-theme-light" : "",
-        o.toast.theme === "dark" ? "sileo-theme-dark" : "",
-        { "sileo-is-dragging": v.value }
-      ]]),
-      style: N(F.value),
-      onMousedown: O,
-      onTouchstart: O
-    }, [
-      a("div", {
-        class: $(["sileo-combined-shape", { "is-expanded": e.value }])
+    }), (c, l) => {
+      var L;
+      return u(), d("div", {
+        ref_key: "toastRef",
+        ref: p,
+        class: D(["sileo-toast-outer", [
+          `sileo-type-${o.toast.type || "default"}`,
+          `sileo-align-${E.value}`,
+          o.toast.theme === "light" ? "sileo-theme-light" : "",
+          o.toast.theme === "dark" ? "sileo-theme-dark" : "",
+          { "sileo-is-dragging": g.value }
+        ]]),
+        style: B(U.value),
+        onMousedown: S,
+        onTouchstart: S
       }, [
-        a("div", nt, [
-          E.value !== "left" ? (u(), d("div", it)) : x("", !0),
-          E.value !== "right" ? (u(), d("div", at)) : x("", !0),
-          a("div", rt, [
-            typeof o.toast.icon != "string" && o.toast.icon ? (u(), R(tt(g.value), {
-              key: 0,
-              class: "sileo-custom-icon"
-            })) : typeof o.toast.icon == "string" ? (u(), d("span", lt, L(o.toast.icon), 1)) : (u(), d("div", ct, [
-              W.value ? (u(), d("svg", ut, [...l[2] || (l[2] = [
-                a("circle", {
-                  cx: "25",
-                  cy: "25",
-                  r: "20",
-                  fill: "none",
-                  stroke: "currentColor",
-                  "stroke-width": "5"
-                }, null, -1)
-              ])])) : o.toast.type === "success" ? (u(), d("div", dt, [...l[3] || (l[3] = [
-                a("svg", {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  class: "sileo-stroke-icon"
-                }, [
-                  a("polyline", { points: "20 6 9 17 4 12" })
-                ], -1)
-              ])])) : o.toast.type === "error" ? (u(), d("div", ft, [...l[4] || (l[4] = [
-                a("svg", {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  class: "sileo-stroke-icon"
-                }, [
-                  a("line", {
-                    x1: "18",
-                    y1: "6",
-                    x2: "6",
-                    y2: "18"
-                  }),
-                  a("line", {
-                    x1: "6",
-                    y1: "6",
-                    x2: "18",
-                    y2: "18"
-                  })
-                ], -1)
-              ])])) : o.toast.type === "warning" ? (u(), d("div", yt, [...l[5] || (l[5] = [
-                a("svg", {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  class: "sileo-stroke-icon"
-                }, [
-                  a("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" }),
-                  a("line", {
-                    x1: "12",
-                    y1: "9",
-                    x2: "12",
-                    y2: "13"
-                  }),
-                  a("line", {
-                    x1: "12",
-                    y1: "17",
-                    x2: "12.01",
-                    y2: "17"
-                  })
-                ], -1)
-              ])])) : (u(), d("div", mt, [...l[6] || (l[6] = [
-                a("svg", {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  class: "sileo-stroke-icon"
-                }, [
+        a("div", {
+          class: D(["sileo-combined-shape", { "is-expanded": e.value }])
+        }, [
+          a("div", et, [
+            E.value !== "left" ? (u(), d("div", ot)) : w("", !0),
+            E.value !== "right" ? (u(), d("div", st)) : w("", !0),
+            a("div", nt, [
+              typeof o.toast.icon != "string" && o.toast.icon ? (u(), V(J(m.value), {
+                key: 0,
+                class: "sileo-custom-icon"
+              })) : typeof o.toast.icon == "string" ? (u(), d("span", it, $(o.toast.icon), 1)) : (u(), d("div", at, [
+                F.value ? (u(), d("svg", rt, [...l[2] || (l[2] = [
                   a("circle", {
-                    cx: "12",
-                    cy: "12",
-                    r: "10"
-                  }),
-                  a("line", {
-                    x1: "12",
-                    y1: "16",
-                    x2: "12",
-                    y2: "12"
-                  }),
-                  a("line", {
-                    x1: "12",
-                    y1: "8",
-                    x2: "12.01",
-                    y2: "8"
-                  })
-                ], -1)
-              ])]))
-            ]))
+                    cx: "25",
+                    cy: "25",
+                    r: "20",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "5"
+                  }, null, -1)
+                ])])) : o.toast.type === "success" ? (u(), d("div", lt, [...l[3] || (l[3] = [
+                  a("svg", {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    class: "sileo-stroke-icon"
+                  }, [
+                    a("polyline", { points: "20 6 9 17 4 12" })
+                  ], -1)
+                ])])) : o.toast.type === "error" ? (u(), d("div", ct, [...l[4] || (l[4] = [
+                  a("svg", {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    class: "sileo-stroke-icon"
+                  }, [
+                    a("line", {
+                      x1: "18",
+                      y1: "6",
+                      x2: "6",
+                      y2: "18"
+                    }),
+                    a("line", {
+                      x1: "6",
+                      y1: "6",
+                      x2: "18",
+                      y2: "18"
+                    })
+                  ], -1)
+                ])])) : o.toast.type === "warning" ? (u(), d("div", ut, [...l[5] || (l[5] = [
+                  a("svg", {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    class: "sileo-stroke-icon"
+                  }, [
+                    a("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" }),
+                    a("line", {
+                      x1: "12",
+                      y1: "9",
+                      x2: "12",
+                      y2: "13"
+                    }),
+                    a("line", {
+                      x1: "12",
+                      y1: "17",
+                      x2: "12.01",
+                      y2: "17"
+                    })
+                  ], -1)
+                ])])) : (u(), d("div", dt, [...l[6] || (l[6] = [
+                  a("svg", {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    class: "sileo-stroke-icon"
+                  }, [
+                    a("circle", {
+                      cx: "12",
+                      cy: "12",
+                      r: "10"
+                    }),
+                    a("line", {
+                      x1: "12",
+                      y1: "16",
+                      x2: "12",
+                      y2: "12"
+                    }),
+                    a("line", {
+                      x1: "12",
+                      y1: "8",
+                      x2: "12.01",
+                      y2: "8"
+                    })
+                  ], -1)
+                ])]))
+              ]))
+            ]),
+            i.value ? (u(), d("span", {
+              key: 2,
+              class: D(["sileo-title-text", `text-${o.toast.type || "default"}`])
+            }, $(i.value), 3)) : w("", !0),
+            o.toast.closeOnClick ? (u(), d("button", {
+              key: 3,
+              class: "sileo-close-btn",
+              onClick: l[0] || (l[0] = z((M) => c.$emit("close"), ["stop"]))
+            }, [...l[7] || (l[7] = [
+              a("svg", {
+                viewBox: "0 0 24 24",
+                fill: "none"
+              }, [
+                a("line", {
+                  x1: "18",
+                  y1: "6",
+                  x2: "6",
+                  y2: "18"
+                }),
+                a("line", {
+                  x1: "6",
+                  y1: "6",
+                  x2: "18",
+                  y2: "18"
+                })
+              ], -1)
+            ])])) : w("", !0)
           ]),
-          r.value ? (u(), d("span", {
-            key: 2,
-            class: $(["sileo-title-text", `text-${o.toast.type || "default"}`])
-          }, L(r.value), 3)) : x("", !0),
-          o.toast.closeOnClick ? (u(), d("button", {
-            key: 3,
-            class: "sileo-close-btn",
-            onClick: l[0] || (l[0] = j((D) => c.$emit("close"), ["stop"]))
-          }, [...l[7] || (l[7] = [
-            a("svg", {
-              viewBox: "0 0 24 24",
-              fill: "none"
-            }, [
-              a("line", {
-                x1: "18",
-                y1: "6",
-                x2: "6",
-                y2: "18"
-              }),
-              a("line", {
-                x1: "6",
-                y1: "6",
-                x2: "18",
-                y2: "18"
-              })
-            ], -1)
-          ])])) : x("", !0)
-        ]),
-        i.value ? (u(), d("div", vt, [
-          a("div", gt, [
-            a("div", pt, [
-              a("div", ht, [
-                n.value ? (u(), d("p", xt, L(n.value), 1)) : x("", !0),
-                o.toast.action ? (u(), d("button", {
-                  key: 1,
-                  class: "sileo-action-trigger",
-                  onClick: l[1] || (l[1] = j((D) => o.toast.action.onClick(o.toast.id), ["stop"]))
-                }, L(o.toast.action.label), 1)) : x("", !0)
+          r.value ? (u(), d("div", ft, [
+            a("div", yt, [
+              a("div", vt, [
+                a("div", {
+                  class: "sileo-body-content",
+                  style: B({ flexDirection: ((L = o.toast.action) == null ? void 0 : L.position) === "left" ? "row-reverse" : "row" })
+                }, [
+                  n.value ? (u(), d("p", gt, $(n.value), 1)) : w("", !0),
+                  o.toast.action ? (u(), d("button", {
+                    key: 1,
+                    class: "sileo-action-trigger",
+                    style: B({ background: o.toast.action.color }),
+                    onClick: l[1] || (l[1] = z((M) => o.toast.action.onClick(o.toast.id), ["stop"]))
+                  }, $(o.toast.action.label), 5)) : w("", !0)
+                ], 4)
               ])
             ])
-          ])
-        ])) : x("", !0)
-      ], 2)
-    ], 38));
+          ])) : w("", !0)
+        ], 2)
+      ], 38);
+    };
+  }
+}), pt = { class: "sileo-root-wrapper" }, ht = /* @__PURE__ */ R({
+  __name: "ToastContainer",
+  setup(o) {
+    const { toasts: v, removeToast: s, destroyToast: f } = W(), p = [
+      "top-left",
+      "top-center",
+      "top-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right"
+    ], g = (t) => v.filter((e) => e.position === t), x = (t) => {
+      const e = t.startsWith("top"), i = t.endsWith("left"), n = t.endsWith("center");
+      return {
+        position: "absolute",
+        top: e ? "0" : "auto",
+        bottom: e ? "auto" : "0",
+        left: i ? "0" : n ? "50%" : "auto",
+        right: !i && !n ? "0" : "auto",
+        transform: n ? "translateX(-50%)" : "none",
+        padding: "24px",
+        display: "flex",
+        pointerEvents: "none",
+        boxSizing: "border-box",
+        alignItems: i ? "flex-start" : n ? "center" : "flex-end",
+        flexDirection: e ? "column" : "column-reverse"
+      };
+    };
+    return (t, e) => (u(), d("div", pt, [
+      (u(), d(j, null, A(p, (i) => a("div", {
+        key: i,
+        class: D(["sileo-position-container", [`sileo-pos-${i}`]]),
+        style: B(x(i))
+      }, [
+        K(Q, {
+          name: "sileo-list",
+          tag: "div",
+          class: "sileo-stack"
+        }, {
+          default: Y(() => [
+            (u(!0), d(j, null, A(g(i), (n) => (u(), V(mt, {
+              key: n.id,
+              toast: n,
+              onClose: (r) => P(s)(n.id),
+              onDestroy: (r) => P(f)(n.id)
+            }, null, 8, ["toast", "onClose", "onDestroy"]))), 128))
+          ]),
+          _: 2
+        }, 1024)
+      ], 6)), 64))
+    ]));
   }
-});
+}), kt = {
+  install(o, v = {}) {
+    if (Object.keys(v).length > 0 && O.toast.config(v), typeof document < "u") {
+      const s = "sileo-toast-container";
+      let f = document.getElementById(s);
+      f || (f = document.createElement("div"), f.id = s, document.body.appendChild(f), Z({
+        render: () => _(ht)
+      }).mount(f));
+    }
+    o.config.globalProperties.$toast = O.toast, o.provide("toast", O.toast);
+  }
+};
 export {
-  bt as SileoPlugin,
-  Tt as Toast,
-  st as ToastContainer,
-  kt as toast,
-  B as toastManager,
-  V as useToast
+  kt as SileoPlugin,
+  mt as Toast,
+  ht as ToastContainer,
+  xt as toast,
+  O as toastManager,
+  W as useToast
 };

package/dist/sileo-vue.umd.cjs

@@ -1 +1 @@
-(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 f=e.reactive([]),k=e.reactive({position:"top-right",duration:6e3,maxToasts:5}),C=()=>Math.random().toString(36).substring(2,9);function T(){const n=t=>{const o={type:"default",duration:k.duration||6e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0,theme:k.theme},l=typeof t=="string"?{message:t}:t;f.length>=(k.maxToasts||5)&&f.shift();const i=C(),a={message:"",...o,...l,id:i,createdAt:Date.now()};return a.icon&&typeof a.icon!="string"&&(a.icon=e.markRaw(a.icon)),f.push(a),a.duration&&a.duration>0&&setTimeout(()=>{p(i)},a.duration),i},p=t=>{const o=f.find(l=>l.id===t);o&&(o.closing=!0)},s=t=>{const o=f.findIndex(l=>l.id===t);o>-1&&f.splice(o,1)},d=()=>{f.forEach(t=>t.closing=!0)},u=(t,o)=>{const l=f.findIndex(i=>i.id===t);if(l!==-1){const i={...f[l],...o};typeof o.icon<"u"&&o.icon&&typeof o.icon!="string"&&(i.icon=e.markRaw(o.icon)),f[l]=i}},y=t=>Object.assign(k,t),h=Object.assign(n,{success:t=>n(typeof t=="string"?{message:t,type:"success"}:{...t,type:"success"}),error:t=>n(typeof t=="string"?{message:t,type:"error"}:{...t,type:"error"}),warning:t=>n(typeof t=="string"?{message:t,type:"warning"}:{...t,type:"warning"}),info:t=>n(typeof t=="string"?{message:t,type:"info"}:{...t,type:"info"}),promise:async(t,o)=>{const l=n(typeof o.loading=="string"?{message:o.loading,type:"default",duration:0}:{...o.loading,type:"default",duration:0});try{const i=await t,a=typeof o.success=="function"?o.success(i):o.success,g=typeof a=="string"?{message:a,type:"success"}:{...a,type:"success"};return u(l,{...g,duration:g.duration||4e3}),setTimeout(()=>p(l),g.duration||4e3),i}catch(i){const a=typeof o.error=="function"?o.error(i):o.error,g=typeof a=="string"?{message:a,type:"error"}:{...a,type:"error"};throw u(l,{...g,duration:g.duration||4e3}),setTimeout(()=>p(l),g.duration||4e3),i}},clear:()=>f.length=0,config:t=>Object.assign(k,t)});return{toasts:f,config:y,addToast:n,removeToast:p,destroyToast:s,clearToasts:d,updateToast:u,toast:h}}const x=T(),L=x.toast,S={class:"sileo-root-wrapper"},b=e.defineComponent({__name:"ToastContainer",setup(n){const{toasts:p,removeToast:s,destroyToast:d}=T(),u=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],y=t=>p.filter(o=>o.position===t),h=t=>{const o=t.startsWith("top"),l=t.endsWith("left"),i=t.endsWith("center");return{position:"absolute",top:o?"0":"auto",bottom:o?"auto":"0",left:l?"0":i?"50%":"auto",right:!l&&!i?"0":"auto",transform:i?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:l?"flex-start":i?"center":"flex-end",flexDirection:o?"column":"column-reverse"}};return(t,o)=>{const l=e.resolveComponent("ToastItem");return e.openBlock(),e.createElementBlock("div",S,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,i=>e.createElementVNode("div",{key:i,class:e.normalizeClass(["sileo-position-container",[`sileo-pos-${i}`]]),style:e.normalizeStyle(h(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(y(i),a=>(e.openBlock(),e.createBlock(l,{key:a.id,toast:a,onClose:g=>e.unref(s)(a.id),onDestroy:g=>e.unref(d)(a.id)},null,8,["toast","onClose","onDestroy"]))),128))]),_:2},1024)],6)),64))])}}}),D={install(n,p={}){if(Object.keys(p).length>0&&x.toast.config(p),typeof document<"u"){const s="sileo-toast-container";let d=document.getElementById(s);d||(d=document.createElement("div"),d.id=s,document.body.appendChild(d),e.createApp({render:()=>e.h(b)}).mount(d))}n.config.globalProperties.$toast=x.toast,n.provide("toast",x.toast)}},$={class:"sileo-header-pill"},M={key:0,class:"sileo-sweep-left"},O={key:1,class:"sileo-sweep-right"},z={class:"sileo-icon-wrapper"},I={key:1,class:"sileo-emoji"},X={key:2,class:"sileo-default-icon"},j={key:0,class:"sileo-spin",viewBox:"0 0 50 50"},P={key:1,class:"sileo-icon-circle bg-success"},A={key:2,class:"sileo-icon-circle bg-error"},R={key:3,class:"sileo-icon-circle bg-warning"},W={key:4,class:"sileo-icon-circle bg-info"},_={key:0,class:"sileo-main-body-animator"},F={class:"sileo-main-wrapper"},q={class:"sileo-main-body"},G={class:"sileo-body-content"},U={key:0,class:"sileo-message"},H=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close","destroy"],setup(n,{emit:p}){const s=n,d=p,u=e.ref(null),y=e.ref(!1),h=e.ref(0),t=e.ref(0),o=e.ref(!1),l=e.computed(()=>s.toast.title?s.toast.title:!s.toast.title&&s.toast.message&&!s.toast.action?s.toast.message:null),i=e.computed(()=>s.toast.title&&s.toast.message||!s.toast.title&&s.toast.message&&s.toast.action?s.toast.message:null),a=e.computed(()=>!!i.value||!!s.toast.action);e.onMounted(()=>{a.value&&setTimeout(()=>{o.value=!0},500)}),e.watch(a,(r,c)=>{r===!0&&c===!1&&(o.value=!0)}),e.watch(()=>s.toast.closing,r=>{r&&(a.value&&o.value?(o.value=!1,setTimeout(()=>{d("destroy")},1e3)):d("destroy"))});const g=e.computed(()=>s.toast.icon),J=e.computed(()=>s.toast.duration===0&&(s.toast.type==="default"||!s.toast.type)),B=e.computed(()=>{const r=s.toast.position||"top-right";return r.includes("center")?"center":r.includes("left")?"left":"right"}),K=e.computed(()=>(s.toast.position||"top-right").includes("top")),Q=e.computed(()=>{const r=t.value,c=Math.max(0,1-Math.abs(r)/300),V=y.value?.95:1,Y=B.value==="center"?"center":B.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${r}px) scale(${V})`,opacity:c,transition:y.value?"none":"opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",display:"flex",flexDirection:"column",alignItems:Y,width:"100%",pointerEvents:"auto",marginBottom:"16px","--sileo-y-dir":K.value?"-50px":"50px"}}),N=r=>{s.toast.swipeToDismiss&&(y.value=!0,h.value="touches"in r?r.touches[0].clientX:r.clientX,"touches"in r?(window.addEventListener("touchmove",E),window.addEventListener("touchend",w)):(window.addEventListener("mousemove",E),window.addEventListener("mouseup",w)))},E=r=>{if(!y.value)return;const c="touches"in r?r.touches[0].clientX:r.clientX;t.value=(c-h.value)*.8},w=()=>{y.value&&(y.value=!1,Math.abs(t.value)>100?d("close"):t.value=0,window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w)}),(r,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:u,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${n.toast.type||"default"}`,`sileo-align-${B.value}`,n.toast.theme==="light"?"sileo-theme-light":"",n.toast.theme==="dark"?"sileo-theme-dark":"",{"sileo-is-dragging":y.value}]]),style:e.normalizeStyle(Q.value),onMousedown:N,onTouchstart:N},[e.createElementVNode("div",{class:e.normalizeClass(["sileo-combined-shape",{"is-expanded":o.value}])},[e.createElementVNode("div",$,[B.value!=="left"?(e.openBlock(),e.createElementBlock("div",M)):e.createCommentVNode("",!0),B.value!=="right"?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),e.createElementVNode("div",z,[typeof n.toast.icon!="string"&&n.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,class:"sileo-custom-icon"})):typeof n.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(n.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",X,[J.value?(e.openBlock(),e.createElementBlock("svg",j,[...c[2]||(c[2]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):n.toast.type==="success"?(e.openBlock(),e.createElementBlock("div",P,[...c[3]||(c[3]=[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)])])):n.toast.type==="error"?(e.openBlock(),e.createElementBlock("div",A,[...c[4]||(c[4]=[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)])])):n.toast.type==="warning"?(e.openBlock(),e.createElementBlock("div",R,[...c[5]||(c[5]=[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",W,[...c[6]||(c[6]=[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)])]))]))]),l.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${n.toast.type||"default"}`])},e.toDisplayString(l.value),3)):e.createCommentVNode("",!0),n.toast.closeOnClick?(e.openBlock(),e.createElementBlock("button",{key:3,class:"sileo-close-btn",onClick:c[0]||(c[0]=e.withModifiers(V=>r.$emit("close"),["stop"]))},[...c[7]||(c[7]=[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)]),a.value?(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",F,[e.createElementVNode("div",q,[e.createElementVNode("div",G,[i.value?(e.openBlock(),e.createElementBlock("p",U,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),n.toast.action?(e.openBlock(),e.createElementBlock("button",{key:1,class:"sileo-action-trigger",onClick:c[1]||(c[1]=e.withModifiers(V=>n.toast.action.onClick(n.toast.id),["stop"]))},e.toDisplayString(n.toast.action.label),1)):e.createCommentVNode("",!0)])])])])):e.createCommentVNode("",!0)],2)],38))}});m.SileoPlugin=D,m.Toast=H,m.ToastContainer=b,m.toast=L,m.toastManager=x,m.useToast=T,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 f=e.reactive([]),k=e.reactive({position:"top-right",duration:6e3,maxToasts:5}),S=()=>Math.random().toString(36).substring(2,9);function V(){const n=t=>{const o={type:"default",duration:k.duration||6e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0,theme:k.theme},a=typeof t=="string"?{message:t}:t;f.length>=(k.maxToasts||5)&&f.shift();const i=S(),l={message:"",...o,...a,id:i,createdAt:Date.now(),closing:!1};return l.icon&&typeof l.icon!="string"&&(l.icon=e.markRaw(l.icon)),f.push(l),l.duration&&l.duration>0&&setTimeout(()=>{y(i)},l.duration),i},y=t=>{const o=f.find(a=>a.id===t);o&&(o.closing=!0)},s=t=>{const o=f.findIndex(a=>a.id===t);o>-1&&f.splice(o,1)},d=()=>{f.forEach(t=>t.closing=!0)},u=(t,o)=>{const a=f.findIndex(i=>i.id===t);if(a!==-1){const i={...f[a],...o};typeof o.icon<"u"&&o.icon&&typeof o.icon!="string"&&(i.icon=e.markRaw(o.icon)),f[a]=i}},p=t=>Object.assign(k,t),h=Object.assign(n,{success:t=>n(typeof t=="string"?{message:t,type:"success"}:{...t,type:"success"}),error:t=>n(typeof t=="string"?{message:t,type:"error"}:{...t,type:"error"}),warning:t=>n(typeof t=="string"?{message:t,type:"warning"}:{...t,type:"warning"}),info:t=>n(typeof t=="string"?{message:t,type:"info"}:{...t,type:"info"}),promise:async(t,o)=>{const a=n(typeof o.loading=="string"?{message:o.loading,type:"default",duration:0}:{...o.loading,type:"default",duration:0});try{const i=await t,l=typeof o.success=="function"?o.success(i):o.success,g=typeof l=="string"?{message:l,type:"success"}:{...l,type:"success"};return u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}catch(i){const l=typeof o.error=="function"?o.error(i):o.error,g=typeof l=="string"?{message:l,type:"error"}:{...l,type:"error"};throw u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}},clear:()=>f.length=0,config:t=>Object.assign(k,t)});return{toasts:f,config:p,addToast:n,removeToast:y,destroyToast:s,clearToasts:d,updateToast:u,toast:h}}const x=V(),D=x.toast,$={class:"sileo-header-pill"},M={key:0,class:"sileo-sweep-left"},O={key:1,class:"sileo-sweep-right"},z={class:"sileo-icon-wrapper"},X={key:1,class:"sileo-emoji"},j={key:2,class:"sileo-default-icon"},I={key:0,class:"sileo-spin",viewBox:"0 0 50 50"},P={key:1,class:"sileo-icon-circle bg-success"},A={key:2,class:"sileo-icon-circle bg-error"},R={key:3,class:"sileo-icon-circle bg-warning"},W={key:4,class:"sileo-icon-circle bg-info"},F={key:0,class:"sileo-main-body-animator"},q={class:"sileo-main-wrapper"},G={class:"sileo-main-body"},U={key:0,class:"sileo-message"},T=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close","destroy"],setup(n,{emit:y}){const s=n,d=y,u=e.ref(null),p=e.ref(!1),h=e.ref(0),t=e.ref(0),o=e.ref(!1),a=e.computed(()=>s.toast.title?s.toast.title:!s.toast.title&&s.toast.message&&!s.toast.action?s.toast.message:null),i=e.computed(()=>s.toast.title&&s.toast.message||!s.toast.title&&s.toast.message&&s.toast.action?s.toast.message:null),l=e.computed(()=>!!i.value||!!s.toast.action);e.onMounted(()=>{l.value&&setTimeout(()=>{o.value=!0},500)}),e.watch(l,(c,r)=>{c===!0&&r===!1&&(o.value=!0)}),e.watch(()=>s.toast.closing,c=>{c===!0&&(l.value&&o.value?(o.value=!1,setTimeout(()=>{d("destroy")},700)):d("destroy"))},{immediate:!0});const g=e.computed(()=>s.toast.icon),K=e.computed(()=>s.toast.duration===0&&(s.toast.type==="default"||!s.toast.type)),B=e.computed(()=>{const c=s.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),Q=e.computed(()=>(s.toast.position||"top-right").includes("top")),Y=e.computed(()=>{const c=t.value,r=Math.max(0,1-Math.abs(c)/300),b=p.value?.95:1,N=B.value==="center"?"center":B.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${b})`,opacity:r,transition:p.value?"none":"opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",display:"flex",flexDirection:"column",alignItems:N,width:"100%",pointerEvents:"auto",marginBottom:"16px","--sileo-y-dir":Q.value?"-50px":"50px"}}),L=c=>{s.toast.swipeToDismiss&&(p.value=!0,h.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",E),window.addEventListener("touchend",w)):(window.addEventListener("mousemove",E),window.addEventListener("mouseup",w)))},E=c=>{if(!p.value)return;const r="touches"in c?c.touches[0].clientX:c.clientX;t.value=(r-h.value)*.8},w=()=>{p.value&&(p.value=!1,Math.abs(t.value)>100?d("close"):t.value=0,window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w)}),(c,r)=>{var b;return e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:u,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${n.toast.type||"default"}`,`sileo-align-${B.value}`,n.toast.theme==="light"?"sileo-theme-light":"",n.toast.theme==="dark"?"sileo-theme-dark":"",{"sileo-is-dragging":p.value}]]),style:e.normalizeStyle(Y.value),onMousedown:L,onTouchstart:L},[e.createElementVNode("div",{class:e.normalizeClass(["sileo-combined-shape",{"is-expanded":o.value}])},[e.createElementVNode("div",$,[B.value!=="left"?(e.openBlock(),e.createElementBlock("div",M)):e.createCommentVNode("",!0),B.value!=="right"?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),e.createElementVNode("div",z,[typeof n.toast.icon!="string"&&n.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,class:"sileo-custom-icon"})):typeof n.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(n.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",j,[K.value?(e.openBlock(),e.createElementBlock("svg",I,[...r[2]||(r[2]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):n.toast.type==="success"?(e.openBlock(),e.createElementBlock("div",P,[...r[3]||(r[3]=[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)])])):n.toast.type==="error"?(e.openBlock(),e.createElementBlock("div",A,[...r[4]||(r[4]=[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)])])):n.toast.type==="warning"?(e.openBlock(),e.createElementBlock("div",R,[...r[5]||(r[5]=[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",W,[...r[6]||(r[6]=[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)])]))]))]),a.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${n.toast.type||"default"}`])},e.toDisplayString(a.value),3)):e.createCommentVNode("",!0),n.toast.closeOnClick?(e.openBlock(),e.createElementBlock("button",{key:3,class:"sileo-close-btn",onClick:r[0]||(r[0]=e.withModifiers(N=>c.$emit("close"),["stop"]))},[...r[7]||(r[7]=[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)]),l.value?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",q,[e.createElementVNode("div",G,[e.createElementVNode("div",{class:"sileo-body-content",style:e.normalizeStyle({flexDirection:((b=n.toast.action)==null?void 0:b.position)==="left"?"row-reverse":"row"})},[i.value?(e.openBlock(),e.createElementBlock("p",U,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),n.toast.action?(e.openBlock(),e.createElementBlock("button",{key:1,class:"sileo-action-trigger",style:e.normalizeStyle({background:n.toast.action.color}),onClick:r[1]||(r[1]=e.withModifiers(N=>n.toast.action.onClick(n.toast.id),["stop"]))},e.toDisplayString(n.toast.action.label),5)):e.createCommentVNode("",!0)],4)])])])):e.createCommentVNode("",!0)],2)],38)}}}),H={class:"sileo-root-wrapper"},C=e.defineComponent({__name:"ToastContainer",setup(n){const{toasts:y,removeToast:s,destroyToast:d}=V(),u=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],p=t=>y.filter(o=>o.position===t),h=t=>{const o=t.startsWith("top"),a=t.endsWith("left"),i=t.endsWith("center");return{position:"absolute",top:o?"0":"auto",bottom:o?"auto":"0",left:a?"0":i?"50%":"auto",right:!a&&!i?"0":"auto",transform:i?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:a?"flex-start":i?"center":"flex-end",flexDirection:o?"column":"column-reverse"}};return(t,o)=>(e.openBlock(),e.createElementBlock("div",H,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,a=>e.createElementVNode("div",{key:a,class:e.normalizeClass(["sileo-position-container",[`sileo-pos-${a}`]]),style:e.normalizeStyle(h(a))},[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(p(a),i=>(e.openBlock(),e.createBlock(T,{key:i.id,toast:i,onClose:l=>e.unref(s)(i.id),onDestroy:l=>e.unref(d)(i.id)},null,8,["toast","onClose","onDestroy"]))),128))]),_:2},1024)],6)),64))]))}}),J={install(n,y={}){if(Object.keys(y).length>0&&x.toast.config(y),typeof document<"u"){const s="sileo-toast-container";let d=document.getElementById(s);d||(d=document.createElement("div"),d.id=s,document.body.appendChild(d),e.createApp({render:()=>e.h(C)}).mount(d))}n.config.globalProperties.$toast=x.toast,n.provide("toast",x.toast)}};m.SileoPlugin=J,m.Toast=T,m.ToastContainer=C,m.toast=D,m.toastManager=x,m.useToast=V,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.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 .5s cubic-bezier(.34,1.56,.64,1)!important}.sileo-toast-outer{--sileo-bg: #ffffff;--sileo-text-primary: #000000;--sileo-text-secondary: rgba(0, 0, 0, .65);--sileo-border: rgba(0, 0, 0, .08);--sileo-btn-bg: #1c1c1e;--sileo-btn-text: #ffffff;--sileo-timer-bg: rgba(0, 0, 0, .1);--sileo-close-color: rgba(0, 0, 0, .3);--sileo-close-hover: rgba(0, 0, 0, .7);position:relative!important;width:400px!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}@media (prefers-color-scheme: dark){.sileo-toast-outer:not(.sileo-theme-light){--sileo-bg: #1c1c1e;--sileo-text-primary: #ffffff;--sileo-text-secondary: rgba(255, 255, 255, .65);--sileo-border: rgba(255, 255, 255, .15);--sileo-btn-bg: #ffffff;--sileo-btn-text: #000000;--sileo-timer-bg: rgba(255, 255, 255, .15);--sileo-close-color: rgba(255, 255, 255, .3);--sileo-close-hover: rgba(255, 255, 255, .7)}}.sileo-toast-outer.sileo-theme-dark{--sileo-bg: #1c1c1e;--sileo-text-primary: #ffffff;--sileo-text-secondary: rgba(255, 255, 255, .65);--sileo-border: rgba(255, 255, 255, .15);--sileo-btn-bg: #ffffff;--sileo-btn-text: #000000;--sileo-timer-bg: rgba(255, 255, 255, .15);--sileo-close-color: rgba(255, 255, 255, .3);--sileo-close-hover: rgba(255, 255, 255, .7)}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 0 1px var(--sileo-border))!important}.sileo-header-pill{display:flex!important;align-items:center!important;gap:8px!important;background:var(--sileo-bg)!important;padding:8px 16px 8px 14px!important;height:40px!important;border-radius:24px!important;transition:border-radius .5s cubic-bezier(.34,1.56,.64,1)!important;color:var(--sileo-text-primary)!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;margin-left:0!important}.sileo-align-right .sileo-header-pill{align-self:flex-end!important;margin-right:0!important}.sileo-combined-shape.is-expanded .sileo-header-pill{border-radius:24px 24px 0 0!important}.sileo-sweep-left,.sileo-sweep-right{position:absolute!important;bottom:0!important;width:24px!important;height:24px!important;z-index:-1!important;background:var(--sileo-bg)!important;pointer-events:none!important;opacity:0!important;transform:scaleY(0)!important;transform-origin:top!important;transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)!important}.sileo-combined-shape.is-expanded .sileo-sweep-left,.sileo-combined-shape.is-expanded .sileo-sweep-right{opacity:1!important;transform:scaleY(1)!important}.sileo-sweep-left{left:-24px!important;clip-path:path("M24 0 C24 13.255 13.255 24 0 24 L24 24 Z")!important}.sileo-sweep-right{right:-24px!important;clip-path:path("M0 0 C0 13.255 10.745 24 24 24 L0 24 Z")!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;background:#8080801a!important}.bg-success{background:#32d74b26!important;color:#32d74b!important}.bg-error{background:#ff453a26!important;color:#ff453a!important}.bg-warning{background:#ffd60a26!important;color:#ffd60a!important}.bg-info{background:#0a84ff26!important;color:#0a84ff!important}.sileo-stroke-icon{width:13px!important;height:13px!important;stroke:currentColor!important;stroke-width:3!important}.sileo-title-text{font-size:14.5px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;letter-spacing:.2px!important}.text-success{color:#32d74b!important}.text-error{color:#ff453a!important}.text-warning{color:#ffd60a!important}.text-info{color:#0a84ff!important}.text-default{color:var(--sileo-text-primary)!important}.sileo-close-btn{background:none!important;border:none!important;padding:2px!important;cursor:pointer!important;color:var(--sileo-close-color)!important;display:flex!important;align-items:center!important;margin-left:2px!important;transition:color .2s!important}.sileo-close-btn svg{width:14px!important;height:14px!important;stroke:currentColor!important;stroke-width:2.5!important}.sileo-close-btn:hover{color:var(--sileo-close-hover)!important}.sileo-main-body-animator{display:grid!important;grid-template-rows:0fr!important;opacity:0!important;transition:grid-template-rows .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease!important}.sileo-combined-shape.is-expanded .sileo-main-body-animator{grid-template-rows:1fr!important;opacity:1!important}.sileo-main-wrapper{overflow:hidden!important}.sileo-main-body{background:var(--sileo-bg)!important;padding:18px 24px!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:15.5px!important;line-height:1.5!important;color:var(--sileo-text-secondary)!important;font-weight:400!important;letter-spacing:.1px!important}.sileo-action-trigger{background:var(--sileo-btn-bg)!important;color:var(--sileo-btn-text)!important;border:none!important;border-radius:14px!important;padding:10px 18px!important;font-size:13.5px!important;font-weight:600!important;cursor:pointer!important;white-space:nowrap!important;flex-shrink:0!important;transition:transform .2s,background .2s!important}.sileo-action-trigger:hover{transform:scale(1.03)!important}@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{transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)!important}.sileo-list-leave-active{transition:opacity .3s ease,transform .5s cubic-bezier(.4,0,1,1)!important}.sileo-list-enter-from{opacity:0!important;transform:translateY(var(--sileo-y-dir, -50px)) scale(.85)!important}.sileo-list-leave-to{opacity:0!important;transform:scale(.85)!important}
+.sileo-toast-outer{--sileo-bg: #ffffff;--sileo-text-primary: #000000;--sileo-text-secondary: rgba(0, 0, 0, .65);--sileo-border: rgba(0, 0, 0, .08);--sileo-btn-bg: #1c1c1e;--sileo-btn-text: #ffffff;--sileo-timer-bg: rgba(0, 0, 0, .1);--sileo-close-color: rgba(0, 0, 0, .3);--sileo-close-hover: rgba(0, 0, 0, .7);position:relative!important;width:400px!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}@media (prefers-color-scheme: dark){.sileo-toast-outer:not(.sileo-theme-light){--sileo-bg: #1c1c1e;--sileo-text-primary: #ffffff;--sileo-text-secondary: rgba(255, 255, 255, .65);--sileo-border: rgba(255, 255, 255, .15);--sileo-btn-bg: #ffffff;--sileo-btn-text: #000000;--sileo-timer-bg: rgba(255, 255, 255, .15);--sileo-close-color: rgba(255, 255, 255, .3);--sileo-close-hover: rgba(255, 255, 255, .7)}}.sileo-toast-outer.sileo-theme-dark{--sileo-bg: #1c1c1e;--sileo-text-primary: #ffffff;--sileo-text-secondary: rgba(255, 255, 255, .65);--sileo-border: rgba(255, 255, 255, .15);--sileo-btn-bg: #ffffff;--sileo-btn-text: #000000;--sileo-timer-bg: rgba(255, 255, 255, .15);--sileo-close-color: rgba(255, 255, 255, .3);--sileo-close-hover: rgba(255, 255, 255, .7)}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 0 1px var(--sileo-border))!important}.sileo-header-pill{display:flex!important;align-items:center!important;gap:8px!important;background:var(--sileo-bg)!important;padding:8px 16px 8px 14px!important;height:40px!important;border-radius:24px!important;transition:border-radius .5s cubic-bezier(.34,1.56,.64,1)!important;color:var(--sileo-text-primary)!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;margin-left:0!important}.sileo-align-right .sileo-header-pill{align-self:flex-end!important;margin-right:0!important}.sileo-combined-shape.is-expanded .sileo-header-pill{border-radius:24px 24px 0 0!important}.sileo-sweep-left,.sileo-sweep-right{position:absolute!important;bottom:0!important;width:24px!important;height:24px!important;z-index:-1!important;background:var(--sileo-bg)!important;pointer-events:none!important;opacity:0!important;transform:scaleY(0)!important;transform-origin:top!important;transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)!important}.sileo-combined-shape.is-expanded .sileo-sweep-left,.sileo-combined-shape.is-expanded .sileo-sweep-right{opacity:1!important;transform:scaleY(1)!important}.sileo-sweep-left{left:-24px!important;clip-path:path("M24 0 C24 13.255 13.255 24 0 24 L24 24 Z")!important}.sileo-sweep-right{right:-24px!important;clip-path:path("M0 0 C0 13.255 10.745 24 24 24 L0 24 Z")!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;background:#8080801a!important}.bg-success{background:#32d74b26!important;color:#32d74b!important}.bg-error{background:#ff453a26!important;color:#ff453a!important}.bg-warning{background:#ffd60a26!important;color:#ffd60a!important}.bg-info{background:#0a84ff26!important;color:#0a84ff!important}.sileo-stroke-icon{width:13px!important;height:13px!important;stroke:currentColor!important;stroke-width:3!important}.sileo-title-text{font-size:14.5px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;letter-spacing:.2px!important}.text-success{color:#32d74b!important}.text-error{color:#ff453a!important}.text-warning{color:#ffd60a!important}.text-info{color:#0a84ff!important}.text-default{color:var(--sileo-text-primary)!important}.sileo-close-btn{background:none!important;border:none!important;padding:2px!important;cursor:pointer!important;color:var(--sileo-close-color)!important;display:flex!important;align-items:center!important;margin-left:2px!important;transition:color .2s!important}.sileo-close-btn svg{width:14px!important;height:14px!important;stroke:currentColor!important;stroke-width:2.5!important}.sileo-close-btn:hover{color:var(--sileo-close-hover)!important}.sileo-main-body-animator{display:grid!important;grid-template-rows:0fr!important;opacity:0!important;transition:grid-template-rows .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease!important}.sileo-combined-shape.is-expanded .sileo-main-body-animator{grid-template-rows:1fr!important;opacity:1!important}.sileo-main-wrapper{overflow:hidden!important}.sileo-main-body{background:var(--sileo-bg)!important;padding:18px 24px!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:15.5px!important;line-height:1.5!important;color:var(--sileo-text-secondary)!important;font-weight:400!important;letter-spacing:.1px!important}.sileo-action-trigger{background:var(--sileo-btn-bg)!important;color:var(--sileo-btn-text)!important;border:none!important;border-radius:14px!important;padding:10px 18px!important;font-size:13.5px!important;font-weight:600!important;cursor:pointer!important;white-space:nowrap!important;flex-shrink:0!important;transition:transform .2s,background .2s!important}.sileo-action-trigger:hover{transform:scale(1.03)!important}@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{transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)!important}.sileo-list-leave-active{transition:opacity .3s ease,transform .5s cubic-bezier(.4,0,1,1)!important}.sileo-list-enter-from{opacity:0!important;transform:translateY(var(--sileo-y-dir, -50px)) scale(.85)!important}.sileo-list-leave-to{opacity:0!important;transform:scale(.85)!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 .5s cubic-bezier(.34,1.56,.64,1)!important}

package/dist/types/index.d.ts

@@ -3,6 +3,8 @@ export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-le
 export interface ToastAction {
     label: string;
     onClick: (id: string) => void;
+    color?: string;
+    position?: 'left' | 'right';
 }
 export interface Toast {
     id: string;

package/package.json

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