lkt-menu 2.0.5 → 2.0.6

package/dist/build.css

@@ -1 +1 @@
-.lkt-menu{background:var(--lkt-menu--background);padding:var(--lkt-menu--padding);max-width:var(--lkt-menu--max-width);width:var(--lkt-menu--width);height:100%;display:var(--lkt-menu--display);flex-direction:var(--lkt-menu--flex-direction);align-items:var(--lkt-menu--align-items);gap:var(--lkt-menu--entry--gap)}.lkt-menu-entry-toggle-inner{transition:all linear .2s}.lkt-menu-entry-toggle-inner.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--entry--padding)}.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--outside--background);z-index:-1}.lkt-menu-entry-children{padding:var(--lkt-menu--children--padding)}.lkt-menu-entry-text{padding:var(--lkt-menu--text-without-icon--padding)}.lkt-menu.has-icon .lkt-menu-entry-text{padding:var(--lkt-menu--text--padding)}.lkt-menu.has-icon .lkt-menu-entry-icon+.lkt-menu-entry-text{padding:var(--lkt-menu--text-with-icon--padding)}
+.lkt-menu-main{background:var(--lkt-menu--background);padding:var(--lkt-menu--padding);max-width:var(--lkt-menu--max-width);width:var(--lkt-menu--width);height:100%;display:var(--lkt-menu--display);flex-direction:var(--lkt-menu--flex-direction);align-items:var(--lkt-menu--align-items);gap:var(--lkt-menu--entry--gap)}.lkt-menu-entry-toggle-inner{transition:all linear .2s}.lkt-menu-entry-toggle-inner.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--entry--padding)}.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:absolute;top:0;right:0;left:0;bottom:0;background:var(--lkt-menu--outside--background);z-index:-1}.lkt-menu-entry-children{padding:var(--lkt-menu--children--padding)}.lkt-menu-entry-text{padding:var(--lkt-menu--text-without-icon--padding)}.lkt-menu.has-icon .lkt-menu-entry-text{padding:var(--lkt-menu--text--padding)}.lkt-menu.has-icon .lkt-menu-entry-icon+.lkt-menu-entry-text{padding:var(--lkt-menu--text-with-icon--padding)}

package/dist/build.d.ts

