lkt-toast 1.1.3 → 1.1.5

package/dist/build.css

@@ -1 +1 @@
-.lkt-toast-canvas{display:block;position:fixed;bottom:0;left:0;right:0;z-index:999}.lkt-toast-stack{display:flex;flex-direction:column-reverse;gap:var(--lkt-toast--stack--gap);position:absolute;bottom:0}.lkt-toast-stack.is-visible{padding-bottom:var(--lkt-toast--stack--padding)}.lkt-toast-stack.right-stack.is-visible{padding-right:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack.is-visible{padding-left:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack{left:0;align-items:flex-start}.lkt-toast-stack.center-stack{left:50%;transform:translate(-50%);align-items:center}.lkt-toast-stack.right-stack{right:0;align-items:flex-end}.lkt-toast{padding:var(--lkt-toast--toast--padding);border-radius:var(--lkt-toast--toast--border-radius);background:var(--lkt-toast--toast--background);transition:var(--lkt-toast--toast--transition);width:var(--lkt-toast--toast--width);border:var(--lkt-toast--toast--border-width) var(--lkt-toast--toast--border-style) var(--lkt-toast--toast--border-color)}.lkt-toast.animation-left{transform:translate(-100%)}.lkt-toast.animation-right{transform:translate(100%)}.lkt-toast.animation-left.is-visible,.lkt-toast.animation-right.is-visible{transform:translate(0)}.lkt-toast.animation-center{transform:translateY(100%)}.lkt-toast.animation-center.is-visible{transform:translateY(0)}.lkt-toast-inner{display:flex;flex-direction:column;gap:var(--lkt-toast--toast--gap)}.lkt-toast-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lkt-toast--toast--gap);font-size:var(--lkt-toast--header--font-size);font-weight:var(--lkt-toast--header--font-weight)}.lkt-toast-header-text{display:flex;align-items:center;justify-content:center;gap:var(--lkt-toast--toast--gap)}.lkt-toast-details{font-size:var(--lkt-toast--details--font-size);font-weight:var(--lkt-toast--details--font-weight)}.lkt-toast .lkt-progress{--lkt-progress-bar-height: var(--lkt-toast--progress--height);--lkt-progress-min-height: var(--lkt-toast--progress--height);--lkt-progress-bar-percentage-color: var(--lkt-toast--progress--color)}
+.lkt-toast-canvas{display:block;position:fixed;bottom:0;left:0;right:0;z-index:999}.lkt-toast-stack{display:flex;flex-direction:column-reverse;gap:var(--lkt-toast--stack--gap);position:absolute;bottom:0}.lkt-toast-stack.is-visible{padding-bottom:var(--lkt-toast--stack--padding)}.lkt-toast-stack.right-stack.is-visible{padding-right:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack.is-visible{padding-left:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack{left:0;align-items:flex-start}.lkt-toast-stack.center-stack{left:50%;transform:translate(-50%);align-items:center}.lkt-toast-stack.right-stack{right:0;align-items:flex-end}.lkt-toast{padding:var(--lkt-toast--toast--padding);border-radius:var(--lkt-toast--toast--border-radius);background:var(--lkt-toast--toast--background);transition:var(--lkt-toast--toast--transition);width:var(--lkt-toast--toast--width);border:var(--lkt-toast--toast--border-width) var(--lkt-toast--toast--border-style) var(--lkt-toast--toast--border-color)}.lkt-toast.animation-left{transform:translate(-100%)}.lkt-toast.animation-right{transform:translate(100%)}.lkt-toast.animation-left.is-visible,.lkt-toast.animation-right.is-visible{transform:translate(0)}.lkt-toast.animation-center{transform:translateY(100%)}.lkt-toast.animation-center.is-visible{transform:translateY(0)}.lkt-toast-inner{display:flex;flex-direction:column;gap:var(--lkt-toast--toast--gap)}.lkt-toast-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lkt-toast--toast--gap);font-size:var(--lkt-toast--header--font-size);font-weight:var(--lkt-toast--header--font-weight)}.lkt-toast-header-text{display:flex;align-items:center;justify-content:center;gap:var(--lkt-toast--toast--gap)}.lkt-toast-details{font-size:var(--lkt-toast--details--font-size);font-weight:var(--lkt-toast--details--font-weight)}.lkt-toast .lkt-progress{--lkt-progress--bar--height: var(--lkt-toast--progress--height);--lkt-progress--min-height: var(--lkt-toast--progress--height);--lkt-progress--bar--percentage-color: var(--lkt-toast--progress--color)}

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function $(e: any): void;
-declare namespace se {
+declare function D(e: any): void;
+declare namespace ne {
     function install(e: 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 };
+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 };

package/dist/build.js

@@ -1,38 +1,38 @@
-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 {
+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 {
 };
-z.canvas = void 0, z.defaultCloseIcon = "";
-let f = z;
-const a = class a {
+M.canvas = void 0, M.defaultCloseIcon = "";
+let f = M;
+const o = class o {
   static open(s) {
-    a.components.push({ ...s, zIndex: a.zIndex }), ++a.zIndex;
+    o.components.push({ ...s, zIndex: o.zIndex }), ++o.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));
+    const n = o.components.findIndex((i) => i.zIndex === s);
+    n >= 0 && (o.components.splice(n, 1), o.components.length === 0 && (o.zIndex = 1e3));
   }
 };
-a.components = [], a.zIndex = 1e3;
-let v = a;
-const te = (e) => {
+o.components = [], o.zIndex = 1e3;
+let d = o;
+const se = (e) => {
   if (!f.canvas) {
     console.warn("ToastCanvas not defined");
     return;
   }
-  v.open(e), f.canvas.refresh();
-}, $ = (e) => {
+  d.open(e), f.canvas.refresh();
+}, D = (e) => {
   if (!f.canvas) {
     console.warn("ToastCanvas not defined");
     return;
   }
-  v.close(e), f.canvas.refresh();
+  d.close(e), f.canvas.refresh();
 }, G = {
   class: "lkt-toast-inner",
   ref: "inner"
-}, J = { class: "lkt-toast-header" }, K = { class: "lkt-toast-header-text" }, O = ["innerHTML"], Q = ["innerHTML"], T = /* @__PURE__ */ D({
+}, J = { class: "lkt-toast-header" }, K = { class: "lkt-toast-header-text" }, Q = ["innerHTML"], W = ["innerHTML"], L = /* @__PURE__ */ $({
   __name: "LktToast",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ E({
     type: {},
     text: {},
     details: {},
@@ -43,125 +43,134 @@ const te = (e) => {
     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();
+    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();
     };
-    return w(() => {
+    return F(() => {
       setTimeout(() => {
-        h.value = !0;
+        x.value = !0;
       }, 100);
-    }), (i, t) => {
-      const H = E("lkt-icon"), B = E("lkt-progress");
+    }), (t, m) => {
+      const a = H("lkt-icon"), B = H("lkt-progress");
       return l(), p("section", {
-        class: k(["lkt-toast", g.value]),
+        class: h(["lkt-toast", g.value]),
         role: "status",
         "aria-live": "polite",
         "aria-atomic": "true",
         onMouseenter: I,
         onMousemove: I,
-        onMouseleave: o
+        onMouseleave: R
       }, [
         r("div", G, [
           r("div", J, [
             r("div", K, [
-              i.icon ? (l(), C(H, {
+              e.icon ? (l(), z(a, {
                 key: 0,
-                icon: i.icon
-              }, null, 8, ["icon"])) : j("", !0),
+                icon: e.icon
+              }, null, 8, ["icon"])) : w("", !0),
               r("div", {
                 class: "lkt-toast-text",
-                innerHTML: x.value
-              }, null, 8, O)
+                innerHTML: _.value
+              }, null, 8, Q)
             ]),
             r("div", {
               class: "lkt-toast-close",
-              onClick: t[0] || (t[0] = (b) => M($)(i.zIndex))
+              onClick: m[0] || (m[0] = (T) => v(D)(e.zIndex))
             }, [
               r("i", {
-                class: k(M(L))
+                class: h(v(V))
               }, null, 2)
             ])
           ]),
           r("div", {
             class: "lkt-toast-details",
-            innerHTML: _.value
-          }, null, 8, Q),
-          U(B, {
+            innerHTML: C.value
+          }, null, 8, W),
+          N(B, y({
             ref_key: "progressRef",
-            ref: d,
+            ref: u,
             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"])
+            "onUpdate:modelValue": m[1] || (m[1] = (T) => n.value = T)
+          }, {
+            duration: v(i),
+            animation: {
+              type: v(O).Decremental,
+              autoplay: !0,
+              externalControl: !1,
+              to: 0,
+              from: 100
+            },
+            valueFormat: v(j).Hidden,
+            pauseOnHover: !0,
+            events: {
+              updatedVisibleProgress: (T) => {
+                T === 0 && v(D)(s.zIndex);
+              }
+            }
+          }), null, 16, ["modelValue"])
         ], 512)
       ], 34);
     };
   }
-}), W = { class: "lkt-toast-canvas" }, Y = /* @__PURE__ */ D({
+}), Y = { class: "lkt-toast-canvas" }, Z = /* @__PURE__ */ $({
   __name: "LktToastCanvas",
   setup(e, { expose: s }) {
-    const n = m(0), u = A(), d = m([]), h = () => {
+    const n = k(0), i = A(), u = k([]), x = () => {
       n.value = n.value + 1, setTimeout(() => {
-        var o;
-        (o = u == null ? void 0 : u.proxy) == null || o.$forceUpdate();
+        var t;
+        (t = i == null ? void 0 : i.proxy) == null || t.$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");
+    }, 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");
     return s({
-      refresh: h
-    }), (o, i) => (l(), p("section", W, [
+      refresh: x
+    }), (t, m) => (l(), p("section", Y, [
       r("div", {
-        class: k(["lkt-toast-stack left-stack", L.value])
+        class: h(["lkt-toast-stack left-stack", V.value])
       }, [
-        (l(!0), p(R, null, V(g.value, (t) => (l(), C(T, X({
+        (l(!0), p(P, null, b(g.value, (a) => (l(), z(L, y({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: d,
-          key: t.zIndex
-        }, t), null, 16))), 128))
+          ref: u,
+          key: a.zIndex
+        }, { ref_for: !0 }, a), null, 16))), 128))
       ], 2),
       r("div", {
-        class: k(["lkt-toast-stack center-stack", y.value])
+        class: h(["lkt-toast-stack center-stack", I.value])
       }, [
-        (l(!0), p(R, null, V(x.value, (t) => (l(), C(T, X({
+        (l(!0), p(P, null, b(_.value, (a) => (l(), z(L, y({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: d,
-          key: t.zIndex
-        }, t), null, 16))), 128))
+          ref: u,
+          key: a.zIndex
+        }, { ref_for: !0 }, a), null, 16))), 128))
       ], 2),
       r("div", {
-        class: k(["lkt-toast-stack right-stack", I.value])
+        class: h(["lkt-toast-stack right-stack", R.value])
       }, [
-        (l(!0), p(R, null, V(_.value, (t) => (l(), C(T, X({
+        (l(!0), p(P, null, b(C.value, (a) => (l(), z(L, y({
           ref_for: !0,
           ref_key: "instanceReferences",
-          ref: d,
-          key: t.zIndex
-        }, t), null, 16))), 128))
+          ref: u,
+          key: a.zIndex
+        }, { ref_for: !0 }, a), null, 16))), 128))
       ], 2)
     ]));
   }
-}), se = {
+}), ne = {
   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);
+    e.component("lkt-toast-canvas") === void 0 && e.component("lkt-toast-canvas", Z), e.component("lkt-toast") === void 0 && e.component("lkt-toast", L);
   }
-}, ne = (e) => {
+}, oe = (e) => {
   f.canvas = e;
 };
 export {
-  $ as closeToast,
-  se as default,
-  te as openToast,
-  ne as setToastCanvas
+  D as closeToast,
+  ne as default,
+  se as openToast,
+  oe as setToastCanvas
 };

package/package.json

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

package/src/lib-components/LktToast.vue

@@ -1,6 +1,15 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
-import {extractI18nValue, getDefaultValues, LktSettings, Toast, ToastConfig} from "lkt-vue-kernel";
+import {computed, onMounted, ref, watch} from 'vue';
+import {
+    extractI18nValue,
+    getDefaultValues,
+    LktSettings,
+    ProgressAnimation,
+    ProgressConfig,
+    ProgressValueFormat,
+    Toast,
+    ToastConfig
+} from "lkt-vue-kernel";
 import {closeToast} from "../functions/functions";
 
 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>