vue-toasts-lite 0.1.0 → 0.1.1

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

package/dist/index.js

@@ -1,11 +1,11 @@
-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";
+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__ */ C({
+}, V = { class: "toasts-lite__content" }, z = { class: "toasts-lite__content-message" }, F = /* @__PURE__ */ w({
   __name: "ToastsLiteItem",
   props: {
     id: {},
@@ -17,33 +17,33 @@ const S = {
   },
   emits: ["close"],
   setup(a, { expose: t, emit: e }) {
-    const o = a, n = e, l = h(null), p = h(0), d = h(0);
+    const o = a, n = e, i = h(null), p = h(0), c = h(0);
     function s() {
-      l.value && clearTimeout(l.value), n("close");
+      i.value && clearTimeout(i.value), n("close");
     }
     function r() {
-      l.value && (clearTimeout(l.value), l.value = null, d.value = o.duration - (Date.now() - p.value));
+      i.value && (clearTimeout(i.value), i.value = null, c.value = o.duration - (Date.now() - p.value));
     }
-    function i() {
-      !l.value && d.value > 0 && (l.value = setTimeout(s, d.value));
+    function u() {
+      !i.value && c.value > 0 && (i.value = setTimeout(s, c.value));
     }
-    return E(() => {
-      o.autoClose && (p.value = Date.now(), d.value = o.duration, l.value = setTimeout(s, o.duration));
+    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: i
-    }), (u, m) => (c(), f("div", {
+      resume: u
+    }), (l, _) => (d(), m("div", {
       class: "toasts-lite__toast",
-      style: U(`--toast-duration: ${a.duration}s;`),
-      onClick: $(s, ["prevent"])
+      style: $(`--toast-duration: ${a.duration}s;`),
+      onClick: E(s, ["prevent"])
     }, [
-      ["success", "error", "loading", "warn"].includes(a.type) ? (c(), f("div", S, [
-        _("div", {
-          class: L(`toasts-lite__${a.type}`)
+      ["success", "error", "loading", "warn"].includes(a.type) ? (d(), m("div", S, [
+        v("div", {
+          class: C(`toasts-lite__${a.type}`)
         }, null, 2)
-      ])) : k("", !0),
-      _("div", V, [
-        _("div", z, D(a.message), 1)
+      ])) : U("", !0),
+      v("div", V, [
+        v("div", z, D(a.message), 1)
       ])
     ], 4));
   }
@@ -51,7 +51,7 @@ const S = {
 class R extends Map {
   constructor() {
     super(...arguments);
-    v(this, "subscribers", []);
+    f(this, "subscribers", []);
   }
   set(e, o) {
     return super.set(e, o), this.notify(), this;
@@ -81,8 +81,8 @@ const j = {
 };
 class G {
   constructor() {
-    v(this, "counter", 0);
-    v(this, "toasts");
+    f(this, "counter", 0);
+    f(this, "toasts");
     this.toasts = new R();
   }
   get toastList() {
@@ -184,58 +184,69 @@ class G {
     }
   }
 }
-const y = new G(), H = ["onMouseenter", "onMouseleave"], K = /* @__PURE__ */ C({
+const y = new G(), H = ["onMouseenter", "onMouseleave"], K = /* @__PURE__ */ w({
   __name: "ToastsLiteProvider",
   setup(a) {
-    const t = h(y.toastList);
+    const t = [
+      "top-left",
+      "top-center",
+      "top-right",
+      "middle-center",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right"
+    ], e = h(y.toastList);
     y.onToastsListChange((s) => {
-      t.value = s;
+      e.value = s;
     });
-    const e = g(() => {
+    const o = k(() => {
       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);
+      return e.value.forEach((r) => {
+        const u = r.position || "top-center";
+        s.has(u) || s.set(u, []), s.get(u).push(r);
       }), s;
-    }), o = g(() => Array.from(e.value.keys())), n = h({});
+    }), n = h({});
     x(() => {
-      for (const s of o.value)
+      for (const s of t)
         n.value[s] = [];
     });
-    function l(s) {
+    function i(s) {
       n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.pause());
     }
     function p(s) {
       n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.resume());
     }
-    function d(s, r) {
+    function c(s, r) {
       n.value[s] || (n.value[s] = []), r && "pause" in r && "resume" in r && n.value[s].push(r);
     }
-    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)
+    return (s, r) => (d(), g(B, { to: "body" }, [
+      (d(), m(b, null, T(t, (u) => v("div", {
+        key: u,
+        class: C(["toasts-lite__toast-container", `toasts-lite__${u}`]),
+        onMouseenter: (l) => i(u),
+        onMouseleave: (l) => p(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,
+        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: (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)
+              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))), 128))
+      ], 42, H)), 64))
     ]));
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "scheron",
@@ -26,6 +26,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:example": "cd example && bun run build",
     "preview": "vite preview"
   },
   "peerDependencies": {