vue-sonner - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

lib/vue-sonner.js

@@ -1,8 +0,8 @@
-var me = Object.defineProperty;
-var pe = (t, e, s) => e in t ? me(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
-var b = (t, e, s) => (pe(t, typeof e != "symbol" ? e + "" : e, s), s);
+var pe = Object.defineProperty;
+var he = (t, e, s) => e in t ? pe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var b = (t, e, s) => (he(t, typeof e != "symbol" ? e + "" : e, s), s);
 import "./assets/index.a4db810a.css";
-import { defineComponent as j, openBlock as l, createElementBlock as f, createElementVNode as B, Fragment as L, renderList as ne, unref as r, ref as c, computed as p, onMounted as Z, watchEffect as R, onUnmounted as ae, normalizeClass as oe, normalizeStyle as ee, createVNode as he, createCommentVNode as w, createBlock as F, createTextVNode as ie, toDisplayString as U, resolveDynamicComponent as ye, useAttrs as ge } from "vue";
+import { defineComponent as j, openBlock as u, createElementBlock as f, createElementVNode as C, Fragment as z, renderList as ne, unref as r, ref as c, computed as p, onMounted as Z, watchEffect as R, onUnmounted as ae, normalizeClass as oe, normalizeStyle as ee, createVNode as ye, createCommentVNode as w, createBlock as L, createTextVNode as ie, toDisplayString as F, resolveDynamicComponent as ge, useAttrs as be } from "vue";
 let H = 0;
-class be {
+class xe {
   constructor() {
@@ -20,24 +20,24 @@ b(this, "subscribers");
       this.subscribers.forEach(
-        (i) => i({ id: s.id, dismiss: !0 })
+        (a) => a({ id: s.id, dismiss: !0 })
       );
     }), this.subscribers.forEach((s) => s({ id: e, dismiss: !0 })), e));
     b(this, "message", (e, s) => {
-      const i = (s == null ? void 0 : s.id) || H++;
-      return this.publish({ ...s, id: i, title: e }), i;
+      const a = (s == null ? void 0 : s.id) || H++;
+      return this.publish({ ...s, id: a, title: e }), a;
     });
     b(this, "error", (e, s) => {
-      const i = (s == null ? void 0 : s.id) || H++;
-      return this.publish({ ...s, id: i, type: "error", title: e }), i;
+      const a = (s == null ? void 0 : s.id) || H++;
+      return this.publish({ ...s, id: a, type: "error", title: e }), a;
     });
     b(this, "success", (e, s) => {
-      const i = (s == null ? void 0 : s.id) || H++;
-      return this.publish({ ...s, id: i, type: "success", title: e }), i;
+      const a = (s == null ? void 0 : s.id) || H++;
+      return this.publish({ ...s, id: a, type: "success", title: e }), a;
     });
     b(this, "promise", (e, s) => {
-      const i = (s == null ? void 0 : s.id) || H++;
-      return this.publish({ ...s, promise: e, id: i }), i;
+      const a = (s == null ? void 0 : s.id) || H++;
+      return this.publish({ ...s, promise: e, id: a }), a;
     });
     b(this, "custom", (e, s) => {
-      const i = (s == null ? void 0 : s.id) || H++;
-      this.publish({ ...s, id: i, title: e });
+      const a = (s == null ? void 0 : s.id) || H++;
+      this.publish({ ...s, id: a, title: e });
     });
@@ -47,5 +47,5 @@ this.subscribers = [], this.toasts = [];
 }
