lkt-menu 1.0.10 → 1.2.0

package/dist/build.d.ts

@@ -1,5 +1,5 @@
-declare class x {
-    constructor(t: any, n: any, i: any);
+declare class H {
+    constructor(r: any, a: any, s: any);
     key: any;
     href: any;
     label: any;
@@ -7,17 +7,17 @@ declare class x {
     isOpened: boolean;
     isActive: boolean;
     children: any[];
-    setChildren(t: any): this;
-    setOnClick(t: any): this;
+    setChildren(r: any): this;
+    setOnClick(r: any): this;
     onClick: any;
-    setIsActiveChecker(t: any): this;
+    setIsActiveChecker(r: any): this;
     isActiveChecker: any;
-    setIsActive(t?: boolean): this;
-    setLabel(t: any): this;
-    setIcon(t: any): this;
+    setIsActive(r?: boolean): this;
+    setLabel(r: any): this;
+    setIcon(r: any): this;
     doClose(): void;
 }
-declare function ke(o: any, t: any, n: any): {
+declare function Xe(e: any, r: any, a: any): {
     key: any;
     href: any;
     label: any;
@@ -25,18 +25,18 @@ declare function ke(o: any, t: any, n: any): {
     isOpened: boolean;
     isActive: boolean;
     children: any[];
-    setChildren: (t: any) => x;
-    setOnClick: (t: any) => x;
+    setChildren: (r: any) => H;
+    setOnClick: (r: any) => H;
     onClick: any;
-    setIsActiveChecker: (t: any) => x;
+    setIsActiveChecker: (r: any) => H;
     isActiveChecker: any;
-    setIsActive: (t?: boolean) => x;
-    setLabel: (t: any) => x;
-    setIcon: (t: any) => x;
+    setIsActive: (r?: boolean) => H;
+    setLabel: (r: any) => H;
+    setIcon: (r: any) => H;
     doClose: () => void;
 };
-declare namespace fe {
-    function install(o: any): void;
+declare namespace Qe {
+    function install(e: any): void;
 }
-declare function ye(o: any): boolean;
-export { x as MenuEntry, ke as createMenuEntry, fe as default, ye as setMenuToggleSlot };
+declare function Ye(e: any): boolean;
+export { H as MenuEntry, Xe as createMenuEntry, Qe as default, Ye as setMenuToggleSlot };

package/dist/build.js

@@ -1,145 +1,152 @@
-import { defineComponent as J, ref as $, useSlots as K, computed as c, watch as b, onMounted as q, resolveComponent as B, openBlock as u, createElementBlock as d, normalizeClass as V, createElementVNode as O, createVNode as G, withCtx as w, unref as H, renderSlot as L, createCommentVNode as f, toDisplayString as P, createBlock as R, resolveDynamicComponent as Q, Fragment as T, renderList as S, createSlots as W, reactive as X } from "vue";
-import { __ as Y } from "lkt-i18n";
-import { useRouter as Z } from "vue-router";
+import { defineComponent as B, ref as O, useSlots as U, computed as c, watch as x, onMounted as J, resolveComponent as z, createElementBlock as d, openBlock as i, normalizeClass as S, createElementVNode as A, createCommentVNode as k, createVNode as W, withCtx as V, renderSlot as D, unref as q, toDisplayString as G, createBlock as R, resolveDynamicComponent as Q, Fragment as F, renderList as M, createSlots as $, reactive as X } from "vue";
+import { useRouter as Y } from "vue-router";
+import "lkt-string-tools";
+import { __ as Z } from "lkt-i18n";
 import { DataState as ee } from "lkt-data-state";
 import { httpCall as te } from "lkt-http-client";
-class x {
-  constructor(t, n, i) {
-    this.key = "", this.href = "", this.label = "", this.icon = "", this.onClick = void 0, this.isActiveChecker = void 0, this.isOpened = !1, this.isActive = !1, this.parent = void 0, this.children = [], this.key = t, this.href = n, this.label = i;
+class H {
+  constructor(r, a, s) {
+    this.key = "", this.href = "", this.label = "", this.icon = "", this.onClick = void 0, this.isActiveChecker = void 0, this.isOpened = !1, this.isActive = !1, this.parent = void 0, this.children = [], this.key = r, this.href = a, this.label = s;
   }
-  setChildren(t) {
-    return t.forEach((n) => n.parent = this), this.children = t, this;
+  setChildren(r) {
+    return r.forEach((a) => a.parent = this), this.children = r, this;
   }
-  setOnClick(t) {
-    return this.onClick = t, this;
+  setOnClick(r) {
+    return this.onClick = r, this;
   }
-  setIsActiveChecker(t) {
-    return this.isActiveChecker = t, this;
+  setIsActiveChecker(r) {
+    return this.isActiveChecker = r, this;
   }
-  setIsActive(t = !0) {
-    return this.isActive = t, this;
+  setIsActive(r = !0) {
+    return this.isActive = r, this;
   }
-  setLabel(t) {
-    return this.label = t, this;
+  setLabel(r) {
+    return this.label = r, this;
   }
-  setIcon(t) {
-    return this.icon = t, this;
+  setIcon(r) {
+    return this.icon = r, this;
   }
   doClose() {
     this.isOpened = !1;
   }
 }
-const j = (o, t) => (t.forEach((n) => {
-  o.includes(n.key) || o.push(n.key), n.children.length > 0 && j(o, n.children);
-}), o), A = class A {
+const T = (e, r) => (r.forEach((a) => {
+  e.includes(a.key) || e.push(a.key), a.children.length > 0 && T(e, a.children);
+}), e), w = class w {
 };
-A.toggleSlot = "", A.debugEnabled = !1;
-let k = A;
-const le = { class: "lkt-menu-entry-main" }, ne = { class: "lkt-entry-content" }, re = {
+w.toggleSlot = "", w.debugEnabled = !1;
+let y = w;
+var re = ((e) => (e.Button = "button", e.Submit = "submit", e.Reset = "reset", e.Anchor = "anchor", e.Content = "content", e.Switch = "switch", e.HiddenSwitch = "hidden-switch", e.Split = "split", e.SplitLazy = "split-lazy", e.SplitEver = "split-ever", e.Tooltip = "tooltip", e.TooltipLazy = "tooltip-lazy", e.TooltipEver = "tooltip-ever", e))(re || {}), ne = ((e) => (e.Text = "text", e.Email = "email", e.Tel = "tel", e.Password = "password", e.Search = "search", e.Number = "number", e.Color = "color", e.Range = "range", e.Textarea = "textarea", e.Html = "html", e.Date = "date", e.File = "file", e.Image = "image", e.Select = "select", e.Check = "check", e.Switch = "switch", e.Calc = "calc", e.Card = "card", e.Elements = "elements", e))(ne || {}), le = ((e) => (e.Auto = "auto", e.Always = "always", e.Lazy = "lazy", e.Ever = "ever", e))(le || {}), ae = ((e) => (e.Transform = "transform", e.Height = "height", e.Display = "display", e))(ae || {}), oe = ((e) => (e.Href = "href", e.RouterLink = "router-link", e.RouterLinkBack = "router-link-back", e.Mail = "mail", e.Tel = "tel", e.Tab = "tab", e.Download = "download", e.Action = "action", e.Legacy = "", e))(oe || {}), ie = ((e) => (e.None = "", e.Field = "field", e.Button = "button", e.Anchor = "anchor", e))(ie || {}), se = ((e) => (e.List = "list", e.Inline = "inline", e.Count = "count", e))(se || {}), ue = ((e) => (e.None = "", e.Focus = "focus", e.Blur = "blur", e.Always = "always", e))(ue || {}), ce = ((e) => (e.MinStringLength = "min-str", e.MinNumber = "min-num", e.MaxStringLength = "max-str", e.MaxNumber = "max-num", e.Email = "email", e.Empty = "empty", e.EqualTo = "equal-to", e.MinNumbers = "min-numbers", e.MaxNumbers = "max-numbers", e.MinChars = "min-chars", e.MaxChars = "max-chars", e.MinUpperChars = "min-upper-chars", e.MaxUpperChars = "max-upper-chars", e.MinLowerChars = "min-lower-chars", e.MaxLowerChars = "max-lower-chars", e.MinSpecialChars = "min-special-chars", e.MaxSpecialChars = "max-special-chars", e))(ce || {}), de = ((e) => (e.Ok = "ok", e.Ko = "ko", e.Info = "info", e))(de || {}), ve = ((e) => (e.Create = "create", e.Update = "update", e.Read = "read", e))(ve || {}), me = ((e) => (e.Inline = "inline", e.Modal = "modal", e))(me || {}), he = ((e) => (e.Top = "top", e.Bottom = "bottom", e))(he || {}), pe = ((e) => (e.Changed = "changed", e.Always = "always", e.Never = "never", e))(pe || {}), fe = ((e) => (e.Manual = "manual", e.Auto = "auto", e.Delay = "delay", e))(fe || {}), ke = ((e) => (e.Toast = "toast", e.Inline = "inline", e))(ke || {}), ye = ((e) => (e.Pages = "pages", e.PrevNext = "prev-next", e.PagesPrevNext = "pages-prev-next", e.PagesPrevNextFirstLast = "pages-prev-next-first-last", e.LoadMore = "load-more", e.Infinite = "infinite", e))(ye || {}), ge = ((e) => (e.Table = "table", e.Item = "item", e.Ul = "ul", e.Ol = "ol", e))(ge || {}), Ce = ((e) => (e[e.Auto = 0] = "Auto", e[e.PreferItem = 1] = "PreferItem", e[e.PreferCustomItem = 2] = "PreferCustomItem", e[e.PreferColumns = 3] = "PreferColumns", e))(Ce || {}), be = ((e) => (e.NotDefined = "", e.ActionIcon = "action-icon", e))(be || {}), _e = ((e) => (e.Message = "message", e.Button = "button", e))(_e || {}), Se = ((e) => (e.Left = "left", e.Center = "center", e.Right = "right", e))(Se || {}), xe = ((e) => (e.Fixed = "fixed", e.Absolute = "absolute", e))(xe || {}), Ae = ((e) => (e.Top = "top", e.Bottom = "bottom", e.Center = "center", e.ReferrerCenter = "referrer-center", e))(Ae || {}), Me = ((e) => (e.Left = "left", e.Right = "right", e.Center = "center", e.LeftCorner = "left-corner", e.RightCorner = "right-corner", e))(Me || {}), we = ((e) => (e.Refresh = "refresh", e.Close = "close", e.ReOpen = "reOpen", e.Exec = "exec", e.Open = "open", e))(we || {}), Ie = ((e) => (e.Modal = "modal", e.Confirm = "confirm", e))(Ie || {}), Ee = ((e) => (e.None = "", e.Incremental = "incremental", e.Decremental = "decremental", e))(Ee || {}), Le = ((e) => (e.NotDefined = "", e.Hidden = "hidden", e.Integer = "integer", e.Decimal = "decimal", e.Auto = "auto", e))(Le || {}), Ne = ((e) => (e.Asc = "asc", e.Desc = "desc", e))(Ne || {}), Oe = ((e) => (e.Create = "create", e.Update = "update", e.Edit = "edit", e.Drop = "drop", e.Sort = "sort", e.SwitchEditMode = "switch-edit-mode", e.InlineEdit = "inline-edit", e.InlineCreate = "inline-create", e.ModalCreate = "modal-create", e.InlineCreateEver = "inline-create-ever", e))(Oe || {}), Ve = ((e) => (e.Lazy = "lazy", e.Ever = "ever", e))(Ve || {}), De = (e) => {
+  let r = String(e);
+  return r.startsWith("__:") ? Z(r.substring(3)) : r;
+};
+const Re = { class: "lkt-menu-entry-main" }, Te = { class: "lkt-entry-content" }, Pe = {
   key: 0,
   class: "lkt-menu-entry-icon"
-}, se = {
+}, ze = {
   key: 1,
   class: "lkt-menu-entry-text"
-}, oe = {
+}, Be = {
   key: 0,
   class: "lkt-menu-entry-children"
-}, ue = /* @__PURE__ */ J({
+}, Ue = /* @__PURE__ */ B({
   __name: "MenuItem",
   props: {
-    modelValue: { default: () => new x("", "", "") }
+    modelValue: { default: () => new H("", "", "") }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: t }) {
-    const n = t, i = o, e = $(i.modelValue), a = K(), I = Z(), m = $(!1), y = () => {
-      e.value.isOpened = !e.value.isOpened;
-    }, E = () => (e.value.children.length > 0 && y(), typeof e.value.onClick == "function" && e.value.onClick({
-      entry: e.value
-    }), 1), g = c(() => a["icon-" + e.value.key] || e.value.icon !== ""), D = c(() => {
-      let r = [];
-      return g.value && r.push("has-icon"), m.value && r.push("is-active"), r.join(" ");
-    }), s = c(() => j([], e.value.children)), l = c(() => {
-      let r = [];
-      for (let v in a)
-        v.startsWith("icon-") && s.value.includes(v.substring(5)) && r.push(v);
-      return r;
-    }), h = c(() => e.value.label.startsWith("__:") ? Y(e.value.label.substring(3)) : e.value.label), _ = c(() => e.value.isActive ? !0 : typeof e.value.isActiveChecker == "function" ? !!e.value.isActiveChecker({
-      entry: e.value
-    }) : !1), p = c(() => !!k.toggleSlot), F = c(() => k.toggleSlot);
-    return b(() => i.modelValue, (r) => {
-      e.value = r;
-    }, { deep: !0 }), b(e, (r) => {
-      n("update:modelValue", r);
-    }, { deep: !0 }), q(() => {
-      let r = I.currentRoute;
-      if (r.value.path === e.value.href)
-        e.value.isOpened = !0;
-      else if (e.value.children.length > 0) {
-        let v = !1;
-        e.value.children.forEach((M) => {
-          r.value.path === M.href && (v = !0);
-        }), v && (e.value.isOpened = !0);
+  setup(e, { emit: r }) {
+    const a = r, s = e, t = O(s.modelValue), u = U(), f = Y(), h = O(!1), g = () => {
+      t.value.isOpened = !t.value.isOpened;
+    }, I = () => (t.value.children.length > 0 && g(), typeof t.value.onClick == "function" && t.value.onClick({
+      entry: t.value
+    }), 1), C = c(() => u["icon-" + t.value.key] || t.value.icon !== ""), E = c(() => {
+      let l = [];
+      return C.value && l.push("has-icon"), h.value && l.push("is-active"), l.join(" ");
+    }), o = c(() => T([], t.value.children)), n = c(() => {
+      let l = [];
+      for (let v in u)
+        v.startsWith("icon-") && o.value.includes(v.substring(5)) && l.push(v);
+      return l;
+    }), m = c(() => De(t.value.label)), b = c(() => t.value.isActive ? !0 : typeof t.value.isActiveChecker == "function" ? !!t.value.isActiveChecker({
+      entry: t.value
+    }) : !1), p = c(() => !!y.toggleSlot), j = c(() => y.toggleSlot);
+    return x(() => s.modelValue, (l) => {
+      t.value = l;
+    }, { deep: !0 }), x(t, (l) => {
+      a("update:modelValue", l);
+    }, { deep: !0 }), J(() => {
+      let l = f == null ? void 0 : f.currentRoute;
+      if (l) {
+        if (l.value.path === t.value.href)
+          t.value.isOpened = !0;
+        else if (t.value.children.length > 0) {
+          let v = !1;
+          t.value.children.forEach((L) => {
+            l.value.path === L.href && (v = !0);
+          }), v && (t.value.isOpened = !0);
+        }
       }
-    }), (r, v) => {
-      const M = B("lkt-anchor"), z = B("menu-item", !0);
-      return u(), d("div", {
-        class: V(["lkt-menu-entry", D.value])
+    }), (l, v) => {
+      const L = z("lkt-anchor"), K = z("menu-item", !0);
+      return i(), d("div", {
+        class: S(["lkt-menu-entry", E.value])
       }, [
-        O("div", le, [
-          G(M, {
-            to: e.value.href,
-            "on-click": E,
-            "is-active": _.value,
-            onActive: v[0] || (v[0] = (U) => m.value = U)
+        A("div", Re, [
+          W(L, {
+            to: t.value.href,
+            "on-click": I,
+            "is-active": b.value,
+            onActive: v[0] || (v[0] = (P) => h.value = P)
           }, {
-            default: w(() => [
-              O("div", ne, [
-                g.value ? (u(), d("div", re, [
-                  H(a)["icon-" + e.value.key] ? L(r.$slots, "icon-" + e.value.key, {
-                    key: e.value.key,
-                    entry: e.value
-                  }) : e.value.icon !== "" ? (u(), d("i", {
+            default: V(() => [
+              A("div", Te, [
+                C.value ? (i(), d("div", Pe, [
+                  q(u)["icon-" + t.value.key] ? D(l.$slots, "icon-" + t.value.key, {
+                    key: t.value.key,
+                    entry: t.value
+                  }) : t.value.icon !== "" ? (i(), d("i", {
                     key: 1,
-                    class: V(e.value.icon)
-                  }, null, 2)) : f("", !0)
-                ])) : f("", !0),
-                e.value.label !== "" ? (u(), d("div", se, P(h.value), 1)) : f("", !0)
+                    class: S(t.value.icon)
+                  }, null, 2)) : k("", !0)
+                ])) : k("", !0),
+                t.value.label !== "" ? (i(), d("div", ze, G(m.value), 1)) : k("", !0)
               ])
             ]),
             _: 3
           }, 8, ["to", "is-active"]),
-          e.value.children.length > 0 ? (u(), d("div", {
+          t.value.children.length > 0 ? (i(), d("div", {
             key: 0,
             class: "lkt-menu-entry-toggle",
-            onClick: y
+            onClick: g
           }, [
-            p.value ? (u(), R(Q(F.value), {
+            p.value ? (i(), R(Q(j.value), {
               key: 0,
-              class: V(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
-            }, null, 8, ["class"])) : (u(), d("div", {
+              class: S(["lkt-menu-entry-toggle-inner", t.value.isOpened ? "is-opened" : ""])
+            }, null, 8, ["class"])) : (i(), d("div", {
               key: 1,
-              class: V(["lkt-menu-entry-toggle-inner lkt-menu-entry-toggle-triangle", e.value.isOpened ? "is-opened" : ""])
+              class: S(["lkt-menu-entry-toggle-inner lkt-menu-entry-toggle-triangle", t.value.isOpened ? "is-opened" : ""])
             }, null, 2))
-          ])) : f("", !0)
+          ])) : k("", !0)
         ]),
-        e.value.isOpened ? (u(), d("div", oe, [
-          (u(!0), d(T, null, S(e.value.children, (U, N) => (u(), R(z, {
-            modelValue: e.value.children[N],
-            "onUpdate:modelValue": (C) => e.value.children[N] = C,
-            key: e.value.children[N].key
-          }, W({ _: 2 }, [
-            S(l.value, (C) => ({
-              name: C,
-              fn: w(() => [
-                L(r.$slots, C)
+        t.value.isOpened ? (i(), d("div", Be, [
+          (i(!0), d(F, null, M(t.value.children, (P, N) => (i(), R(K, {
+            modelValue: t.value.children[N],
+            "onUpdate:modelValue": (_) => t.value.children[N] = _,
+            key: t.value.children[N].key
+          }, $({ _: 2 }, [
+            M(n.value, (_) => ({
+              name: _,
+              fn: V(() => [
+                D(l.$slots, _)
               ])
             }))
           ]), 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
-        ])) : f("", !0)
+        ])) : k("", !0)
       ], 2);
     };
   }
-}), ie = { class: "lkt-menu-container" }, ae = { class: "lkt-menu" }, ce = /* @__PURE__ */ J({
+}), Fe = { class: "lkt-menu-container" }, $e = { class: "lkt-menu" }, He = /* @__PURE__ */ B({
   __name: "LktMenu",
   props: {
     modelValue: { default: () => [] },
@@ -147,66 +154,65 @@ const le = { class: "lkt-menu-entry-main" }, ne = { class: "lkt-entry-content" }
     resourceData: { default: () => ({}) }
   },
   emits: ["update:modelValue", "click-outside", "loading", "results", "response", "error"],
-  setup(o, { emit: t }) {
-    const n = o, i = t, e = K(), a = $(n.modelValue), I = (s) => {
-      let l = {};
-      typeof s == "object" && Object.keys(s).length > 0 && (l = JSON.parse(JSON.stringify(s)));
-      for (let h in l)
-        (Array.isArray(l[h]) || typeof l[h] == "object") && (l[h] = JSON.stringify(l[h]));
-      return l;
+  setup(e, { emit: r }) {
+    const a = e, s = r, t = U(), u = O(a.modelValue), f = (o) => {
+      let n = {};
+      typeof o == "object" && Object.keys(o).length > 0 && (n = JSON.parse(JSON.stringify(o)));
+      for (let m in n)
+        (Array.isArray(n[m]) || typeof n[m] == "object") && (n[m] = JSON.stringify(n[m]));
+      return n;
     };
-    let m = new ee({});
-    m.increment(I(n.resourceData));
-    const y = c(() => j([], a.value)), E = c(() => {
-      let s = [];
-      for (let l in e)
-        l.startsWith("icon-") && y.value.includes(l.substring(5)) && s.push(l);
-      return s;
-    }), g = () => {
-      if (!n.resource)
-        return;
-      let s = m.getData();
-      i("loading"), te(n.resource, s).then((l) => {
-        m.turnStoredIntoOriginal(), a.value = l.data, i("results", l.data), i("response", l);
-      }).catch((l) => {
-        i("error", l);
+    let h = new ee({});
+    h.increment(f(a.resourceData));
+    const g = c(() => T([], u.value)), I = c(() => {
+      let o = [];
+      for (let n in t)
+        n.startsWith("icon-") && g.value.includes(n.substring(5)) && o.push(n);
+      return o;
+    }), C = () => {
+      if (!a.resource) return;
+      let o = h.getData();
+      s("loading"), te(a.resource, o).then((n) => {
+        h.turnStoredIntoOriginal(), u.value = n.data, s("results", n.data), s("response", n);
+      }).catch((n) => {
+        s("error", n);
       });
-    }, D = () => {
-      i("click-outside");
+    }, E = () => {
+      s("click-outside");
     };
-    return b(() => n.modelValue, (s) => {
-      a.value = s;
-    }, { deep: !0 }), b(a, (s) => {
-      i("update:modelValue", s);
-    }, { deep: !0 }), g(), (s, l) => (u(), d("div", ie, [
-      O("div", ae, [
-        (u(!0), d(T, null, S(a.value, (h, _) => (u(), R(ue, {
-          modelValue: a.value[_],
-          "onUpdate:modelValue": (p) => a.value[_] = p,
-          key: h.key
-        }, W({ _: 2 }, [
-          S(E.value, (p) => ({
+    return x(() => a.modelValue, (o) => {
+      u.value = o;
+    }, { deep: !0 }), x(u, (o) => {
+      s("update:modelValue", o);
+    }, { deep: !0 }), C(), (o, n) => (i(), d("div", Fe, [
+      A("div", $e, [
+        (i(!0), d(F, null, M(u.value, (m, b) => (i(), R(Ue, {
+          modelValue: u.value[b],
+          "onUpdate:modelValue": (p) => u.value[b] = p,
+          key: m.key
+        }, $({ _: 2 }, [
+          M(I.value, (p) => ({
             name: p,
-            fn: w(() => [
-              L(s.$slots, p)
+            fn: V(() => [
+              D(o.$slots, p)
             ])
           }))
         ]), 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
       ]),
-      O("div", {
+      A("div", {
         class: "lkt-menu-outside",
-        onClick: D
+        onClick: E
       })
     ]));
   }
-}), fe = {
-  install: (o) => {
-    o.component("lkt-menu") === void 0 && o.component("lkt-menu", ce);
+}), Qe = {
+  install: (e) => {
+    e.component("lkt-menu") === void 0 && e.component("lkt-menu", He);
   }
-}, ke = (o, t, n) => X(new x(o, t, n)), ye = (o) => (k.toggleSlot = o, !0);
+}, Xe = (e, r, a) => X(new H(e, r, a)), Ye = (e) => (y.toggleSlot = e, !0);
 export {
-  x as MenuEntry,
-  ke as createMenuEntry,
-  fe as default,
-  ye as setMenuToggleSlot
+  H as MenuEntry,
+  Xe as createMenuEntry,
+  Qe as default,
+  Ye as setMenuToggleSlot
 };

package/dist/components/MenuItem.vue.d.ts

@@ -1,19 +1,52 @@
-import { MenuEntry } from "../classes/MenuEntry";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry | undefined;
-}>, {
-    modelValue: () => MenuEntry;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry | undefined;
-}>, {
-    modelValue: () => MenuEntry;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    modelValue: MenuEntry;
-}, {}>, Partial<Record<string, (_: {
+import { MenuEntry } from '../classes/MenuEntry';
+import { LktObject } from 'lkt-ts-interfaces';
+type __VLS_Props = {
+    modelValue?: MenuEntry;
+};
+declare const entry: import("vue").Ref<{
+    key: string;
+    href: string;
+    label: string;
+    icon: string;
+    onClick: Function | undefined;
+    isActiveChecker: Function | undefined;
+    isOpened: boolean;
+    isActive: boolean;
+    parent: /*elided*/ any | undefined;
+    children: /*elided*/ any[];
+    setChildren: (children: MenuEntry[]) => MenuEntry;
+    setOnClick: (fn: Function) => MenuEntry;
+    setIsActiveChecker: (fn: Function) => MenuEntry;
+    setIsActive: (enabled?: boolean) => MenuEntry;
+    setLabel: (str: string) => MenuEntry;
+    setIcon: (str: string) => MenuEntry;
+    doClose: () => void;
+}, MenuEntry | {
+    key: string;
+    href: string;
+    label: string;
+    icon: string;
+    onClick: Function | undefined;
+    isActiveChecker: Function | undefined;
+    isOpened: boolean;
+    isActive: boolean;
+    parent: /*elided*/ any | undefined;
+    children: /*elided*/ any[];
+    setChildren: (children: MenuEntry[]) => MenuEntry;
+    setOnClick: (fn: Function) => MenuEntry;
+    setIsActiveChecker: (fn: Function) => MenuEntry;
+    setIsActive: (enabled?: boolean) => MenuEntry;
+    setLabel: (str: string) => MenuEntry;
+    setIcon: (str: string) => MenuEntry;
+    doClose: () => void;
+}>, slots: Readonly<{
+    [name: string]: import("vue").Slot<any> | undefined;
+}>, isActive: import("vue").Ref<boolean, boolean>;
+declare const onClickToggle: () => void, onClick: () => number;
+declare const canRenderIcon: import("vue").ComputedRef<boolean | import("vue").Slot<any>>, classes: import("vue").ComputedRef<string>;
+declare const entryIconSlots: import("vue").ComputedRef<LktObject>, computedLabel: import("vue").ComputedRef<any>, computedIsActive: import("vue").ComputedRef<boolean>, hasToggleSlot: import("vue").ComputedRef<boolean>, toggleSlot: import("vue").ComputedRef<string | import("vue").Component>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_10: string, __VLS_11: {
     key: string;
     entry: {
         key: string;
@@ -24,8 +57,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         isActiveChecker: Function | undefined;
         isOpened: boolean;
         isActive: boolean;
-        parent: any | undefined;
-        children: any[];
+        parent: /*elided*/ any | undefined;
+        children: /*elided*/ any[];
         setChildren: (children: MenuEntry[]) => MenuEntry;
         setOnClick: (fn: Function) => MenuEntry;
         setIsActiveChecker: (fn: Function) => MenuEntry;
@@ -34,26 +67,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         setIcon: (str: string) => MenuEntry;
         doClose: () => void;
     };
-}) => any>> & Partial<Record<any, (_: {}) => any>>>;
+}, __VLS_22: any, __VLS_23: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    entry: typeof entry;
+    slots: typeof slots;
+    isActive: typeof isActive;
+    onClickToggle: typeof onClickToggle;
+    onClick: typeof onClick;
+    canRenderIcon: typeof canRenderIcon;
+    classes: typeof classes;
+    entryIconSlots: typeof entryIconSlots;
+    computedLabel: typeof computedLabel;
+    computedIsActive: typeof computedIsActive;
+    hasToggleSlot: typeof hasToggleSlot;
+    toggleSlot: typeof toggleSlot;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: MenuEntry;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: MenuEntry;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,59 +1,101 @@
 import { MenuEntry } from "../classes/MenuEntry";
+import MenuItem from "../components/MenuItem.vue";
 import { LktObject } from "lkt-ts-interfaces";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry[] | undefined;
-    resource?: string | undefined;
+type __VLS_Props = {
+    modelValue?: MenuEntry[];
+    resource?: string;
     resourceData: LktObject;
-}>, {
-    modelValue: () => never[];
-    resource: string;
-    resourceData: () => {};
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+declare const entries: import("vue").Ref<{
+    key: string;
+    href: string;
+    label: string;
+    icon: string;
+    onClick: Function | undefined;
+    isActiveChecker: Function | undefined;
+    isOpened: boolean;
+    isActive: boolean;
+    parent: /*elided*/ any | undefined;
+    children: /*elided*/ any[];
+    setChildren: (children: MenuEntry[]) => MenuEntry;
+    setOnClick: (fn: Function) => MenuEntry;
+    setIsActiveChecker: (fn: Function) => MenuEntry;
+    setIsActive: (enabled?: boolean) => MenuEntry;
+    setLabel: (str: string) => MenuEntry;
+    setIcon: (str: string) => MenuEntry;
+    doClose: () => void;
+}[], MenuEntry[] | {
+    key: string;
+    href: string;
+    label: string;
+    icon: string;
+    onClick: Function | undefined;
+    isActiveChecker: Function | undefined;
+    isOpened: boolean;
+    isActive: boolean;
+    parent: /*elided*/ any | undefined;
+    children: /*elided*/ any[];
+    setChildren: (children: MenuEntry[]) => MenuEntry;
+    setOnClick: (fn: Function) => MenuEntry;
+    setIsActiveChecker: (fn: Function) => MenuEntry;
+    setIsActive: (enabled?: boolean) => MenuEntry;
+    setLabel: (str: string) => MenuEntry;
+    setIcon: (str: string) => MenuEntry;
+    doClose: () => void;
+}[]>;
+declare const entryIconSlots: import("vue").ComputedRef<LktObject>;
+declare const onClickOutside: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: any, __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_5>]?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    MenuItem: typeof MenuItem;
+    entries: typeof entries;
+    entryIconSlots: typeof entryIconSlots;
+    onClickOutside: typeof onClickOutside;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (...args: any[]) => void;
     loading: (...args: any[]) => void;
     results: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     "click-outside": (...args: any[]) => void;
     response: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry[] | undefined;
-    resource?: string | undefined;
-    resourceData: LktObject;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
+    onLoading?: ((...args: any[]) => any) | undefined;
+    onResults?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClick-outside"?: ((...args: any[]) => any) | undefined;
+    onResponse?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: () => never[];
     resource: string;
-    resourceData: () => {};
-}>>> & {
+    resourceData: LktObject;
+    modelValue: MenuEntry[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
+    loading: (...args: any[]) => void;
+    results: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    "click-outside": (...args: any[]) => void;
+    response: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onLoading?: ((...args: any[]) => any) | undefined;
     onResults?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onClick-outside"?: ((...args: any[]) => any) | undefined;
     onResponse?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     resource: string;
-    modelValue: MenuEntry[];
     resourceData: LktObject;
-}, {}>, Partial<Record<any, (_: {}) => any>>>;
+    modelValue: MenuEntry[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "1.0.10",
+  "version": "1.2.0",
   "description": "",
   "keywords": [
     "lkt",
@@ -18,11 +18,11 @@
     ".": {
       "import": "./dist/build.js"
     },
-    "./styles": "./dist/style.css",
+    "./styles": "./dist/build.css",
     "./theme": "./theme/default.css",
     "./theme/default": "./theme/default.css"
   },
-  "types": "./dist/index.d.ts",
+  "types": "./dist/build.d.ts",
   "files": [
     "dist/*",
     "src/**/*.vue",
@@ -31,34 +31,30 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
+    "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.9.6",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3",
+    "rollup": "^4.34.8",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
     "vue": "^3.3.0",
-    "vue-tsc": "^1.8.27"
-  },
-  "engines": {
-    "node": ">=18"
+    "vue-tsc": "^2.2.0"
   },
-  "dependencies": {
+  "peerDependencies": {
     "lkt-anchor": "^1.1.4",
-    "lkt-control-tools": "^1.0.3",
     "lkt-data-state": "^1.0.10",
-    "lkt-events": "^1.0.2",
     "lkt-http-client": "^1.0.31",
     "lkt-i18n": "^1.0.4",
-    "lkt-loader": "^1.0.1",
-    "lkt-modal-confirm": "^1.0.0",
-    "lkt-string-tools": "^1.0.1",
-    "lkt-ts-interfaces": "^1.0.0",
+    "lkt-vue-kernel": "^1.0.0",
     "vue": "^3.3.0",
     "vue-router": "^4.3.3"
   }

package/src/components/MenuItem.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import {MenuEntry} from "../classes/MenuEntry";
-import {computed, onMounted, ref, useSlots, watch} from "vue";
-import {LktObject} from "lkt-ts-interfaces";
-import {fetchKeys} from "../functions/helpers";
-import {__} from "lkt-i18n";
-import {useRouter} from "vue-router";
-import {Settings} from "../settings/Settings";
+  import { MenuEntry } from '../classes/MenuEntry';
+  import { computed, onMounted, ref, useSlots, watch } from 'vue';
+  import { LktObject } from 'lkt-ts-interfaces';
+  import { fetchKeys } from '../functions/helpers';
+  import { useRouter } from 'vue-router';
+  import { Settings } from '../settings/Settings';
+  import { extractI18nValue } from 'lkt-vue-kernel';
 
-const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(defineProps<{
     modelValue?: MenuEntry
@@ -60,10 +60,7 @@ const availableKeys = computed(() => {
         return r;
     }),
     computedLabel = computed(() => {
-        if (entry.value.label.startsWith('__:')) {
-            return __(entry.value.label.substring(3));
-        }
-        return entry.value.label;
+        return extractI18nValue(entry.value.label);
     }),
     computedIsActive = computed(() => {
         if (entry.value.isActive) return true;
@@ -93,17 +90,19 @@ watch(entry, (v) => {
 }, {deep: true});
 
 onMounted(() => {
-    let currentRoute = router.currentRoute;
-    if (currentRoute.value.path === entry.value.href) {
-        entry.value.isOpened = true;
+    let currentRoute = router?.currentRoute;
+    if (currentRoute) {
+      if (currentRoute.value.path === entry.value.href) {
+          entry.value.isOpened = true;
 
-    } else if (entry.value.children.length > 0) {
-        let opened = false;
-        entry.value.children.forEach((child) => {
-            if (currentRoute.value.path === child.href) opened = true;
-        });
+      } else if (entry.value.children.length > 0) {
+          let opened = false;
+          entry.value.children.forEach((child) => {
+              if (currentRoute.value.path === child.href) opened = true;
+          });
 
-        if (opened) entry.value.isOpened = true;
+          if (opened) entry.value.isOpened = true;
+      }
     }
 });
 </script>

package/src/lib-components/LktMenu.vue

@@ -8,9 +8,9 @@ import {DataState} from "lkt-data-state";
 import {httpCall, HTTPResponse} from "lkt-http-client";
 
 const props = withDefaults(defineProps<{
-    modelValue?: MenuEntry[],
+    modelValue?: MenuEntry[]
     resource?: string
-    resourceData: LktObject,
+    resourceData: LktObject
 }>(), {
     modelValue: () => [],
     resource: '',
@@ -97,8 +97,4 @@ loadResource();
         </div>
         <div class="lkt-menu-outside" v-on:click="onClickOutside"/>
     </div>
-</template>
-
-<style scoped>
-
-</style>
+</template>