vue-toasts-lite 0.1.7 → 0.1.8

package/README.md

@@ -151,6 +151,7 @@ You can pass custom classes to `ToastsLiteProvider`:
 :root {
   --tl-font-family: system-ui, -apple-system, sans-serif;
   --tl-font-size: 14px;
+  --tl-radius: 8px;
   --tl-bg: hsl(0, 0%, 100%);
   --tl-text: hsl(0, 0%, 20%);
   --tl-border: hsl(0, 0%, 85%);
@@ -160,13 +161,24 @@ You can pass custom classes to `ToastsLiteProvider`:
   --tl-warn: hsl(45, 100%, 51%);
   --tl-info: hsl(210, 80%, 55%);
   --tl-icon-color: hsl(0, 0%, 100%);
-  --tl-loading-border: hsl(0, 0%, 15%);
-
-  --tl-success-bg: color-mix(in srgb, var(--tl-success) 20%, var(--tl-bg));
-  --tl-error-bg: color-mix(in srgb, var(--tl-error) 20%, var(--tl-bg));
-  --tl-warn-bg: color-mix(in srgb, var(--tl-warn) 20%, var(--tl-bg));
-  --tl-info-bg: color-mix(in srgb, var(--tl-info) 20%, var(--tl-bg));
-  --tl-loading-bg: var(--tl-bg);
+  --tl-spinner-color: hsl(0, 0%, 15%);
+
+  --tl-bg-success: color-mix(in srgb, var(--tl-success) 20%, var(--tl-bg));
+  --tl-bg-error: color-mix(in srgb, var(--tl-error) 20%, var(--tl-bg));
+  --tl-bg-warn: color-mix(in srgb, var(--tl-warn) 20%, var(--tl-bg));
+  --tl-bg-info: color-mix(in srgb, var(--tl-info) 20%, var(--tl-bg));
+  --tl-bg-loading: var(--tl-bg);
+
+  --tl-border-success: color-mix(in srgb, var(--tl-success) 40%, var(--tl-border));
+  --tl-border-error: color-mix(in srgb, var(--tl-error) 40%, var(--tl-border));
+  --tl-border-warn: color-mix(in srgb, var(--tl-warn) 40%, var(--tl-border));
+  --tl-border-info: color-mix(in srgb, var(--tl-info) 40%, var(--tl-border));
+
+  --tl-text-success: color-mix(in srgb, var(--tl-success) 20%, var(--tl-text));
+  --tl-text-error: color-mix(in srgb, var(--tl-error) 20%, var(--tl-text));
+  --tl-text-warn: color-mix(in srgb, var(--tl-warn) 20%, var(--tl-text));
+  --tl-text-info: color-mix(in srgb, var(--tl-info) 20%, var(--tl-text));
+  --tl-text-loading: var(--tl-text);
 }
 ```
 

package/dist/index.d.ts

@@ -8,6 +8,7 @@ declare type __VLS_Props = {
     containerClass?: HTMLAttributes["class"];
     wrapperClass?: HTMLAttributes["class"];
     itemClass?: HTMLAttributes["class"];
+    hideCloseButton?: boolean;
 };
 
 declare type Id = string;
@@ -59,6 +60,11 @@ declare type Toast = {
      * @default "top-center"
      */
     position?: ToastPosition;
+    /**
+     * Whether to show a close button on the right side of the toast.
+     * @default true
+     */
+    closable: boolean;
 };
 
 export declare type ToastOptions = Partial<Toast>;

package/dist/index.js

@@ -1,43 +1,44 @@
 var D = Object.defineProperty;
-var M = (r, t, e) => t in r ? D(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var v = (r, t, e) => M(r, typeof t != "symbol" ? t + "" : t, e);
-import { ref as h, defineComponent as $, watch as U, onMounted as L, onUnmounted as k, createElementBlock as y, openBlock as d, withModifiers as A, normalizeStyle as E, normalizeClass as p, createCommentVNode as x, createElementVNode as f, toDisplayString as B, computed as P, createBlock as C, Teleport as I, Fragment as w, renderList as b, unref as g, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
-class V extends Map {
+var M = (s, t, e) => t in s ? D(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var b = (s, t, e) => M(s, typeof t != "symbol" ? t + "" : t, e);
+import { ref as m, defineComponent as k, watch as U, onMounted as L, onUnmounted as A, createElementBlock as v, openBlock as h, normalizeStyle as E, normalizeClass as y, createCommentVNode as w, createElementVNode as f, toDisplayString as x, withModifiers as P, computed as I, createBlock as T, Teleport as N, Fragment as _, renderList as O, unref as g, createVNode as R, TransitionGroup as S, withCtx as V } from "vue";
+class z extends Map {
   constructor() {
     super(...arguments);
-    v(this, "subscribers", []);
+    b(this, "subscribers", []);
   }
-  set(e, o) {
-    return super.set(e, o), this.notify(), this;
+  set(e, a) {
+    return super.set(e, a), this.notify(), this;
   }
   delete(e) {
-    const o = super.delete(e);
-    return this.notify(), o;
+    const a = super.delete(e);
+    return this.notify(), a;
   }
   clear() {
     super.clear(), this.notify();
   }
   subscribe(e) {
     return this.subscribers.push(e), () => {
-      this.subscribers = this.subscribers.filter((o) => o !== e);
+      this.subscribers = this.subscribers.filter((a) => a !== e);
     };
   }
   notify() {
     this.subscribers.forEach((e) => e(Array.from(this.values())));
   }
 }
-const T = {
+const B = {
   type: "success",
   message: "Hello from Toasts Lite",
   autoClose: !0,
   duration: 3e3,
-  position: "top-center"
+  position: "top-center",
+  closable: !0
 };
-class z {
+class F {
   constructor() {
-    v(this, "counter", 0);
-    v(this, "toasts");
-    this.toasts = new V();
+    b(this, "counter", 0);
+    b(this, "toasts");
+    this.toasts = new z();
   }
   /**
    * Returns an array of all currently active toasts.
@@ -292,59 +293,59 @@ class z {
    * ```
    */
   async promise(t, e) {
-    const o = this.loading(e.loading, { position: e.position, id: e.id });
+    const a = this.loading(e.loading, { position: e.position, id: e.id });
     try {
-      return await t, this.success(e.success, { position: e.position, id: o }), o;
+      return await t, this.success(e.success, { position: e.position, id: a }), a;
     } catch {
-      throw this.error(e.error, { position: e.position, id: o }), new Error(e.error);
+      throw this.error(e.error, { position: e.position, id: a }), new Error(e.error);
     }
   }
   ID() {
     return `toast:${Date.now().toString(16)}-${this.counter++}`;
   }
   addOrUpdate(t) {
-    let { id: e = this.ID(), ...o } = t;
+    let { id: e = this.ID(), ...a } = t;
     if (this.toasts.has(e)) {
       const n = this.toasts.get(e);
-      return this.toasts.set(e, { ...n, ...o }), e;
+      return this.toasts.set(e, { ...n, ...a }), e;
     }
-    return this.toasts.set(e, { ...this.mergeWithDefaultOptions(o), id: e }), e;
+    return this.toasts.set(e, { ...this.mergeWithDefaultOptions(a), id: e }), e;
   }
   mergeWithDefaultOptions(t) {
-    const e = Object.assign({}, T);
-    for (let o in T) {
-      const n = o, s = t[n];
-      s != null && (e[n] = s);
+    const e = Object.assign({}, B);
+    for (let a in B) {
+      const n = a, o = t[n];
+      o != null && (e[n] = o);
     }
     return e;
   }
 }
