lkt-toast 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LKT VUE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/build.css

@@ -0,0 +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)}

package/dist/build.d.ts

@@ -0,0 +1,7 @@
+declare function P(t: any): void;
+declare namespace O {
+    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 };

package/dist/build.js

@@ -0,0 +1,155 @@
+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 {
+};
+y.canvas = void 0, y.defaultCloseIcon = "";
+let f = y;
+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);
+    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) => {
+  if (!f.canvas) {
+    console.warn("ToastCanvas not defined");
+    return;
+  }
+  p.open(t), f.canvas.refresh();
+}, P = (t) => {
+  if (!f.canvas) {
+    console.warn("ToastCanvas not defined");
+    return;
+  }
+  p.close(t), f.canvas.refresh();
+}, j = {
+  class: "lkt-toast-inner",
+  ref: "inner"
+}, A = { class: "lkt-toast-header" }, D = ["innerHTML"], z = /* @__PURE__ */ $({
+  __name: "LktToast",
+  props: {
+    type: {},
+    text: {},
+    icon: {},
+    positionX: {},
+    duration: {},
+    buttonConfig: {},
+    zIndex: {}
+  },
+  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();
+    };
+    return B(() => {
+      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
+      }, [
+        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", {
+              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)
+            ]))
+          ]),
+          N(a, {
+            ref_key: "progressRef",
+            ref: d,
+            modelValue: s.value,
+            "onUpdate:modelValue": e[1] || (e[1] = (X) => s.value = X),
+            duration: E(u),
+            type: "decremental",
+            "value-format": "hidden",
+            "pause-on-hover": "",
+            onEnd: g
+          }, null, 8, ["modelValue", "duration"])
+        ], 512)
+      ], 34);
+    };
+  }
+}), F = { class: "lkt-toast-canvas" }, q = /* @__PURE__ */ $({
+  __name: "LktToastCanvas",
+  setup(t, { expose: n }) {
+    const s = m(0), u = H(), d = m([]), k = () => {
+      s.value = s.value + 1, setTimeout(() => {
+        var e;
+        (e = u == null ? void 0 : u.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");
+    return n({
+      refresh: k
+    }), (e, V) => (c(), v("section", F, [
+      i("div", {
+        class: C(["lkt-toast-stack left-stack", I.value])
+      }, [
+        (c(!0), v(L, null, M(h.value, (a) => (c(), _(z, R({
+          ref_for: !0,
+          ref_key: "instanceReferences",
+          ref: d,
+          key: a.zIndex
+        }, a), null, 16))), 128))
+      ], 2),
+      i("div", {
+        class: C(["lkt-toast-stack center-stack", T.value])
+      }, [
+        (c(!0), v(L, null, M(x.value, (a) => (c(), _(z, R({
+          ref_for: !0,
+          ref_key: "instanceReferences",
+          ref: d,
+          key: a.zIndex
+        }, a), null, 16))), 128))
+      ], 2),
+      i("div", {
+        class: C(["lkt-toast-stack right-stack", r.value])
+      }, [
+        (c(!0), v(L, null, M(g.value, (a) => (c(), _(z, R({
+          ref_for: !0,
+          ref_key: "instanceReferences",
+          ref: d,
+          key: a.zIndex
+        }, a), null, 16))), 128))
+      ], 2)
+    ]));
+  }
+}), O = {
+  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);
+  }
+}, Q = (t) => {
+  f.canvas = t;
+};
+export {
+  P as closeToast,
+  O as default,
+  K as openToast,
+  Q as setToastCanvas
+};

package/dist/classes/ToastController.d.ts

@@ -0,0 +1,7 @@
+import { ToastConfig } from 'lkt-vue-kernel';
+export declare class ToastController {
+    static components: ToastConfig[];
+    static zIndex: number;
+    static open(config: ToastConfig): void;
+    static close(zIndex: number): void;
+}

package/dist/functions/functions.d.ts

@@ -0,0 +1,3 @@
+import { ToastConfig } from 'lkt-vue-kernel';
+export declare const openToast: (config: ToastConfig) => void;
+export declare const closeToast: (zIndex: number) => void;

package/dist/index.d.ts

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

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

@@ -0,0 +1,3 @@
+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>;
+export default _default;

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

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    refresh: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/settings/Settings.d.ts

@@ -0,0 +1,5 @@
+import { ValidCanvas } from "../types/ValidCanvas";
+export declare class Settings {
+    static canvas: ValidCanvas;
+    static defaultCloseIcon: string;
+}

package/dist/types/ValidCanvas.d.ts

@@ -0,0 +1,2 @@
+import LktToastCanvas from "../lib-components/LktToastCanvas.vue";
+export type ValidCanvas = undefined | typeof LktToastCanvas;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "lkt-toast",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "module": "./dist/build.js",
+  "exports": {
+    ".": {
+      "import": "./dist/build.js"
+    },
+    "./styles": "./dist/build.css",
+    "./theme": "./theme/default.css",
+    "./theme/default": "./theme/default.css"
+  },
+  "types": "./dist/build.d.ts",
+  "files": [
+    "dist/*",
+    "src/**/*.vue",
+    "theme/**/*.css"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/",
+    "rebuild": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
+  },
+  "author": "Antonio Ibáñez",
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.23.6",
+    "@types/node": "^20.11.19",
+    "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "rollup": "^4.34.8",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vue": "^3.3.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "dependencies": {
+    "lkt-loader": "^1.0.1",
+    "lkt-vue-kernel": "^1.0.26"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  }
+}