@@ -1,5 +1,5 @@
-declare namespace ge {
+declare namespace _e {
     function install(r: any): void;
 }
-declare function _e(r: any): boolean;
-export { ge as default, _e as setMenuToggleSlot };
+declare function Ve(r: any): boolean;
+export { _e as default, Ve as setMenuToggleSlot };

package/dist/build.js

@@ -1,14 +1,14 @@
-import { defineComponent as G, ref as F, useSlots as H, computed as p, watch as R, onMounted as X, resolveComponent as K, createElementBlock as d, openBlock as s, normalizeClass as O, createElementVNode as $, createCommentVNode as S, createBlock as g, unref as k, normalizeProps as q, mergeProps as L, createSlots as P, withCtx as f, renderSlot as h, toDisplayString as Y, resolveDynamicComponent as Z, Fragment as Q, renderList as j, mergeDefaults as x } from "vue";
+import { defineComponent as G, ref as F, useSlots as H, computed as p, watch as R, onMounted as X, resolveComponent as K, createElementBlock as d, openBlock as s, normalizeClass as b, createElementVNode as V, createCommentVNode as g, createBlock as _, unref as m, normalizeProps as q, mergeProps as L, createSlots as P, withCtx as h, renderSlot as f, toDisplayString as Y, resolveDynamicComponent as Z, Fragment as Q, renderList as j, mergeDefaults as x } from "vue";
 import { MenuEntryType as z, getDefaultValues as ee, Menu as te } from "lkt-vue-kernel";
 import { useRouter as le } from "vue-router";
 import { DataState as ne } from "lkt-data-state";
 import { httpCall as oe } from "lkt-http-client";
-const W = (r, _) => (_.forEach((a) => {
+const W = (r, $) => ($.forEach((a) => {
   a.key && !r.includes(a.key) && r.push(a.key), a.children && a.children.length > 0 && W(r, a.children);
 }), r), T = class T {
 };
 T.toggleSlot = "", T.debugEnabled = !1;
-let b = T;
+let O = T;
 const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }, ae = {
   key: 0,
   class: "lkt-menu-entry-icon"
@@ -26,8 +26,8 @@ const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }
   emits: [
     "update:modelValue"
   ],
-  setup(r, { emit: _ }) {
-    const a = _, v = r, e = F(v.modelValue), i = H(), V = le(), y = F(!1), A = () => {
+  setup(r, { emit: $ }) {
+    const a = $, v = r, e = F(v.modelValue), i = H(), C = le(), y = F(!1), A = () => {
       e.value.isOpened = !e.value.isOpened;
     }, U = () => {
       var t, o;
@@ -47,102 +47,102 @@ const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }
       return t;
     }), n = p(() => e.value.isActive ? !0 : typeof e.value.isActiveChecker == "function" ? !!e.value.isActiveChecker({
       entry: e.value
-    }) : !1), u = p(() => !!b.toggleSlot), c = p(() => b.toggleSlot);
+    }) : !1), u = p(() => !!O.toggleSlot), c = p(() => O.toggleSlot);
     return R(() => v.modelValue, (t) => {
       e.value = t;
     }, { deep: !0 }), R(e, (t) => {
       a("update:modelValue", t);
     }, { deep: !0 }), X(() => {
-      var o, E, C;
-      let t = V == null ? void 0 : V.currentRoute;
+      var o, E, S;
+      let t = C == null ? void 0 : C.currentRoute;
       if (t) {
         if (t.value.path === ((o = e.value.anchor) == null ? void 0 : o.to))
           e.value.isOpened = !0;
         else if (typeof e.value.children < "u" && ((E = e.value.children) == null ? void 0 : E.length) > 0) {
           let I = !1;
-          (C = e.value.children) == null || C.forEach((B) => {
-            var m;
-            t.value.path === ((m = B.anchor) == null ? void 0 : m.to) && (I = !0);
+          (S = e.value.children) == null || S.forEach((B) => {
+            var k;
+            t.value.path === ((k = B.anchor) == null ? void 0 : k.to) && (I = !0);
           }), I && (e.value.isOpened = !0);
         }
       }
     }), (t, o) => {
       var B;
-      const E = K("lkt-button"), C = K("lkt-anchor"), I = K("menu-item", !0);
+      const E = K("lkt-button"), S = K("lkt-anchor"), I = K("menu-item", !0);
       return s(), d("div", {
-        class: O(["lkt-menu-entry", w.value])
+        class: b(["lkt-menu-entry", w.value])
       }, [
-        $("div", ue, [
-          e.value.type === k(z).Button ? (s(), g(E, q(L({ key: 0 }, e.value.button)), P({ _: 2 }, [
-            k(i).tooltip ? {
+        V("div", ue, [
+          e.value.type === m(z).Button ? (s(), _(E, q(L({ key: 0 }, e.value.button)), P({ _: 2 }, [
+            m(i).tooltip ? {
               name: "tooltip",
-              fn: f(() => [
-                h(t.$slots, "tooltip")
+              fn: h(() => [
+                f(t.$slots, "tooltip")
               ]),
               key: "0"
             } : void 0,
-            k(i).split ? {
+            m(i).split ? {
               name: "split",
-              fn: f(() => [
-                h(t.$slots, "split")
+              fn: h(() => [
+                f(t.$slots, "split")
               ]),
               key: "1"
             } : void 0
-          ]), 1040)) : e.value.type === k(z).Anchor ? (s(), g(C, q(L({ key: 1 }, e.value.anchor)), null, 16)) : (s(), g(C, L({ key: 2 }, e.value.anchor, {
+          ]), 1040)) : e.value.type === m(z).Anchor ? (s(), _(S, q(L({ key: 1 }, e.value.anchor)), null, 16)) : (s(), _(S, L({ key: 2 }, e.value.anchor, {
             "on-click": U,
             "is-active": n.value,
-            onActive: o[0] || (o[0] = (m) => y.value = m)
+            onActive: o[0] || (o[0] = (k) => y.value = k)
           }), {
-            text: f(({ text: m }) => [
-              $("div", se, [
+            text: h(({ text: k }) => [
+              V("div", se, [
                 D.value ? (s(), d("div", ae, [
-                  k(i)["icon-" + e.value.key] ? h(t.$slots, "icon-" + e.value.key, {
+                  m(i)["icon-" + e.value.key] ? f(t.$slots, "icon-" + e.value.key, {
                     key: e.value.key,
                     entry: e.value
                   }) : e.value.icon !== "" ? (s(), d("i", {
                     key: 1,
-                    class: O(e.value.icon)
-                  }, null, 2)) : S("", !0)
-                ])) : S("", !0),
-                m !== "" ? (s(), d("div", re, Y(m), 1)) : S("", !0)
+                    class: b(e.value.icon)
+                  }, null, 2)) : g("", !0)
+                ])) : g("", !0),
+                k !== "" ? (s(), d("div", re, Y(k), 1)) : g("", !0)
               ])
             ]),
             _: 3
           }, 16, ["is-active"])),
-          e.value.type !== k(z).Button && e.value.children && ((B = e.value.children) == null ? void 0 : B.length) > 0 ? (s(), d("div", {
+          e.value.type !== m(z).Button && e.value.children && ((B = e.value.children) == null ? void 0 : B.length) > 0 ? (s(), d("div", {
             key: 3,
             class: "lkt-menu-entry-toggle",
             onClick: A
           }, [
-            u.value ? (s(), g(Z(c.value), {
+            u.value ? (s(), _(Z(c.value), {
               key: 0,
-              class: O(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
+              class: b(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
             }, null, 8, ["class"])) : (s(), d("div", {
               key: 1,
-              class: O(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
+              class: b(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
             }, o[1] || (o[1] = [
-              $("i", { class: "lkt-icn-angle-bottom" }, null, -1)
+              V("i", { class: "lkt-icn-angle-bottom" }, null, -1)
             ]), 2))
-          ])) : S("", !0)
+          ])) : g("", !0)
         ]),
         e.value.isOpened ? (s(), d("div", ie, [
-          (s(!0), d(Q, null, j(e.value.children, (m, J) => (s(), g(I, {
+          (s(!0), d(Q, null, j(e.value.children, (k, J) => (s(), _(I, {
             modelValue: e.value.children[J],
             "onUpdate:modelValue": (N) => e.value.children[J] = N,
             key: e.value.children[J].key
           }, P({ _: 2 }, [
             j(l.value, (N) => ({
               name: N,
-              fn: f(() => [
-                h(t.$slots, N)
+              fn: h(() => [
+                f(t.$slots, N)
               ])
             }))
           ]), 1032, ["modelValue", "onUpdate:modelValue"]))), 128))
-        ])) : S("", !0)
+        ])) : g("", !0)
       ], 2);
     };
   }
-}), de = { class: "lkt-menu-container" }, ve = { class: "lkt-menu" }, pe = /* @__PURE__ */ G({
+}), de = { class: "lkt-menu" }, ve = { class: "lkt-menu-main" }, pe = { class: "lkt-menu-entries" }, me = /* @__PURE__ */ G({
   __name: "LktMenu",
   props: /* @__PURE__ */ x({
     modelValue: {},
@@ -156,9 +156,9 @@ const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }
     "response",
     "error"
   ],
-  setup(r, { emit: _ }) {
+  setup(r, { emit: $ }) {
     var M;
-    const a = r, v = _, e = H(), i = F(a.modelValue), V = (l) => {
+    const a = r, v = $, e = H(), i = F(a.modelValue), C = (l) => {
       let n = {};
       typeof l == "object" && Object.keys(l).length > 0 && (n = JSON.parse(JSON.stringify(l)));
       for (let u in n)
@@ -166,7 +166,7 @@ const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }
       return n;
     };
     let y = new ne({});
-    y.increment(V(((M = a.http) == null ? void 0 : M.data) ?? {}));
+    y.increment(C(((M = a.http) == null ? void 0 : M.data) ?? {}));
     const A = p(() => W([], i.value)), U = p(() => {
       let l = [];
       for (let n in e)
@@ -189,47 +189,50 @@ const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }
     }, { deep: !0 }), R(i, (l) => {
       v("update:modelValue", l);
     }, { deep: !0 }), D(), (l, n) => (s(), d("div", de, [
-      $("div", ve, [
-        (s(!0), d(Q, null, j(i.value, (u, c) => (s(), g(ce, {
-          modelValue: i.value[c],
-          "onUpdate:modelValue": (t) => i.value[c] = t,
-          key: u.key,
-          class: O(u.class)
-        }, P({ _: 2 }, [
-          j(U.value, (t) => ({
-            name: t,
-            fn: f(() => [
-              h(l.$slots, t)
-            ])
-          })),
-          k(e)[`tooltip-${u.key}`] ? {
-            name: "tooltip",
-            fn: f(() => [
-              h(l.$slots, `tooltip-${u.key}`)
-            ]),
-            key: "0"
-          } : void 0,
-          k(e)[`split-${u.key}`] ? {
-            name: "split",
-            fn: f(() => [
-              h(l.$slots, `split-${u.key}`)
-            ]),
-            key: "1"
-          } : void 0
-        ]), 1032, ["modelValue", "onUpdate:modelValue", "class"]))), 128))
+      V("div", ve, [
+        m(e).before ? f(l.$slots, "before", { key: 0 }) : g("", !0),
+        V("div", pe, [
+          (s(!0), d(Q, null, j(i.value, (u, c) => (s(), _(ce, {
+            modelValue: i.value[c],
+            "onUpdate:modelValue": (t) => i.value[c] = t,
+            key: u.key,
+            class: b(u.class)
+          }, P({ _: 2 }, [
+            j(U.value, (t) => ({
+              name: t,
+              fn: h(() => [
+                f(l.$slots, t)
+              ])
+            })),
+            m(e)[`tooltip-${u.key}`] ? {
+              name: "tooltip",
+              fn: h(() => [
+                f(l.$slots, `tooltip-${u.key}`)
+              ]),
+              key: "0"
+            } : void 0,
+            m(e)[`split-${u.key}`] ? {
+              name: "split",
+              fn: h(() => [
+                f(l.$slots, `split-${u.key}`)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["modelValue", "onUpdate:modelValue", "class"]))), 128))
+        ])
       ]),
-      $("div", {
+      V("div", {
         class: "lkt-menu-outside",
         onClick: w
       })
     ]));
   }
-}), ge = {
+}), _e = {
   install: (r) => {
-    r.component("lkt-menu") === void 0 && r.component("lkt-menu", pe);
+    r.component("lkt-menu") === void 0 && r.component("lkt-menu", me);
   }
-}, _e = (r) => (b.toggleSlot = r, !0);
+}, Ve = (r) => (O.toggleSlot = r, !0);
 export {
-  ge as default,
-  _e as setMenuToggleSlot
+  _e as default,
+  Ve as setMenuToggleSlot
 };

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

@@ -2363,13 +2363,15 @@ declare const entries: import("vue").Ref<{
 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: {}, __VLS_9: `tooltip-${string}`, __VLS_10: {}, __VLS_13: `split-${string}`, __VLS_14: {};
+declare var __VLS_1: {}, __VLS_7: any, __VLS_8: {}, __VLS_11: `tooltip-${string}`, __VLS_12: {}, __VLS_15: `split-${string}`, __VLS_16: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_5>]?: (props: typeof __VLS_6) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 } & {
-    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
 } & {
-    [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any;
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+} & {
+    before?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MenuConfig, {
     MenuItem: typeof MenuItem;

package/package.json

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

package/src/lib-components/LktMenu.vue

@@ -85,21 +85,26 @@
 </script>
 
 <template>
-    <div class="lkt-menu-container">
-        <div class="lkt-menu">
-            <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key" :class="entry.class">
-                <template v-for="slot in entryIconSlots" v-slot:[slot]>
-                    <slot :name="slot" />
-                </template>
-
-                <template v-if="slots[`tooltip-${entry.key}`]" #tooltip>
-                    <slot :name="`tooltip-${entry.key}`"/>
-                </template>
-
-                <template v-if="slots[`split-${entry.key}`]" #split>
-                    <slot :name="`split-${entry.key}`"/>
-                </template>
-            </menu-item>
+    <div class="lkt-menu">
+        <div class="lkt-menu-main">
+            <template v-if="slots.before">
+                <slot name="before"/>
+            </template>
+            <div class="lkt-menu-entries">
+                <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key" :class="entry.class">
+                    <template v-for="slot in entryIconSlots" v-slot:[slot]>
+                        <slot :name="slot" />
+                    </template>
+
+                    <template v-if="slots[`tooltip-${entry.key}`]" #tooltip>
+                        <slot :name="`tooltip-${entry.key}`"/>
+                    </template>
+
+                    <template v-if="slots[`split-${entry.key}`]" #split>
+                        <slot :name="`split-${entry.key}`"/>
+                    </template>
+                </menu-item>
+            </div>
         </div>
         <div class="lkt-menu-outside" v-on:click="onClickOutside" />
     </div>