lkt-menu 1.4.1 → 2.0.0

package/dist/build.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%;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)}
+.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--entry--gap)}.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--toggle--color) 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--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--bg);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,59 +1,5 @@
-import { MenuEntry as be } from "lkt-vue-kernel";
-declare function Ve(u: any, m: any, o: any): {
-    key?: string | undefined;
-    href?: string | undefined;
-    label?: string | undefined;
-    icon?: string | undefined;
-    isActiveChecker?: Function | undefined;
-    isOpened?: boolean | undefined;
-    isActive?: boolean | undefined;
-    parent?: {
-        key?: string | undefined;
-        href?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        isActiveChecker?: Function | undefined;
-        isOpened?: boolean | undefined;
-        isActive?: boolean | undefined;
-        parent?: /*elided*/ any | undefined;
-        children?: /*elided*/ any[] | undefined;
-        events?: {
-            click?: Function | undefined;
-        } | undefined;
-        onClick?: Function | undefined;
-    } | undefined;
-    children?: {
-        key?: string | undefined;
-        href?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        isActiveChecker?: Function | undefined;
-        isOpened?: boolean | undefined;
-        isActive?: boolean | undefined;
-        parent?: /*elided*/ any | undefined;
-        children?: /*elided*/ any[] | undefined;
-        events?: {
-            click?: Function | undefined;
-        } | undefined;
-        onClick?: Function | undefined;
-    }[] | undefined;
-    events?: {
-        click?: Function | undefined;
-    } | undefined;
-    onClick?: Function | undefined;
-    setChildren: (children: z[]) => z;
-    setOnClick: (fn: Function) => z;
-    setIsActiveChecker: (fn: Function) => z;
-    setIsActive: (enabled?: boolean) => z;
-    setLabel: (str: string) => z;
-    setIcon: (str: string) => z;
-    doClose: () => void;
-    feed: (data?: import("lkt-vue-kernel").LktObject, target?: z | undefined) => void;
-    assignProp: (key: string, value: any) => void;
-};
-declare namespace _e {
-    function install(u: any): void;
+declare namespace ge {
+    function install(r: any): void;
 }
-declare function Ce(u: any): boolean;
-import { MenuEntry as z } from "lkt-vue-kernel";
-export { be as MenuEntry, Ve as createMenuEntry, _e as default, Ce as setMenuToggleSlot };
+declare function _e(r: any): boolean;
+export { ge as default, _e as setMenuToggleSlot };

package/dist/build.js

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