lkt-toast 1.1.0 → 1.1.2

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--bg);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 $(t: any): void;
-declare namespace ee {
-    function install(t: any): void;
+declare function $(e: any): void;
+declare namespace se {
+    function install(e: any): void;
 }
-declare function Z(t: any): void;
-declare function te(t: any): void;
-export { $ as closeToast, ee as default, Z as openToast, te as setToastCanvas };
+declare function te(e: any): void;
+declare function ne(e: any): void;
+export { $ as closeToast, se as default, te as openToast, ne as setToastCanvas };

package/dist/build.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-toast",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",
@@ -39,11 +39,9 @@
     "vue": "^3.3.0",
     "vue-tsc": "^2.2.0"
   },
-  "dependencies": {
-  },
   "peerDependencies": {
-    "lkt-loader": "^1.0.1",
-    "lkt-vue-kernel": "^1.0.26",
+    "lkt-loader": "^1.2.0",
+    "lkt-vue-kernel": "^1.0.51",
     "vue": "^3.3.0"
   }
 }

package/src/lib-components/LktToast.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref} from 'vue';
-import {extractI18nValue, getDefaultValues, Toast, ToastConfig} from "lkt-vue-kernel";
+import {extractI18nValue, getDefaultValues, LktSettings, Toast, ToastConfig} from "lkt-vue-kernel";
 import {closeToast} from "../functions/functions";
 
 const props = withDefaults(defineProps<ToastConfig>(), getDefaultValues(Toast));
@@ -20,13 +20,17 @@ const classes = computed(() => {
     computedDetails = computed(() => extractI18nValue(props.details))
 ;
 
+const calculatedCloseIcon = LktSettings.defaultCloseToastIcon
+
 const onProgressEnd = () => {
         closeToast(props.zIndex);
     },
     onProgressMouseEnter = () => {
+        //@ts-ignore
         progressRef.value.pause();
     },
     onProgressMouseLeave = () => {
+        //@ts-ignore
         progressRef.value.start();
     };
 
@@ -41,6 +45,9 @@ onMounted(() => {
 <template>
     <section class="lkt-toast"
              :class="classes"
+             role="status"
+             aria-live="polite"
+             aria-atomic="true"
              @mouseenter="onProgressMouseEnter"
              @mousemove="onProgressMouseEnter"
              @mouseleave="onProgressMouseLeave">
@@ -48,13 +55,13 @@ onMounted(() => {
             <div class="lkt-toast-header">
                 <div class="lkt-toast-header-text">
                     <lkt-icon v-if="icon" :icon="icon"/>
-                    <div class="lkt-toast-text" v-html="computedText"></div>
+                    <div class="lkt-toast-text" v-html="computedText"/>
                 </div>
                 <div class="lkt-toast-close" @click="closeToast(zIndex)">
-                    <i class="lkt-icon-close"/>
+                    <i :class="calculatedCloseIcon"/>
                 </div>
             </div>
-            <div class="lkt-toast-details" v-html="computedDetails"></div>
+            <div class="lkt-toast-details" v-html="computedDetails"/>
             <lkt-progress
                 ref="progressRef"
                 v-model="progressPercentage"

package/theme/default.css

@@ -5,7 +5,7 @@
     --lkt-toast--toast--gap: 10px;
     --lkt-toast--toast--padding: 15px;
     --lkt-toast--toast--border-radius: 20px;
-    --lkt-toast--toast--bg: #ffffff;
+    --lkt-toast--toast--background: #ffffff;
     --lkt-toast--toast--transition: 300ms;
     --lkt-toast--toast--width: 250px;
     --lkt-toast--toast--border-width: 1px;