-const O = new z();
-function F() {
-  const r = h(/* @__PURE__ */ new Map());
-  function t(n, s, a) {
-    r.value.has(n) || r.value.set(n, []);
-    const i = r.value.get(n);
-    a && "pause" in a && "resume" in a && (i[s] = a);
+const $ = new F();
+function W() {
+  const s = m(/* @__PURE__ */ new Map());
+  function t(n, o, r) {
+    s.value.has(n) || s.value.set(n, []);
+    const c = s.value.get(n);
+    r && "pause" in r && "resume" in r && (c[o] = r);
   }
   function e(n) {
-    var s;
-    (s = r.value.get(n)) == null || s.forEach((a) => a == null ? void 0 : a.pause());
+    var o;
+    (o = s.value.get(n)) == null || o.forEach((r) => r == null ? void 0 : r.pause());
   }
-  function o(n) {
-    var s;
-    (s = r.value.get(n)) == null || s.forEach((a) => a == null ? void 0 : a.resume());
+  function a(n) {
+    var o;
+    (o = s.value.get(n)) == null || o.forEach((r) => r == null ? void 0 : r.resume());
   }
   return {
     setRef: t,
     pauseAll: e,
-    resumeAll: o
+    resumeAll: a
   };
 }
-const W = {
+const j = {
   key: 0,
   class: "toasts-lite__icon"
-}, j = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ $({
+}, G = { class: "toasts-lite__content" }, H = { class: "toasts-lite__content-message" }, q = /* @__PURE__ */ k({
   __name: "ToastsLiteItem",
   props: {
     id: {},
@@ -352,106 +353,123 @@ const W = {
     message: {},
     autoClose: { type: Boolean },
     duration: {},
-    position: {}
+    position: {},
+    closable: { type: Boolean },
+    hideCloseButton: { type: Boolean }
   },
   emits: ["close"],
-  setup(r, { expose: t, emit: e }) {
-    const o = r, n = e, s = h(null), a = h(0), i = h(0);
-    function c() {
-      s.value && clearTimeout(s.value), n("close");
+  setup(s, { expose: t, emit: e }) {
+    const a = s, n = e, o = m(null), r = m(0), c = m(0);
+    function l() {
+      o.value && clearTimeout(o.value), n("close");
     }
-    function u() {
-      s.value && (clearTimeout(s.value), s.value = null, i.value = o.duration - (Date.now() - a.value));
+    function p() {
+      o.value && (clearTimeout(o.value), o.value = null, c.value = a.duration - (Date.now() - r.value));
     }
-    function l() {
-      !s.value && i.value > 0 && (a.value = Date.now(), s.value = setTimeout(c, i.value));
+    function u() {
+      !o.value && c.value > 0 && (r.value = Date.now(), o.value = setTimeout(l, c.value));
     }
-    function m() {
-      s.value && (clearTimeout(s.value), s.value = null), o.autoClose && (a.value = Date.now(), i.value = o.duration, s.value = setTimeout(c, o.duration));
+    function i() {
+      o.value && (clearTimeout(o.value), o.value = null), a.autoClose && (r.value = Date.now(), c.value = a.duration, o.value = setTimeout(l, a.duration));
     }
     return U(
-      () => [o.autoClose, o.duration],
+      () => [a.autoClose, a.duration],
       () => {
-        m();
+        i();
       }
     ), L(() => {
-      m();
-    }), k(() => {
-      s.value && clearTimeout(s.value);
+      i();
+    }), A(() => {
+      o.value && clearTimeout(o.value);
     }), t({
-      pause: u,
-      resume: l
-    }), (_, J) => (d(), y("div", {
-      class: p(["toasts-lite__toast", `toasts-lite__toast--${r.type}`]),
-      style: E(`--toast-duration: ${r.duration}s;`),
-      onClick: A(c, ["prevent"])
+      pause: p,
+      resume: u
+    }), (C, d) => (h(), v("div", {
+      class: y(["toasts-lite__toast", `toasts-lite__toast--${s.type}`, { "toasts-lite__toast--clickable": s.closable }]),
+      style: E(`--toast-duration: ${s.duration}s;`),
+      onClick: d[0] || (d[0] = (K) => s.closable && l())
     }, [
-      ["success", "error", "loading", "warn", "info"].includes(r.type) ? (d(), y("div", W, [
+      ["success", "error", "loading", "warn", "info"].includes(s.type) ? (h(), v("div", j, [
         f("div", {
-          class: p(`toasts-lite__${r.type}`)
+          class: y(`toasts-lite__${s.type}`)
         }, null, 2)
-      ])) : x("", !0),
-      f("div", j, [
-        f("div", G, B(r.message), 1)
-      ])
+      ])) : w("", !0),
+      f("div", G, [
+        f("div", H, x(s.message), 1)
+      ]),
+      s.closable && !s.hideCloseButton ? (h(), v("button", {
+        key: 1,
+        type: "button",
+        class: "toasts-lite__close",
+        "aria-label": "Close",
+        onClick: P(l, ["stop"])
+      }, [...d[1] || (d[1] = [
+        f("span", {
+          class: "toasts-lite__close-icon",
+          "aria-hidden": "true"
+        }, null, -1)
+      ])])) : w("", !0)
     ], 6));
   }
-}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ $({
+}), J = ["onMouseenter", "onMouseleave"], Y = /* @__PURE__ */ k({
   __name: "ToastsLiteProvider",
   props: {
     containerClass: {},
     wrapperClass: {},
-    itemClass: {}
+    itemClass: {},
+    hideCloseButton: { type: Boolean }
   },
-  setup(r) {
-    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = h([]), { setRef: o, pauseAll: n, resumeAll: s } = F();
-    O.onToastsListChange((i) => {
-      e.value = i;
+  setup(s) {
+    const t = s, e = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], a = m([]), { setRef: n, pauseAll: o, resumeAll: r } = W();
+    $.onToastsListChange((l) => {
+      a.value = l;
     });
-    const a = P(() => {
-      const i = /* @__PURE__ */ new Map();
-      return e.value.forEach((c) => {
-        const u = c.position || "top-center";
-        i.has(u) || i.set(u, []), i.get(u).push(c);
-      }), i;
+    const c = I(() => {
+      const l = /* @__PURE__ */ new Map();
+      return a.value.forEach((p) => {
+        const u = p.position || "top-center";
+        l.has(u) || l.set(u, []), l.get(u).push(p);
+      }), l;
     });
-    return (i, c) => (d(), C(I, { to: "body" }, [
-      (d(), y(w, null, b(t, (u) => f("div", {
+    return (l, p) => (h(), T(N, { to: "body" }, [
+      (h(), v(_, null, O(e, (u) => f("div", {
         key: u,
-        class: p(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
+        class: y(["toasts-lite__toast-container", [s.containerClass, `toasts-lite__${u}`]])
       }, [
         f("div", {
-          class: p(["toasts-lite__toast-wrapper", r.wrapperClass]),
-          onMouseenter: (l) => g(n)(u),
-          onMouseleave: (l) => g(s)(u)
+          class: y(["toasts-lite__toast-wrapper", s.wrapperClass]),
+          onMouseenter: (i) => g(o)(u),
+          onMouseleave: (i) => g(r)(u)
         }, [
-          N(R, {
+          R(S, {
             name: "toasts-lite",
             appear: ""
           }, {
-            default: S(() => [
-              (d(!0), y(w, null, b(a.value.get(u) || [], (l, m) => (d(), C(H, {
-                id: l.id,
+            default: V(() => [
+              (h(!0), v(_, null, O(c.value.get(u) || [], (i, C) => (h(), T(q, {
+                id: i.id,
                 ref_for: !0,
-                ref: (_) => g(o)(u, m, _),
-                key: l.id,
-                type: l.type,
-                message: l.message,
-                "auto-close": l.autoClose,
-                duration: l.duration,
-                position: l.position,
-                class: p(r.itemClass),
-                onClose: (_) => g(O).remove(l.id)
-              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "class", "onClose"]))), 128))
+                ref: (d) => g(n)(u, C, d),
+                key: i.id,
+                type: i.type,
+                message: i.message,
+                "auto-close": i.autoClose,
+                duration: i.duration,
+                position: i.position,
+                closable: i.closable,
+                "hide-close-button": !!t.hideCloseButton,
+                class: y(s.itemClass),
+                onClose: (d) => g($).remove(i.id)
+              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "closable", "hide-close-button", "class", "onClose"]))), 128))
             ]),
             _: 2
           }, 1024)
-        ], 42, q)
+        ], 42, J)
       ], 2)), 64))
     ]));
   }
 });
 export {
-  X as ToastsLiteProvider,
-  O as toasts
+  Y as ToastsLiteProvider,
+  $ as toasts
 };

package/dist/style.css

@@ -1 +1 @@
-:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-font-size: var(--tl-font-size, 14px);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-info: var(--tl-info, hsl(210, 80%, 55%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-bg-success: var(--tl-success-bg, color-mix(in srgb, var(--toasts-lite-success) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-error: var(--tl-error-bg, color-mix(in srgb, var(--toasts-lite-error) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-warn: var(--tl-warn-bg, color-mix(in srgb, var(--toasts-lite-warn) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-info: var(--tl-info-bg, color-mix(in srgb, var(--toasts-lite-info) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-loading: var(--tl-loading-bg, var(--toasts-lite-bg))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);font-size:var(--toasts-lite-font-size);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__info{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-info);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__info:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border);border-right-color:transparent;animation:loadingRotate 1s linear infinite}.toasts-lite__toast--success{background:var(--toasts-lite-bg-success)}.toasts-lite__toast--error{background:var(--toasts-lite-bg-error)}.toasts-lite__toast--warn{background:var(--toasts-lite-bg-warn)}.toasts-lite__toast--info{background:var(--toasts-lite-bg-info)}.toasts-lite__toast--loading{background:var(--toasts-lite-bg-loading)}
+:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-font-size: var(--tl-font-size, 14px);--toasts-lite-radius: var(--tl-radius, 20px);--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-spinner-color: var(--tl-spinner-color, hsl(0, 0%, 15%));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-info: var(--tl-info, hsl(210, 80%, 55%));--toasts-lite-bg-success: var(--tl-bg-success, color-mix(in srgb, var(--toasts-lite-success) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-error: var(--tl-bg-error, color-mix(in srgb, var(--toasts-lite-error) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-warn: var(--tl-bg-warn, color-mix(in srgb, var(--toasts-lite-warn) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-info: var(--tl-bg-info, color-mix(in srgb, var(--toasts-lite-info) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-loading: var(--tl-bg-loading, var(--toasts-lite-bg));--toasts-lite-border-success: var(--tl-border-success, color-mix(in srgb, var(--toasts-lite-success) 40%, var(--toasts-lite-border)));--toasts-lite-border-error: var(--tl-border-error, color-mix(in srgb, var(--toasts-lite-error) 40%, var(--toasts-lite-border)));--toasts-lite-border-warn: var(--tl-border-warn, color-mix(in srgb, var(--toasts-lite-warn) 40%, var(--toasts-lite-border)));--toasts-lite-border-info: var(--tl-border-info, color-mix(in srgb, var(--toasts-lite-info) 40%, var(--toasts-lite-border)));--toasts-lite-text-success: var(--tl-text-success, color-mix(in srgb, var(--toasts-lite-success) 20%, var(--toasts-lite-text)));--toasts-lite-text-error: var(--tl-text-error, color-mix(in srgb, var(--toasts-lite-error) 20%, var(--toasts-lite-text)));--toasts-lite-text-warn: var(--tl-text-warn, color-mix(in srgb, var(--toasts-lite-warn) 20%, var(--toasts-lite-text)));--toasts-lite-text-info: var(--tl-text-info, color-mix(in srgb, var(--toasts-lite-info) 20%, var(--toasts-lite-text)));--toasts-lite-text-loading: var(--tl-text-loading, var(--toasts-lite-text))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transform-origin:center center;transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.56,.64,1),border-radius .4s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px) scale(0);border-radius:50%}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__top-left .toasts-lite__toast-wrapper,.toasts-lite__bottom-left .toasts-lite__toast-wrapper{align-items:flex-start}.toasts-lite__top-right .toasts-lite__toast-wrapper,.toasts-lite__bottom-right .toasts-lite__toast-wrapper{align-items:flex-end}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);font-size:var(--toasts-lite-font-size);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:var(--toasts-lite-radius);cursor:default;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__toast--clickable{cursor:pointer}.toasts-lite__icon{margin-right:12px}.toasts-lite__close{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:12px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.6;flex-shrink:0;transition:opacity .15s ease}.toasts-lite__close:hover{opacity:1}.toasts-lite__close-icon{display:block;width:12px;height:12px;background-color:currentColor;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');mask-size:100%;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__info{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-info);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__info:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-spinner-color);border-right-color:transparent;animation:loadingRotate 1s linear infinite}.toasts-lite__toast--success{background:var(--toasts-lite-bg-success);border-color:var(--toasts-lite-border-success);color:var(--toasts-lite-text-success)}.toasts-lite__toast--error{background:var(--toasts-lite-bg-error);border-color:var(--toasts-lite-border-error);color:var(--toasts-lite-text-error)}.toasts-lite__toast--warn{background:var(--toasts-lite-bg-warn);border-color:var(--toasts-lite-border-warn);color:var(--toasts-lite-text-warn)}.toasts-lite__toast--info{background:var(--toasts-lite-bg-info);border-color:var(--toasts-lite-border-info);color:var(--toasts-lite-text-info)}.toasts-lite__toast--loading{background:var(--toasts-lite-bg-loading);color:var(--toasts-lite-text-loading)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "scheron",