vue-sonner - npm Package Compare versions

Comparing version 0.4.4 to 1.0.0

lib/state.d.ts

 import type { Component } from 'vue';
-import { ExternalToast, ToastT, PromiseData, PromiseT, ToastToDismiss } from './types';
+import { ExternalToast, ToastT, PromiseData, PromiseT, ToastToDismiss, ToastTypes } from './types';
 declare class Observer {
@@ -9,2 +9,8 @@ subscribers: Array<(toast: ExternalToast | ToastToDismiss) => void>;
     publish: (data: ToastT) => void;
+    addToast: (data: ToastT) => void;
+    create: (data: ExternalToast & {
+        message?: string | Component;
+        type?: ToastTypes;
+        promise?: PromiseT;
+    }) => string | number;
     dismiss: (id?: string | number | undefined) => string | number | undefined;
@@ -14,4 +20,7 @@ message: (message: string | Component, data?: ExternalToast | undefined) => string | number;
     success: (message: string | Component, data?: ExternalToast | undefined) => string | number;
+    info: (message: string | Component, data?: ExternalToast | undefined) => string | number;
+    warning: (message: string | Component, data?: ExternalToast | undefined) => string | number;
+    loading: (message: string | Component, data?: ExternalToast | undefined) => string | number;
     promise: (promise: PromiseT, data?: PromiseData | undefined) => string | number;
-    custom: (component: Component, data?: ExternalToast | undefined) => void;
+    custom: (component: Component, data?: ExternalToast | undefined) => string | number;
 }
@@ -21,8 +30,11 @@ export declare const ToastState: Observer;
     success: (message: string | Component, data?: ExternalToast | undefined) => string | number;
+    info: (message: string | Component, data?: ExternalToast | undefined) => string | number;
+    warning: (message: string | Component, data?: ExternalToast | undefined) => string | number;
     error: (message: string | Component, data?: ExternalToast | undefined) => string | number;
-    custom: (component: Component, data?: ExternalToast | undefined) => void;
+    custom: (component: Component, data?: ExternalToast | undefined) => string | number;
     message: (message: string | Component, data?: ExternalToast | undefined) => string | number;
     promise: (promise: PromiseT, data?: PromiseData | undefined) => string | number;
     dismiss: (id?: string | number | undefined) => string | number | undefined;
+    loading: (message: string | Component, data?: ExternalToast | undefined) => string | number;
 };
 export {};

lib/Toaster.vue.d.ts

@@ -0,1 +1,2 @@
+import { CSSProperties } from 'vue';
 import { Position, Theme, ToastOptions } from './types';
