vue-toasts-lite 0.1.3 → 0.1.4

package/README.md

@@ -125,7 +125,23 @@ await toasts.promise(
 
 ## Styling
 
-Customize colors and appearance with CSS variables:
+Customize colors and appearance with CSS variables or by passing custom classes to `ToastsLiteProvider`:
+
+### Custom Classes
+
+You can pass custom classes to `ToastsLiteProvider`:
+
+```vue
+<ToastsLiteProvider 
+  container-class="custom-container"
+  wrapper-class="custom-wrapper"
+  item-class="custom-item"
+/>
+```
+
+- `container-class` - class for toast container
+- `wrapper-class` - class for toast wrapper
+- `item-class` - class for individual toast items
 
 ### CSS Variables
 

package/dist/index.d.ts

@@ -1,8 +1,15 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { HTMLAttributes } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_Props = {
+    containerClass?: HTMLAttributes["class"];
+    wrapperClass?: HTMLAttributes["class"];
+    itemClass?: HTMLAttributes["class"];
+};
+
 declare type Id = string;
 
 declare interface IToastsController {
@@ -306,7 +313,7 @@ declare class ToastsController implements IToastsController {
 
 export declare type ToastSimpleOptions = Partial<Omit<Toast, "message">>;
 
-export declare const ToastsLiteProvider: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export declare const ToastsLiteProvider: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare type ToastType = "success" | "loading" | "error" | "warn";
 

package/dist/index.js

@@ -1,11 +1,11 @@
 var M = Object.defineProperty;
 var $ = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var v = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
-import { ref as h, defineComponent as O, watch as L, onMounted as U, onUnmounted as k, createElementBlock as g, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as p, normalizeClass as D, toDisplayString as B, computed as P, createBlock as y, Teleport as I, Fragment as b, renderList as T, unref as m, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
+var m = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
+import { ref as h, defineComponent as D, watch as L, onMounted as U, onUnmounted as k, createElementBlock as y, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as p, 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";
 class V extends Map {
   constructor() {
     super(...arguments);
-    v(this, "subscribers", []);
+    m(this, "subscribers", []);
   }
   set(e, o) {
     return super.set(e, o), this.notify(), this;
@@ -26,7 +26,7 @@ class V extends Map {
     this.subscribers.forEach((e) => e(Array.from(this.values())));
   }
 }
-const w = {
+const T = {
   type: "success",
   message: "Hello from Toasts Lite",
   autoClose: !0,
@@ -35,8 +35,8 @@ const w = {
 };
 class j {
   constructor() {
-    v(this, "counter", 0);
-    v(this, "toasts");
+    m(this, "counter", 0);
+    m(this, "toasts");
     this.toasts = new V();
   }
   /**
@@ -292,15 +292,15 @@ class j {
     return this.toasts.set(e, { ...this.mergeWithDefaultOptions(o), id: e }), e;
   }
   mergeWithDefaultOptions(t) {
-    const e = Object.assign({}, w);
-    for (let o in w) {
+    const e = Object.assign({}, T);
+    for (let o in T) {
       const n = o, s = t[n];
       s != null && (e[n] = s);
     }
     return e;
   }
 }
-const C = new j();
+const O = new j();
 function z() {
   const r = h(/* @__PURE__ */ new Map());
   function t(n, s, a) {
@@ -325,7 +325,7 @@ function z() {
 const F = {
   key: 0,
   class: "toasts-lite__icon"
-}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ O({
+}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ D({
   __name: "ToastsLiteItem",
   props: {
     id: {},
@@ -362,14 +362,14 @@ const F = {
     }), t({
       pause: u,
       resume: l
-    }), (_, J) => (d(), g("div", {
+    }), (_, J) => (d(), y("div", {
       class: "toasts-lite__toast",
       style: E(`--toast-duration: ${r.duration}s;`),
       onClick: A(c, ["prevent"])
     }, [
-      ["success", "error", "loading", "warn"].includes(r.type) ? (d(), g("div", F, [
+      ["success", "error", "loading", "warn"].includes(r.type) ? (d(), y("div", F, [
         p("div", {
-          class: D(`toasts-lite__${r.type}`)
+          class: g(`toasts-lite__${r.type}`)
         }, null, 2)
       ])) : x("", !0),
       p("div", W, [
@@ -377,11 +377,16 @@ const F = {
       ])
     ], 4));
   }
-}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ O({
+}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ D({
   __name: "ToastsLiteProvider",
+  props: {
+    containerClass: {},
+    wrapperClass: {},
+    itemClass: {}
+  },
   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 } = z();
-    C.onToastsListChange((i) => {
+    O.onToastsListChange((i) => {
       e.value = i;
     });
     const a = P(() => {
@@ -391,42 +396,43 @@ const F = {
         i.has(u) || i.set(u, []), i.get(u).push(c);
       }), i;
     });
-    return (i, c) => (d(), y(I, { to: "body" }, [
-      (d(), g(b, null, T(t, (u) => p("div", {
+    return (i, c) => (d(), C(I, { to: "body" }, [
+      (d(), y(b, null, w(t, (u) => p("div", {
         key: u,
-        class: D(["toasts-lite__toast-container", `toasts-lite__${u}`])
+        class: g(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
       }, [
         p("div", {
-          class: "toasts-lite__toast-wrapper",
-          onMouseenter: (l) => m(n)(u),
-          onMouseleave: (l) => m(s)(u)
+          class: g(["toasts-lite__toast-wrapper", r.wrapperClass]),
+          onMouseenter: (l) => v(n)(u),
+          onMouseleave: (l) => v(s)(u)
         }, [
           N(R, {
             name: "toasts-lite",
             appear: ""
           }, {
             default: S(() => [
-              (d(!0), g(b, null, T(a.value.get(u) || [], (l, f) => (d(), y(H, {
+              (d(!0), y(b, null, w(a.value.get(u) || [], (l, f) => (d(), C(H, {
                 id: l.id,
                 ref_for: !0,
-                ref: (_) => m(o)(u, f, _),
+                ref: (_) => v(o)(u, f, _),
                 key: l.id,
                 type: l.type,
                 message: l.message,
                 "auto-close": l.autoClose,
                 duration: l.duration,
                 position: l.position,
-                onClose: (_) => m(C).remove(l.id)
-              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
+                class: g(r.itemClass),
+                onClose: (_) => v(O).remove(l.id)
+              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "class", "onClose"]))), 128))
             ]),
             _: 2
           }, 1024)
-        ], 40, q)
+        ], 42, q)
       ], 2)), 64))
     ]));
   }
 });
 export {
   X as ToastsLiteProvider,
-  C as toasts
+  O as toasts
 };

package/package.json

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