lkt-menu 1.0.5 → 1.0.7

package/dist/build.d.ts

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

package/dist/build.js

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

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

@@ -5,12 +5,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     modelValue: () => never[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
+    "click-outside": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: MenuEntry[] | undefined;
 }>, {
     modelValue: () => never[];
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClick-outside"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: MenuEntry[];
 }, {}>, Partial<Record<any, (_: {}) => any>>>;

package/dist/style.css

@@ -1 +1 @@
-.lkt-menu{background:var(--lkt-menu-bg);padding:var(--lkt-menu-padding);max-width:var(--lkt-menu-max-width);width:var(--lkt-menu-width);height:100%}.lkt-menu-entry-toggle-inner{transition:all linear .2s}.lkt-menu-entry-toggle-inner.is-opened{transform:rotate(180deg)}.lkt-menu-entry-toggle-triangle{width:0;height:0;border-style:solid;border-width:10px 10px 0 10px;border-color:var(--lkt-menu-color-toggle) transparent transparent transparent;transform:rotate(0);transition:all linear .2s}.lkt-entry-content{display:inline-flex;flex-direction:row;gap:var(--lkt-menu-gap)}.lkt-menu-entry-toggle{display:inline-flex;flex-direction:row;align-items:center;justify-content:center}.lkt-menu-entry{padding:var(--lkt-menu-padding-entry)}.lkt-menu-entry .lkt-anchor{width:100%}.lkt-menu-entry-main{display:flex;justify-content:space-between}.lkt-entry-content{font-size:var(--lkt-menu-font-size);width:100%}.lkt-menu-outside{position:fixed;top:64px;right:0;left:0;bottom:0;background:var(--lkt-menu-bg-outside);z-index:-1}.lkt-menu-entry-children{padding:var(--lkt-menu-padding-children)}.lkt-menu-entry-text{padding:var(--lkt-menu-padding-text-without-icon)}.lkt-menu.has-icon .lkt-menu-entry-text{padding:var(--lkt-menu-padding-text)}.lkt-menu.has-icon .lkt-menu-entry-icon+.lkt-menu-entry-text{padding:var(--lkt-menu-padding-text-with-icon)}
+.lkt-menu{background:var(--lkt-menu-bg);padding:var(--lkt-menu-padding);max-width:var(--lkt-menu-max-width);width:var(--lkt-menu-width);height:100%;display:flex;flex-direction:column;align-items:stretch;gap:var(--lkt-menu-gap-entries)}.lkt-menu-entry-toggle-inner{transition:all linear .2s}.lkt-menu-entry-toggle-inner.is-opened{transform:rotate(180deg)}.lkt-menu-entry-toggle-triangle{width:0;height:0;border-style:solid;border-width:10px 10px 0 10px;border-color:var(--lkt-menu-color-toggle) transparent transparent transparent;transform:rotate(0);transition:all linear .2s}.lkt-entry-content{display:inline-flex;flex-direction:row;gap:var(--lkt-menu-gap)}.lkt-menu-entry-toggle{display:inline-flex;flex-direction:row;align-items:center;justify-content:center}.lkt-menu-entry{padding:var(--lkt-menu-padding-entry)}.lkt-menu-entry .lkt-anchor{width:100%}.lkt-menu-entry-main{display:flex;justify-content:space-between;position:relative}.lkt-entry-content{font-size:var(--lkt-menu-font-size);width:100%}.lkt-menu-outside{position:fixed;top:64px;right:0;left:0;bottom:0;background:var(--lkt-menu-bg-outside);z-index:-1}.lkt-menu-entry-children{padding:var(--lkt-menu-padding-children)}.lkt-menu-entry-text{padding:var(--lkt-menu-padding-text-without-icon)}.lkt-menu.has-icon .lkt-menu-entry-text{padding:var(--lkt-menu-padding-text)}.lkt-menu.has-icon .lkt-menu-entry-icon+.lkt-menu-entry-text{padding:var(--lkt-menu-padding-text-with-icon)}

package/package.json

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

package/src/components/MenuItem.vue

@@ -21,6 +21,8 @@ const slots = useSlots();
 
 const router = useRouter();
 
+const isActive = ref(false);
+
 const onClickToggle = () => {
         entry.value.isOpened = !entry.value.isOpened;
     },
@@ -41,6 +43,7 @@ const canRenderIcon = computed(() => {
     classes = computed(() => {
         let r = [];
         if (canRenderIcon.value) r.push('has-icon');
+        if (isActive.value) r.push('is-active');
         return r.join(' ');
     });
 
@@ -113,6 +116,7 @@ onMounted(() => {
                 :to="entry.href"
                 :on-click="onClick"
                 :is-active="computedIsActive"
+                @active="isActive = $e"
             >
                 <div class="lkt-entry-content">
                     <div class="lkt-menu-entry-icon" v-if="canRenderIcon">

package/src/lib-components/LktMenu.vue

@@ -6,12 +6,12 @@ import {LktObject} from "lkt-ts-interfaces";
 import {fetchKeys} from "../functions/helpers";
 
 const props = withDefaults(defineProps<{
-    modelValue?: MenuEntry[]
+    modelValue?: MenuEntry[],
 }>(), {
-    modelValue: () => []
+    modelValue: () => [],
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'click-outside']);
 
 const slots = useSlots();
 
@@ -33,6 +33,10 @@ const availableKeys = computed(() => {
         return r;
     });
 
+const onClickOutside = () => {
+    emit('click-outside');
+}
+
 watch(() => props.modelValue, (v) => {
     entries.value = v;
 }, {deep: true})
@@ -51,7 +55,7 @@ watch(entries, (v) => {
                 </template>
             </menu-item>
         </div>
-        <div class="lkt-menu-outside"/>
+        <div class="lkt-menu-outside" v-on:click="onClickOutside"/>
     </div>
 </template>
 

package/theme/default.css

@@ -15,6 +15,7 @@
     --lkt-menu-min-height: 0;
     --lkt-menu-padding: 15px;
     --lkt-menu-gap: 15px;
+    --lkt-menu-gap-entries: 0;
 
     /** Colors */
     --lkt-menu-bg: #ffffff;