-const N = new be(), xe = (t, e) => {
+const $ = new xe(), Te = (t, e) => {
   const s = (e == null ? void 0 : e.id) || H++;
-  return N.publish({
+  return $.publish({
     title: t,
@@ -55,10 +55,10 @@ ...e,
   }), s;
-}, Te = xe, at = Object.assign(Te, {
-  success: N.success,
-  error: N.error,
-  custom: N.custom,
-  message: N.message,
-  promise: N.promise,
-  dismiss: N.dismiss
-}), we = ["data-visible"], ke = { className: "sonner-spinner" }, Be = /* @__PURE__ */ j({
+}, we = Te, rt = Object.assign(we, {
+  success: $.success,
+  error: $.error,
+  custom: $.custom,
+  message: $.message,
+  promise: $.promise,
+  dismiss: $.dismiss
+}), ke = ["data-visible"], Ce = { className: "sonner-spinner" }, Be = /* @__PURE__ */ j({
   __name: "Loader",
@@ -70,20 +70,20 @@ props: {
     const e = Array(12).fill(0);
-    return (s, i) => (l(), f("div", {
+    return (s, a) => (u(), f("div", {
       className: "sonner-loading-wrapper",
       "data-visible": t.visible
     }, [
-      B("div", ke, [
-        (l(!0), f(L, null, ne(r(e), (D) => (l(), f("div", {
-          key: `spinner-bar-${D}`,
+      C("div", Ce, [
+        (u(!0), f(z, null, ne(r(e), (N) => (u(), f("div", {
+          key: `spinner-bar-${N}`,
           className: "sonner-loading-bar"
         }))), 128))
       ])
-    ], 8, we));
+    ], 8, ke));
   }
 }), A = (t, e) => {
   const s = t.__vccOpts || t;
-  for (const [i, D] of e)
-    s[i] = D;
+  for (const [a, N] of e)
+    s[a] = N;
   return s;
-}, $e = /* @__PURE__ */ A(Be, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/Loader.vue"]]), Ce = {}, Ne = {
+}, $e = /* @__PURE__ */ A(Be, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/Loader.vue"]]), Ne = {}, De = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -94,13 +94,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, De = /* @__PURE__ */ B("path", {
+}, Ie = /* @__PURE__ */ C("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), Ie = [
-  De
+}, null, -1), Ee = [
+  Ie
 ];
-function Ee(t, e) {
-  return l(), f("svg", Ne, Ie);
+function Pe(t, e) {
+  return u(), f("svg", De, Ee);
 }
-const _e = /* @__PURE__ */ A(Ce, [["render", Ee], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/SuccessIcon.vue"]]), Pe = {}, Se = {
+const Se = /* @__PURE__ */ A(Ne, [["render", Pe], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/SuccessIcon.vue"]]), qe = {}, Oe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -111,13 +111,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, qe = /* @__PURE__ */ B("path", {
+}, _e = /* @__PURE__ */ C("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), Oe = [
-  qe
+}, null, -1), He = [
+  _e
 ];
-function He(t, e) {
-  return l(), f("svg", Se, Oe);
+function Re(t, e) {
+  return u(), f("svg", Oe, He);
 }
-const Re = /* @__PURE__ */ A(Pe, [["render", He], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/ErrorIcon.vue"]]), Ae = {}, Me = {
+const Ae = /* @__PURE__ */ A(qe, [["render", Re], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/ErrorIcon.vue"]]), Me = {}, Ue = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -132,3 +132,3 @@ width: "12",
   "stroke-linejoin": "round"
-}, Ue = /* @__PURE__ */ B("line", {
+}, Fe = /* @__PURE__ */ C("line", {
   x1: "18",
@@ -138,3 +138,3 @@ y1: "6",
   y2: "18"
-}, null, -1), Fe = /* @__PURE__ */ B("line", {
+}, null, -1), Le = /* @__PURE__ */ C("line", {
   x1: "6",
@@ -144,13 +144,13 @@ y1: "6",
   y2: "18"
-}, null, -1), Le = [
-  Ue,
-  Fe
+}, null, -1), ze = [
+  Fe,
+  Le
 ];
-function ze(t, e) {
-  return l(), f("svg", Me, Le);
+function Ge(t, e) {
+  return u(), f("svg", Ue, ze);
 }
-const Ge = /* @__PURE__ */ A(Ae, [["render", ze], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/CloseIcon.vue"]]), Ve = ["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"], je = ["data-disabled"], Ke = {
+const Ve = /* @__PURE__ */ A(Me, [["render", Ge], ["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/assets/CloseIcon.vue"]]), je = ["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"], Ke = ["data-disabled"], We = {
   key: 1,
   "data-icon": ""
-}, We = { "data-content": "" }, Ye = { "data-title": "" }, Je = /* @__PURE__ */ j({
+}, Ye = { "data-content": "" }, Je = { "data-title": "" }, Qe = /* @__PURE__ */ j({
   __name: "Toast",
@@ -220,7 +220,7 @@ props: {
   setup(t) {
-    const e = t, s = 4e3, i = 14, D = 20, K = 200, m = (o) => Boolean(o.promise), I = c(!1), g = c(!1), $ = c(!1), _ = c(!1), v = c(null), P = c(0), z = c(0), S = c(null), d = c(null), n = p(() => e.index === 0), h = p(() => e.index + 1 <= e.visibleToasts), x = p(() => e.toast.type), q = e.toast.className || "", E = e.toast.descriptionClassName || "", C = p(
+    const e = t, s = 4e3, a = 14, N = 20, K = 200, m = (o) => Boolean(o.promise), D = c(!1), g = c(!1), B = c(!1), S = c(!1), v = c(null), q = c(0), G = c(0), O = c(null), d = c(null), l = p(() => e.index === 0), h = p(() => e.index + 1 <= e.visibleToasts), x = p(() => e.toast.type), _ = e.toast.className || "", I = e.toast.descriptionClassName || "", E = e.toast.style || {}, M = p(
       () => e.heights.findIndex((o) => o.toastId === e.toast.id) || 0
-    ), G = p(
+    ), re = p(
       () => e.toast.duration || e.duration || s
-    ), W = c(0), M = c(0), Y = c(G.value), te = c(0), V = c(null), J = p(() => e.position.split("-")), re = p(() => e.heights.reduce((o, a, u) => u >= C.value ? o : o + a.height, 0)), le = p(() => e.toast.invert || e.invert), Q = p(() => v.value === "loading"), se = p(
+    ), W = c(0), U = c(0), Y = c(re.value), te = c(0), V = c(null), J = p(() => e.position.split("-")), le = p(() => e.heights.reduce((o, i, n) => n >= M.value ? o : o + i.height, 0)), ue = p(() => e.toast.invert || e.invert), Q = p(() => v.value === "loading"), se = p(
       () => {
@@ -230,3 +230,3 @@ var o;
       }
-    ), X = p(() => !m(e.toast) && typeof e.toast.title == "object"), ue = p(() => {
+    ), X = p(() => !m(e.toast) && typeof e.toast.title == "object"), ce = p(() => {
       if (!m(e.toast))
@@ -238,5 +238,5 @@ return null;
         case "success":
-          return typeof e.toast.success == "function" ? S.value : e.toast.success;
+          return typeof e.toast.success == "function" ? O.value : e.toast.success;
         case "error":
-          return typeof e.toast.error == "function" ? S.value : e.toast.error;
+          return typeof e.toast.error == "function" ? O.value : e.toast.error;
         default:
@@ -246,25 +246,25 @@ return null;
     });
-    Z(() => I.value = !0), R(() => {
-      M.value = C.value * i + re.value;
+    Z(() => D.value = !0), R(() => {
+      U.value = M.value * a + le.value;
     }), R(() => {
-      var o, a;
+      var o, i;
       if (e.toast && m(e.toast)) {
-        const u = e.toast;
+        const n = e.toast;
         v.value = "loading";
         const T = (y) => {
           y.then((k) => {
-            u.success && typeof u.success == "function" && (S.value = u.success(k)), v.value = "success";
+            n.success && typeof n.success == "function" && (O.value = n.success(k)), v.value = "success";
           }).catch((k) => {
-            u.error && typeof u.error == "function" && (S.value = u.error(k)), v.value = "error";
+            n.error && typeof n.error == "function" && (O.value = n.error(k)), v.value = "error";
           });
         };
-        e.toast.promise instanceof Promise ? T(e.toast.promise) : typeof e.toast.promise == "function" && T((a = (o = e.toast) == null ? void 0 : o.promise) == null ? void 0 : a.call(o));
+        e.toast.promise instanceof Promise ? T(e.toast.promise) : typeof e.toast.promise == "function" && T((i = (o = e.toast) == null ? void 0 : o.promise) == null ? void 0 : i.call(o));
       }
     });
-    function ce() {
-      var o, a;
-      Q.value || (O(), (a = (o = e.toast).onDismiss) == null || a.call(o, e.toast));
+    function de() {
+      var o, i;
+      Q.value || (P(), (i = (o = e.toast).onDismiss) == null || i.call(o, e.toast));
     }
-    function O() {
-      g.value = !0, P.value = M.value, e.setHeights(
+    function P() {
+      g.value = !0, q.value = U.value, e.setHeights(
         e.heights.filter((o) => o.toastId !== e.toast.id)
@@ -275,26 +275,26 @@ ), setTimeout(() => {
     }
-    const de = (o) => {
-      Q || (P.value = M.value, o.target.setPointerCapture(o.pointerId), o.target.tagName !== "BUTTON" && ($.value = !0, V.value = o.clientY));
-    }, ve = (o) => {
-      var u, T, y, k;
-      if (_.value)
+    const ve = (o) => {
+      Q || (q.value = U.value, o.target.setPointerCapture(o.pointerId), o.target.tagName !== "BUTTON" && (B.value = !0, V.value = o.clientY));
+    }, fe = (o) => {
+      var n, T, y, k;
+      if (S.value)
         return;
-      const a = Number(
-        ((u = d.value) == null ? void 0 : u.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+      const i = Number(
+        ((n = d.value) == null ? void 0 : n.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
       );
-      if (Math.abs(a) >= D) {
-        P.value = M.value, (y = (T = e.toast).onDismiss) == null || y.call(T, e.toast), O(), _.value = !0;
+      if (Math.abs(i) >= N) {
+        q.value = U.value, (y = (T = e.toast).onDismiss) == null || y.call(T, e.toast), P(), S.value = !0;
         return;
       }
-      (k = d.value) == null || k.style.setProperty("--swipe-amount", "0px"), V.value = null, $.value = !0;
-    }, fe = (o) => {
+      (k = d.value) == null || k.style.setProperty("--swipe-amount", "0px"), V.value = null, B.value = !0;
+    }, me = (o) => {
       var T, y;
       if (!V.value)
         return;
-      const a = o.clientY - V.value;
-      if (!(J.value[0] === "top" ? a < 0 : a > 0)) {
+      const i = o.clientY - V.value;
+      if (!(J.value[0] === "top" ? i < 0 : i > 0)) {
         (T = d.value) == null || T.style.setProperty("--swipe-amount", "0px");
         return;
       }
-      (y = d.value) == null || y.style.setProperty("--swipe-amount", `${a}px`);
+      (y = d.value) == null || y.style.setProperty("--swipe-amount", `${i}px`);
     };
@@ -304,4 +304,4 @@ return R((o) => {
         return;
-      let a;
-      const u = () => {
+      let i;
+      const n = () => {
         if (te.value < W.value) {
@@ -313,9 +313,9 @@ const y = new Date().getTime() - W.value;
       }, T = () => {
-        W.value = new Date().getTime(), a = setTimeout(() => {
+        W.value = new Date().getTime(), i = setTimeout(() => {
           var y, k;
-          (k = (y = e.toast).onAutoClose) == null || k.call(y, e.toast), O();
+          (k = (y = e.toast).onAutoClose) == null || k.call(y, e.toast), P();
         }, Y.value);
       };
-      e.expanded || e.interacting ? u() : T(), o(() => {
-        clearTimeout(a);
+      e.expanded || e.interacting ? n() : T(), o(() => {
+        clearTimeout(i);
       });
@@ -325,3 +325,3 @@ }), Z(() => {
         const o = d.value.getBoundingClientRect().height;
-        z.value = o, e.setHeights([{ toastId: e.toast.id, height: o }, ...e.heights]);
+        G.value = o, e.setHeights([{ toastId: e.toast.id, height: o }, ...e.heights]);
       }
@@ -333,4 +333,4 @@ }), ae(() => {
     }), R(() => {
-      e.toast.delete && O();
-    }), (o, a) => (l(), f("li", {
+      e.toast.delete && P();
+    }), (o, i) => (u(), f("li", {
       "aria-live": t.toast.important ? "assertive" : "polite",
@@ -343,5 +343,5 @@ "aria-atomic": "",
       "data-sonner-toast": "",
-      class: oe(r(q)),
+      class: oe(r(_)),
       "data-styled": !r(X),
-      "data-mounted": I.value,
+      "data-mounted": D.value,
       "data-promise": Boolean(t.toast.promise),
@@ -353,8 +353,8 @@ "data-removed": g.value,
       "data-index": e.index,
-      "data-front": r(n),
-      "data-swiping": $.value,
+      "data-front": r(l),
+      "data-swiping": B.value,
       "data-type": v.value !== "loading" && v.value ? v.value : r(x),
-      "data-invert": r(le),
-      "data-swipe-out": _.value,
-      "data-expanded": Boolean(e.expanded || e.expandByDefault && I.value),
+      "data-invert": r(ue),
+      "data-swipe-out": S.value,
+      "data-expanded": Boolean(e.expanded || e.expandByDefault && D.value),
       style: ee({
@@ -364,11 +364,11 @@ "--index": e.index,
         "--z-index": t.toasts.length - e.index,
-        "--offset": `${g.value ? P.value : M.value}px`,
-        "--initial-height": e.expandByDefault ? "auto" : `${z.value}px`,
-        ...t.toast
+        "--offset": `${g.value ? q.value : U.value}px`,
+        "--initial-height": e.expandByDefault ? "auto" : `${G.value}px`,
+        ...r(E)
       }),
-      onPointerdown: de,
-      onPointerup: ve,
-      onPointermove: fe
+      onPointerdown: ve,
+      onPointerup: fe,
+      onPointermove: me
     }, [
-      e.closeButton && !r(X) ? (l(), f("button", {
+      e.closeButton && !r(X) ? (u(), f("button", {
         key: 0,
@@ -378,52 +378,58 @@ "aria-label": "Close toast",
         "data-close-button": "",
-        onClick: ce
+        onClick: de
       }, [
-        he(Ge)
-      ], 8, je)) : w("v-if", !0),
-      r(x) || t.toast.icon || t.toast.promise ? (l(), f("div", Ke, [
-        typeof t.toast.promise == "function" ? (l(), F($e, {
+        ye(Ve)
+      ], 8, Ke)) : w("v-if", !0),
+      r(x) || t.toast.icon || t.toast.promise ? (u(), f("div", We, [
+        typeof t.toast.promise == "function" ? (u(), L($e, {
           key: 0,
           visible: v.value === "loading"
         }, null, 8, ["visible"])) : w("v-if", !0),
-        r(se) === "success" ? (l(), F(_e, { key: 1 })) : w("v-if", !0),
-        r(se) === "error" ? (l(), F(Re, { key: 2 })) : w("v-if", !0)
+        r(se) === "success" ? (u(), L(Se, { key: 1 })) : w("v-if", !0),
+        r(se) === "error" ? (u(), L(Ae, { key: 2 })) : w("v-if", !0)
       ])) : w("v-if", !0),
-      B("div", We, [
-        B("div", Ye, [
-          typeof t.toast.title == "string" ? (l(), f(L, { key: 0 }, [
-            ie(U(t.toast.title), 1)
-          ], 64)) : t.toast.title === void 0 || t.toast.title === null ? (l(), f(L, { key: 1 }, [
-            ie(U(r(ue)), 1)
-          ], 64)) : r(X) ? (l(), F(ye(t.toast.title), { key: 2 })) : w("v-if", !0)
+      C("div", Ye, [
+        C("div", Je, [
+          typeof t.toast.title == "string" ? (u(), f(z, { key: 0 }, [
+            ie(F(t.toast.title), 1)
+          ], 64)) : t.toast.title === void 0 || t.toast.title === null ? (u(), f(z, { key: 1 }, [
+            ie(F(r(ce)), 1)
+          ], 64)) : r(X) ? (u(), L(ge(t.toast.title), {
+            key: 2,
+            onCloseToast: i[0] || (i[0] = () => {
+              var n;
+              P(), (n = t.toast.cancel) != null && n.onClick && t.toast.cancel.onClick();
+            })
+          }, null, 32)) : w("v-if", !0)
         ]),
-        t.toast.description ? (l(), f("div", {
+        t.toast.description ? (u(), f("div", {
           key: 0,
           "data-description": "",
-          class: oe(t.descriptionClass + r(E))
-        }, U(t.toast.description), 3)) : w("v-if", !0)
+          class: oe(t.descriptionClass + r(I))
+        }, F(t.toast.description), 3)) : w("v-if", !0)
       ]),
-      t.toast.cancel ? (l(), f("button", {
+      t.toast.cancel ? (u(), f("button", {
         key: 2,
         "data-button": "",
         "data-cancel": "",
-        onClick: a[0] || (a[0] = () => {
-          var u;
-          O(), (u = t.toast.cancel) != null && u.onClick && t.toast.cancel.onClick();
+        onClick: i[1] || (i[1] = () => {
+          var n;
+          P(), (n = t.toast.cancel) != null && n.onClick && t.toast.cancel.onClick();
         })
-      }, U(t.toast.cancel.label), 1)) : w("v-if", !0),
-      t.toast.action ? (l(), f("button", {
+      }, F(t.toast.cancel.label), 1)) : w("v-if", !0),
+      t.toast.action ? (u(), f("button", {
         key: 3,
         "data-button": "",
-        onClick: a[1] || (a[1] = () => {
-          var u;
-          O(), (u = t.toast.action) == null || u.onClick();
+        onClick: i[2] || (i[2] = () => {
+          var n;
+          P(), (n = t.toast.action) == null || n.onClick();
         })
-      }, U(t.toast.action.label), 1)) : w("v-if", !0)
-    ], 46, Ve));
+      }, F(t.toast.action.label), 1)) : w("v-if", !0)
+    ], 46, je));
   }
 });
-const Qe = /* @__PURE__ */ A(Je, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toast.vue"]]), Xe = ["aria-label"], Ze = ["data-theme", "data-rich-colors", "data-y-position", "data-x-position"], et = j({
+const Xe = /* @__PURE__ */ A(Qe, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toast.vue"]]), Ze = ["aria-label"], et = ["data-theme", "data-rich-colors", "data-y-position", "data-x-position"], tt = j({
   inheritAttrs: !1
-}), tt = /* @__PURE__ */ j({
-  ...et,
+}), st = /* @__PURE__ */ j({
+  ...tt,
   __name: "Toaster",
@@ -463,18 +469,18 @@ props: {
   setup(t) {
-    const e = t, s = "32px", i = 356, D = 14, K = ge(), m = c([]), I = c([]), g = c(!1), $ = c(!1), _ = p(() => e.position.split("-")), v = c(null), P = e.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    function z(d) {
-      I.value = d;
+    const e = t, s = "32px", a = 356, N = 14, K = be(), m = c([]), D = c([]), g = c(!1), B = c(!1), S = p(() => e.position.split("-")), v = c(null), q = e.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    function G(d) {
+      D.value = d;
     }
-    function S(d) {
-      m.value = m.value.filter(({ id: n }) => n !== d.id);
+    function O(d) {
+      m.value = m.value.filter(({ id: l }) => l !== d.id);
     }
     return Z(() => {
-      const d = N.subscribe((n) => {
-        if (n.dismiss) {
+      const d = $.subscribe((l) => {
+        if (l.dismiss) {
           m.value = m.value.map(
-            (h) => h.id === n.id ? { ...h, delete: !0 } : h
+            (h) => h.id === l.id ? { ...h, delete: !0 } : h
           );
           return;
         }
-        m.value = [n, ...m.value];
+        m.value = [l, ...m.value];
       });
@@ -487,20 +493,20 @@ ae(() => {
     }), R((d) => {
-      function n(h) {
-        var q, E;
+      function l(h) {
+        var _, I;
         e.hotkey.every(
-          (C) => h[C] || h.code === C
-        ) && (g.value = !0, (q = v.value) == null || q.focus()), h.code === "Escape" && (document.activeElement === v.value || ((E = v.value) == null ? void 0 : E.contains(document.activeElement))) && (g.value = !1);
+          (E) => h[E] || h.code === E
+        ) && (g.value = !0, (_ = v.value) == null || _.focus()), h.code === "Escape" && (document.activeElement === v.value || ((I = v.value) == null ? void 0 : I.contains(document.activeElement))) && (g.value = !1);
       }
-      document.addEventListener("keydown", n), d(() => {
-        document.removeEventListener("keydown", n);
+      document.addEventListener("keydown", l), d(() => {
+        document.removeEventListener("keydown", l);
       });
-    }), (d, n) => {
+    }), (d, l) => {
       var h;
-      return l(), f(L, null, [
+      return u(), f(z, null, [
         w(" Remove item from normal navigation flow, only available via hotkey "),
-        B("section", {
-          "aria-label": `Notifications ${r(P)}`,
+        C("section", {
+          "aria-label": `Notifications ${r(q)}`,
           tabIndex: -1
         }, [
-          B("ol", {
+          C("ol", {
             ref_key: "listRef",
@@ -512,40 +518,40 @@ ref: v,
             "data-rich-colors": t.richColors,
-            "data-y-position": r(_)[0],
-            "data-x-position": r(_)[1],
+            "data-y-position": r(S)[0],
+            "data-x-position": r(S)[1],
             style: ee(
               {
-                "--front-toast-height": `${(h = I.value[0]) == null ? void 0 : h.height}px`,
+                "--front-toast-height": `${(h = D.value[0]) == null ? void 0 : h.height}px`,
                 "--offset": typeof t.offset == "number" ? `${t.offset}px` : t.offset || s,
-                "--width": `${i}px`,
-                "--gap": `${D}px`,
+                "--width": `${a}px`,
+                "--gap": `${N}px`,
                 ...r(K).style
               }
             ),
-            onMouseenter: n[0] || (n[0] = (x) => g.value = !0),
-            onMousemove: n[1] || (n[1] = (x) => g.value = !0),
-            onMouseleave: n[2] || (n[2] = () => {
-              $.value || (g.value = !1);
+            onMouseenter: l[0] || (l[0] = (x) => g.value = !0),
+            onMousemove: l[1] || (l[1] = (x) => g.value = !0),
+            onMouseleave: l[2] || (l[2] = () => {
+              B.value || (g.value = !1);
             }),
-            onPointerdown: n[3] || (n[3] = (x) => $.value = !1),
-            onPointerup: n[4] || (n[4] = (x) => $.value = !1)
+            onPointerdown: l[3] || (l[3] = (x) => B.value = !1),
+            onPointerup: l[4] || (l[4] = (x) => B.value = !1)
           }, [
-            (l(!0), f(L, null, ne(m.value, (x, q) => {
-              var E, C, G;
-              return l(), F(Qe, {
+            (u(!0), f(z, null, ne(m.value, (x, _) => {
+              var I, E, M;
+              return u(), L(Xe, {
                 key: x.id,
-                index: q,
+                index: _,
                 toast: x,
                 duration: t.duration,
-                className: (E = t.toastOptions) == null ? void 0 : E.className,
-                descriptionClassName: (C = t.toastOptions) == null ? void 0 : C.descriptionClassName,
+                className: (I = t.toastOptions) == null ? void 0 : I.className,
+                descriptionClassName: (E = t.toastOptions) == null ? void 0 : E.descriptionClassName,
                 invert: t.invert,
                 visibleToasts: t.visibleToasts,
                 closeButton: t.closeButton,
-                interacting: $.value,
+                interacting: B.value,
                 position: t.position,
-                style: ee((G = t.toastOptions) == null ? void 0 : G.style),
-                removeToast: S,
+                style: ee((M = t.toastOptions) == null ? void 0 : M.style),
+                removeToast: O,
                 toasts: m.value,
-                heights: I.value,
-                setHeights: z,
+                heights: D.value,
+                setHeights: G,
                 expandByDefault: t.expand,
@@ -555,16 +561,16 @@ expanded: g.value
             }), 128))
-          ], 44, Ze)
-        ], 8, Xe)
+          ], 44, et)
+        ], 8, Ze)
       ], 2112);
     };
   }
-}), st = /* @__PURE__ */ A(tt, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toaster.vue"]]), rt = {
+}), ot = /* @__PURE__ */ A(st, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toaster.vue"]]), lt = {
   install(t) {
-    t.component("Toaster", st);
+    t.component("Toaster", ot);
   }
 };
 export {
-  st as Toaster,
-  rt as default,
-  at as toast
+  ot as Toaster,
+  lt as default,
+  rt as toast
 };

package.json

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

README.md

@@ -74,4 +74,4 @@ # Sonner for Vue
 <script setup lang="ts">
-// alternatively, you can also use it here
-const { $toast } = useNuxtApp()
+  // alternatively, you can also use it here
+  const { $toast } = useNuxtApp()
 </script>
@@ -175,3 +175,3 @@ ```
 <script lang="ts" setup>
-  import { defineComponent, h, shallowRef } from 'vue'
+  import { defineComponent, h, makeRaw } from 'vue'
 
@@ -187,3 +187,3 @@ const CustomDiv = defineComponent({
 
-  toast(shallowRef(CustomDiv))
+  toast(makeRaw(CustomDiv))
 </script>
@@ -200,5 +200,7 @@ ```
 <script lang="ts" setup>
+import { markRaw } from 'vue'
+
 import HeadlessToast from './HeadlessToast.vue'
 
-toast.custom(shallowRef(HeadlessToast), { duration: 999999 })
+toast.custom(markRaw(HeadlessToast), { duration: 999999 })
 </script>
@@ -240,3 +242,3 @@ ```
 <Toaster
-  toastOptions="{
+  :toastOptions="{
     style: { background: 'red' },
@@ -243,0 +245,0 @@ className: 'my-toast',

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

233568

increased by0.17%

Lines of code

816

increased by0.74%

Number of lines in readme file

344

increased by0.58%

No dependency changes