lkt-menu 1.0.0 → 1.0.2

package/dist/build.d.ts

@@ -1,21 +1,41 @@
-declare function j(n: any, o: any, e: any): {
+declare function se(n: any, t: any, l: any): {
     key: any;
     href: any;
-    text: any;
+    label: any;
+    icon: string;
     isOpened: boolean;
+    isActive: boolean;
     children: any[];
-    setChildren: (o: any) => h;
+    setChildren: (t: any) => K;
+    setOnClick: (t: any) => K;
+    onClick: any;
+    setIsActiveChecker: (t: any) => K;
+    isActiveChecker: any;
+    setIsActive: (t?: boolean) => K;
+    setLabel: (t: any) => K;
+    setIcon: (t: any) => K;
+    doClose: () => void;
 };
-declare namespace b {
+declare namespace ne {
     function install(n: any): void;
 }
-declare class h {
-    constructor(o: any, e: any, s: any);
+declare class K {
+    constructor(t: any, l: any, c: any);
     key: any;
     href: any;
-    text: any;
+    label: any;
+    icon: string;
     isOpened: boolean;
+    isActive: boolean;
     children: any[];
-    setChildren(o: any): this;
+    setChildren(t: any): this;
+    setOnClick(t: any): this;
+    onClick: any;
+    setIsActiveChecker(t: any): this;
+    isActiveChecker: any;
+    setIsActive(t?: boolean): this;
+    setLabel(t: any): this;
+    setIcon(t: any): this;
+    doClose(): void;
 }
-export { j as createMenuEntry, b as default };
+export { se as createMenuEntry, ne as default };

package/dist/build.js

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

package/dist/classes/MenuEntry.d.ts

@@ -1,9 +1,20 @@
 export declare class MenuEntry {
     key: string;
     href: string;
-    text: string;
+    label: string;
+    icon: string;
+    onClick: Function | undefined;
+    isActiveChecker: Function | undefined;
     isOpened: boolean;
+    isActive: boolean;
+    parent: MenuEntry | undefined;
     children: MenuEntry[];
-    constructor(key: string, href: string, text: string);
+    constructor(key: string, href: string, label: string);
     setChildren(children: MenuEntry[]): this;
+    setOnClick(fn: Function): this;
+    setIsActiveChecker(fn: Function): this;
+    setIsActive(enabled?: boolean): this;
+    setLabel(str: string): this;
+    setIcon(str: string): this;
+    doClose(): void;
 }

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

@@ -1,15 +1,40 @@
 import { MenuEntry } from "../classes/MenuEntry";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: MenuEntry | undefined;
 }>, {
     modelValue: () => MenuEntry;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, 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, (_: {
+    key: string;
+    entry: {
+        key: string;
+        href: string;
+        label: string;
+        icon: string;
+        onClick: Function | undefined;
+        isActiveChecker: Function | undefined;
+        isOpened: boolean;
+        isActive: boolean;
+        parent: any | undefined;
+        children: 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;
+    };
+}) => any>> & Partial<Record<any, (_: {}) => any>>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -28,3 +53,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/functions/helpers.d.ts

@@ -0,0 +1,2 @@
+import { MenuEntry } from "../classes/MenuEntry";
+export declare const fetchKeys: (r: string[], entries: MenuEntry[]) => string[];

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

@@ -1,15 +1,19 @@
 import { MenuEntry } from "../classes/MenuEntry";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: MenuEntry[] | undefined;
 }>, {
     modelValue: () => never[];
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, 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: () => never[];
-}>>>, {
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: MenuEntry[];
-}, {}>;
+}, {}>, Partial<Record<any, (_: {}) => any>>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -28,3 +32,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/style.css

@@ -1 +1 @@
-.lkt-menu-entry-toggle-triangle{width:0px;height:0px;border-style:solid;border-width:10px 10px 0 10px;border-color:#FF4532 transparent transparent transparent;transform:rotate(0);transition:all linear .2s}.lkt-menu-entry-toggle-triangle.is-opened{transform:rotate(180deg)}.lkt-entry-content{display:inline-flex;flex-direction:row;gap:10px}.lkt-menu-entry-toggle{display:inline-flex;flex-direction:row;align-items:center;justify-content:center}
+.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-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-menu-entry-toggle-triangle.is-opened{transform:rotate(180deg)}.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)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "keywords": [
     "lkt",
@@ -53,6 +53,7 @@
     "lkt-control-tools": "^1.0.3",
     "lkt-events": "^1.0.2",
     "lkt-http-client": "^1.0.21",
+    "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.1",
     "lkt-modal-confirm": "^1.0.0",
     "lkt-string-tools": "^1.0.1",

package/src/components/MenuItem.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import {MenuEntry} from "../classes/MenuEntry";
-import {ref} from "vue";
-import EntryContent from "./EntryContent.vue";
+import {computed, ref, useSlots, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+import {fetchKeys} from "../functions/helpers";
+import {__} from "lkt-i18n";
+
+const emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(defineProps<{
     modelValue?: MenuEntry
@@ -11,28 +15,110 @@ const props = withDefaults(defineProps<{
 
 const entry = ref(props.modelValue);
 
+const slots = useSlots();
+
 const onClickToggle = () => {
-    entry.value.isOpened = !entry.value.isOpened;
-}
+        entry.value.isOpened = !entry.value.isOpened;
+    },
+    onClick = () => {
+        if (entry.value.children.length > 0) onClickToggle();
+        if (typeof entry.value.onClick === 'function') {
+            entry.value.onClick({
+                entry: entry.value
+            });
+        }
+        return 1;
+    };
+
+const canRenderIcon = computed(() => {
+        return slots['icon-' + entry.value.key]
+            || entry.value.icon !== '';
+    }),
+    classes = computed(() => {
+        let r = [];
+        if (canRenderIcon.value) r.push('has-icon');
+        return r.join(' ');
+    });
+
+const availableKeys = computed(() => {
+        let r: string[] = [];
+        return fetchKeys(r, entry.value.children);
+    }),
+    entryIconSlots = computed((): LktObject => {
+        let r = [];
+        for (let k in slots) {
+            if (k.startsWith('icon-')) {
+                if (availableKeys.value.includes(k.substring(5))) {
+                    r.push(k);
+                }
+            }
+        }
+        return r;
+    }),
+    computedLabel = computed(() => {
+        if (entry.value.label.startsWith('__:')) {
+            return __(entry.value.label.substring(3));
+        }
+        return entry.value.label;
+    }),
+    computedIsActive = computed(() => {
+        if (entry.value.isActive) return true;
+
+        if (typeof entry.value.isActiveChecker === 'function') {
+            let r = entry.value.isActiveChecker({
+                entry: entry.value
+            });
+            return !!r;
+        }
+
+        return false;
+    });
+
+watch(() => props.modelValue, (v) => {
+    entry.value = v
+}, {deep: true});
+watch(entry, (v) => {
+    emit('update:modelValue', v)
+}, {deep: true})
 </script>
 
 <template>
-<div class="lkt-menu-entry">
-    <div class="lkt-menu-entry-main">
-        <lkt-anchor v-if="entry.href !== ''" :to="entry.href">
-            <entry-content v-model="entry"/>
-        </lkt-anchor>
-        <div class="lkt-anchor" v-else>
-            <entry-content v-model="entry" @click="onClickToggle"/>
+    <div class="lkt-menu-entry" :class="classes">
+        <div class="lkt-menu-entry-main">
+            <lkt-anchor
+                :to="entry.href"
+                :on-click="onClick"
+                :is-active="computedIsActive"
+            >
+                <div class="lkt-entry-content">
+                    <div class="lkt-menu-entry-icon" v-if="canRenderIcon">
+                        <template v-if="slots['icon-'+entry.key]">
+                            <slot :name="'icon-'+entry.key"
+                                  :key="entry.key"
+                                  :entry="entry"/>
+                        </template>
+                        <template v-else-if="entry.icon !== ''">
+                            <i :class="entry.icon">icon</i>
+                        </template>
+                    </div>
+                    <div class="lkt-menu-entry-text" v-if="entry.label !== ''">
+                        {{ computedLabel }}
+                    </div>
+                </div>
+            </lkt-anchor>
+
+            <div class="lkt-menu-entry-toggle" v-if="entry.children.length > 0" @click="onClickToggle">
+                <div class="lkt-menu-entry-toggle-triangle" :class="entry.isOpened ? 'is-opened' : '' "/>
+            </div>
         </div>
-        <div class="lkt-menu-entry-toggle" v-if="entry.children.length > 0" @click="onClickToggle">
-            <div class="lkt-menu-entry-toggle-triangle" :class="entry.isOpened ? 'is-opened' : '' "/>
+        <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">
+                <template v-for="slot in entryIconSlots" v-slot:[slot]>
+                    <slot :name="slot"/>
+                </template>
+            </menu-item>
         </div>
     </div>
-    <div class="lkt-menu-entry-children" v-if="entry.isOpened">
-        <menu-item v-for="(_, i) in entry.children" v-model="entry.children[i]"/>
-    </div>
-</div>
 </template>
 
 <style scoped>

package/src/lib-components/LktMenu.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {MenuEntry} from "../classes/MenuEntry";
 import MenuItem from "../components/MenuItem.vue";
-import {ref} from "vue";
+import {computed, ref, useSlots, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+import {fetchKeys} from "../functions/helpers";
 
 const props = withDefaults(defineProps<{
     modelValue?: MenuEntry[]
@@ -9,13 +11,48 @@ const props = withDefaults(defineProps<{
     modelValue: () => []
 });
 
+const emit = defineEmits(['update:modelValue']);
+
+const slots = useSlots();
+
 const entries = ref(props.modelValue);
+
+const availableKeys = computed(() => {
+        let r:string[] = [];
+        return fetchKeys(r, entries.value);
+    }),
+    entryIconSlots = computed((): LktObject => {
+        let r = [];
+        for (let k in slots) {
+            if (k.startsWith('icon-')) {
+                if (availableKeys.value.includes(k.substring(5))) {
+                    r.push(k);
+                }
+            }
+        }
+        return r;
+    });
+
+watch(() => props.modelValue, (v) => {
+    entries.value = v;
+}, {deep: true})
+
+watch(entries, (v) => {
+    emit('update:modelValue', v);
+}, {deep: true})
 </script>
 
 <template>
-<div class="lkt-menu">
-    <menu-item v-for="(_, i) in entries" v-model="entries[i]"/>
-</div>
+    <div class="lkt-menu-container">
+        <div class="lkt-menu">
+            <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key">
+                <template v-for="slot in entryIconSlots" v-slot:[slot]>
+                    <slot :name="slot"/>
+                </template>
+            </menu-item>
+        </div>
+        <div class="lkt-menu-outside"/>
+    </div>
 </template>
 
 <style scoped>

package/theme/default.css

@@ -1,7 +1,7 @@
 :root {
     /** Font */
     --lkt-menu-font-family: system-ui, Helvetica;
-    --lkt-menu-font-size: 17px;
+    --lkt-menu-font-size: 16px;
     --lkt-menu-font-weight: 400;
     --lkt-menu-line-height: 1;
     --lkt-menu-text-align: left;
@@ -10,45 +10,25 @@
 
     /** Sizing */
     --lkt-menu-width: 100%;
-    --lkt-menu-min-width: 150px;
-    --lkt-menu-min-height: 35px;
-    --lkt-menu-padding: 7px;
-    --lkt-menu-gap: 5px;
-
-    /** Border */
-    --lkt-menu-border-radius: 5px;
-    --lkt-menu-border-width: 1px;
-    --lkt-menu-border-width-hover: 1px;
-    --lkt-menu-border-style: solid;
+    --lkt-menu-min-width: 0;
+    --lkt-menu-max-width: initial;
+    --lkt-menu-min-height: 0;
+    --lkt-menu-padding: 15px;
+    --lkt-menu-gap: 15px;
 
     /** Colors */
-    --lkt-menu-color: #ffffff;
-    --lkt-menu-bg: #007ebc;
-    --lkt-menu-border-color: #ddd;
-
-    /** Effects */
-    --lkt-menu-shadow: none;
-    --lkt-menu-transition: all linear 100ms;
-
-    /** State: hover */
-    --lkt-menu-color-hover: #ffffff;
-    --lkt-menu-bg-hover: #007ebc;
-    --lkt-menu-border-color-hover: #ddd;
-
-    /** State: Focus */
-    --lkt-menu-border-color-focus: var(--focus-color);
-    --lkt-menu-shadow-focus: 0 0 0 2px var(--focus-color);
+    --lkt-menu-bg: #ffffff;
+    --lkt-menu-color-toggle: #444444;
 
-    /** State: Disabled */
-    --lkt-menu-color-disabled: var(--disabled-contrast);
-    --lkt-menu-bg-disabled: var(--disabled-color);
-    --lkt-menu-border-color-disabled: var(--disabled-color);
+    /** Sizing: Entries */
+    --lkt-menu-padding-entry: 15px;
+    --lkt-menu-padding-text: 0 0 0 30px;
+    --lkt-menu-padding-text-with-icon: 0;
+    --lkt-menu-padding-text-without-icon: 0;
 
-    /** Internal image */
-    --lkt-button-img-max-width: 50px;
-    --lkt-button-img-max-height: 50px;
+    /** Sizing: Children */
+    --lkt-menu-padding-children: 0 0 0 10px;
 
-    /** Split Button */
-    --lkt-button-split-arrow-width: 40px;
-    --lkt-button-split-arrow-bg: transparent;
+    /** Colors: Outside */
+    --lkt-menu-bg-outside: rgba(255, 255, 255, 0.75);
 }

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

@@ -1,30 +0,0 @@
-import { MenuEntry } from "../classes/MenuEntry";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry | undefined;
-}>, {
-    modelValue: () => MenuEntry;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: MenuEntry | undefined;
-}>, {
-    modelValue: () => MenuEntry;
-}>>>, {
-    modelValue: MenuEntry;
-}, {}>;
-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];
-} & {};

package/src/components/EntryContent.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import {MenuEntry} from "../classes/MenuEntry";
-import {ref} from "vue";
-
-const props = withDefaults(defineProps<{
-    modelValue?: MenuEntry
-}>(), {
-    modelValue: () => (new MenuEntry('', '', ''))
-});
-
-const entry = ref(props.modelValue);
-</script>
-
-<template>
-    <div class="lkt-entry-content">
-        <div class="lkt-menu-entry-icon">
-            icn
-        </div>
-        <div class="lkt-menu-entry-text" v-if="entry.text !== ''">
-            {{entry.text}}
-        </div>
-    </div>
-</template>
-
-<style scoped>
-
-</style>