@@ -10,2 +11,3 @@ export interface ToasterProps {
     duration?: number;
+    gap?: number;
     visibleToasts?: number;
@@ -15,11 +17,18 @@ closeButton?: boolean;
     className?: string;
-    style?: Record<string, any>;
+    style?: CSSProperties;
     offset?: string | number;
+    dir?: 'rtl' | 'ltr' | 'auto';
 }
 declare const _default: import("vue").DefineComponent<{
     style: {
-        type: import("vue").PropType<Record<string, any>>;
+        type: import("vue").PropType<CSSProperties>;
+        default: () => {};
     };
+    dir: {
+        type: import("vue").PropType<"auto" | "ltr" | "rtl">;
+        default: string;
+    };
     className: {
         type: import("vue").PropType<string>;
+        default: string;
     };
@@ -32,6 +41,4 @@ invert: {
         type: import("vue").PropType<number>;
+        default: number;
     };
-    offset: {
-        type: import("vue").PropType<string | number>;
-    };
     position: {
@@ -41,2 +48,6 @@ type: import("vue").PropType<Position>;
     };
+    offset: {
+        type: import("vue").PropType<string | number>;
+        default: string;
+    };
     visibleToasts: {
@@ -50,2 +61,6 @@ type: import("vue").PropType<number>;
     };
+    gap: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     theme: {
@@ -73,6 +88,12 @@ type: import("vue").PropType<Theme>;
     style: {
-        type: import("vue").PropType<Record<string, any>>;
+        type: import("vue").PropType<CSSProperties>;
+        default: () => {};
     };
+    dir: {
+        type: import("vue").PropType<"auto" | "ltr" | "rtl">;
+        default: string;
+    };
     className: {
         type: import("vue").PropType<string>;
+        default: string;
     };
@@ -85,6 +106,4 @@ invert: {
         type: import("vue").PropType<number>;
+        default: number;
     };
-    offset: {
-        type: import("vue").PropType<string | number>;
-    };
     position: {
@@ -94,2 +113,6 @@ type: import("vue").PropType<Position>;
     };
+    offset: {
+        type: import("vue").PropType<string | number>;
+        default: string;
+    };
     visibleToasts: {
@@ -103,2 +126,6 @@ type: import("vue").PropType<number>;
     };
+    gap: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     theme: {
@@ -125,6 +152,12 @@ type: import("vue").PropType<Theme>;
 }>>, {
+    style: CSSProperties;
+    dir: "auto" | "ltr" | "rtl";
+    className: string;
     invert: boolean;
+    duration: number;
     position: Position;
+    offset: string | number;
     visibleToasts: number;
     closeButton: boolean;
+    gap: number;
     theme: Theme;
@@ -131,0 +164,0 @@ hotkey: string[];

lib/types.d.ts

@@ -1,4 +0,4 @@
-import { Component } from 'vue';
-export declare type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
-export declare type PromiseT = Promise<any> | (() => Promise<any>);
+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 & {
@@ -15,2 +15,3 @@ loading: string | Component;
     invert?: boolean;
+    dismissible?: boolean;
     description?: string;
@@ -31,5 +32,7 @@ duration?: number;
     promise?: PromiseT;
-    style?: Record<string, any>;
+    style?: CSSProperties;
+    unstyled?: boolean;
     className?: string;
     descriptionClassName?: string;
+    position?: Position;
 }
@@ -44,3 +47,5 @@ export declare type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
     descriptionClassName?: string;
-    style?: Record<string, any>;
+    style?: CSSProperties;
+    duration?: number;
+    unstyled?: boolean;
 }
@@ -52,3 +57,3 @@ export declare enum SwipeStateTypes {
 }
-export declare type Theme = 'light' | 'dark';
+export declare type Theme = 'light' | 'dark' | 'system';
 export interface ToastToDismiss {
@@ -58,4 +63,4 @@ id: number | string;
 }
-export declare type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title'> & {
+export declare type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title' | 'delete'> & {
     id?: number | string;
 };

lib/vue-sonner.js

@@ -1,20 +0,34 @@
-var ve = Object.defineProperty;
-var fe = (s, t, e) => t in s ? ve(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var g = (s, t, e) => (fe(s, typeof t != "symbol" ? t + "" : t, e), e);
+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);
 import "./index.css";
-import { defineComponent as J, openBlock as u, createElementBlock as v, createElementVNode as C, Fragment as V, renderList as se, unref as _, ref as c, computed as f, onMounted as Y, watchEffect as D, onUnmounted as oe, normalizeClass as ee, normalizeStyle as G, createVNode as pe, createCommentVNode as w, createBlock as q, createTextVNode as te, toDisplayString as R, resolveDynamicComponent as me, useAttrs as he } from "vue";
-let O = 0;
-class ye {
+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;
+class Te {
   constructor() {
-    g(this, "subscribers");
-    g(this, "toasts");
+    h(this, "subscribers");
+    h(this, "toasts");
     // We use arrow functions to maintain the correct `this` reference
-    g(this, "subscribe", (t) => (this.subscribers.push(t), () => {
+    h(this, "subscribe", (t) => (this.subscribers.push(t), () => {
       const e = this.subscribers.indexOf(t);
       this.subscribers.splice(e, 1);
     }));
-    g(this, "publish", (t) => {
+    h(this, "publish", (t) => {
       this.subscribers.forEach((e) => e(t)), this.toasts = [...this.toasts, t];
     });
-    g(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
+    h(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 }), {
+        ...c,
+        ...t,
+        id: v,
+        dismissible: w,
+        title: e
+      }) : c) : this.addToast({ title: e, ...o, dismissible: w, id: v }), v;
+    });
+    h(this, "dismiss", (t) => (t || this.toasts.forEach((e) => {
       this.subscribers.forEach(
@@ -24,15 +38,18 @@ (o) => o({ id: e.id, dismiss: !0 })
     }), this.subscribers.forEach((e) => e({ id: t, dismiss: !0 })), t));
-    g(this, "message", (t, e) => {
+    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, "error", (t, e) => {
+    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;
     });
-    g(this, "success", (t, e) => {
+    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;
     });
-    g(this, "promise", (t, e) => {
+    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++;
@@ -42,5 +59,5 @@ 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()?
-    g(this, "custom", (t, e) => {
+    h(this, "custom", (t, e) => {
       const o = (e == null ? void 0 : e.id) || O++;
-      this.publish({ ...e, id: o, title: t });
+      return this.publish({ ...e, id: o, title: t }), o;
     });
@@ -50,5 +67,5 @@ this.subscribers = [], this.toasts = [];
 }
-const B = new ye(), ge = (s, t) => {
+const T = new Te(), xe = (s, t) => {
   const e = (t == null ? void 0 : t.id) || O++;
-  return B.publish({
+  return T.publish({
     title: s,
@@ -58,10 +75,13 @@ ...t,
   }), e;
-}, be = ge, rt = Object.assign(be, {
-  success: B.success,
-  error: B.error,
-  custom: B.custom,
-  message: B.message,
-  promise: B.promise,
-  dismiss: B.dismiss
-}), Te = ["data-visible"], xe = { className: "sonner-spinner" }, we = /* @__PURE__ */ J({
+}, ke = xe, kt = Object.assign(ke, {
+  success: T.success,
+  info: T.info,
+  warning: T.warning,
+  error: T.error,
+  custom: T.custom,
+  message: T.message,
+  promise: T.promise,
+  dismiss: T.dismiss,
+  loading: T.loading
+}), $e = ["data-visible"], Be = { className: "sonner-spinner" }, Ce = /* @__PURE__ */ ee({
   __name: "Loader",
@@ -73,20 +93,20 @@ props: {
     const t = Array(12).fill(0);
-    return (e, o) => (u(), v("div", {
+    return (e, o) => (l(), f("div", {
       className: "sonner-loading-wrapper",
       "data-visible": s.visible
     }, [
-      C("div", xe, [
-        (u(!0), v(V, null, se(_(t), (h) => (u(), v("div", {
-          key: `spinner-bar-${h}`,
+      $("div", Be, [
+        (l(!0), f(W, null, ae(R(t), (v) => (l(), f("div", {
+          key: `spinner-bar-${v}`,
           className: "sonner-loading-bar"
         }))), 128))
       ])
-    ], 8, Te));
+    ], 8, $e));
   }
-}), Q = (s, t) => {
+}), V = (s, t) => {
   const e = s.__vccOpts || s;
-  for (const [o, h] of t)
-    e[o] = h;
+  for (const [o, v] of t)
+    e[o] = v;
   return e;
-}, ke = {}, Be = {
+}, _e = {}, Ee = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -97,13 +117,13 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Ce = /* @__PURE__ */ C("path", {
+}, Ie = /* @__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), $e = [
-  Ce
+}, null, -1), Ne = [
+  Ie
 ];
-function Ne(s, t) {
-  return u(), v("svg", Be, $e);
+function Se(s, t) {
+  return l(), f("svg", Ee, Ne);
 }
-const Ee = /* @__PURE__ */ Q(ke, [["render", Ne]]), Ie = {}, Pe = {
+const Me = /* @__PURE__ */ V(_e, [["render", Se]]), Oe = {}, Pe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -114,13 +134,45 @@ viewBox: "0 0 20 20",
   width: "20"
-}, Se = /* @__PURE__ */ C("path", {
+}, Ae = /* @__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
+];
+function Re(s, t) {
+  return l(), f("svg", Pe, De);
+}
+const ze = /* @__PURE__ */ V(Oe, [["render", Re]]), qe = {}, He = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, Le = /* @__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
+];
+function Fe(s, t) {
+  return l(), f("svg", He, Ve);
+}
+const Ue = /* @__PURE__ */ V(qe, [["render", Fe]]), je = {}, Ke = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20",
+  fill: "currentColor",
+  height: "20",
+  width: "20"
+}, We = /* @__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), Oe = [
-  Se
+}, null, -1), Ye = [
+  We
 ];
-function De(s, t) {
-  return u(), v("svg", Pe, Oe);
+function Ge(s, t) {
+  return l(), f("svg", Ke, Ye);
 }
-const _e = /* @__PURE__ */ Q(Ie, [["render", De]]), Ae = {}, Re = {
+const Je = /* @__PURE__ */ V(je, [["render", Ge]]), Qe = {}, Xe = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -135,3 +187,3 @@ width: "12",
   "stroke-linejoin": "round"
-}, qe = /* @__PURE__ */ C("line", {
+}, Ze = /* @__PURE__ */ $("line", {
   x1: "18",
@@ -141,3 +193,3 @@ y1: "6",
   y2: "18"
-}, null, -1), Me = /* @__PURE__ */ C("line", {
+}, null, -1), et = /* @__PURE__ */ $("line", {
   x1: "6",
@@ -147,13 +199,13 @@ y1: "6",
   y2: "18"
-}, null, -1), He = [
-  qe,
-  Me
+}, null, -1), tt = [
+  Ze,
+  et
 ];
-function ze(s, t) {
-  return u(), v("svg", Re, He);
+function st(s, t) {
+  return l(), f("svg", Xe, tt);
 }
-const Le = /* @__PURE__ */ Q(Ae, [["render", ze]]), 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"], Fe = ["data-disabled"], Ue = {
+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 = {
   key: 1,
   "data-icon": ""
-}, je = { "data-content": "" }, Ke = { "data-title": "" }, We = 4e3, Ye = 14, Ge = 20, Je = 200, Qe = /* @__PURE__ */ J({
+}, rt = { "data-content": "" }, lt = { "data-title": "" }, ut = 4e3, ct = 14, dt = 20, vt = 200, ft = /* @__PURE__ */ ee({
   __name: "Toast",
@@ -216,18 +268,18 @@ props: {
   setup(s, { emit: t }) {
-    const e = s, o = (n) => !!n.promise, h = c(!1), y = c(!1), k = c(!1), P = c(!1), d = c(null), S = c(0), M = c(0), l = c(null), i = c(null), p = f(() => e.index === 0), T = f(() => e.index + 1 <= e.visibleToasts), $ = f(() => e.toast.type), N = e.toast.className || "", E = e.toast.descriptionClassName || "", H = e.toast.style || {}, z = f(
+    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
-    ), ne = f(
-      () => e.toast.duration || e.duration || We
-    ), F = c(0), A = c(0), U = c(ne.value), X = c(0), L = c(null), j = f(() => e.position.split("-")), ie = f(() => e.heights.reduce((n, a, r) => r >= z.value ? n : n + a.height, 0)), ae = f(() => e.toast.invert || e.invert), K = f(() => d.value === "loading"), Z = f(
-      () => d.value ?? (e.toast.type || null)
-    ), W = f(() => !o(e.toast) && typeof e.toast.title == "object"), le = f(() => {
+    ), U = m(
+      () => 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(
+      () => c.value ?? (e.toast.type || null)
+    ), Q = m(() => !o(e.toast) && typeof e.toast.title == "object"), ce = m(() => {
       if (!o(e.toast))
         return null;
-      switch (d.value) {
+      switch (c.value) {
         case "loading":
           return e.toast.loading;
         case "success":
-          return typeof e.toast.success == "function" ? l.value : e.toast.success;
+          return typeof e.toast.success == "function" ? P.value : e.toast.success;
         case "error":
-          return typeof e.toast.error == "function" ? l.value : e.toast.error;
+          return typeof e.toast.error == "function" ? P.value : e.toast.error;
         default:
@@ -237,89 +289,93 @@ return null;
     });
-    Y(() => h.value = !0), D(() => {
-      A.value = z.value * Ye + ie.value;
+    X(() => v.value = !0), D(() => {
+      H.value = z.value * ct + le.value;
     }), D(() => {
       var n, a;
       if (e.toast && o(e.toast)) {
-        const r = e.toast;
-        d.value = "loading";
-        const b = (m) => {
-          m.then((x) => {
-            r.success && typeof r.success == "function" && (l.value = r.success(x)), d.value = "success";
-          }).catch((x) => {
-            r.error && typeof r.error == "function" && (l.value = r.error(x)), d.value = "error";
+        const u = e.toast;
+        c.value = "loading";
+        const k = (b) => {
+          b.then((_) => {
+            u.success && typeof u.success == "function" && (P.value = u.success(_)), c.value = "success";
+          }).catch((_) => {
+            u.error && typeof u.error == "function" && (P.value = u.error(_)), c.value = "error";
           });
         };
-        e.toast.promise instanceof Promise ? b(e.toast.promise) : typeof e.toast.promise == "function" && b((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 = (n = e.toast) == null ? void 0 : n.promise) == null ? void 0 : a.call(n));
       }
     });
-    function re() {
+    function de() {
       var n, a;
-      K.value || (I(), (a = (n = e.toast).onDismiss) == null || a.call(n, e.toast));
+      (!J.value || C.value) && (S(), (a = (n = e.toast).onDismiss) == null || a.call(n, e.toast));
     }
-    function I() {
-      y.value = !0, S.value = A.value;
-      const n = e.heights.filter((a) => a.toastId !== e.toast.id);
+    function S() {
+      g.value = !0, B.value = H.value;
+      const n = e.heights.filter(
+        (a) => a.toastId !== e.toast.id
+      );
       t("update:heights", n), setTimeout(() => {
         t("removeToast", e.toast);
-      }, Je);
+      }, vt);
     }
-    const ue = (n) => {
-      K || (S.value = A.value, n.target.setPointerCapture(n.pointerId), n.target.tagName !== "BUTTON" && (k.value = !0, L.value = n.clientY));
-    }, ce = (n) => {
-      var r, b, m, x;
-      if (P.value)
+    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) => {
+      var u, k, b, _;
+      if (y.value)
         return;
       const a = Number(
-        ((r = i.value) == null ? void 0 : r.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
+        ((u = x.value) == null ? void 0 : u.style.getPropertyValue("--swipe-amount").replace("px", "")) || 0
       );
-      if (Math.abs(a) >= Ge) {
-        S.value = A.value, (m = (b = e.toast).onDismiss) == null || m.call(b, e.toast), I(), P.value = !0;
+      if (Math.abs(a) >= dt) {
+        B.value = H.value, (b = (k = e.toast).onDismiss) == null || b.call(k, e.toast), S(), y.value = !0;
         return;
       }
-      (x = i.value) == null || x.style.setProperty("--swipe-amount", "0px"), L.value = null, k.value = !0;
-    }, de = (n) => {
-      var b, m;
-      if (!L.value)
+      (_ = x.value) == null || _.style.setProperty("--swipe-amount", "0px"), j.value = null, w.value = !0;
+    }, he = (n) => {
+      var k, b;
+      if (!j.value)
         return;
-      const a = n.clientY - L.value;
-      if (!(j.value[0] === "top" ? a < 0 : a > 0)) {
-        (b = i.value) == null || b.style.setProperty("--swipe-amount", "0px");
+      const a = n.clientY - j.value;
+      if (!(G.value[0] === "top" ? a < 0 : a > 0)) {
+        (k = x.value) == null || k.style.setProperty("--swipe-amount", "0px");
         return;
       }
-      (m = i.value) == null || m.style.setProperty("--swipe-amount", `${a}px`);
+      (b = x.value) == null || b.style.setProperty("--swipe-amount", `${a}px`);
     };
     return D((n) => {
-      if (e.toast.promise && d.value === "loading" || e.toast.duration === 1 / 0)
+      if (e.toast.promise && c.value === "loading" || e.toast.duration === 1 / 0)
         return;
       let a;
-      const r = () => {
-        if (X.value < F.value) {
-          const m = (/* @__PURE__ */ new Date()).getTime() - F.value;
-          U.value = U.value - m;
+      const u = () => {
+        if (te.value < q.value) {
+          const b = (/* @__PURE__ */ new Date()).getTime() - q.value;
+          Y.value = Y.value - b;
         }
-        X.value = (/* @__PURE__ */ new Date()).getTime();
-      }, b = () => {
-        F.value = (/* @__PURE__ */ new Date()).getTime(), a = setTimeout(() => {
-          var m, x;
-          (x = (m = e.toast).onAutoClose) == null || x.call(m, e.toast), I();
-        }, U.value);
+        te.value = (/* @__PURE__ */ new Date()).getTime();
+      }, k = () => {
+        q.value = (/* @__PURE__ */ new Date()).getTime(), a = setTimeout(() => {
+          var b, _;
+          (_ = (b = e.toast).onAutoClose) == null || _.call(b, e.toast), S();
+        }, Y.value);
       };
-      e.expanded || e.interacting ? r() : b(), n(() => {
+      e.expanded || e.interacting ? u() : k(), n(() => {
         clearTimeout(a);
       });
-    }), Y(() => {
-      if (i.value) {
-        const n = i.value.getBoundingClientRect().height;
-        M.value = n;
+    }), X(() => {
+      if (x.value) {
+        const n = x.value.getBoundingClientRect().height;
+        F.value = n;
         const a = [{ toastId: e.toast.id, height: n }, ...e.heights];
         t("update:heights", a);
       }
-    }), oe(() => {
-      if (i.value) {
-        const n = e.heights.filter((a) => a.toastId !== e.toast.id);
+    }), re(() => {
+      if (x.value) {
+        const n = e.heights.filter(
+          (a) => a.toastId !== e.toast.id
+        );
         t("update:heights", n);
       }
     }), D(() => {
-      e.toast.delete && I();
-    }), (n, a) => (u(), v("li", {
+      e.toast.delete && S();
+    }), (n, a) => (l(), f("li", {
       "aria-live": s.toast.important ? "assertive" : "polite",
@@ -330,69 +386,68 @@ "aria-atomic": "",
       ref_key: "toastRef",
-      ref: i,
+      ref: x,
       "data-sonner-toast": "",
-      class: ee(_(N)),
-      "data-styled": !W.value,
-      "data-mounted": h.value,
+      class: se(R(A)),
+      "data-styled": !Q.value,
+      "data-mounted": v.value,
       "data-promise": !!s.toast.promise,
-      "data-removed": y.value,
-      "data-visible": T.value,
-      "data-y-position": j.value[0],
-      "data-x-position": j.value[1],
+      "data-removed": g.value,
+      "data-visible": r.value,
+      "data-y-position": G.value[0],
+      "data-x-position": G.value[1],
       "data-index": e.index,
-      "data-front": p.value,
-      "data-swiping": k.value,
-      "data-type": d.value !== "loading" && d.value ? d.value : $.value,
-      "data-invert": ae.value,
-      "data-swipe-out": P.value,
-      "data-expanded": !!(e.expanded || e.expandByDefault && h.value),
-      style: G({
+      "data-front": i.value,
+      "data-swiping": w.value,
+      "data-type": c.value !== "loading" && c.value ? c.value : p.value,
+      "data-invert": ue.value,
+      "data-swipe-out": y.value,
+      "data-expanded": !!(e.expanded || e.expandByDefault && v.value),
+      style: Z({
         "--index": e.index,
         "--toasts-before": e.index,
         "--z-index": s.toasts.length - e.index,
-        "--offset": `${y.value ? S.value : A.value}px`,
-        "--initial-height": e.expandByDefault ? "auto" : `${M.value}px`,
-        ..._(H)
+        "--offset": `${g.value ? B.value : H.value}px`,
+        "--initial-height": e.expandByDefault ? "auto" : `${F.value}px`,
+        ...R(N)
       }),
-      onPointerdown: ue,
-      onPointerup: ce,
-      onPointermove: de
+      onPointerdown: ve,
+      onPointerup: fe,
+      onPointermove: he
     }, [
-      e.closeButton && !W.value ? (u(), v("button", {
+      e.closeButton && !Q.value ? (l(), f("button", {
         key: 0,
         "aria-label": "Close toast",
-        "data-disabled": K.value,
         "data-close-button": "",
-        onClick: re
+        "data-disabled": J.value,
+        onClick: de
       }, [
-        pe(Le)
-      ], 8, Fe)) : w("", !0),
-      $.value || s.toast.icon || s.toast.promise ? (u(), v("div", Ue, [
-        typeof s.toast.promise == "function" ? (u(), q(we, {
+        ge(ot)
+      ], 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, {
           key: 0,
-          visible: d.value === "loading"
-        }, null, 8, ["visible"])) : w("", !0),
-        Z.value === "success" ? (u(), q(Ee, { key: 1 })) : w("", !0),
-        Z.value === "error" ? (u(), q(_e, { key: 2 })) : w("", !0)
-      ])) : w("", !0),
-      C("div", je, [
-        C("div", Ke, [
-          typeof s.toast.title == "string" ? (u(), v(V, { key: 0 }, [
-            te(R(s.toast.title), 1)
-          ], 64)) : s.toast.title === void 0 || s.toast.title === null ? (u(), v(V, { key: 1 }, [
-            te(R(le.value), 1)
-          ], 64)) : W.value ? (u(), q(me(s.toast.title), {
+          visible: c.value === "loading" || p.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)
+      ])) : 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), {
             key: 2,
             onCloseToast: a[0] || (a[0] = () => {
-              var r;
-              I(), (r = s.toast.cancel) != null && r.onClick && s.toast.cancel.onClick();
+              var u;
+              S(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
             })
-          }, null, 32)) : w("", !0)
+          }, null, 32)) : E("", !0)
         ]),
-        s.toast.description ? (u(), v("div", {
+        s.toast.description ? (l(), f("div", {
           key: 0,
           "data-description": "",
-          class: ee(s.descriptionClass + _(E))
-        }, R(s.toast.description), 3)) : w("", !0)
+          class: se(s.descriptionClass + R(I))
+        }, L(s.toast.description), 3)) : E("", !0)
       ]),
-      s.toast.cancel ? (u(), v("button", {
+      s.toast.cancel ? (l(), f("button", {
         key: 2,
@@ -402,18 +457,18 @@ "data-button": "",
         onClick: a[1] || (a[1] = () => {
-          var r;
-          I(), (r = s.toast.cancel) != null && r.onClick && s.toast.cancel.onClick();
+          var u;
+          S(), (u = s.toast.cancel) != null && u.onClick && s.toast.cancel.onClick();
         })
-      }, R(s.toast.cancel.label), 1)) : w("", !0),
-      s.toast.action ? (u(), v("button", {
+      }, L(s.toast.cancel.label), 1)) : E("", !0),
+      s.toast.action ? (l(), f("button", {
         key: 3,
         "data-button": "",
         onClick: a[2] || (a[2] = () => {
-          var r;
-          I(), (r = s.toast.action) == null || r.onClick();
+          var u;
+          S(), (u = s.toast.action) == null || u.onClick();
         })
-      }, R(s.toast.action.label), 1)) : w("", !0)
-    ], 46, Ve));
+      }, L(s.toast.action.label), 1)) : E("", !0)
+    ], 46, it));
   }
 });
-const Xe = ["aria-label"], Ze = ["data-theme", "data-rich-colors", "data-y-position", "data-x-position"], et = 3, tt = "32px", st = 356, ot = 14, nt = /* @__PURE__ */ J({
+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({
   name: "Toaster",
@@ -429,108 +484,131 @@ inheritAttrs: !1,
     expand: { type: Boolean, default: !1 },
-    duration: {},
-    visibleToasts: { default: et },
+    duration: { default: gt },
+    gap: { default: ne },
+    visibleToasts: { default: mt },
     closeButton: { type: Boolean, default: !1 },
     toastOptions: { default: () => ({}) },
-    className: {},
-    style: {},
-    offset: {}
+    className: { default: "" },
+    style: { default: () => ({}) },
+    offset: { default: ie },
+    dir: { default: "auto" }
   },
   setup(s) {
-    const t = s, e = he(), o = c([]), h = c([]), y = c(!1), k = c(!1), P = f(() => t.position.split("-")), d = c(null), S = t.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    function M(l) {
-      o.value = o.value.filter(({ id: i }) => i !== l.id);
+    const t = s, e = be(), o = d([]), v = d([]), g = d(!1), w = d(!1), y = d(
+      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);
     }
-    return Y(() => {
-      const l = B.subscribe((i) => {
-        if (i.dismiss) {
+    function x() {
+      if (typeof window > "u")
+        return "ltr";
+      const i = document.documentElement.getAttribute("dir");
+      return i === "auto" || !i ? window.getComputedStyle(document.documentElement).direction : i;
+    }
+    return X(() => {
+      const i = T.subscribe((r) => {
+        if (r.dismiss) {
           o.value = o.value.map(
-            (p) => p.id === i.id ? { ...p, delete: !0 } : p
+            (p) => p.id === r.id ? { ...p, delete: !0 } : p
           );
           return;
         }
-        o.value = [i, ...o.value];
+        o.value = [r, ...o.value];
       });
-      oe(() => {
-        l();
+      re(() => {
+        i();
       });
-    }), D(() => {
-      o.value.length <= 1 && (y.value = !1);
-    }), D((l) => {
-      function i(p) {
-        var $, N;
+    }), we(
+      () => t.theme,
+      (i) => {
+        if (i !== "system") {
+          y.value = i;
+          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";
+        });
+      }
+    ), D(() => {
+      o.value.length <= 1 && (g.value = !1);
+    }), D((i) => {
+      function r(p) {
+        var A, I;
         t.hotkey.every(
-          (E) => p[E] || p.code === E
-        ) && (y.value = !0, ($ = d.value) == null || $.focus()), p.code === "Escape" && (document.activeElement === d.value || (N = d.value) != null && N.contains(document.activeElement)) && (y.value = !1);
+          (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);
       }
-      document.addEventListener("keydown", i), l(() => {
-        document.removeEventListener("keydown", i);
+      document.addEventListener("keydown", r), i(() => {
+        document.removeEventListener("keydown", r);
       });
-    }), (l, i) => {
+    }), (i, r) => {
       var p;
-      return u(), v("section", {
-        "aria-label": `Notifications ${_(S)}`,
+      return l(), f("section", {
+        "aria-label": `Notifications ${R(F)}`,
         tabIndex: -1
       }, [
-        C("ol", {
+        $("ol", {
           ref_key: "listRef",
-          ref: d,
+          ref: B,
+          "data-sonner-toaster": "",
+          dir: i.dir === "auto" ? x() : i.dir,
           tabIndex: -1,
-          "data-sonner-toaster": "",
-          "data-theme": l.theme,
-          "data-rich-colors": l.richColors,
-          "data-y-position": P.value[0],
-          "data-x-position": P.value[1],
-          style: G(
+          "data-theme": i.theme,
+          "data-rich-colors": i.richColors,
+          "data-y-position": c.value[0],
+          "data-x-position": c.value[1],
+          style: Z(
             {
-              "--front-toast-height": `${(p = h.value[0]) == null ? void 0 : p.height}px`,
-              "--offset": typeof l.offset == "number" ? `${l.offset}px` : l.offset || tt,
-              "--width": `${st}px`,
-              "--gap": `${ot}px`,
-              ..._(e).style
+              "--front-toast-height": `${(p = v.value[0]) == null ? void 0 : p.height}px`,
+              "--offset": typeof i.offset == "number" ? `${i.offset}px` : i.offset || ie,
+              "--width": `${yt}px`,
+              "--gap": `${ne}px`,
+              ...R(e).style
             }
           ),
-          onMouseenter: i[1] || (i[1] = (T) => y.value = !0),
-          onMousemove: i[2] || (i[2] = (T) => y.value = !0),
-          onMouseleave: i[3] || (i[3] = () => {
-            k.value || (y.value = !1);
+          onMouseenter: r[1] || (r[1] = (C) => g.value = !0),
+          onMousemove: r[2] || (r[2] = (C) => g.value = !0),
+          onMouseleave: r[3] || (r[3] = () => {
+            w.value || (g.value = !1);
           }),
-          onPointerdown: i[4] || (i[4] = (T) => k.value = !1),
-          onPointerup: i[5] || (i[5] = (T) => k.value = !1)
+          onPointerdown: r[4] || (r[4] = (C) => w.value = !1),
+          onPointerup: r[5] || (r[5] = (C) => w.value = !1)
         }, [
-          (u(!0), v(V, null, se(o.value, (T, $) => {
-            var N, E, H;
-            return u(), q(Qe, {
-              key: T.id,
-              index: $,
-              toast: T,
-              duration: l.duration,
-              className: (N = l.toastOptions) == null ? void 0 : N.className,
-              descriptionClassName: (E = l.toastOptions) == null ? void 0 : E.descriptionClassName,
-              invert: l.invert,
-              visibleToasts: l.visibleToasts,
-              closeButton: l.closeButton,
-              interacting: k.value,
-              position: l.position,
-              style: G((H = l.toastOptions) == null ? void 0 : H.style),
+          (l(!0), f(W, null, ae(o.value, (C, A) => {
+            var I, N, z, U;
+            return l(), M(ft, {
+              key: C.id,
+              index: A,
+              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: l.expand,
-              expanded: y.value,
-              heights: h.value,
-              "onUpdate:heights": i[0] || (i[0] = (z) => h.value = z),
-              onRemoveToast: M
-            }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "expanded", "heights"]);
+              expandByDefault: i.expand,
+              gap: i.gap,
+              expanded: g.value,
+              heights: v.value,
+              "onUpdate:heights": r[0] || (r[0] = (q) => v.value = q),
+              onRemoveToast: P
+            }, null, 8, ["index", "toast", "duration", "className", "descriptionClassName", "invert", "visibleToasts", "closeButton", "interacting", "position", "style", "toasts", "expandByDefault", "gap", "expanded", "heights"]);
           }), 128))
-        ], 44, Ze)
-      ], 8, Xe);
+        ], 44, pt)
+      ], 8, ht);
     };
   }
-}), ut = {
+}), $t = {
   install(s) {
-    s.component("Toaster", nt);
+    s.component("Toaster", bt);
   }
 };
 export {
-  nt as Toaster,
-  ut as default,
-  rt as toast
+  bt as Toaster,
+  $t as default,
+  kt as toast
 };

package.json

 {
   "name": "vue-sonner",
-  "version": "0.4.4",
+  "version": "1.0.0",
   "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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

251645

increased by5.14%

Number of package files

22

increased by10%

Lines of code

1173

increased by15.45%

Number of low quality alerts

1

decreased by-50%

No dependency changes