lkt-toast 1.1.5 → 1.2.1

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function D(e: any): void;
-declare namespace ne {
-    function install(e: any): void;
+import { closeToast as oe } from "lkt-vue-kernel";
+declare namespace Z {
+    function install(t: any): void;
 }
-declare function se(e: any): void;
-declare function oe(e: any): void;
-export { D as closeToast, ne as default, se as openToast, oe as setToastCanvas };
+import { openToast as ne } from "lkt-vue-kernel";
+declare function ee(t: any): void;
+export { oe as closeToast, Z as default, ne as openToast, ee as setToastCanvas };

package/dist/build.js

@@ -1,115 +1,90 @@
-import { defineComponent as $, mergeDefaults as E, ref as k, computed as c, onMounted as F, resolveComponent as H, createElementBlock as p, openBlock as l, normalizeClass as h, createElementVNode as r, createVNode as N, createBlock as z, createCommentVNode as w, unref as v, mergeProps as y, getCurrentInstance as A, Fragment as P, renderList as b } from "vue";
-import { extractI18nValue as X, LktSettings as U, ProgressValueFormat as j, ProgressAnimation as O, getDefaultValues as S, Toast as q } from "lkt-vue-kernel";
-const M = class M {
-};
-M.canvas = void 0, M.defaultCloseIcon = "";
-let f = M;
-const o = class o {
-  static open(s) {
-    o.components.push({ ...s, zIndex: o.zIndex }), ++o.zIndex;
-  }
-  static close(s) {
-    const n = o.components.findIndex((i) => i.zIndex === s);
-    n >= 0 && (o.components.splice(n, 1), o.components.length === 0 && (o.zIndex = 1e3));
-  }
-};
-o.components = [], o.zIndex = 1e3;
-let d = o;
-const se = (e) => {
-  if (!f.canvas) {
-    console.warn("ToastCanvas not defined");
-    return;
-  }
-  d.open(e), f.canvas.refresh();
-}, D = (e) => {
-  if (!f.canvas) {
-    console.warn("ToastCanvas not defined");
-    return;
-  }
-  d.close(e), f.canvas.refresh();
-}, G = {
+import { defineComponent as H, mergeDefaults as D, ref as m, computed as a, onMounted as $, resolveComponent as z, createElementBlock as d, openBlock as r, normalizeClass as v, createElementVNode as n, createVNode as S, createBlock as h, createCommentVNode as B, unref as i, mergeProps as T, getCurrentInstance as E, Fragment as V, renderList as R } from "vue";
+import { extractI18nValue as P, LktSettings as F, closeToast as b, ProgressValueFormat as N, ProgressAnimation as A, getDefaultValues as U, Toast as j, ToastController as y } from "lkt-vue-kernel";
+import { closeToast as oe, openToast as ne } from "lkt-vue-kernel";
+const O = {
   class: "lkt-toast-inner",
   ref: "inner"
-}, J = { class: "lkt-toast-header" }, K = { class: "lkt-toast-header-text" }, Q = ["innerHTML"], W = ["innerHTML"], L = /* @__PURE__ */ $({
+}, q = { class: "lkt-toast-header" }, w = { class: "lkt-toast-header-text" }, G = ["innerHTML"], J = ["innerHTML"], L = /* @__PURE__ */ H({
   __name: "LktToast",
-  props: /* @__PURE__ */ E({
+  props: /* @__PURE__ */ D({
     type: {},
     text: {},
+    class: {},
     details: {},
     icon: {},
     positionX: {},
     duration: {},
     buttonConfig: {},
     zIndex: {}
-  }, S(q)),
-  setup(e) {
-    const s = e, n = k(100), i = s.duration ?? 1e4, u = k(null), x = k(!1), g = c(() => {
-      let t = [];
-      return x.value && t.push("is-visible"), s.positionX && t.push(`animation-${s.positionX}`), t.join(" ");
-    }), _ = c(() => X(s.text)), C = c(() => X(s.details)), V = U.defaultCloseToastIcon, I = () => {
-      u.value.pause();
-    }, R = () => {
-      u.value.start();
+  }, U(j)),
+  setup(t) {
+    const s = t, l = m(100), u = s.duration ?? 1e4, c = m(null), p = m(!1), k = a(() => {
+      let e = [];
+      return p.value && e.push("is-visible"), s.positionX && e.push(`animation-${s.positionX}`), s.class && e.push(s.class), e.join(" ");
+    }), _ = a(() => P(s.text)), g = a(() => P(s.details)), I = F.defaultCloseToastIcon, x = () => {
+      c.value.pause();
+    }, M = () => {
+      c.value.start();
     };
-    return F(() => {
+    return $(() => {
       setTimeout(() => {
-        x.value = !0;
+        p.value = !0;
       }, 100);
-    }), (t, m) => {
-      const a = H("lkt-icon"), B = H("lkt-progress");
-      return l(), p("section", {
-        class: h(["lkt-toast", g.value]),
+    }), (e, f) => {
+      const o = z("lkt-icon"), X = z("lkt-progress");
+      return r(), d("section", {
+        class: v(["lkt-toast", k.value]),
         role: "status",
         "aria-live": "polite",
         "aria-atomic": "true",
-        onMouseenter: I,
-        onMousemove: I,
-        onMouseleave: R
+        onMouseenter: x,
+        onMousemove: x,
+        onMouseleave: M
       }, [
-        r("div", G, [
-          r("div", J, [
-            r("div", K, [
-              e.icon ? (l(), z(a, {
+        n("div", O, [
+          n("div", q, [
+            n("div", w, [
+              t.icon ? (r(), h(o, {
                 key: 0,
-                icon: e.icon
-              }, null, 8, ["icon"])) : w("", !0),
-              r("div", {
+                icon: t.icon
+              }, null, 8, ["icon"])) : B("", !0),
+              n("div", {
                 class: "lkt-toast-text",
                 innerHTML: _.value
-              }, null, 8, Q)
+              }, null, 8, G)
             ]),
-            r("div", {
+            n("div", {
               class: "lkt-toast-close",
-              onClick: m[0] || (m[0] = (T) => v(D)(e.zIndex))
+              onClick: f[0] || (f[0] = (C) => i(b)(t.zIndex))
             }, [
-              r("i", {
-                class: h(v(V))
+              n("i", {
+                class: v(i(I))
               }, null, 2)
             ])
           ]),
-          r("div", {
+          n("div", {
             class: "lkt-toast-details",
-            innerHTML: C.value
-          }, null, 8, W),
-          N(B, y({
+            innerHTML: g.value
+          }, null, 8, J),
+          S(X, T({
             ref_key: "progressRef",
-            ref: u,
-            modelValue: n.value,
-            "onUpdate:modelValue": m[1] || (m[1] = (T) => n.value = T)
+            ref: c,
+            modelValue: l.value,
+            "onUpdate:modelValue": f[1] || (f[1] = (C) => l.value = C)
           }, {
-            duration: v(i),
+            duration: i(u),
             animation: {
-              type: v(O).Decremental,
+              type: i(A).Decremental,
               autoplay: !0,
               externalControl: !1,
               to: 0,
               from: 100
             },
-            valueFormat: v(j).Hidden,
+            valueFormat: i(N).Hidden,
             pauseOnHover: !0,
             events: {
-              updatedVisibleProgress: (T) => {
-                T === 0 && v(D)(s.zIndex);
+              updatedVisibleProgress: (C) => {
+                C === 0 && i(b)(s.zIndex);
               }
             }
           }), null, 16, ["modelValue"])
@@ -117,60 +92,60 @@ const se = (e) => {
       ], 34);
     };
   }
-}), Y = { class: "lkt-toast-canvas" }, Z = /* @__PURE__ */ $({
+}), K = { class: "lkt-toast-canvas" }, Q = /* @__PURE__ */ H({
   __name: "LktToastCanvas",
-  setup(e, { expose: s }) {
-    const n = k(0), i = A(), u = k([]), x = () => {
-      n.value = n.value + 1, setTimeout(() => {
-        var t;
-        (t = i == null ? void 0 : i.proxy) == null || t.$forceUpdate();
+  setup(t, { expose: s }) {
+    const l = m(0), u = E(), c = m([]), p = () => {
+      l.value = l.value + 1, setTimeout(() => {
+        var e;
+        (e = u == null ? void 0 : u.proxy) == null || e.$forceUpdate();
       }, 1);
-    }, g = c(() => (n.value, d.components.filter((t) => t.positionX === "left"))), _ = c(() => (n.value, d.components.filter((t) => t.positionX === "center"))), C = c(() => (n.value, d.components.filter((t) => t.positionX === "right"))), V = c(() => g.value.length === 0 ? "" : "is-visible"), I = c(() => _.value.length === 0 ? "" : "is-visible"), R = c(() => C.value.length === 0 ? "" : "is-visible");
+    }, k = a(() => (l.value, y.components.filter((e) => e.positionX === "left"))), _ = a(() => (l.value, y.components.filter((e) => e.positionX === "center"))), g = a(() => (l.value, y.components.filter((e) => e.positionX === "right"))), I = a(() => k.value.length === 0 ? "" : "is-visible"), x = a(() => _.value.length === 0 ? "" : "is-visible"), M = a(() => g.value.length === 0 ? "" : "is-visible");
     return s({
-      refresh: x
-    }), (t, m) => (l(), p("section", Y, [
-      r("div", {
-        class: h(["lkt-toast-stack left-stack", V.value])
+      refresh: p
+    }), (e, f) => (r(), d("section", K, [
+      n("div", {
+        class: v(["lkt-toast-stack left-stack", I.value])
       }, [
-        (l(!0), p(P, null, b(g.value, (a) => (l(), z(L, y({
+        (r(!0), d(V, null, R(k.value, (o) => (r(), h(L, T({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: u,
-          key: a.zIndex
-        }, { ref_for: !0 }, a), null, 16))), 128))
+          ref: c,
+          key: o.zIndex
+        }, { ref_for: !0 }, o), null, 16))), 128))
       ], 2),
-      r("div", {
-        class: h(["lkt-toast-stack center-stack", I.value])
+      n("div", {
+        class: v(["lkt-toast-stack center-stack", x.value])
       }, [
-        (l(!0), p(P, null, b(_.value, (a) => (l(), z(L, y({
+        (r(!0), d(V, null, R(_.value, (o) => (r(), h(L, T({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: u,
-          key: a.zIndex
-        }, { ref_for: !0 }, a), null, 16))), 128))
+          ref: c,
+          key: o.zIndex
+        }, { ref_for: !0 }, o), null, 16))), 128))
       ], 2),
-      r("div", {
-        class: h(["lkt-toast-stack right-stack", R.value])
+      n("div", {
+        class: v(["lkt-toast-stack right-stack", M.value])
       }, [
-        (l(!0), p(P, null, b(C.value, (a) => (l(), z(L, y({
+        (r(!0), d(V, null, R(g.value, (o) => (r(), h(L, T({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: u,
-          key: a.zIndex
-        }, { ref_for: !0 }, a), null, 16))), 128))
+          ref: c,
+          key: o.zIndex
+        }, { ref_for: !0 }, o), null, 16))), 128))
       ], 2)
     ]));
   }
-}), ne = {
-  install: (e) => {
-    e.component("lkt-toast-canvas") === void 0 && e.component("lkt-toast-canvas", Z), e.component("lkt-toast") === void 0 && e.component("lkt-toast", L);
+}), Z = {
+  install: (t) => {
+    t.component("lkt-toast-canvas") === void 0 && t.component("lkt-toast-canvas", Q), t.component("lkt-toast") === void 0 && t.component("lkt-toast", L);
   }
-}, oe = (e) => {
-  f.canvas = e;
+}, ee = (t) => {
+  y.canvas = t;
 };
 export {
-  D as closeToast,
-  ne as default,
-  se as openToast,
-  oe as setToastCanvas
+  oe as closeToast,
+  Z as default,
+  ne as openToast,
+  ee as setToastCanvas
 };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from 'vue';
 import "./../lkt-toast.css";
-import { ValidCanvas } from "./types/ValidCanvas";
-export { closeToast, openToast } from './functions/functions';
+import { ToastCanvasInterface } from "lkt-vue-kernel";
+export { closeToast, openToast } from 'lkt-vue-kernel';
 declare const LktToast: Plugin;
 export default LktToast;
-export declare const setToastCanvas: (component: ValidCanvas) => void;
+export declare const setToastCanvas: (component: ToastCanvasInterface) => void;

package/dist/lib-components/LktToast.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<ToastConfig, {}, {}, {}, {
     zIndex: number;
     details: string | number;
     text: string | number;
+    class: string | number;
     icon: string | number;
     duration: number;
     buttonConfig: import("lkt-vue-kernel").ButtonConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-toast",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/lib-components/LktToast.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref, watch} from 'vue';
 import {
+    closeToast,
     extractI18nValue,
     getDefaultValues,
     LktSettings,
@@ -10,7 +11,6 @@ import {
     Toast,
     ToastConfig
 } from "lkt-vue-kernel";
-import {closeToast} from "../functions/functions";
 
 const props = withDefaults(defineProps<ToastConfig>(), getDefaultValues(Toast));
 
@@ -23,6 +23,7 @@ const classes = computed(() => {
         let r: string[] = [];
         if (addAnimationClass.value) r.push('is-visible');
         if (props.positionX) r.push(`animation-${props.positionX}`);
+        if (props.class) r.push(props.class);
         return r.join(' ');
     }),
     computedText = computed(() => extractI18nValue(props.text)),

package/src/lib-components/LktToastCanvas.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import {computed, getCurrentInstance, ref} from 'vue';
 import LktToast from "../lib-components/LktToast.vue";
-import {ToastConfig} from "lkt-vue-kernel";
-import {ToastController} from "../classes/ToastController";
+import {ToastConfig, ToastController} from "lkt-vue-kernel";
 
 const refresher = ref(0);
 const instance = getCurrentInstance();