lkt-toast 1.0.0 → 1.0.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)}.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--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)}

package/dist/build.d.ts

@@ -1,7 +1,7 @@
-declare function P(t: any): void;
-declare namespace O {
+declare function $(t: any): void;
+declare namespace ee {
     function install(t: any): void;
 }
-declare function K(t: any): void;
-declare function Q(t: any): void;
-export { P as closeToast, O as default, K as openToast, Q as setToastCanvas };
+declare function Z(t: any): void;
+declare function te(t: any): void;
+export { $ as closeToast, ee as default, Z as openToast, te as setToastCanvas };

package/dist/build.js

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

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

@@ -1,3 +1,12 @@
 import { ToastConfig } from "lkt-vue-kernel";
-declare const _default: import("vue").DefineComponent<ToastConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastConfig> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<ToastConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastConfig> & Readonly<{}>, {
+    type: import("lkt-vue-kernel").ToastType;
+    positionX: import("lkt-vue-kernel").ToastPositionX;
+    zIndex: number;
+    details: string | number;
+    text: string | number;
+    icon: string | number;
+    duration: number;
+    buttonConfig: import("lkt-vue-kernel").ButtonConfig;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/package.json

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

package/src/lib-components/LktToast.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref} from 'vue';
-import {extractI18nValue, ToastConfig} from "lkt-vue-kernel";
+import {extractI18nValue, getDefaultValues, Toast, ToastConfig} from "lkt-vue-kernel";
 import {closeToast} from "../functions/functions";
 
-const props = withDefaults(defineProps<ToastConfig>(), {});
+const props = withDefaults(defineProps<ToastConfig>(), getDefaultValues(Toast));
 
 const progressPercentage = ref(100),
     timeoutDuration = props.duration ?? 10000,
@@ -16,7 +16,9 @@ const classes = computed(() => {
         if (props.positionX) r.push(`animation-${props.positionX}`);
         return r.join(' ');
     }),
-    computedText = computed(() => extractI18nValue(props.text))
+    computedText = computed(() => extractI18nValue(props.text)),
+    computedDetails = computed(() => extractI18nValue(props.details))
+;
 
 const onProgressEnd = () => {
         closeToast(props.zIndex);
@@ -44,12 +46,15 @@ onMounted(() => {
              @mouseleave="onProgressMouseLeave">
         <div class="lkt-toast-inner" ref="inner">
             <div class="lkt-toast-header">
-                <lkt-icon v-if="icon" :icon="icon"/>
-                <div class="lkt-toast-text" v-html="computedText"></div>
+                <div class="lkt-toast-header-text">
+                    <lkt-icon v-if="icon" :icon="icon"/>
+                    <div class="lkt-toast-text" v-html="computedText"></div>
+                </div>
                 <div class="lkt-toast-close" @click="closeToast(zIndex)">
                     <i class="lkt-icon-close"/>
                 </div>
             </div>
+            <div class="lkt-toast-details" v-html="computedDetails"></div>
             <lkt-progress
                 ref="progressRef"
                 v-model="progressPercentage"

package/theme/default.css

@@ -14,4 +14,10 @@
 
     --lkt-toast--progress--height: 10px;
     --lkt-toast--progress--color: #d4d4d4;
+
+    --lkt-toast--header--font-size: 16px;
+    --lkt-toast--header--font-weight: 400;
+
+    --lkt-toast--details--font-size: 14px;
+    --lkt-toast--details--font-weight: 400;
 }