@edgar208/sileo-vue 1.6.3 → 1.7.1

package/dist/components/Toast.vue.d.ts

@@ -4,8 +4,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;
+    destroy: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
+    onDestroy?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/useToast.d.ts

@@ -22,6 +22,7 @@ export declare function useToast(): {
         } & GlobalConfig;
     };
     removeToast: (id: string) => void;
+    destroyToast: (id: string) => void;
     updateToast: (id: string, options: Partial<ToastOptions>) => void;
 };
 export declare const toastManager: {
@@ -47,5 +48,6 @@ export declare const toastManager: {
         } & GlobalConfig;
     };
     removeToast: (id: string) => void;
+    destroyToast: (id: string) => void;
     updateToast: (id: string, options: Partial<ToastOptions>) => void;
 };

package/dist/sileo-vue.js

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

package/dist/style.css

@@ -1 +1 @@
-.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-align-center .sileo-combined-shape.is-expanded .sileo-header-pill{border-radius:24px 24px 0 0!important}.sileo-align-left .sileo-combined-shape.is-expanded .sileo-header-pill{border-radius:24px 24px 24px 0!important}.sileo-align-right .sileo-combined-shape.is-expanded .sileo-header-pill{border-radius:24px 24px 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けると0.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}
+.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けると0.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}

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export interface Toast {
     swipeToDismiss?: boolean;
     theme?: 'light' | 'dark' | 'system';
     createdAt?: number;
+    closing?: boolean;
 }
 export interface ToastOptions extends Partial<Omit<Toast, 'id'>> {
 }

package/package.json

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