vue-sonner - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/vue-sonner.js

 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);
+var y = (s, t, e) => (pe(s, typeof t != "symbol" ? t + "" : t, e), e);
 import "./index.css";
-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";
+import { defineComponent as ee, openBlock as l, createElementBlock as h, createElementVNode as $, Fragment as K, renderList as ae, unref as M, ref as c, computed as w, onMounted as Q, watchEffect as q, onUnmounted as re, normalizeClass as se, normalizeStyle as X, createVNode as ge, createCommentVNode as C, createBlock as O, createTextVNode as oe, toDisplayString as z, resolveDynamicComponent as ye, useAttrs as we, nextTick as be, watch as Te } from "vue";
 let Z = 1;
-class Te {
+class xe {
   constructor() {
-    g(this, "subscribers");
-    g(this, "toasts");
+    y(this, "subscribers");
+    y(this, "toasts");
     // We use arrow functions to maintain the correct `this` reference
-    g(this, "subscribe", (t) => (this.subscribers.push(t), () => {
+    y(this, "subscribe", (t) => (this.subscribers.push(t), () => {
       const e = this.subscribers.indexOf(t);
       this.subscribers.splice(e, 1);
     }));
-    g(this, "publish", (t) => {
-      this.subscribers.forEach((e) => e(t)), this.toasts = [...this.toasts, t];
+    y(this, "publish", (t) => {
+      this.subscribers.forEach((e) => e(t));
     });
-    g(this, "addToast", (t) => {
+    y(this, "addToast", (t) => {
       this.publish(t), this.toasts = [...this.toasts, t];
     });
-    g(this, "create", (t) => {
+    y(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,
+      const { message: e, ...i } = t, u = typeof (t == null ? void 0 : t.id) == "number" || ((p = t.id) == null ? void 0 : p.length) > 0 ? t.id : Z++, m = this.toasts.findIndex((v) => v.id === u), d = t.dismissible === void 0 ? !0 : t.dismissible;
+      return m !== -1 ? this.toasts = this.toasts.map((v) => v.id === u ? (this.publish({ ...v, ...t, id: u, title: e }), {
+        ...v,
         ...t,
-        id: d,
-        dismissible: v,
+        id: u,
+        dismissible: d,
         title: e
-      }) : c) : this.addToast({ title: e, ...n, dismissible: v, id: d }), d;
+      }) : v) : this.addToast({ title: e, ...i, dismissible: d, id: u }), u;
     });
-    g(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
+    y(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
       this.subscribers.forEach(
-        (n) => n({ id: e.id, dismiss: !0 })
+        (i) => i({ id: e.id, dismiss: !0 })
       );
     }), this.subscribers.forEach((e) => e({ id: t, dismiss: !0 })), t));
-    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) => {
+    y(this, "message", (t, e) => this.create({ ...e, message: t }));
+    y(this, "error", (t, e) => this.create({ ...e, type: "error", message: t }));
+    y(this, "success", (t, e) => this.create({ ...e, type: "success", message: t }));
+    y(this, "info", (t, e) => this.create({ ...e, type: "info", message: t }));
+    y(this, "warning", (t, e) => this.create({ ...e, type: "warning", message: t }));
+    y(this, "loading", (t, e) => this.create({ ...e, type: "loading", message: t }));
+    y(this, "promise", (t, e) => {
       if (!e)
         return;
-      let n;
-      e.loading !== void 0 && (n = this.create({
+      let i;
+      e.loading !== void 0 && (i = this.create({
         ...e,
@@ -54,25 +54,25 @@ promise: t,
       }));
-      const d = t instanceof Promise ? t : t();
-      let m = n !== void 0;
-      return d.then((v) => {
+      const u = t instanceof Promise ? t : t();
+      let m = i !== void 0;
+      return u.then((d) => {
         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 });
+          const p = typeof e.success == "function" ? e.success(d) : e.success;
+          this.create({ id: i, type: "success", message: p });
         }
-      }).catch((v) => {
+      }).catch((d) => {
         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 });
+          const p = typeof e.error == "function" ? e.error(d) : e.error;
+          this.create({ id: i, type: "error", message: p });
         }
       }).finally(() => {
-        var v;
-        m && (this.dismiss(n), n = void 0), (v = e.finally) == null || v.call(e);
-      }), n;
+        var d;
+        m && (this.dismiss(i), i = void 0), (d = e.finally) == null || d.call(e);
+      }), i;
     });
     // 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()?
-    g(this, "custom", (t, e) => {
-      const n = (e == null ? void 0 : e.id) || Z++;
-      return this.publish({ ...e, id: n, title: t }), n;
+    y(this, "custom", (t, e) => {
+      const i = (e == null ? void 0 : e.id) || Z++;
+      return this.publish({ ...e, id: i, title: t }), i;
     });
@@ -82,3 +82,3 @@ this.subscribers = [], this.toasts = [];
 }
-const T = new Te(), xe = (s, t) => {
+const T = new xe(), ke = (s, t) => {
   const e = (t == null ? void 0 : t.id) || Z++;
@@ -90,3 +90,3 @@ return T.publish({
   }), e;
-}, ke = xe, kt = Object.assign(ke, {
+}, $e = ke, $t = Object.assign($e, {
   success: T.success,
@@ -101,3 +101,3 @@ info: T.info,
   loading: T.loading
-}), $e = ["data-visible"], Be = { className: "sonner-spinner" }, Ce = /* @__PURE__ */ ee({
+}), Be = ["data-visible"], Ce = { className: "sonner-spinner" }, _e = /* @__PURE__ */ ee({
   __name: "Loader",
@@ -109,20 +109,20 @@ props: {
     const t = Array(12).fill(0);
-    return (e, n) => (l(), h("div", {
+    return (e, i) => (l(), h("div", {
       className: "sonner-loading-wrapper",
       "data-visible": s.visible
     }, [
-      $("div", Be, [
-        (l(!0), h(K, null, ae(D(t), (d) => (l(), h("div", {
-          key: `spinner-bar-${d}`,
+      $("div", Ce, [
+        (l(!0), h(K, null, ae(M(t), (u) => (l(), h("div", {
+          key: `spinner-bar-${u}`,
           className: "sonner-loading-bar"
         }))), 128))
       ])
-    ], 8, $e));
+    ], 8, Be));
   }
-}), L = (s, t) => {
+}), H = (s, t) => {
   const e = s.__vccOpts || s;
-  for (const [n, d] of t)
-    e[n] = d;
+  for (const [i, u] of t)
+    e[i] = u;
   return e;
-}, _e = {}, Ee = {
+}, Ee = {}, Ie = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -133,13 +133,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Ie = /* @__PURE__ */ $("path", {
+}, Ne = /* @__PURE__ */ $("path", {
   "fill-rule": "evenodd",
   d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
   "clip-rule": "evenodd"
-}, null, -1), Ne = [
-  Ie
+}, null, -1), Oe = [
+  Ne
 ];
-function Pe(s, t) {
-  return l(), h("svg", Ee, Ne);
+function Se(s, t) {
+  return l(), h("svg", Ie, Oe);
 }
-const Se = /* @__PURE__ */ L(_e, [["render", Pe]]), Me = {}, Oe = {
+const Me = /* @__PURE__ */ H(Ee, [["render", Se]]), Pe = {}, Ae = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -150,13 +150,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Ae = /* @__PURE__ */ $("path", {
+}, De = /* @__PURE__ */ $("path", {
   "fill-rule": "evenodd",
   d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
   "clip-rule": "evenodd"
-}, null, -1), De = [
-  Ae
+}, null, -1), Re = [
+  De
 ];
-function Re(s, t) {
-  return l(), h("svg", Oe, De);
+function ze(s, t) {
+  return l(), h("svg", Ae, Re);
 }
-const ze = /* @__PURE__ */ L(Me, [["render", Re]]), qe = {}, He = {
+const qe = /* @__PURE__ */ H(Pe, [["render", ze]]), He = {}, Le = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -167,13 +167,13 @@ viewBox: "0 0 24 24",
   width: "20"
-}, Le = /* @__PURE__ */ $("path", {
+}, Ve = /* @__PURE__ */ $("path", {
   "fill-rule": "evenodd",
   d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
   "clip-rule": "evenodd"
-}, null, -1), Ve = [
-  Le
+}, null, -1), Fe = [
+  Ve
 ];
-function Fe(s, t) {
-  return l(), h("svg", He, Ve);
+function Ue(s, t) {
+  return l(), h("svg", Le, Fe);
 }
-const Ue = /* @__PURE__ */ L(qe, [["render", Fe]]), je = {}, Ke = {
+const je = /* @__PURE__ */ H(He, [["render", Ue]]), Ke = {}, We = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -184,13 +184,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, We = /* @__PURE__ */ $("path", {
+}, Ye = /* @__PURE__ */ $("path", {
   "fill-rule": "evenodd",
   d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
   "clip-rule": "evenodd"
-}, null, -1), Ye = [
-  We
+}, null, -1), Ge = [
+  Ye
 ];
-function Ge(s, t) {
-  return l(), h("svg", Ke, Ye);
+function Je(s, t) {
+  return l(), h("svg", We, Ge);
 }
-const Je = /* @__PURE__ */ L(je, [["render", Ge]]), Qe = {}, Xe = {
+const Qe = /* @__PURE__ */ H(Ke, [["render", Je]]), Xe = {}, Ze = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -205,3 +205,3 @@ width: "12",
   "stroke-linejoin": "round"
-}, Ze = /* @__PURE__ */ $("line", {
+}, et = /* @__PURE__ */ $("line", {
   x1: "18",
@@ -211,3 +211,3 @@ y1: "6",
   y2: "18"
-}, null, -1), et = /* @__PURE__ */ $("line", {
+}, null, -1), tt = /* @__PURE__ */ $("line", {
   x1: "6",
@@ -217,13 +217,13 @@ y1: "6",
   y2: "18"
-}, null, -1), tt = [
-  Ze,
-  et
+}, null, -1), st = [
+  et,
+  tt
 ];
-function st(s, t) {
-  return l(), h("svg", Xe, tt);
+function ot(s, t) {
+  return l(), h("svg", Ze, st);
 }
-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 = {
+const it = /* @__PURE__ */ H(Xe, [["render", ot]]), nt = ["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"], at = ["data-disabled"], rt = {
   key: 1,
   "data-icon": ""
-}, rt = { "data-content": "" }, lt = { "data-title": "" }, ut = 4e3, ct = 14, dt = 20, ft = 200, vt = /* @__PURE__ */ ee({
+}, lt = { "data-content": "" }, ut = { "data-title": "" }, ct = 4e3, dt = 14, vt = 20, ft = 200, ht = /* @__PURE__ */ ee({
   __name: "Toast",
@@ -286,18 +286,18 @@ props: {
   setup(s, { emit: t }) {
-    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
+    const e = s, i = (a) => !!a.promise, u = c(!1), m = c(!1), d = c(!1), p = c(!1), v = c(null), B = c(0), L = c(0), V = c(null), x = c(null), o = w(() => e.index === 0), n = w(() => e.index + 1 <= e.visibleToasts), f = w(() => e.toast.type), b = w(() => e.toast.dismissible), S = e.toast.className || "", _ = e.toast.descriptionClassName || "", E = e.toast.style || {}, P = w(
+      () => e.heights.findIndex((a) => a.toastId === e.toast.id) || 0
     ), F = w(
-      () => e.toast.duration || e.duration || ut
-    ), 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)
-    ), J = w(() => !n(e.toast) && typeof e.toast.title == "object"), ce = w(() => {
-      if (!n(e.toast))
+      () => e.toast.duration || e.duration || ct
+    ), A = c(0), D = c(0), W = c(F.value), te = c(0), U = c(null), Y = w(() => e.position.split("-")), le = w(() => e.heights.reduce((a, r, g) => g >= P.value ? a : a + r.height, 0)), ue = w(() => e.toast.invert || e.invert), G = w(() => v.value === "loading"), j = w(
+      () => v.value ?? (e.toast.type || null)
+    ), J = w(() => !i(e.toast) && typeof e.toast.title == "object"), ce = w(() => {
+      if (!i(e.toast))
         return null;
-      switch (c.value) {
+      switch (v.value) {
         case "loading":
           return e.toast.loading;
         case "success":
-          return typeof e.toast.success == "function" ? M.value : e.toast.success;
+          return typeof e.toast.success == "function" ? V.value : e.toast.success;
         case "error":
-          return typeof e.toast.error == "function" ? M.value : e.toast.error;
+          return typeof e.toast.error == "function" ? V.value : e.toast.error;
         default:
@@ -307,93 +307,79 @@ return null;
     });
-    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;
-        c.value = "loading";
-        const k = (b) => {
-          b.then((_) => {
-            u.success && typeof u.success == "function" && (M.value = u.success(_)), c.value = "success";
-          }).catch((_) => {
-            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 = (i = e.toast) == null ? void 0 : i.promise) == null ? void 0 : a.call(i));
-      }
+    Q(() => u.value = !0), q(() => {
+      D.value = P.value * dt + le.value;
     });
     function de() {
-      var i, a;
-      (!G.value || C.value) && (P(), (a = (i = e.toast).onDismiss) == null || a.call(i, e.toast));
+      var a, r;
+      (!G.value || b.value) && (I(), (r = (a = e.toast).onDismiss) == null || r.call(a, e.toast));
     }
-    function P() {
-      m.value = !0, B.value = q.value;
-      const i = e.heights.filter(
-        (a) => a.toastId !== e.toast.id
+    function I() {
+      m.value = !0, B.value = D.value;
+      const a = e.heights.filter(
+        (r) => r.toastId !== e.toast.id
       );
-      t("update:heights", i), setTimeout(() => {
+      t("update:heights", a), setTimeout(() => {
         t("removeToast", e.toast);
       }, ft);
     }
-    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, _;
+    const ve = (a) => {
+      G || (B.value = D.value, a.target.setPointerCapture(a.pointerId), a.target.tagName !== "BUTTON" && (d.value = !0, U.value = a.clientY));
+    }, fe = (a) => {
+      var g, N, k, R;
       if (p.value)
         return;
-      const a = Number(
-        ((u = x.value) == null ? void 0 : u.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+      const r = Number(
+        ((g = x.value) == null ? void 0 : g.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
       );
-      if (Math.abs(a) >= dt) {
-        B.value = q.value, (b = (k = e.toast).onDismiss) == null || b.call(k, e.toast), P(), p.value = !0;
+      if (Math.abs(r) >= vt) {
+        B.value = D.value, (k = (N = e.toast).onDismiss) == null || k.call(N, e.toast), I(), p.value = !0;
         return;
       }
-      (_ = x.value) == null || _.style.setProperty("--swipe-amount", "0px"), U.value = null, v.value = !0;
-    }, he = (i) => {
-      var k, b;
+      (R = x.value) == null || R.style.setProperty("--swipe-amount", "0px"), U.value = null, d.value = !0;
+    }, he = (a) => {
+      var N, k;
       if (!U.value)
         return;
-      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");
+      const r = a.clientY - U.value;
+      if (!(Y.value[0] === "top" ? r < 0 : r > 0)) {
+        (N = x.value) == null || N.style.setProperty("--swipe-amount", "0px");
         return;
       }
-      (b = x.value) == null || b.style.setProperty("--swipe-amount", `${a}px`);
+      (k = x.value) == null || k.style.setProperty("--swipe-amount", `${r}px`);
     };
-    return A((i) => {
-      if (e.toast.promise && c.value === "loading" || e.toast.duration === 1 / 0)
+    return q((a) => {
+      if (e.toast.promise && v.value === "loading" || e.toast.duration === 1 / 0)
         return;
-      let a;
-      const u = () => {
-        if (te.value < z.value) {
-          const b = (/* @__PURE__ */ new Date()).getTime() - z.value;
-          W.value = W.value - b;
+      let r;
+      const g = () => {
+        if (te.value < A.value) {
+          const k = (/* @__PURE__ */ new Date()).getTime() - A.value;
+          W.value = W.value - k;
         }
         te.value = (/* @__PURE__ */ new Date()).getTime();
-      }, k = () => {
-        z.value = (/* @__PURE__ */ new Date()).getTime(), a = setTimeout(() => {
-          var b, _;
-          (_ = (b = e.toast).onAutoClose) == null || _.call(b, e.toast), P();
+      }, N = () => {
+        A.value = (/* @__PURE__ */ new Date()).getTime(), r = setTimeout(() => {
+          var k, R;
+          (R = (k = e.toast).onAutoClose) == null || R.call(k, e.toast), I();
         }, W.value);
       };
-      e.expanded || e.interacting ? u() : k(), i(() => {
-        clearTimeout(a);
+      e.expanded || e.interacting ? g() : N(), a(() => {
+        clearTimeout(r);
       });
     }), Q(() => {
       if (x.value) {
-        const i = x.value.getBoundingClientRect().height;
-        V.value = i;
-        const a = [{ toastId: e.toast.id, height: i }, ...e.heights];
-        t("update:heights", a);
+        const a = x.value.getBoundingClientRect().height;
+        L.value = a;
+        const r = [{ toastId: e.toast.id, height: a }, ...e.heights];
+        t("update:heights", r);
       }
     }), re(() => {
       if (x.value) {
-        const i = e.heights.filter(
-          (a) => a.toastId !== e.toast.id
+        const a = e.heights.filter(
+          (r) => r.toastId !== e.toast.id
         );
-        t("update:heights", i);
+        t("update:heights", a);
       }
-    }), A(() => {
-      e.toast.delete && P();
-    }), (i, a) => (l(), h("li", {
+    }), q(() => {
+      e.toast.delete && I();
+    }), (a, r) => (l(), h("li", {
       "aria-live": s.toast.important ? "assertive" : "polite",
@@ -406,8 +392,8 @@ "aria-atomic": "",
       "data-sonner-toast": "",
-      class: se(D(O)),
+      class: se(M(S)),
       "data-styled": !J.value,
-      "data-mounted": d.value,
+      "data-mounted": u.value,
       "data-promise": !!s.toast.promise,
       "data-removed": m.value,
-      "data-visible": r.value,
+      "data-visible": n.value,
       "data-y-position": Y.value[0],
@@ -417,7 +403,7 @@ "data-x-position": Y.value[1],
       "data-front": o.value,
-      "data-swiping": v.value,
-      "data-type": c.value !== "loading" && c.value ? c.value : y.value,
+      "data-swiping": d.value,
+      "data-type": v.value !== "loading" && v.value ? v.value : f.value,
       "data-invert": ue.value,
       "data-swipe-out": p.value,
-      "data-expanded": !!(e.expanded || e.expandByDefault && d.value),
+      "data-expanded": !!(e.expanded || e.expandByDefault && u.value),
       style: X({
@@ -427,8 +413,8 @@ "--index": e.index,
         "--z-index": s.toasts.length - e.index,
-        "--offset": `${m.value ? B.value : q.value}px`,
-        "--initial-height": e.expandByDefault ? "auto" : `${V.value}px`,
-        ...D(N)
+        "--offset": `${m.value ? B.value : D.value}px`,
+        "--initial-height": e.expandByDefault ? "auto" : `${L.value}px`,
+        ...M(E)
       }),
-      onPointerdown: fe,
-      onPointerup: ve,
+      onPointerdown: ve,
+      onPointerup: fe,
       onPointermove: he
@@ -443,24 +429,24 @@ }, [
       }, [
-        ge(ot)
-      ], 8, nt)) : E("", !0),
-      y.value || s.toast.icon || s.toast.promise ? (l(), h("div", at, [
-        typeof s.toast.promise == "function" || y.value === "loading" ? (l(), S(Ce, {
+        ge(it)
+      ], 8, at)) : C("", !0),
+      f.value || s.toast.icon || s.toast.promise ? (l(), h("div", rt, [
+        typeof s.toast.promise == "function" || f.value === "loading" ? (l(), O(_e, {
           key: 0,
-          visible: c.value === "loading" || y.value === "loading"
-        }, null, 8, ["visible"])) : 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, [
+          visible: v.value === "loading" || f.value === "loading"
+        }, null, 8, ["visible"])) : C("", !0),
+        j.value === "success" ? (l(), O(Me, { key: 1 })) : j.value === "info" ? (l(), O(qe, { key: 2 })) : j.value === "warning" ? (l(), O(je, { key: 3 })) : j.value === "error" ? (l(), O(Qe, { key: 4 })) : C("", !0)
+      ])) : C("", !0),
+      $("div", lt, [
+        $("div", ut, [
           typeof s.toast.title == "string" ? (l(), h(K, { key: 0 }, [
-            oe(H(s.toast.title), 1)
+            oe(z(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), {
+            oe(z(ce.value), 1)
+          ], 64)) : J.value ? (l(), O(ye(s.toast.title), {
             key: 2,
-            onCloseToast: a[0] || (a[0] = () => {
-              var u;
-              P(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
+            onCloseToast: r[0] || (r[0] = () => {
+              var g;
+              I(), (g = s.toast.cancel) != null && g.onClick && s.toast.cancel.onClick();
             })
-          }, null, 32)) : E("", !0)
+          }, null, 32)) : C("", !0)
         ]),
@@ -470,4 +456,4 @@ s.toast.description ? (l(), h("div", {
           "data-description": "",
-          class: se(s.descriptionClass + D(I))
-        }, H(s.toast.description), 3)) : E("", !0)
+          class: se(s.descriptionClass + M(_))
+        }, z(s.toast.description), 3)) : C("", !0)
       ]),
@@ -478,19 +464,19 @@ s.toast.cancel ? (l(), h("button", {
         "data-cancel": "",
-        onClick: a[1] || (a[1] = () => {
-          var u;
-          P(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
+        onClick: r[1] || (r[1] = () => {
+          var g;
+          I(), (g = s.toast.cancel) != null && g.onClick && s.toast.cancel.onClick();
         })
-      }, H(s.toast.cancel.label), 1)) : E("", !0),
+      }, z(s.toast.cancel.label), 1)) : C("", !0),
       s.toast.action ? (l(), h("button", {
         key: 3,
         "data-button": "",
-        onClick: a[2] || (a[2] = () => {
-          var u;
-          P(), (u = s.toast.action) == null || u.onClick();
+        onClick: r[2] || (r[2] = () => {
+          var g;
+          I(), (g = s.toast.action) == null || g.onClick();
         })
-      }, H(s.toast.action.label), 1)) : E("", !0)
-    ], 46, it));
+      }, z(s.toast.action.label), 1)) : C("", !0)
+    ], 46, nt));
   }
 });
-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({
+const mt = ["aria-label"], pt = ["dir", "data-theme", "data-rich-colors", "data-y-position", "data-x-position"], gt = 3, ie = "32px", yt = 4e3, wt = 356, ne = 14, bt = /* @__PURE__ */ ee({
   name: "Toaster",
@@ -506,5 +492,5 @@ inheritAttrs: !1,
     expand: { type: Boolean, default: !1 },
-    duration: { default: gt },
+    duration: { default: yt },
     gap: { default: ne },
-    visibleToasts: { default: pt },
+    visibleToasts: { default: gt },
     closeButton: { type: Boolean, default: !1 },
@@ -518,7 +504,7 @@ toastOptions: { default: () => ({}) },
   setup(s) {
-    const t = s, e = we(), n = f([]), d = f([]), m = f(!1), v = f(!1), p = f(
+    const t = s, e = we(), i = c([]), u = c([]), m = c(!1), d = c(!1), p = c(
       t.theme !== "system" ? t.theme : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-    ), 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);
+    ), v = w(() => t.position.split("-")), B = c(null), L = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function V(o) {
+      i.value = i.value.filter(({ id: n }) => n !== o.id);
     }
@@ -532,10 +518,13 @@ function x() {
     return Q(() => {
-      const o = T.subscribe((r) => {
-        if (r.dismiss) {
-          n.value = n.value.map(
-            (y) => y.id === r.id ? { ...y, delete: !0 } : y
+      const o = T.subscribe((n) => {
+        if (n.dismiss) {
+          i.value = i.value.map(
+            (f) => f.id === n.id ? { ...f, delete: !0 } : f
           );
           return;
         }
-        n.value = [r, ...n.value];
+        be(() => {
+          const f = i.value.findIndex((b) => b.id === n.id);
+          f !== -1 ? i.value.splice(f, 1, n) : i.value = [n, ...i.value];
+        });
       });
@@ -545,3 +534,3 @@ re(() => {
       });
-    }), be(
+    }), Te(
       () => t.theme,
@@ -553,22 +542,22 @@ (o) => {
         }
-        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";
+        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: n }) => {
+          n ? p.value = "dark" : p.value = "light";
         });
       }
-    ), A(() => {
-      n.value.length <= 1 && (m.value = !1);
-    }), A((o) => {
-      function r(y) {
-        var O, I;
+    ), q(() => {
+      i.value.length <= 1 && (m.value = !1);
+    }), q((o) => {
+      function n(f) {
+        var S, _;
         t.hotkey.every(
-          (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);
+          (E) => f[E] || f.code === E
+        ) && (m.value = !0, (S = B.value) == null || S.focus()), f.code === "Escape" && (document.activeElement === B.value || (_ = B.value) != null && _.contains(document.activeElement)) && (m.value = !1);
       }
-      document.addEventListener("keydown", r), o(() => {
-        document.removeEventListener("keydown", r);
+      document.addEventListener("keydown", n), o(() => {
+        document.removeEventListener("keydown", n);
       });
-    }), (o, r) => {
-      var y;
+    }), (o, n) => {
+      var f;
       return l(), h("section", {
-        "aria-label": `Notifications ${D(V)}`,
+        "aria-label": `Notifications ${M(L)}`,
         tabIndex: -1
@@ -584,58 +573,58 @@ }, [
           "data-rich-colors": o.richColors,
-          "data-y-position": c.value[0],
-          "data-x-position": c.value[1],
+          "data-y-position": v.value[0],
+          "data-x-position": v.value[1],
           style: X(
             {
-              "--front-toast-height": `${(y = d.value[0]) == null ? void 0 : y.height}px`,
+              "--front-toast-height": `${(f = u.value[0]) == null ? void 0 : f.height}px`,
               "--offset": typeof o.offset == "number" ? `${o.offset}px` : o.offset || ie,
-              "--width": `${yt}px`,
+              "--width": `${wt}px`,
               "--gap": `${ne}px`,
-              ...D(e).style
+              ...M(e).style
             }
           ),
-          onMouseenter: r[1] || (r[1] = (C) => m.value = !0),
-          onMousemove: r[2] || (r[2] = (C) => m.value = !0),
-          onMouseleave: r[3] || (r[3] = () => {
-            v.value || (m.value = !1);
+          onMouseenter: n[1] || (n[1] = (b) => m.value = !0),
+          onMousemove: n[2] || (n[2] = (b) => m.value = !0),
+          onMouseleave: n[3] || (n[3] = () => {
+            d.value || (m.value = !1);
           }),
-          onPointerdown: r[4] || (r[4] = (C) => v.value = !1),
-          onPointerup: r[5] || (r[5] = (C) => v.value = !1)
+          onPointerdown: n[4] || (n[4] = (b) => d.value = !1),
+          onPointerup: n[5] || (n[5] = (b) => d.value = !1)
         }, [
-          (l(!0), h(K, null, ae(n.value, (C, O) => {
-            var I, N, R, F;
-            return l(), S(vt, {
-              key: C.id,
-              index: O,
-              toast: C,
-              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,
+          (l(!0), h(K, null, ae(i.value, (b, S) => {
+            var _, E, P, F;
+            return l(), O(ht, {
+              key: b.id,
+              index: S,
+              toast: b,
+              duration: ((_ = o.toastOptions) == null ? void 0 : _.duration) ?? o.duration,
+              className: (E = o.toastOptions) == null ? void 0 : E.className,
+              descriptionClassName: (P = o.toastOptions) == null ? void 0 : P.descriptionClassName,
               invert: o.invert,
               visibleToasts: o.visibleToasts,
               closeButton: o.closeButton,
-              interacting: v.value,
+              interacting: d.value,
               position: o.position,
               style: X((F = o.toastOptions) == null ? void 0 : F.style),
-              toasts: n.value,
+              toasts: i.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
+              heights: u.value,
+              "onUpdate:heights": n[0] || (n[0] = (A) => u.value = A),
+              onRemoveToast: V
             }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "gap", "expanded", "heights"]);
           }), 128))
-        ], 44, mt)
-      ], 8, ht);
+        ], 44, pt)
+      ], 8, mt);
     };
   }
-}), $t = {
+}), Bt = {
   install(s) {
-    s.component("Toaster", wt);
+    s.component("Toaster", bt);
   }
 };
 export {
-  wt as Toaster,
-  $t as default,
-  kt as toast
+  bt as Toaster,
+  Bt as default,
+  $t as toast
 };

package.json

 {
   "name": "vue-sonner",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
@@ -5,0 +5,0 @@ "author": "xiaoluoboding <[e-mail]>",

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

Worsened metrics

Total package byte prevSize

251739

decreased by-0.35%

Lines of code

1179

decreased by-1.01%

No dependency changes