vue-toasts-lite 0.1.5 → 0.1.7

package/README.md

@@ -7,9 +7,6 @@ A lightweight toast notifications library for Vue 3.
 
 📖 **[Check docs](https://scheron.github.io/vue-toasts-lite/)**
 
-> ⚠️ **Note**: This is primarily a personal utility library created for my own use. I don't discourage others from using it, but I should mention that I'm not currently using it in production myself. The main purpose of this library is to provide me with a simple and quick way to integrate toast notifications into my personal projects without the need to configure and set up larger, more complex libraries. If you find it useful, feel free to use it, but keep in mind that it's tailored to my personal needs and workflow.
-
-
 ## Features
 
 - 🚀 Lightweight and easy to use
@@ -164,7 +161,12 @@ You can pass custom classes to `ToastsLiteProvider`:
   --tl-info: hsl(210, 80%, 55%);
   --tl-icon-color: hsl(0, 0%, 100%);
   --tl-loading-border: hsl(0, 0%, 15%);
-  --tl-loading-bg: hsl(0, 0%, 98%);
+
+  --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);
 }
 ```
 

package/dist/index.js

@@ -1,11 +1,11 @@
-var M = Object.defineProperty;
-var U = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var m = (r, t, e) => U(r, typeof t != "symbol" ? t + "" : t, e);
-import { ref as p, defineComponent as D, watch as $, onMounted as L, onUnmounted as k, createElementBlock as y, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as h, normalizeClass as g, toDisplayString as B, computed as P, createBlock as C, Teleport as I, Fragment as b, renderList as w, unref as v, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
+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 {
   constructor() {
     super(...arguments);
-    m(this, "subscribers", []);
+    v(this, "subscribers", []);
   }
   set(e, o) {
     return super.set(e, o), this.notify(), this;
@@ -33,10 +33,10 @@ const T = {
   duration: 3e3,
   position: "top-center"
 };
-class j {
+class z {
   constructor() {
-    m(this, "counter", 0);
-    m(this, "toasts");
+    v(this, "counter", 0);
+    v(this, "toasts");
     this.toasts = new V();
   }
   /**
@@ -306,7 +306,7 @@ class j {
     let { id: e = this.ID(), ...o } = t;
     if (this.toasts.has(e)) {
       const n = this.toasts.get(e);
-      return Object.assign(n, o), this.toasts.set(e, n), e;
+      return this.toasts.set(e, { ...n, ...o }), e;
     }
     return this.toasts.set(e, { ...this.mergeWithDefaultOptions(o), id: e }), e;
   }
@@ -319,9 +319,9 @@ class j {
     return e;
   }
 }
-const O = new j();
-function z() {
-  const r = p(/* @__PURE__ */ new Map());
+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);
@@ -341,10 +341,10 @@ function z() {
     resumeAll: o
   };
 }
-const F = {
+const W = {
   key: 0,
   class: "toasts-lite__icon"
-}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ D({
+}, j = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ $({
   __name: "ToastsLiteItem",
   props: {
     id: {},
@@ -356,7 +356,7 @@ const F = {
   },
   emits: ["close"],
   setup(r, { expose: t, emit: e }) {
-    const o = r, n = e, s = p(null), a = p(0), i = p(0);
+    const o = r, n = e, s = h(null), a = h(0), i = h(0);
     function c() {
       s.value && clearTimeout(s.value), n("close");
     }
@@ -366,37 +366,37 @@ const F = {
     function l() {
       !s.value && i.value > 0 && (a.value = Date.now(), s.value = setTimeout(c, i.value));
     }
-    function f() {
+    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));
     }
-    return $(
+    return U(
       () => [o.autoClose, o.duration],
       () => {
-        f();
+        m();
       }
     ), L(() => {
-      f();
+      m();
     }), k(() => {
       s.value && clearTimeout(s.value);
     }), t({
       pause: u,
       resume: l
     }), (_, J) => (d(), y("div", {
-      class: "toasts-lite__toast",
+      class: p(["toasts-lite__toast", `toasts-lite__toast--${r.type}`]),
       style: E(`--toast-duration: ${r.duration}s;`),
       onClick: A(c, ["prevent"])
     }, [
-      ["success", "error", "loading", "warn", "info"].includes(r.type) ? (d(), y("div", F, [
-        h("div", {
-          class: g(`toasts-lite__${r.type}`)
+      ["success", "error", "loading", "warn", "info"].includes(r.type) ? (d(), y("div", W, [
+        f("div", {
+          class: p(`toasts-lite__${r.type}`)
         }, null, 2)
       ])) : x("", !0),
-      h("div", W, [
-        h("div", G, B(r.message), 1)
+      f("div", j, [
+        f("div", G, B(r.message), 1)
       ])
-    ], 4));
+    ], 6));
   }
-}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ D({
+}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ $({
   __name: "ToastsLiteProvider",
   props: {
     containerClass: {},
@@ -404,7 +404,7 @@ const F = {
     itemClass: {}
   },
   setup(r) {
-    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = p([]), { setRef: o, pauseAll: n, resumeAll: s } = z();
+    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;
     });
@@ -416,32 +416,32 @@ const F = {
       }), i;
     });
     return (i, c) => (d(), C(I, { to: "body" }, [
-      (d(), y(b, null, w(t, (u) => h("div", {
+      (d(), y(w, null, b(t, (u) => f("div", {
         key: u,
-        class: g(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
+        class: p(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
       }, [
-        h("div", {
-          class: g(["toasts-lite__toast-wrapper", r.wrapperClass]),
-          onMouseenter: (l) => v(n)(u),
-          onMouseleave: (l) => v(s)(u)
+        f("div", {
+          class: p(["toasts-lite__toast-wrapper", r.wrapperClass]),
+          onMouseenter: (l) => g(n)(u),
+          onMouseleave: (l) => g(s)(u)
         }, [
           N(R, {
             name: "toasts-lite",
             appear: ""
           }, {
             default: S(() => [
-              (d(!0), y(b, null, w(a.value.get(u) || [], (l, f) => (d(), C(H, {
+              (d(!0), y(w, null, b(a.value.get(u) || [], (l, m) => (d(), C(H, {
                 id: l.id,
                 ref_for: !0,
-                ref: (_) => v(o)(u, f, _),
+                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: g(r.itemClass),
-                onClose: (_) => v(O).remove(l.id)
+                class: p(r.itemClass),
+                onClose: (_) => g(O).remove(l.id)
               }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "class", "onClose"]))), 128))
             ]),
             _: 2

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-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@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-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}
+: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)}

package/package.json

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