vue-sonner - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/state.d.ts

@@ -22,3 +22,3 @@ import type { Component } from 'vue';
     loading: (message: string | Component, data?: ExternalToast | undefined) => string | number;
-    promise: (promise: PromiseT, data?: PromiseData | undefined) => string | number;
+    promise: <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData> | undefined) => string | number | undefined;
     custom: (component: Component, data?: ExternalToast | undefined) => string | number;
@@ -34,3 +34,3 @@ }
     message: (message: string | Component, data?: ExternalToast | undefined) => string | number;
-    promise: (promise: PromiseT, data?: PromiseData | undefined) => string | number;
+    promise: <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData> | undefined) => string | number | undefined;
     dismiss: (id?: string | number | undefined) => string | number | undefined;
@@ -37,0 +37,0 @@ loading: (message: string | Component, data?: ExternalToast | undefined) => string | number;

lib/types.d.ts

 import { Component, CSSProperties } from 'vue';
 export declare type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading';
 export declare type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
-export declare type PromiseData = ExternalToast & {
-    loading: string | Component;
-    success: (data: any) => Component | string;
-    error: (error: any) => Component | string;
+export declare type PromiseData<ToastData = any> = ExternalToast & {
+    loading?: string | Component;
+    success?: (data: ToastData) => string | Component;
+    error?: (data: ToastData) => string | Component;
+    finally?: () => void | Promise<void>;
 };
@@ -9,0 +10,0 @@ export interface ToastT {

lib/vue-sonner.js

@@ -1,61 +0,77 @@
-var pe = Object.defineProperty;
-var me = (s, t, e) => t in s ? pe(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var h = (s, t, e) => (me(s, typeof t != "symbol" ? t + "" : t, e), e);
+var me = Object.defineProperty;
+var pe = (s, t, e) => t in s ? me(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var g = (s, t, e) => (pe(s, typeof t != "symbol" ? t + "" : t, e), e);
 import "./index.css";
-import { defineComponent as ee, openBlock as l, createElementBlock as f, createElementVNode as $, Fragment as W, renderList as ae, unref as R, ref as d, computed as m, onMounted as X, watchEffect as D, onUnmounted as re, normalizeClass as se, normalizeStyle as Z, createVNode as ge, createCommentVNode as E, createBlock as M, createTextVNode as oe, toDisplayString as L, resolveDynamicComponent as ye, useAttrs as be, watch as we } from "vue";
-let O = 1;
+import { defineComponent as ee, openBlock as l, createElementBlock as h, createElementVNode as $, Fragment as K, renderList as ae, unref as D, ref as f, computed as w, onMounted as Q, watchEffect as A, onUnmounted as re, normalizeClass as se, normalizeStyle as X, createVNode as ge, createCommentVNode as E, createBlock as S, createTextVNode as oe, toDisplayString as H, resolveDynamicComponent as ye, useAttrs as we, watch as be } from "vue";
+let Z = 1;
 class Te {
   constructor() {
-    h(this, "subscribers");
-    h(this, "toasts");
+    g(this, "subscribers");
+    g(this, "toasts");
     // We use arrow functions to maintain the correct `this` reference
-    h(this, "subscribe", (t) => (this.subscribers.push(t), () => {
+    g(this, "subscribe", (t) => (this.subscribers.push(t), () => {
       const e = this.subscribers.indexOf(t);
       this.subscribers.splice(e, 1);
     }));
-    h(this, "publish", (t) => {
+    g(this, "publish", (t) => {
       this.subscribers.forEach((e) => e(t)), this.toasts = [...this.toasts, t];
     });
-    h(this, "addToast", (t) => {
+    g(this, "addToast", (t) => {
       this.publish(t), this.toasts = [...this.toasts, t];
     });
-    h(this, "create", (t) => {
-      var y;
-      const { message: e, ...o } = t, v = typeof (t == null ? void 0 : t.id) == "number" || ((y = t.id) == null ? void 0 : y.length) > 0 ? t.id : O++, g = this.toasts.find((c) => c.id === v), w = t.dismissible === void 0 ? !0 : t.dismissible;
-      return g ? this.toasts = this.toasts.map((c) => c.id === v ? (this.publish({ ...c, ...t, id: v, title: e }), {
+    g(this, "create", (t) => {
+      var p;
+      const { message: e, ...n } = t, d = typeof (t == null ? void 0 : t.id) == "number" || ((p = t.id) == null ? void 0 : p.length) > 0 ? t.id : Z++, m = this.toasts.find((c) => c.id === d), v = t.dismissible === void 0 ? !0 : t.dismissible;
+      return m ? this.toasts = this.toasts.map((c) => c.id === d ? (this.publish({ ...c, ...t, id: d, title: e }), {
         ...c,
         ...t,
-        id: v,
-        dismissible: w,
+        id: d,
+        dismissible: v,
         title: e
-      }) : c) : this.addToast({ title: e, ...o, dismissible: w, id: v }), v;
+      }) : c) : this.addToast({ title: e, ...n, dismissible: v, id: d }), d;
     });
-    h(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
+    g(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
       this.subscribers.forEach(
-        (o) => o({ id: e.id, dismiss: !0 })
+        (n) => n({ id: e.id, dismiss: !0 })
       );
     }), this.subscribers.forEach((e) => e({ id: t, dismiss: !0 })), t));
-    h(this, "message", (t, e) => {
-      const o = (e == null ? void 0 : e.id) || O++;
-      return this.publish({ ...e, id: o, title: t }), o;
+    g(this, "message", (t, e) => this.create({ ...e, message: t }));
+    g(this, "error", (t, e) => this.create({ ...e, type: "error", message: t }));
+    g(this, "success", (t, e) => this.create({ ...e, type: "success", message: t }));
+    g(this, "info", (t, e) => this.create({ ...e, type: "info", message: t }));
+    g(this, "warning", (t, e) => this.create({ ...e, type: "warning", message: t }));
+    g(this, "loading", (t, e) => this.create({ ...e, type: "loading", message: t }));
+    g(this, "promise", (t, e) => {
+      if (!e)
+        return;
+      let n;
+      e.loading !== void 0 && (n = this.create({
+        ...e,
+        promise: t,
+        type: "loading",
+        message: e.loading
+      }));
+      const d = t instanceof Promise ? t : t();
+      let m = n !== void 0;
+      return d.then((v) => {
+        if (e.success !== void 0) {
+          m = !1;
+          const p = typeof e.success == "function" ? e.success(v) : e.success;
+          this.create({ id: n, type: "success", message: p });
+        }
+      }).catch((v) => {
+        if (e.error !== void 0) {
+          m = !1;
+          const p = typeof e.error == "function" ? e.error(v) : e.error;
+          this.create({ id: n, type: "error", message: p });
+        }
+      }).finally(() => {
+        var v;
+        m && (this.dismiss(n), n = void 0), (v = e.finally) == null || v.call(e);
+      }), n;
     });
-    h(this, "error", (t, e) => {
-      const o = (e == null ? void 0 : e.id) || O++;
-      return this.publish({ ...e, id: o, type: "error", title: t }), o;
-    });
-    h(this, "success", (t, e) => {
-      const o = (e == null ? void 0 : e.id) || O++;
-      return this.publish({ ...e, id: o, type: "success", title: t }), o;
-    });
-    h(this, "info", (t, e) => this.create({ ...e, type: "info", message: t }));
-    h(this, "warning", (t, e) => this.create({ ...e, type: "warning", message: t }));
-    h(this, "loading", (t, e) => this.create({ ...e, type: "loading", message: t }));
-    h(this, "promise", (t, e) => {
-      const o = (e == null ? void 0 : e.id) || O++;
-      return this.publish({ ...e, promise: t, id: o }), o;
-    });
     // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
-    h(this, "custom", (t, e) => {
-      const o = (e == null ? void 0 : e.id) || O++;
-      return this.publish({ ...e, id: o, title: t }), o;
+    g(this, "custom", (t, e) => {
+      const n = (e == null ? void 0 : e.id) || Z++;
+      return this.publish({ ...e, id: n, title: t }), n;
     });
@@ -66,3 +82,3 @@ this.subscribers = [], this.toasts = [];
 const T = new Te(), xe = (s, t) => {
-  const e = (t == null ? void 0 : t.id) || O++;
+  const e = (t == null ? void 0 : t.id) || Z++;
   return T.publish({
@@ -90,3 +106,3 @@ title: s,
     const t = Array(12).fill(0);
-    return (e, o) => (l(), f("div", {
+    return (e, n) => (l(), h("div", {
       className: "sonner-loading-wrapper",
@@ -96,4 +112,4 @@ "data-visible": s.visible
       $("div", Be, [
-        (l(!0), f(W, null, ae(R(t), (v) => (l(), f("div", {
-          key: `spinner-bar-${v}`,
+        (l(!0), h(K, null, ae(D(t), (d) => (l(), h("div", {
+          key: `spinner-bar-${d}`,
           className: "sonner-loading-bar"
@@ -104,6 +120,6 @@ }))), 128))
   }
-}), V = (s, t) => {
+}), L = (s, t) => {
   const e = s.__vccOpts || s;
-  for (const [o, v] of t)
-    e[o] = v;
+  for (const [n, d] of t)
+    e[n] = d;
   return e;
@@ -123,6 +139,6 @@ }, _e = {}, Ee = {
 ];
-function Se(s, t) {
-  return l(), f("svg", Ee, Ne);
+function Pe(s, t) {
+  return l(), h("svg", Ee, Ne);
 }
-const Me = /* @__PURE__ */ V(_e, [["render", Se]]), Oe = {}, Pe = {
+const Se = /* @__PURE__ */ L(_e, [["render", Pe]]), Me = {}, Oe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -141,5 +157,5 @@ viewBox: "0 0 20 20",
 function Re(s, t) {
-  return l(), f("svg", Pe, De);
+  return l(), h("svg", Oe, De);
 }
-const ze = /* @__PURE__ */ V(Oe, [["render", Re]]), qe = {}, He = {
+const ze = /* @__PURE__ */ L(Me, [["render", Re]]), qe = {}, He = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -158,5 +174,5 @@ viewBox: "0 0 24 24",
 function Fe(s, t) {
-  return l(), f("svg", He, Ve);
+  return l(), h("svg", He, Ve);
 }
-const Ue = /* @__PURE__ */ V(qe, [["render", Fe]]), je = {}, Ke = {
+const Ue = /* @__PURE__ */ L(qe, [["render", Fe]]), je = {}, Ke = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -175,5 +191,5 @@ viewBox: "0 0 20 20",
 function Ge(s, t) {
-  return l(), f("svg", Ke, Ye);
+  return l(), h("svg", Ke, Ye);
 }
-const Je = /* @__PURE__ */ V(je, [["render", Ge]]), Qe = {}, Xe = {
+const Je = /* @__PURE__ */ L(je, [["render", Ge]]), Qe = {}, Xe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -203,8 +219,8 @@ width: "12",
 function st(s, t) {
-  return l(), f("svg", Xe, tt);
+  return l(), h("svg", Xe, tt);
 }
-const ot = /* @__PURE__ */ V(Qe, [["render", st]]), it = ["aria-live", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-type", "data-invert", "data-swipe-out", "data-expanded"], nt = ["data-disabled"], at = {
+const ot = /* @__PURE__ */ L(Qe, [["render", st]]), it = ["aria-live", "data-styled", "data-mounted", "data-promise", "data-removed", "data-visible", "data-y-position", "data-x-position", "data-index", "data-front", "data-swiping", "data-type", "data-invert", "data-swipe-out", "data-expanded"], nt = ["data-disabled"], at = {
   key: 1,
   "data-icon": ""
-}, rt = { "data-content": "" }, lt = { "data-title": "" }, ut = 4e3, ct = 14, dt = 20, vt = 200, ft = /* @__PURE__ */ ee({
+}, rt = { "data-content": "" }, lt = { "data-title": "" }, ut = 4e3, ct = 14, dt = 20, ft = 200, vt = /* @__PURE__ */ ee({
   __name: "Toast",
@@ -267,10 +283,10 @@ props: {
   setup(s, { emit: t }) {
-    const e = s, o = (n) => !!n.promise, v = d(!1), g = d(!1), w = d(!1), y = d(!1), c = d(null), B = d(0), F = d(0), P = d(null), x = d(null), i = m(() => e.index === 0), r = m(() => e.index + 1 <= e.visibleToasts), p = m(() => e.toast.type), C = m(() => e.toast.dismissible), A = e.toast.className || "", I = e.toast.descriptionClassName || "", N = e.toast.style || {}, z = m(
-      () => e.heights.findIndex((n) => n.toastId === e.toast.id) || 0
-    ), U = m(
+    const e = s, n = (i) => !!i.promise, d = f(!1), m = f(!1), v = f(!1), p = f(!1), c = f(null), B = f(0), V = f(0), M = f(null), x = f(null), o = w(() => e.index === 0), r = w(() => e.index + 1 <= e.visibleToasts), y = w(() => e.toast.type), C = w(() => e.toast.dismissible), O = e.toast.className || "", I = e.toast.descriptionClassName || "", N = e.toast.style || {}, R = w(
+      () => e.heights.findIndex((i) => i.toastId === e.toast.id) || 0
+    ), F = w(
       () => e.toast.duration || e.duration || ut
-    ), q = d(0), H = d(0), Y = d(U.value), te = d(0), j = d(null), G = m(() => e.position.split("-")), le = m(() => e.heights.reduce((n, a, u) => u >= z.value ? n : n + a.height, 0)), ue = m(() => e.toast.invert || e.invert), J = m(() => c.value === "loading"), K = m(
+    ), z = f(0), q = f(0), W = f(F.value), te = f(0), U = f(null), Y = w(() => e.position.split("-")), le = w(() => e.heights.reduce((i, a, u) => u >= R.value ? i : i + a.height, 0)), ue = w(() => e.toast.invert || e.invert), G = w(() => c.value === "loading"), j = w(
       () => c.value ?? (e.toast.type || null)
-    ), Q = m(() => !o(e.toast) && typeof e.toast.title == "object"), ce = m(() => {
-      if (!o(e.toast))
+    ), J = w(() => !n(e.toast) && typeof e.toast.title == "object"), ce = w(() => {
+      if (!n(e.toast))
         return null;
@@ -281,5 +297,5 @@ switch (c.value) {
         case "success":
-          return typeof e.toast.success == "function" ? P.value : e.toast.success;
+          return typeof e.toast.success == "function" ? M.value : e.toast.success;
         case "error":
-          return typeof e.toast.error == "function" ? P.value : e.toast.error;
+          return typeof e.toast.error == "function" ? M.value : e.toast.error;
         default:
@@ -289,7 +305,7 @@ return null;
     });
-    X(() => v.value = !0), D(() => {
-      H.value = z.value * ct + le.value;
-    }), D(() => {
-      var n, a;
-      if (e.toast && o(e.toast)) {
+    Q(() => d.value = !0), A(() => {
+      q.value = R.value * ct + le.value;
+    }), A(() => {
+      var i, a;
+      if (e.toast && n(e.toast)) {
         const u = e.toast;
@@ -299,28 +315,28 @@ c.value = "loading";
           b.then((_) => {
-            u.success && typeof u.success == "function" && (P.value = u.success(_)), c.value = "success";
+            u.success && typeof u.success == "function" && (M.value = u.success(_)), c.value = "success";
           }).catch((_) => {
-            u.error && typeof u.error == "function" && (P.value = u.error(_)), c.value = "error";
+            u.error && typeof u.error == "function" && (M.value = u.error(_)), c.value = "error";
           });
         };
-        e.toast.promise instanceof Promise ? k(e.toast.promise) : typeof e.toast.promise == "function" && k((a = (n = e.toast) == null ? void 0 : n.promise) == null ? void 0 : a.call(n));
+        e.toast.promise instanceof Promise ? k(e.toast.promise) : typeof e.toast.promise == "function" && k((a = (i = e.toast) == null ? void 0 : i.promise) == null ? void 0 : a.call(i));
       }
     });
     function de() {
-      var n, a;
-      (!J.value || C.value) && (S(), (a = (n = e.toast).onDismiss) == null || a.call(n, e.toast));
+      var i, a;
+      (!G.value || C.value) && (P(), (a = (i = e.toast).onDismiss) == null || a.call(i, e.toast));
     }
-    function S() {
-      g.value = !0, B.value = H.value;
-      const n = e.heights.filter(
+    function P() {
+      m.value = !0, B.value = q.value;
+      const i = e.heights.filter(
         (a) => a.toastId !== e.toast.id
       );
-      t("update:heights", n), setTimeout(() => {
+      t("update:heights", i), setTimeout(() => {
         t("removeToast", e.toast);
-      }, vt);
+      }, ft);
     }
-    const ve = (n) => {
-      J || (B.value = H.value, n.target.setPointerCapture(n.pointerId), n.target.tagName !== "BUTTON" && (w.value = !0, j.value = n.clientY));
-    }, fe = (n) => {
+    const fe = (i) => {
+      G || (B.value = q.value, i.target.setPointerCapture(i.pointerId), i.target.tagName !== "BUTTON" && (v.value = !0, U.value = i.clientY));
+    }, ve = (i) => {
       var u, k, b, _;
-      if (y.value)
+      if (p.value)
         return;
@@ -331,12 +347,12 @@ const a = Number(
       if (Math.abs(a) >= dt) {
-        B.value = H.value, (b = (k = e.toast).onDismiss) == null || b.call(k, e.toast), S(), y.value = !0;
+        B.value = q.value, (b = (k = e.toast).onDismiss) == null || b.call(k, e.toast), P(), p.value = !0;
         return;
       }
-      (_ = x.value) == null || _.style.setProperty("--swipe-amount", "0px"), j.value = null, w.value = !0;
-    }, he = (n) => {
+      (_ = x.value) == null || _.style.setProperty("--swipe-amount", "0px"), U.value = null, v.value = !0;
+    }, he = (i) => {
       var k, b;
-      if (!j.value)
+      if (!U.value)
         return;
-      const a = n.clientY - j.value;
-      if (!(G.value[0] === "top" ? a < 0 : a > 0)) {
+      const a = i.clientY - U.value;
+      if (!(Y.value[0] === "top" ? a < 0 : a > 0)) {
         (k = x.value) == null || k.style.setProperty("--swipe-amount", "0px");
@@ -347,3 +363,3 @@ return;
     };
-    return D((n) => {
+    return A((i) => {
       if (e.toast.promise && c.value === "loading" || e.toast.duration === 1 / 0)
@@ -353,21 +369,21 @@ return;
       const u = () => {
-        if (te.value < q.value) {
-          const b = (/* @__PURE__ */ new Date()).getTime() - q.value;
-          Y.value = Y.value - b;
+        if (te.value < z.value) {
+          const b = (/* @__PURE__ */ new Date()).getTime() - z.value;
+          W.value = W.value - b;
         }
         te.value = (/* @__PURE__ */ new Date()).getTime();
       }, k = () => {
-        q.value = (/* @__PURE__ */ new Date()).getTime(), a = setTimeout(() => {
+        z.value = (/* @__PURE__ */ new Date()).getTime(), a = setTimeout(() => {
           var b, _;
-          (_ = (b = e.toast).onAutoClose) == null || _.call(b, e.toast), S();
-        }, Y.value);
+          (_ = (b = e.toast).onAutoClose) == null || _.call(b, e.toast), P();
+        }, W.value);
       };
-      e.expanded || e.interacting ? u() : k(), n(() => {
+      e.expanded || e.interacting ? u() : k(), i(() => {
         clearTimeout(a);
       });
-    }), X(() => {
+    }), Q(() => {
       if (x.value) {
-        const n = x.value.getBoundingClientRect().height;
-        F.value = n;
-        const a = [{ toastId: e.toast.id, height: n }, ...e.heights];
+        const i = x.value.getBoundingClientRect().height;
+        V.value = i;
+        const a = [{ toastId: e.toast.id, height: i }, ...e.heights];
         t("update:heights", a);
@@ -377,10 +393,10 @@ }
       if (x.value) {
-        const n = e.heights.filter(
+        const i = e.heights.filter(
           (a) => a.toastId !== e.toast.id
         );
-        t("update:heights", n);
+        t("update:heights", i);
       }
-    }), D(() => {
-      e.toast.delete && S();
-    }), (n, a) => (l(), f("li", {
+    }), A(() => {
+      e.toast.delete && P();
+    }), (i, a) => (l(), h("li", {
       "aria-live": s.toast.important ? "assertive" : "polite",
@@ -393,34 +409,34 @@ "aria-atomic": "",
       "data-sonner-toast": "",
-      class: se(R(A)),
-      "data-styled": !Q.value,
-      "data-mounted": v.value,
+      class: se(D(O)),
+      "data-styled": !J.value,
+      "data-mounted": d.value,
       "data-promise": !!s.toast.promise,
-      "data-removed": g.value,
+      "data-removed": m.value,
       "data-visible": r.value,
-      "data-y-position": G.value[0],
-      "data-x-position": G.value[1],
+      "data-y-position": Y.value[0],
+      "data-x-position": Y.value[1],
       "data-index": e.index,
-      "data-front": i.value,
-      "data-swiping": w.value,
-      "data-type": c.value !== "loading" && c.value ? c.value : p.value,
+      "data-front": o.value,
+      "data-swiping": v.value,
+      "data-type": c.value !== "loading" && c.value ? c.value : y.value,
       "data-invert": ue.value,
-      "data-swipe-out": y.value,
-      "data-expanded": !!(e.expanded || e.expandByDefault && v.value),
-      style: Z({
+      "data-swipe-out": p.value,
+      "data-expanded": !!(e.expanded || e.expandByDefault && d.value),
+      style: X({
         "--index": e.index,
         "--toasts-before": e.index,
         "--z-index": s.toasts.length - e.index,
-        "--offset": `${g.value ? B.value : H.value}px`,
-        "--initial-height": e.expandByDefault ? "auto" : `${F.value}px`,
-        ...R(N)
+        "--offset": `${m.value ? B.value : q.value}px`,
+        "--initial-height": e.expandByDefault ? "auto" : `${V.value}px`,
+        ...D(N)
       }),
-      onPointerdown: ve,
-      onPointerup: fe,
+      onPointerdown: fe,
+      onPointerup: ve,
       onPointermove: he
     }, [
-      e.closeButton && !Q.value ? (l(), f("button", {
+      e.closeButton && !J.value ? (l(), h("button", {
         key: 0,
         "aria-label": "Close toast",
         "data-close-button": "",
-        "data-disabled": J.value,
+        "data-disabled": G.value,
         onClick: de
@@ -430,30 +446,30 @@ }, [
       ], 8, nt)) : E("", !0),
-      p.value || s.toast.icon || s.toast.promise ? (l(), f("div", at, [
-        typeof s.toast.promise == "function" || p.value === "loading" ? (l(), M(Ce, {
+      y.value || s.toast.icon || s.toast.promise ? (l(), h("div", at, [
+        typeof s.toast.promise == "function" || y.value === "loading" ? (l(), S(Ce, {
           key: 0,
-          visible: c.value === "loading" || p.value === "loading"
+          visible: c.value === "loading" || y.value === "loading"
         }, null, 8, ["visible"])) : E("", !0),
-        K.value === "success" ? (l(), M(Me, { key: 1 })) : K.value === "info" ? (l(), M(ze, { key: 2 })) : K.value === "warning" ? (l(), M(Ue, { key: 3 })) : K.value === "error" ? (l(), M(Je, { key: 4 })) : E("", !0)
+        j.value === "success" ? (l(), S(Se, { key: 1 })) : j.value === "info" ? (l(), S(ze, { key: 2 })) : j.value === "warning" ? (l(), S(Ue, { key: 3 })) : j.value === "error" ? (l(), S(Je, { key: 4 })) : E("", !0)
       ])) : E("", !0),
       $("div", rt, [
         $("div", lt, [
-          typeof s.toast.title == "string" ? (l(), f(W, { key: 0 }, [
-            oe(L(s.toast.title), 1)
-          ], 64)) : s.toast.title === void 0 || s.toast.title === null ? (l(), f(W, { key: 1 }, [
-            oe(L(ce.value), 1)
-          ], 64)) : Q.value ? (l(), M(ye(s.toast.title), {
+          typeof s.toast.title == "string" ? (l(), h(K, { key: 0 }, [
+            oe(H(s.toast.title), 1)
+          ], 64)) : s.toast.title === void 0 || s.toast.title === null ? (l(), h(K, { key: 1 }, [
+            oe(H(ce.value), 1)
+          ], 64)) : J.value ? (l(), S(ye(s.toast.title), {
             key: 2,
             onCloseToast: a[0] || (a[0] = () => {
               var u;
-              S(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
+              P(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
             })
           }, null, 32)) : E("", !0)
         ]),
-        s.toast.description ? (l(), f("div", {
+        s.toast.description ? (l(), h("div", {
           key: 0,
           "data-description": "",
-          class: se(s.descriptionClass + R(I))
-        }, L(s.toast.description), 3)) : E("", !0)
+          class: se(s.descriptionClass + D(I))
+        }, H(s.toast.description), 3)) : E("", !0)
       ]),
-      s.toast.cancel ? (l(), f("button", {
+      s.toast.cancel ? (l(), h("button", {
         key: 2,
@@ -464,6 +480,6 @@ "data-button": "",
           var u;
-          S(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
+          P(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
         })
-      }, L(s.toast.cancel.label), 1)) : E("", !0),
-      s.toast.action ? (l(), f("button", {
+      }, H(s.toast.cancel.label), 1)) : E("", !0),
+      s.toast.action ? (l(), h("button", {
         key: 3,
@@ -473,9 +489,9 @@ "data-button": "",
           var u;
-          S(), (u = s.toast.action) == null || u.onClick();
+          P(), (u = s.toast.action) == null || u.onClick();
         })
-      }, L(s.toast.action.label), 1)) : E("", !0)
+      }, H(s.toast.action.label), 1)) : E("", !0)
     ], 46, it));
   }
 });
-const ht = ["aria-label"], pt = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], mt = 3, ie = "32px", gt = 4e3, yt = 356, ne = 14, bt = /* @__PURE__ */ ee({
+const ht = ["aria-label"], mt = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], pt = 3, ie = "32px", gt = 4e3, yt = 356, ne = 14, wt = /* @__PURE__ */ ee({
   name: "Toaster",
@@ -493,3 +509,3 @@ inheritAttrs: !1,
     gap: { default: ne },
-    visibleToasts: { default: mt },
+    visibleToasts: { default: pt },
     closeButton: { type: Boolean, default: !1 },
@@ -503,7 +519,7 @@ toastOptions: { default: () => ({}) },
   setup(s) {
-    const t = s, e = be(), o = d([]), v = d([]), g = d(!1), w = d(!1), y = d(
+    const t = s, e = we(), n = f([]), d = f([]), m = f(!1), v = f(!1), p = f(
       t.theme !== "system" ? t.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-    ), c = m(() => t.position.split("-")), B = d(null), F = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    function P(i) {
-      o.value = o.value.filter(({ id: r }) => r !== i.id);
+    ), c = w(() => t.position.split("-")), B = f(null), V = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function M(o) {
+      n.value = n.value.filter(({ id: r }) => r !== o.id);
     }
@@ -513,45 +529,45 @@ function x() {
         return "ltr";
-      const i = document.documentElement.getAttribute("dir");
-      return i === "auto" || !i ? window.getComputedStyle(document.documentElement).direction : i;
+      const o = document.documentElement.getAttribute("dir");
+      return o === "auto" || !o ? window.getComputedStyle(document.documentElement).direction : o;
     }
-    return X(() => {
-      const i = T.subscribe((r) => {
+    return Q(() => {
+      const o = T.subscribe((r) => {
         if (r.dismiss) {
-          o.value = o.value.map(
-            (p) => p.id === r.id ? { ...p, delete: !0 } : p
+          n.value = n.value.map(
+            (y) => y.id === r.id ? { ...y, delete: !0 } : y
           );
           return;
         }
-        o.value = [r, ...o.value];
+        n.value = [r, ...n.value];
       });
       re(() => {
-        i();
+        o();
       });
-    }), we(
+    }), be(
       () => t.theme,
-      (i) => {
-        if (i !== "system") {
-          y.value = i;
+      (o) => {
+        if (o !== "system") {
+          p.value = o;
           return;
         }
-        i === "system" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? y.value = "dark" : y.value = "light"), !(typeof window > "u") && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: r }) => {
-          r ? y.value = "dark" : y.value = "light";
+        o === "system" && (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? p.value = "dark" : p.value = "light"), !(typeof window > "u") && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: r }) => {
+          r ? p.value = "dark" : p.value = "light";
         });
       }
-    ), D(() => {
-      o.value.length <= 1 && (g.value = !1);
-    }), D((i) => {
-      function r(p) {
-        var A, I;
+    ), A(() => {
+      n.value.length <= 1 && (m.value = !1);
+    }), A((o) => {
+      function r(y) {
+        var O, I;
         t.hotkey.every(
-          (N) => p[N] || p.code === N
-        ) && (g.value = !0, (A = B.value) == null || A.focus()), p.code === "Escape" && (document.activeElement === B.value || (I = B.value) != null && I.contains(document.activeElement)) && (g.value = !1);
+          (N) => y[N] || y.code === N
+        ) && (m.value = !0, (O = B.value) == null || O.focus()), y.code === "Escape" && (document.activeElement === B.value || (I = B.value) != null && I.contains(document.activeElement)) && (m.value = !1);
       }
-      document.addEventListener("keydown", r), i(() => {
+      document.addEventListener("keydown", r), o(() => {
         document.removeEventListener("keydown", r);
       });
-    }), (i, r) => {
-      var p;
-      return l(), f("section", {
-        "aria-label": `Notifications ${R(F)}`,
+    }), (o, r) => {
+      var y;
+      return l(), h("section", {
+        "aria-label": `Notifications ${D(V)}`,
         tabIndex: -1
@@ -563,50 +579,50 @@ }, [
           "data-sonner-toaster": "",
-          dir: i.dir === "auto" ? x() : i.dir,
+          dir: o.dir === "auto" ? x() : o.dir,
           tabIndex: -1,
-          "data-theme": i.theme,
-          "data-rich-colors": i.richColors,
+          "data-theme": o.theme,
+          "data-rich-colors": o.richColors,
           "data-y-position": c.value[0],
           "data-x-position": c.value[1],
-          style: Z(
+          style: X(
             {
-              "--front-toast-height": `${(p = v.value[0]) == null ? void 0 : p.height}px`,
-              "--offset": typeof i.offset == "number" ? `${i.offset}px` : i.offset || ie,
+              "--front-toast-height": `${(y = d.value[0]) == null ? void 0 : y.height}px`,
+              "--offset": typeof o.offset == "number" ? `${o.offset}px` : o.offset || ie,
               "--width": `${yt}px`,
               "--gap": `${ne}px`,
-              ...R(e).style
+              ...D(e).style
             }
           ),
-          onMouseenter: r[1] || (r[1] = (C) => g.value = !0),
-          onMousemove: r[2] || (r[2] = (C) => g.value = !0),
+          onMouseenter: r[1] || (r[1] = (C) => m.value = !0),
+          onMousemove: r[2] || (r[2] = (C) => m.value = !0),
           onMouseleave: r[3] || (r[3] = () => {
-            w.value || (g.value = !1);
+            v.value || (m.value = !1);
           }),
-          onPointerdown: r[4] || (r[4] = (C) => w.value = !1),
-          onPointerup: r[5] || (r[5] = (C) => w.value = !1)
+          onPointerdown: r[4] || (r[4] = (C) => v.value = !1),
+          onPointerup: r[5] || (r[5] = (C) => v.value = !1)
         }, [
-          (l(!0), f(W, null, ae(o.value, (C, A) => {
-            var I, N, z, U;
-            return l(), M(ft, {
+          (l(!0), h(K, null, ae(n.value, (C, O) => {
+            var I, N, R, F;
+            return l(), S(vt, {
               key: C.id,
-              index: A,
+              index: O,
               toast: C,
-              duration: ((I = i.toastOptions) == null ? void 0 : I.duration) ?? i.duration,
-              className: (N = i.toastOptions) == null ? void 0 : N.className,
-              descriptionClassName: (z = i.toastOptions) == null ? void 0 : z.descriptionClassName,
-              invert: i.invert,
-              visibleToasts: i.visibleToasts,
-              closeButton: i.closeButton,
-              interacting: w.value,
-              position: i.position,
-              style: Z((U = i.toastOptions) == null ? void 0 : U.style),
-              toasts: o.value,
-              expandByDefault: i.expand,
-              gap: i.gap,
-              expanded: g.value,
-              heights: v.value,
-              "onUpdate:heights": r[0] || (r[0] = (q) => v.value = q),
-              onRemoveToast: P
+              duration: ((I = o.toastOptions) == null ? void 0 : I.duration) ?? o.duration,
+              className: (N = o.toastOptions) == null ? void 0 : N.className,
+              descriptionClassName: (R = o.toastOptions) == null ? void 0 : R.descriptionClassName,
+              invert: o.invert,
+              visibleToasts: o.visibleToasts,
+              closeButton: o.closeButton,
+              interacting: v.value,
+              position: o.position,
+              style: X((F = o.toastOptions) == null ? void 0 : F.style),
+              toasts: n.value,
+              expandByDefault: o.expand,
+              gap: o.gap,
+              expanded: m.value,
+              heights: d.value,
+              "onUpdate:heights": r[0] || (r[0] = (z) => d.value = z),
+              onRemoveToast: M
             }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "gap", "expanded", "heights"]);
           }), 128))
-        ], 44, pt)
+        ], 44, mt)
       ], 8, ht);
@@ -617,9 +633,9 @@ };
   install(s) {
-    s.component("Toaster", bt);
+    s.component("Toaster", wt);
   }
 };
 export {
-  bt as Toaster,
+  wt as Toaster,
   $t as default,
   kt as toast
 };

package.json

 {
   "name": "vue-sonner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
@@ -35,2 +35,3 @@ "author": "xiaoluoboding <[e-mail]>",
   "types": "./lib/index.d.ts",
+  "license": "MIT",
   "devDependencies": {
@@ -37,0 +38,0 @@ "@iconify/json": "^2.1.104",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

252625

increased by0.39%

Lines of code

1191

increased by1.53%

No dependency changes