lkt-menu 1.0.9 → 1.0.10

package/dist/build.d.ts

@@ -1,5 +1,5 @@
 declare class x {
-    constructor(t: any, s: any, d: any);
+    constructor(t: any, n: any, i: any);
     key: any;
     href: any;
     label: any;
@@ -17,7 +17,7 @@ declare class x {
     setIcon(t: any): this;
     doClose(): void;
 }
-declare function he(n: any, t: any, s: any): {
+declare function ke(o: any, t: any, n: any): {
     key: any;
     href: any;
     label: any;
@@ -35,8 +35,8 @@ declare function he(n: any, t: any, s: any): {
     setIcon: (t: any) => x;
     doClose: () => void;
 };
-declare namespace ve {
-    function install(n: any): void;
+declare namespace fe {
+    function install(o: any): void;
 }
-declare function me(n: any): boolean;
-export { x as MenuEntry, he as createMenuEntry, ve as default, me as setMenuToggleSlot };
+declare function ye(o: any): boolean;
+export { x as MenuEntry, ke as createMenuEntry, fe as default, ye as setMenuToggleSlot };

package/dist/build.js

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

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

@@ -1,20 +1,39 @@
 import { MenuEntry } from "../classes/MenuEntry";
+import { LktObject } from "lkt-ts-interfaces";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: MenuEntry[] | undefined;
+    resource?: string | undefined;
+    resourceData: LktObject;
 }>, {
     modelValue: () => never[];
+    resource: string;
+    resourceData: () => {};
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
+    loading: (...args: any[]) => void;
+    results: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     "click-outside": (...args: any[]) => void;
+    response: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: MenuEntry[] | undefined;
+    resource?: string | undefined;
+    resourceData: LktObject;
 }>, {
     modelValue: () => never[];
+    resource: string;
+    resourceData: () => {};
 }>>> & {
+    onError?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onLoading?: ((...args: any[]) => any) | undefined;
+    onResults?: ((...args: any[]) => any) | undefined;
     "onClick-outside"?: ((...args: any[]) => any) | undefined;
+    onResponse?: ((...args: any[]) => any) | undefined;
 }, {
+    resource: string;
     modelValue: MenuEntry[];
+    resourceData: LktObject;
 }, {}>, Partial<Record<any, (_: {}) => any>>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "",
   "keywords": [
     "lkt",
@@ -51,8 +51,9 @@
   "dependencies": {
     "lkt-anchor": "^1.1.4",
     "lkt-control-tools": "^1.0.3",
+    "lkt-data-state": "^1.0.10",
     "lkt-events": "^1.0.2",
-    "lkt-http-client": "^1.0.21",
+    "lkt-http-client": "^1.0.31",
     "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.1",
     "lkt-modal-confirm": "^1.0.0",

package/src/components/MenuItem.vue

@@ -15,13 +15,10 @@ const props = withDefaults(defineProps<{
     modelValue: () => (new MenuEntry('', '', ''))
 });
 
-const entry = ref(props.modelValue);
-
-const slots = useSlots();
-
-const router = useRouter();
-
-const isActive = ref(false);
+const entry = ref(props.modelValue),
+    slots = useSlots(),
+    router = useRouter(),
+    isActive = ref(false);
 
 const onClickToggle = () => {
         entry.value.isOpened = !entry.value.isOpened;

package/src/lib-components/LktMenu.vue

@@ -4,19 +4,40 @@ import MenuItem from "../components/MenuItem.vue";
 import {computed, ref, useSlots, watch} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
 import {fetchKeys} from "../functions/helpers";
+import {DataState} from "lkt-data-state";
+import {httpCall, HTTPResponse} from "lkt-http-client";
 
 const props = withDefaults(defineProps<{
     modelValue?: MenuEntry[],
+    resource?: string
+    resourceData: LktObject,
 }>(), {
     modelValue: () => [],
+    resource: '',
+    resourceData: () => ({}),
 });
 
-const emit = defineEmits(['update:modelValue', 'click-outside']);
+const emit = defineEmits(['update:modelValue', 'click-outside', 'loading', 'results', 'response', 'error']);
 
 const slots = useSlots();
 
 const entries = ref(props.modelValue);
 
+const parseFilters = (filters: LktObject) => {
+    let d: LktObject = {};
+    if (typeof filters === 'object' && Object.keys(filters).length > 0) {
+        d = JSON.parse(JSON.stringify(filters));
+    }
+    for (let k in d) {
+        if (Array.isArray(d[k]) || typeof d[k] === 'object') {
+            d[k] = JSON.stringify(d[k]);
+        }
+    }
+    return d;
+}
+let resourceDataState = new DataState({});
+resourceDataState.increment(parseFilters(props.resourceData))
+
 const availableKeys = computed(() => {
         let r:string[] = [];
         return fetchKeys(r, entries.value);
@@ -31,7 +52,24 @@ const availableKeys = computed(() => {
             }
         }
         return r;
-    });
+    }),
+    loadResource = () => {
+        if (!props.resource) return;
+
+        let d = resourceDataState.getData();
+        emit('loading');
+
+        httpCall(props.resource, d).then((r: HTTPResponse) => {
+            resourceDataState.turnStoredIntoOriginal();
+            //@ts-ignore
+            entries.value = r.data;
+            emit('results', r.data);
+            emit('response', r);
+
+        }).catch((r: any) => {
+            emit('error', r);
+        });
+    };
 
 const onClickOutside = () => {
     emit('click-outside');
@@ -44,6 +82,8 @@ watch(() => props.modelValue, (v) => {
 watch(entries, (v) => {
     emit('update:modelValue', v);
 }, {deep: true})
+
+loadResource();
 </script>
 
 <template>