lkt-menu 1.0.7 → 1.0.9

package/dist/build.d.ts

@@ -1,4 +1,4 @@
-declare class D {
+declare class x {
     constructor(t: any, s: any, d: any);
     key: any;
     href: any;
@@ -25,18 +25,18 @@ declare function he(n: any, t: any, s: any): {
     isOpened: boolean;
     isActive: boolean;
     children: any[];
-    setChildren: (t: any) => D;
-    setOnClick: (t: any) => D;
+    setChildren: (t: any) => x;
+    setOnClick: (t: any) => x;
     onClick: any;
-    setIsActiveChecker: (t: any) => D;
+    setIsActiveChecker: (t: any) => x;
     isActiveChecker: any;
-    setIsActive: (t?: boolean) => D;
-    setLabel: (t: any) => D;
-    setIcon: (t: any) => D;
+    setIsActive: (t?: boolean) => x;
+    setLabel: (t: any) => x;
+    setIcon: (t: any) => x;
     doClose: () => void;
 };
 declare namespace ve {
     function install(n: any): void;
 }
 declare function me(n: any): boolean;
-export { D as MenuEntry, he as createMenuEntry, ve as default, me as setMenuToggleSlot };
+export { x as MenuEntry, he as createMenuEntry, ve as default, me as setMenuToggleSlot };

package/dist/build.js

@@ -1,7 +1,7 @@
-import { defineComponent as K, ref as I, useSlots as N, computed as r, watch as C, onMounted as G, resolveComponent as B, openBlock as u, createElementBlock as a, normalizeClass as _, createElementVNode as V, createVNode as H, withCtx as $, unref as J, renderSlot as M, createCommentVNode as m, toDisplayString as P, createBlock as L, resolveDynamicComponent as Q, Fragment as T, renderList as b, createSlots as W, reactive as X } from "vue";
+import { defineComponent as K, ref as M, useSlots as N, computed as r, watch as C, onMounted as G, resolveComponent as B, openBlock as u, createElementBlock as a, normalizeClass as g, createElementVNode as V, createVNode as H, withCtx as $, unref as J, renderSlot as L, createCommentVNode as m, toDisplayString as P, createBlock as w, resolveDynamicComponent as Q, Fragment as T, renderList as b, createSlots as W, reactive as X } from "vue";
 import { __ as Y } from "lkt-i18n";
 import { useRouter as Z } from "vue-router";
-class D {
+class x {
   constructor(t, s, d) {
     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 = s, this.label = d;
   }
@@ -27,8 +27,8 @@ class D {
     this.isOpened = !1;
   }
 }
-const w = (n, t) => (t.forEach((s) => {
-  n.includes(s.key) || n.push(s.key), s.children.length > 0 && w(n, s.children);
+const R = (n, t) => (t.forEach((s) => {
+  n.includes(s.key) || n.push(s.key), s.children.length > 0 && R(n, s.children);
 }), n), A = class A {
 };
 A.toggleSlot = "", A.debugEnabled = !1;
@@ -45,23 +45,23 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
 }, ue = /* @__PURE__ */ K({
   __name: "MenuItem",
   props: {
-    modelValue: { default: () => new D("", "", "") }
+    modelValue: { default: () => new x("", "", "") }
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const s = t, d = n, e = I(d.modelValue), o = N(), O = Z(), p = I(!1), f = () => {
+    const s = t, d = n, e = M(d.modelValue), o = N(), O = Z(), p = M(!1), f = () => {
       e.value.isOpened = !e.value.isOpened;
     }, i = () => (e.value.children.length > 0 && f(), typeof e.value.onClick == "function" && e.value.onClick({
       entry: e.value
     }), 1), v = r(() => o["icon-" + e.value.key] || e.value.icon !== ""), S = r(() => {
       let l = [];
       return v.value && l.push("has-icon"), p.value && l.push("is-active"), l.join(" ");
-    }), y = r(() => w([], e.value.children)), h = r(() => {
+    }), y = r(() => R([], e.value.children)), h = r(() => {
       let l = [];
       for (let c in o)
         c.startsWith("icon-") && y.value.includes(c.substring(5)) && l.push(c);
       return l;
-    }), j = r(() => e.value.label.startsWith("__:") ? Y(e.value.label.substring(3)) : e.value.label), x = r(() => e.value.isActive ? !0 : typeof e.value.isActiveChecker == "function" ? !!e.value.isActiveChecker({
+    }), D = r(() => e.value.label.startsWith("__:") ? Y(e.value.label.substring(3)) : e.value.label), j = r(() => e.value.isActive ? !0 : typeof e.value.isActiveChecker == "function" ? !!e.value.isActiveChecker({
       entry: e.value
     }) : !1), z = r(() => !!k.toggleSlot), F = r(() => k.toggleSlot);
     return C(() => d.modelValue, (l) => {
@@ -81,27 +81,27 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
     }), (l, c) => {
       const E = B("lkt-anchor"), q = B("menu-item", !0);
       return u(), a("div", {
-        class: _(["lkt-menu-entry", S.value])
+        class: g(["lkt-menu-entry", S.value])
       }, [
         V("div", ee, [
           H(E, {
             to: e.value.href,
             "on-click": i,
-            "is-active": x.value,
-            onActive: c[0] || (c[0] = (R) => p.value = l.$e)
+            "is-active": j.value,
+            onActive: c[0] || (c[0] = (U) => p.value = U)
           }, {
             default: $(() => [
               V("div", te, [
                 v.value ? (u(), a("div", le, [
-                  J(o)["icon-" + e.value.key] ? M(l.$slots, "icon-" + e.value.key, {
+                  J(o)["icon-" + e.value.key] ? L(l.$slots, "icon-" + e.value.key, {
                     key: e.value.key,
                     entry: e.value
                   }) : e.value.icon !== "" ? (u(), a("i", {
                     key: 1,
-                    class: _(e.value.icon)
+                    class: g(e.value.icon)
                   }, null, 2)) : m("", !0)
                 ])) : m("", !0),
-                e.value.label !== "" ? (u(), a("div", ne, P(j.value), 1)) : m("", !0)
+                e.value.label !== "" ? (u(), a("div", ne, P(D.value), 1)) : m("", !0)
               ])
             ]),
             _: 3
@@ -111,25 +111,25 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
             class: "lkt-menu-entry-toggle",
             onClick: f
           }, [
-            z.value ? (u(), L(Q(F.value), {
+            z.value ? (u(), w(Q(F.value), {
               key: 0,
-              class: _(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
+              class: g(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
             }, null, 8, ["class"])) : (u(), a("div", {
               key: 1,
-              class: _(["lkt-menu-entry-toggle-inner lkt-menu-entry-toggle-triangle", e.value.isOpened ? "is-opened" : ""])
+              class: g(["lkt-menu-entry-toggle-inner lkt-menu-entry-toggle-triangle", e.value.isOpened ? "is-opened" : ""])
             }, null, 2))
           ])) : m("", !0)
         ]),
         e.value.isOpened ? (u(), a("div", se, [
-          (u(!0), a(T, null, b(e.value.children, (R, U) => (u(), L(q, {
-            modelValue: e.value.children[U],
-            "onUpdate:modelValue": (g) => e.value.children[U] = g,
-            key: R.key
+          (u(!0), a(T, null, b(e.value.children, (U, I) => (u(), w(q, {
+            modelValue: e.value.children[I],
+            "onUpdate:modelValue": (_) => e.value.children[I] = _,
+            key: e.value.children[I].key
           }, W({ _: 2 }, [
-            b(h.value, (g) => ({
-              name: g,
+            b(h.value, (_) => ({
+              name: _,
               fn: $(() => [
-                M(l.$slots, g)
+                L(l.$slots, _)
               ])
             }))
           ]), 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
@@ -144,7 +144,7 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
   },
   emits: ["update:modelValue", "click-outside"],
   setup(n, { emit: t }) {
-    const s = n, d = t, e = N(), o = I(s.modelValue), O = r(() => w([], o.value)), p = r(() => {
+    const s = n, d = t, e = N(), o = M(s.modelValue), O = r(() => R([], o.value)), p = r(() => {
       let i = [];
       for (let v in e)
         v.startsWith("icon-") && O.value.includes(v.substring(5)) && i.push(v);
@@ -158,7 +158,7 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
       d("update:modelValue", i);
     }, { deep: !0 }), (i, v) => (u(), a("div", ie, [
       V("div", oe, [
-        (u(!0), a(T, null, b(o.value, (S, y) => (u(), L(ue, {
+        (u(!0), a(T, null, b(o.value, (S, y) => (u(), w(ue, {
           modelValue: o.value[y],
           "onUpdate:modelValue": (h) => o.value[y] = h,
           key: S.key
@@ -166,7 +166,7 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
           b(p.value, (h) => ({
             name: h,
             fn: $(() => [
-              M(i.$slots, h)
+              L(i.$slots, h)
             ])
           }))
         ]), 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
@@ -181,9 +181,9 @@ const ee = { class: "lkt-menu-entry-main" }, te = { class: "lkt-entry-content" }
   install: (n) => {
     n.component("lkt-menu") === void 0 && n.component("lkt-menu", re);
   }
-}, he = (n, t, s) => X(new D(n, t, s)), me = (n) => (k.toggleSlot = n, !0);
+}, he = (n, t, s) => X(new x(n, t, s)), me = (n) => (k.toggleSlot = n, !0);
 export {
-  D as MenuEntry,
+  x as MenuEntry,
   he as createMenuEntry,
   ve as default,
   me as setMenuToggleSlot

package/dist/settings/Settings.d.ts

@@ -1,4 +1,5 @@
+import { Component } from "vue";
 export declare class Settings {
-    static toggleSlot: string;
+    static toggleSlot: string | Component;
     static debugEnabled: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "keywords": [
     "lkt",

package/src/components/MenuItem.vue

@@ -90,6 +90,7 @@ const availableKeys = computed(() => {
 watch(() => props.modelValue, (v) => {
     entry.value = v
 }, {deep: true});
+
 watch(entry, (v) => {
     emit('update:modelValue', v)
 }, {deep: true});
@@ -98,6 +99,7 @@ onMounted(() => {
     let currentRoute = router.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) => {
@@ -106,7 +108,7 @@ onMounted(() => {
 
         if (opened) entry.value.isOpened = true;
     }
-})
+});
 </script>
 
 <template>
@@ -116,7 +118,7 @@ onMounted(() => {
                 :to="entry.href"
                 :on-click="onClick"
                 :is-active="computedIsActive"
-                @active="isActive = $e"
+                @active="($e: any) => isActive = $e"
             >
                 <div class="lkt-entry-content">
                     <div class="lkt-menu-entry-icon" v-if="canRenderIcon">
@@ -143,15 +145,11 @@ onMounted(() => {
             </div>
         </div>
         <div class="lkt-menu-entry-children" v-if="entry.isOpened">
-            <menu-item v-for="(child, i) in entry.children" v-model="entry.children[i]" :key="child.key">
+            <menu-item v-for="(_, i) in entry.children" v-model="entry.children[i]" :key="entry.children[i].key">
                 <template v-for="slot in entryIconSlots" v-slot:[slot]>
                     <slot :name="slot"/>
                 </template>
             </menu-item>
         </div>
     </div>
-</template>
-
-<style scoped>
-
-</style>
+</template>