vue-toasts-lite 0.1.1 → 0.1.2

package/README.md

@@ -20,21 +20,14 @@ A lightweight toast notifications library for Vue 3.
 - 🎯 Promise support
 - 🖱️ Pause on hover
 
-## Installation
+## Quick Start
 
+### 1. Install the package:
 ```bash
 npm install vue-toasts-lite
 ```
 
-## Quick Start
-
-**Three steps to start using toasts:**
-
-1. Install the package
-2. Add `ToastsLiteProvider` to your app
-3. Call `toasts.success()` from anywhere
-
-### 1. Add the provider to your `App.vue`:
+### 2. Add `ToastsLiteProvider` & `vue-toasts-lite/style.css` to app:
 
 ```vue
 <script setup>
@@ -50,7 +43,7 @@ import 'vue-toasts-lite/style.css'
 </template>
 ```
 
-### 2. Use anywhere in your app:
+### 3. Use anywhere in your app:
 
 ```vue
 <script setup>
@@ -129,14 +122,6 @@ await toasts.promise(
 )
 ```
 
-### Custom Controller
-
-```js
-import { ToastsController } from 'vue-toasts-lite'
-
-const notifications = new ToastsController()
-notifications.success('Hello!')
-```
 
 ## Styling
 

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export declare type ToastProps = {
 
 export declare const toasts: ToastsController;
 
-export declare class ToastsController implements Toast {
+declare class ToastsController implements Toast {
     private counter;
     private toasts;
     constructor();

package/dist/index.js

@@ -1,89 +1,43 @@
 var L = Object.defineProperty;
-var M = (a, t, e) => t in a ? L(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var f = (a, t, e) => M(a, typeof t != "symbol" ? t + "" : t, e);
-import { defineComponent as w, ref as h, watchEffect as O, createElementBlock as m, openBlock as d, withModifiers as E, normalizeStyle as $, createCommentVNode as U, createElementVNode as v, normalizeClass as C, toDisplayString as D, computed as k, onBeforeUpdate as x, createBlock as g, Teleport as B, Fragment as b, renderList as T, createVNode as P, TransitionGroup as A, withCtx as I, unref as N } from "vue";
-const S = {
-  key: 0,
-  class: "toasts-lite__icon"
-}, V = { class: "toasts-lite__content" }, z = { class: "toasts-lite__content-message" }, F = /* @__PURE__ */ w({
-  __name: "ToastsLiteItem",
-  props: {
-    id: {},
-    type: {},
-    message: {},
-    autoClose: { type: Boolean },
-    duration: {},
-    position: {}
-  },
-  emits: ["close"],
-  setup(a, { expose: t, emit: e }) {
-    const o = a, n = e, i = h(null), p = h(0), c = h(0);
-    function s() {
-      i.value && clearTimeout(i.value), n("close");
-    }
-    function r() {
-      i.value && (clearTimeout(i.value), i.value = null, c.value = o.duration - (Date.now() - p.value));
-    }
-    function u() {
-      !i.value && c.value > 0 && (i.value = setTimeout(s, c.value));
-    }
-    return O(() => {
-      i.value && (clearTimeout(i.value), i.value = null), o.autoClose && (p.value = Date.now(), c.value = o.duration, i.value = setTimeout(s, o.duration));
-    }), t({
-      pause: r,
-      resume: u
-    }), (l, _) => (d(), m("div", {
-      class: "toasts-lite__toast",
-      style: $(`--toast-duration: ${a.duration}s;`),
-      onClick: E(s, ["prevent"])
-    }, [
-      ["success", "error", "loading", "warn"].includes(a.type) ? (d(), m("div", S, [
-        v("div", {
-          class: C(`toasts-lite__${a.type}`)
-        }, null, 2)
-      ])) : U("", !0),
-      v("div", V, [
-        v("div", z, D(a.message), 1)
-      ])
-    ], 4));
-  }
-});
-class R extends Map {
+var M = (r, t, e) => t in r ? L(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 C, watch as $, onMounted as U, onUnmounted as A, createElementBlock as _, openBlock as d, withModifiers as D, normalizeStyle as E, createCommentVNode as k, createElementVNode as p, normalizeClass as O, toDisplayString as x, computed as B, createBlock as b, Teleport as P, Fragment as T, renderList as w, unref as m, createVNode as I, TransitionGroup as N, withCtx as R } from "vue";
+class S extends Map {
   constructor() {
     super(...arguments);
-    f(this, "subscribers", []);
+    v(this, "subscribers", []);
   }
-  set(e, o) {
-    return super.set(e, o), this.notify(), this;
+  set(e, s) {
+    return super.set(e, s), this.notify(), this;
   }
   delete(e) {
-    const o = super.delete(e);
-    return this.notify(), o;
+    const s = super.delete(e);
+    return this.notify(), s;
   }
   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((s) => s !== e);
     };
   }
   notify() {
     this.subscribers.forEach((e) => e(Array.from(this.values())));
   }
 }
-const j = {
+const V = {
   type: "success",
   message: "Hello from Toasts Lite",
   autoClose: !0,
   duration: 3e3,
   position: "top-center"
 };
-class G {
+class z {
   constructor() {
-    f(this, "counter", 0);
-    f(this, "toasts");
-    this.toasts = new R();
+    v(this, "counter", 0);
+    v(this, "toasts");
+    this.toasts = new S();
   }
   get toastList() {
     return Array.from(this.toasts.values());
@@ -95,12 +49,12 @@ class G {
     return `toast:${Date.now().toString(16)}-${this.counter++}`;
   }
   addOrUpdate(t) {
-    let { id: e = this.ID(), ...o } = t;
+    let { id: e = this.ID(), ...s } = t;
     if (this.toasts.has(e)) {
       const n = this.toasts.get(e);
-      return Object.assign(n, o), this.toasts.set(e, n), e;
+      return Object.assign(n, s), this.toasts.set(e, n), e;
     }
-    return this.toasts.set(e, { id: e, ...j, ...o }), e;
+    return this.toasts.set(e, { id: e, ...V, ...s }), e;
   }
   /**
    * Add a toast
@@ -176,82 +130,141 @@ class G {
    * @returns The id of the toast
    */
   async promise(t, e) {
-    const o = this.loading(e.loading, { position: e.position, id: e.id });
+    const s = 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: s }), s;
     } catch {
-      throw this.error(e.error, { position: e.position, id: o }), new Error(e.error);
+      throw this.error(e.error, { position: e.position, id: s }), new Error(e.error);
     }
   }
 }
-const y = new G(), H = ["onMouseenter", "onMouseleave"], K = /* @__PURE__ */ w({
-  __name: "ToastsLiteProvider",
-  setup(a) {
-    const t = [
-      "top-left",
-      "top-center",
-      "top-right",
-      "middle-center",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right"
-    ], e = h(y.toastList);
-    y.onToastsListChange((s) => {
-      e.value = s;
-    });
-    const o = k(() => {
-      const s = /* @__PURE__ */ new Map();
-      return e.value.forEach((r) => {
-        const u = r.position || "top-center";
-        s.has(u) || s.set(u, []), s.get(u).push(r);
-      }), s;
-    }), n = h({});
-    x(() => {
-      for (const s of t)
-        n.value[s] = [];
-    });
-    function i(s) {
-      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.pause());
+const y = new z();
+function F() {
+  const r = h(/* @__PURE__ */ new Map());
+  function t(n, o, a) {
+    r.value.has(n) || r.value.set(n, []);
+    const i = r.value.get(n);
+    a && "pause" in a && "resume" in a && (i[o] = a);
+  }
+  function e(n) {
+    var o;
+    (o = r.value.get(n)) == null || o.forEach((a) => a == null ? void 0 : a.pause());
+  }
+  function s(n) {
+    var o;
+    (o = r.value.get(n)) == null || o.forEach((a) => a == null ? void 0 : a.resume());
+  }
+  return {
+    setRef: t,
+    pauseAll: e,
+    resumeAll: s
+  };
+}
+const j = {
+  key: 0,
+  class: "toasts-lite__icon"
+}, G = { class: "toasts-lite__content" }, H = { class: "toasts-lite__content-message" }, q = /* @__PURE__ */ C({
+  __name: "ToastsLiteItem",
+  props: {
+    id: {},
+    type: {},
+    message: {},
+    autoClose: { type: Boolean },
+    duration: {},
+    position: {}
+  },
+  emits: ["close"],
+  setup(r, { expose: t, emit: e }) {
+    const s = r, n = e, o = h(null), a = h(0), i = h(0);
+    function c() {
+      o.value && clearTimeout(o.value), n("close");
+    }
+    function u() {
+      o.value && (clearTimeout(o.value), o.value = null, i.value = s.duration - (Date.now() - a.value));
     }
-    function p(s) {
-      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.resume());
+    function l() {
+      !o.value && i.value > 0 && (a.value = Date.now(), o.value = setTimeout(c, i.value));
     }
-    function c(s, r) {
-      n.value[s] || (n.value[s] = []), r && "pause" in r && "resume" in r && n.value[s].push(r);
+    function f() {
+      o.value && (clearTimeout(o.value), o.value = null), s.autoClose && (a.value = Date.now(), i.value = s.duration, o.value = setTimeout(c, s.duration));
     }
-    return (s, r) => (d(), g(B, { to: "body" }, [
-      (d(), m(b, null, T(t, (u) => v("div", {
+    return $(
+      () => [s.autoClose, s.duration],
+      () => {
+        f();
+      }
+    ), U(() => {
+      f();
+    }), A(() => {
+      o.value && clearTimeout(o.value);
+    }), t({
+      pause: u,
+      resume: l
+    }), (g, K) => (d(), _("div", {
+      class: "toasts-lite__toast",
+      style: E(`--toast-duration: ${r.duration}s;`),
+      onClick: D(c, ["prevent"])
+    }, [
+      ["success", "error", "loading", "warn"].includes(r.type) ? (d(), _("div", j, [
+        p("div", {
+          class: O(`toasts-lite__${r.type}`)
+        }, null, 2)
+      ])) : k("", !0),
+      p("div", G, [
+        p("div", H, x(r.message), 1)
+      ])
+    ], 4));
+  }
+}), J = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ C({
+  __name: "ToastsLiteProvider",
+  setup(r) {
+    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = h(y.toastList), { setRef: s, pauseAll: n, resumeAll: o } = F();
+    y.onToastsListChange((i) => {
+      e.value = i;
+    });
+    const a = B(() => {
+      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;
+    });
+    return (i, c) => (d(), b(P, { to: "body" }, [
+      (d(), _(T, null, w(t, (u) => p("div", {
         key: u,
-        class: C(["toasts-lite__toast-container", `toasts-lite__${u}`]),
-        onMouseenter: (l) => i(u),
-        onMouseleave: (l) => p(u)
+        class: O(["toasts-lite__toast-container", `toasts-lite__${u}`])
       }, [
-        P(A, {
-          name: "toasts-lite",
-          appear: ""
-        }, {
-          default: I(() => [
-            (d(!0), m(b, null, T(o.value.get(u) || [], (l) => (d(), g(F, {
-              id: l.id,
-              ref_for: !0,
-              ref: (_) => c(u, _),
-              key: l.id,
-              type: l.type,
-              message: l.message,
-              "auto-close": l.autoClose,
-              duration: l.duration,
-              position: l.position,
-              onClose: (_) => N(y).remove(l.id)
-            }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
-          ]),
-          _: 2
-        }, 1024)
-      ], 42, H)), 64))
+        p("div", {
+          class: "toasts-lite__toast-wrapper",
+          onMouseenter: (l) => m(n)(u),
+          onMouseleave: (l) => m(o)(u)
+        }, [
+          I(N, {
+            name: "toasts-lite",
+            appear: ""
+          }, {
+            default: R(() => [
+              (d(!0), _(T, null, w(a.value.get(u) || [], (l, f) => (d(), b(q, {
+                id: l.id,
+                ref_for: !0,
+                ref: (g) => m(s)(u, f, g),
+                key: l.id,
+                type: l.type,
+                message: l.message,
+                "auto-close": l.autoClose,
+                duration: l.duration,
+                position: l.position,
+                onClose: (g) => m(y).remove(l.id)
+              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
+            ]),
+            _: 2
+          }, 1024)
+        ], 40, J)
+      ], 2)), 64))
     ]));
   }
 });
 export {
-  G as ToastsController,
-  K as ToastsLiteProvider,
+  X as ToastsLiteProvider,
   y 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-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-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;gap:12px;pointer-events:none}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);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="3" 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="3" 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="5" stroke="currentColor" ><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="5" stroke="currentColor" ><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__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-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-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);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="3" 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="3" 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="5" stroke="currentColor" ><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="5" stroke="currentColor" ><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__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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "scheron",
@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "description": "Lightweight toast notifications for Vue 3",
-  "keywords": [ "vue", "toast", "notification", "vue3" ],
+  "keywords": ["vue", "toast", "notification", "vue3"],
   "files": [
     "dist"
   ],
@@ -25,6 +25,10 @@
   },
   "scripts": {
     "dev": "vite",
+    "format": "prettier --write src/",
+    "format:example": "prettier --write example/",
+    "format:all": "bun run format && bun run format:example",
+    "typecheck": "vue-tsc",
     "build": "vite build",
     "build:example": "cd example && bun run build",
     "preview": "vite preview"
@@ -33,11 +37,14 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/node": "^25.0.8",
     "@vitejs/plugin-vue": "^5.0.0",
+    "prettier": "^3.8.0",
     "typescript": "^5.8.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-tsc": "^3.2.2"
   }
 }