lkt-toast 1.1.4 → 1.2.0

package/dist/build.d.ts

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

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

package/src/lib-components/LktToast.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
-import {extractI18nValue, getDefaultValues, LktSettings, Toast, ToastConfig} from "lkt-vue-kernel";
-import {closeToast} from "../functions/functions";
+import {computed, onMounted, ref, watch} from 'vue';
+import {
+    closeToast,
+    extractI18nValue,
+    getDefaultValues,
+    LktSettings,
+    ProgressAnimation,
+    ProgressConfig,
+    ProgressValueFormat,
+    Toast,
+    ToastConfig
+} from "lkt-vue-kernel";
 
 const props = withDefaults(defineProps<ToastConfig>(), getDefaultValues(Toast));
 
@@ -23,7 +32,9 @@ const classes = computed(() => {
 const calculatedCloseIcon = LktSettings.defaultCloseToastIcon
 
 const onProgressEnd = () => {
-        closeToast(props.zIndex);
+        if (progressPercentage.value === 0) {
+            closeToast(props.zIndex);
+        }
     },
     onProgressMouseEnter = () => {
         //@ts-ignore
@@ -65,11 +76,25 @@ onMounted(() => {
             <lkt-progress
                 ref="progressRef"
                 v-model="progressPercentage"
-                :duration="timeoutDuration"
-                type="decremental"
-                value-format="hidden"
-                pause-on-hover
-                @end="onProgressEnd"
+                v-bind="<ProgressConfig>{
+                    duration: timeoutDuration,
+                    animation: {
+                        type: ProgressAnimation.Decremental,
+                        autoplay: true,
+                        externalControl: false,
+                        to: 0,
+                        from: 100,
+                    },
+                    valueFormat: ProgressValueFormat.Hidden,
+                    pauseOnHover: true,
+                    events: {
+                        updatedVisibleProgress: (v) => {
+                            if (v === 0) {
+                                closeToast(props.zIndex);
+                            }
+                        }
+                    }
+                }"
             />
         </div>
     </section>

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();