package/src/lib-components/LktToast.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import {extractI18nValue, ToastConfig} from "lkt-vue-kernel";
+import {closeToast} from "../functions/functions";
+
+const props = withDefaults(defineProps<ToastConfig>(), {});
+
+const progressPercentage = ref(100),
+    timeoutDuration = props.duration ?? 10000,
+    progressRef = ref(null),
+    addAnimationClass = ref(false);
+
+const classes = computed(() => {
+        let r: string[] = [];
+        if (addAnimationClass.value) r.push('is-visible');
+        if (props.positionX) r.push(`animation-${props.positionX}`);
+        return r.join(' ');
+    }),
+    computedText = computed(() => extractI18nValue(props.text))
+
+const onProgressEnd = () => {
+        closeToast(props.zIndex);
+    },
+    onProgressMouseEnter = () => {
+        progressRef.value.pause();
+    },
+    onProgressMouseLeave = () => {
+        progressRef.value.start();
+    };
+
+onMounted(() => {
+    setTimeout(() => {
+        addAnimationClass.value = true;
+    }, 100);
+})
+
+</script>
+
+<template>
+    <section class="lkt-toast"
+             :class="classes"
+             @mouseenter="onProgressMouseEnter"
+             @mousemove="onProgressMouseEnter"
+             @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-close" @click="closeToast(zIndex)">
+                    <i class="lkt-icon-close"/>
+                </div>
+            </div>
+            <lkt-progress
+                ref="progressRef"
+                v-model="progressPercentage"
+                :duration="timeoutDuration"
+                type="decremental"
+                value-format="hidden"
+                pause-on-hover
+                @end="onProgressEnd"
+            />
+        </div>
+    </section>
+</template>

package/src/lib-components/LktToastCanvas.vue

@@ -0,0 +1,80 @@
+<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";
+
+const refresher = ref(0);
+const instance = getCurrentInstance();
+const instanceReferences = ref([]);
+
+const refresh = () => {
+    refresher.value = refresher.value + 1;
+    setTimeout(() => {
+        instance?.proxy?.$forceUpdate();
+    }, 1);
+};
+
+const componentsLeft = computed((): ToastConfig[] => {
+    refresher.value;
+    return ToastController.components.filter(x => x.positionX === 'left');
+});
+
+const componentsCenter = computed((): ToastConfig[] => {
+    refresher.value;
+    return ToastController.components.filter(x => x.positionX === 'center');
+});
+
+const componentsRight = computed((): ToastConfig[] => {
+    refresher.value;
+    return ToastController.components.filter(x => x.positionX === 'right');
+});
+
+const computedLeftStackClasses = computed(() => {
+    if (componentsLeft.value.length === 0) return '';
+    return 'is-visible';
+})
+
+const computedCenterStackClasses = computed(() => {
+    if (componentsCenter.value.length === 0) return '';
+    return 'is-visible';
+})
+
+const computedRightStackClasses = computed(() => {
+    if (componentsRight.value.length === 0) return '';
+    return 'is-visible';
+})
+
+defineExpose({
+    refresh,
+});
+</script>
+
+<template>
+    <section class="lkt-toast-canvas">
+        <div class="lkt-toast-stack left-stack" :class="computedLeftStackClasses">
+            <lkt-toast
+                v-for="info in componentsLeft"
+                ref="instanceReferences"
+                :key="info.zIndex"
+                v-bind="info"
+            />
+        </div>
+        <div class="lkt-toast-stack center-stack" :class="computedCenterStackClasses">
+            <lkt-toast
+                v-for="info in componentsCenter"
+                ref="instanceReferences"
+                :key="info.zIndex"
+                v-bind="info"
+            />
+        </div>
+        <div class="lkt-toast-stack right-stack" :class="computedRightStackClasses">
+            <lkt-toast
+                v-for="info in componentsRight"
+                ref="instanceReferences"
+                :key="info.zIndex"
+                v-bind="info"
+            />
+        </div>
+    </section>
+</template>

package/theme/default.css

@@ -0,0 +1,17 @@
+:root {
+    --lkt-toast--stack--gap: 10px;
+    --lkt-toast--stack--padding: 10px;
+
+    --lkt-toast--toast--gap: 10px;
+    --lkt-toast--toast--padding: 15px;
+    --lkt-toast--toast--border-radius: 20px;
+    --lkt-toast--toast--bg: #ffffff;
+    --lkt-toast--toast--transition: 300ms;
+    --lkt-toast--toast--width: 250px;
+    --lkt-toast--toast--border-width: 1px;
+    --lkt-toast--toast--border-style: solid;
+    --lkt-toast--toast--border-color: #d4d4d4;
+
+    --lkt-toast--progress--height: 10px;
+    --lkt-toast--progress--color: #d4d4d4;
+}