vue-toasts-lite 0.1.0 → 0.1.2

package/README.md

@@ -1,7 +1,15 @@
 # Vue Toasts Lite
 
+[![npm version](https://badge.fury.io/js/vue-toasts-lite.svg)](https://www.npmjs.com/package/vue-toasts-lite)
+[![Documentation](https://img.shields.io/badge/docs-available-brightgreen)](https://scheron.github.io/vue-toasts-lite/)
+
 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
@@ -12,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>
@@ -42,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>
@@ -121,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 M = Object.defineProperty;
-var O = (a, t, e) => t in a ? M(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var v = (a, t, e) => O(a, typeof t != "symbol" ? t + "" : t, e);
-import { defineComponent as C, ref as h, watchEffect as E, createElementBlock as f, openBlock as c, withModifiers as $, normalizeStyle as U, createCommentVNode as k, createElementVNode as _, normalizeClass as L, toDisplayString as D, computed as g, onBeforeUpdate as x, createBlock as b, Teleport as B, Fragment as T, renderList as w, createVNode as A, TransitionGroup as I, withCtx as N, unref as P } from "vue";
-const S = {
-  key: 0,
-  class: "toasts-lite__icon"
-}, V = { class: "toasts-lite__content" }, z = { class: "toasts-lite__content-message" }, F = /* @__PURE__ */ C({
-  __name: "ToastsLiteItem",
-  props: {
-    id: {},
-    type: {},
-    message: {},
-    autoClose: { type: Boolean },
-    duration: {},
-    position: {}
-  },
-  emits: ["close"],
-  setup(a, { expose: t, emit: e }) {
-    const o = a, n = e, l = h(null), p = h(0), d = h(0);
-    function s() {
-      l.value && clearTimeout(l.value), n("close");
-    }
-    function r() {
-      l.value && (clearTimeout(l.value), l.value = null, d.value = o.duration - (Date.now() - p.value));
-    }
-    function i() {
-      !l.value && d.value > 0 && (l.value = setTimeout(s, d.value));
-    }
-    return E(() => {
-      o.autoClose && (p.value = Date.now(), d.value = o.duration, l.value = setTimeout(s, o.duration));
-    }), t({
-      pause: r,
-      resume: i
-    }), (u, m) => (c(), f("div", {
-      class: "toasts-lite__toast",
-      style: U(`--toast-duration: ${a.duration}s;`),
-      onClick: $(s, ["prevent"])
-    }, [
-      ["success", "error", "loading", "warn"].includes(a.type) ? (c(), f("div", S, [
-        _("div", {
-          class: L(`toasts-lite__${a.type}`)
-        }, null, 2)
-      ])) : k("", !0),
-      _("div", V, [
-        _("div", z, D(a.message), 1)
-      ])
-    ], 4));
-  }
-});
-class R extends Map {
+var L = Object.defineProperty;
+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);
     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() {
     v(this, "counter", 0);
     v(this, "toasts");
-    this.toasts = new R();
+    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,71 +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__ */ C({
-  __name: "ToastsLiteProvider",
-  setup(a) {
-    const t = h(y.toastList);
-    y.onToastsListChange((s) => {
-      t.value = s;
-    });
-    const e = g(() => {
-      const s = /* @__PURE__ */ new Map();
-      return t.value.forEach((r) => {
-        const i = r.position || "top-center";
-        s.has(i) || s.set(i, []), s.get(i).push(r);
-      }), s;
-    }), o = g(() => Array.from(e.value.keys())), n = h({});
-    x(() => {
-      for (const s of o.value)
-        n.value[s] = [];
-    });
-    function l(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 p(s) {
-      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.resume());
+    function u() {
+      o.value && (clearTimeout(o.value), o.value = null, i.value = s.duration - (Date.now() - a.value));
     }
-    function d(s, r) {
-      n.value[s] || (n.value[s] = []), r && "pause" in r && "resume" in r && n.value[s].push(r);
+    function l() {
+      !o.value && i.value > 0 && (a.value = Date.now(), o.value = setTimeout(c, i.value));
     }
-    return (s, r) => (c(), b(B, { to: "body" }, [
-      (c(!0), f(T, null, w(o.value, (i) => (c(), f("div", {
-        key: i,
-        class: L(["toasts-lite__toast-container", `toasts-lite__${i}`]),
-        onMouseenter: (u) => l(i),
-        onMouseleave: (u) => p(i)
+    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.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: O(["toasts-lite__toast-container", `toasts-lite__${u}`])
       }, [
-        A(I, { name: "toasts-lite" }, {
-          default: N(() => [
-            (c(!0), f(T, null, w(e.value.get(i), (u) => (c(), b(F, {
-              id: u.id,
-              ref_for: !0,
-              ref: (m) => d(i, m),
-              key: u.id,
-              type: u.type,
-              message: u.message,
-              "auto-close": u.autoClose,
-              duration: u.duration,
-              position: u.position,
-              onClose: (m) => P(y).remove(u.id)
-            }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
-          ]),
-          _: 2
-        }, 1024)
-      ], 42, H))), 128))
+        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.0",
+  "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,18 +25,26 @@
   },
   "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"
   },
   "peerDependencies": {
     "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"
   }
 }