lkt-menu 2.0.4 → 2.0.6

package/README.md

@@ -1,250 +0,0 @@
-# LKT Button
-A simple button component for Vue.js 3.0.
-
-## Installation
-
-### With npm
-
-```bash
-npm i -S lkt-button
-```
-
-## Typical use:
-In your main.js
-```js
-  import LktButton from 'lkt-button';
-  
-  app.use(LktButton);
-```
-
-App use options:
-
-* `defaultState` string (default: undefined) => Set a default state for all buttons
-
-In your component:
-
-```html
-<lkt-button v-on:click="doSomething" v-bind:disabled="disabledChecker"></lkt-button>
-```
-```js
-export default {
-    methods: {
-      doSomething() {
-          console.log('May the force be with you');
-      },
-      disabledChecker() {
-          return false;
-      },
-      
-    }
-}
-```
-
-## Props
-
-### type
-Type: `String`<br>
-Required: `false`<br>
-Default: `button` <br>
-Options: `button`, `submit`, `reset`
-
-Determines which kind of button will be.
-```html
-<lkt-button type="submit"></lkt-button>
-```
-
-### name
-Type: `String`<br>
-Required: `false`<br>
-Default: `a random string is generated` <br>
-
-An identifier emitted on click.
-```html
-<lkt-button name="sendMessage"></lkt-button>
-```
-
-### value
-Type: `String`<br>
-Required: `false`<br>
-Default: `'`
-
-Set a value for form buttons. Emitted on click.
-```html
-<lkt-button v-bind:value="myButton"></lkt-button>
-```
-
-### palette
-Type: `String`<br>
-Required: `false`<br>
-Default: `''`
-
-Appends a palette classname. It's useful for palette control and styling.
-```html
-<lkt-button palette="calculating"></lkt-button>
-```
-
-### disabled
-Type: `Boolean`<br>
-Required: `false`<br>
-Default: `false`
-
-Determines if button is disabled or not.
-```html
-<lkt-button disabled></lkt-button>
-<lkt-button v-bind:disabled="disabledChecker"></lkt-button>
-```
-
-
-### Events
-
-* LktButton emits these events:
-
-  - `click`
-
-HTML:
-```HTML
-<lkt-button v-on:click="doSomething"></lkt-button>
-```
-
-### Slots
-
-#### default slot
-This slot allows you to fill the button with whatever you want.
-
-```html
-<lkt-button name="testButton" v-on:click="doSomething">
-  Click, me!
-</lkt-button>
-```
-
-#### prev/next slot
-These slots are designed to add something before/after the text, like an icon.
-
-```html
-<lkt-button name="testButton" v-on:click="doSomething">
-  Click, me!
-  <template v-slot:prev>
-    <i class="font-icon"></i>
-  </template>
-  <template v-slot:next>
-    <i class="font-icon2"></i>
-  </template>
-</lkt-button>
-```
-
-#### prev-loading/next-loading slot
-Same as prev/next but only appears if button is loading
-
-```html
-<lkt-button name="testButton" v-on:click="doSomething">
-  Click, me!
-  <template v-slot:prev-loading>
-    <i class="font-icon"></i>
-  </template>
-  <template v-slot:next-loading>
-    <i class="font-icon2"></i>
-  </template>
-</lkt-button>
-```
-
-## Styling
-
-### Style configuration
-
-If you want to modify the default style without having to override styles in CSS, you can use the configurator like this:
-
-```scss
-@use "node_modules/lkt-button/lkt-button";
-
-@include lkt-button.configure((border-width: 2px)); //opts list
-```
-
-#### Available style options
-| Option        | Default value                         |
-|---------------|---------------------------------------|
-| border-width  | 1px                                   |
-| border-style  | solid                                 |
-| border-color  | #ddd                                  |
-| color         | #333                                  |
-| background    | transparent                           |
-| height        | 35px                                  |
-| min-width     | 150px                                 |
-| padding       | 7px                                   |
-| slot-gap      | 5px                                   |
-| font-weight   | 300                                   |
-| line-height   | 1                                     |
-| text-align    | center                                |
-| cursor        | default                               |
-| box-shadow    | none                                  |
-| border-radius | lkt-theme.$primary-border-radius      |
-| transition    | lkt-theme.$primary-transition         |
-| font-size     | lkt-theme.$primary-button-font-size   |
-| font-family   | lkt-theme.$primary-button-font-family |
-
-### Style generation
-
-The following example will show you how to generate styles.
-
-```scss
-@use "node_modules/lkt-button/lkt-button";
-
-@include lkt-button.generate();
-```
-
-#### Theme modifiers
-
-If ```lkt-theme``` is configured, the ```generate``` mixin also will generate some colored styles if colors were configured in ```lkt-theme```.
-
-These modifiers will be the way:
-
-lkt-button--<color>
-lkt-button--<color>-dark
-lkt-button--<color>-darker
-lkt-button--<color>-light
-lkt-button--<color>-lighter
-
-For example, if you already set up info color and info color dark, it will generate the following modifiers:
-
-lkt-button--info
-lkt-button--info-dark
-
-All ```lkt-theme``` colors can generate a modifier but disabled (which generates styles if button is disabled) and focus (which is not intended for this component).
-
-Some example could be:
-
-lkt-button--info
-lkt-button--info-dark
-lkt-button--info-darker
-lkt-button--info-light
-lkt-button--info-lighter
-
-lkt-button--success
-lkt-button--success-dark
-lkt-button--success-darker
-lkt-button--success-light
-lkt-button--success-lighter
-
-lkt-button--warning
-lkt-button--warning-dark
-lkt-button--warning-darker
-lkt-button--warning-light
-lkt-button--warning-lighter
-
-#### Using CSS Selectors in HTML
-```html
-<lkt-button class="lkt-button--info">More info</lkt-button>
-
-<lkt-button class="lkt-button--success-light">Confirm action</lkt-button>
-```
-
-#### The ```palette``` prop
-You can apply ```lkt-theme``` modifiers with the palette prop this way:
-
-
-```html
-<lkt-button palette="info">More info</lkt-button>
-
-<!-- Is the same as: -->
-
-<lkt-button class="lkt-button--info">More info</lkt-button>
-```

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,15 +1,15 @@
-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 a, normalizeClass as $, createElementVNode as b, 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((s) => {
-  s.key && !r.includes(s.key) && r.push(s.key), s.children && s.children.length > 0 && W(r, s.children);
+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 O = T;
-const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }, se = {
+const ue = { class: "lkt-menu-entry-main" }, se = { class: "lkt-entry-content" }, ae = {
   key: 0,
   class: "lkt-menu-entry-icon"
 }, re = {
@@ -26,16 +26,14 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
   emits: [
     "update:modelValue"
   ],
-  setup(r, { emit: _ }) {
-    const s = _, 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;
-      return typeof e.value.children < "u" && ((t = e.value.children) == null ? void 0 : t.length) > 0 && A(), typeof ((o = e.value.events) == null ? void 0 : o.click) == "function" ? (e.value.events.click({
+      return typeof e.value.children < "u" && ((t = e.value.children) == null ? void 0 : t.length) > 0 && !e.value.keepOpenOnChildClick && A(), 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);
+      }), 1;
     }, D = p(() => i["icon-" + e.value.key] || e.value.icon !== ""), w = p(() => {
       let t = [];
       return D.value && t.push("has-icon"), y.value && t.push("is-active"), e.value.type && t.push(`is-${e.value.type}`), t.join(" ");
@@ -53,98 +51,98 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
     return R(() => v.modelValue, (t) => {
       e.value = t;
     }, { deep: !0 }), R(e, (t) => {
-      s("update:modelValue", 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);
-      return a(), d("div", {
-        class: $(["lkt-menu-entry", w.value])
+      const E = K("lkt-button"), S = K("lkt-anchor"), I = K("menu-item", !0);
+      return s(), d("div", {
+        class: b(["lkt-menu-entry", w.value])
       }, [
-        b("div", ue, [
-          e.value.type === k(z).Button ? (a(), 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 ? (a(), g(C, q(L({ key: 1 }, e.value.anchor)), null, 16)) : (a(), 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 }) => [
-              b("div", ae, [
-                D.value ? (a(), d("div", se, [
-                  k(i)["icon-" + e.value.key] ? h(t.$slots, "icon-" + e.value.key, {
+            text: h(({ text: k }) => [
+              V("div", se, [
+                D.value ? (s(), d("div", ae, [
+                  m(i)["icon-" + e.value.key] ? f(t.$slots, "icon-" + e.value.key, {
                     key: e.value.key,
                     entry: e.value
-                  }) : e.value.icon !== "" ? (a(), d("i", {
+                  }) : e.value.icon !== "" ? (s(), d("i", {
                     key: 1,
-                    class: $(e.value.icon)
-                  }, null, 2)) : S("", !0)
-                ])) : S("", !0),
-                m !== "" ? (a(), 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 ? (a(), 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 ? (a(), g(Z(c.value), {
+            u.value ? (s(), _(Z(c.value), {
               key: 0,
-              class: $(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
-            }, null, 8, ["class"])) : (a(), d("div", {
+              class: b(["lkt-menu-entry-toggle-inner", e.value.isOpened ? "is-opened" : ""])
+            }, null, 8, ["class"])) : (s(), d("div", {
               key: 1,
-              class: $(["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] = [
-              b("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 ? (a(), d("div", ie, [
-          (a(!0), d(Q, null, j(e.value.children, (m, J) => (a(), g(I, {
+        e.value.isOpened ? (s(), d("div", ie, [
+          (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: {},
@@ -158,9 +156,9 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
     "response",
     "error"
   ],
-  setup(r, { emit: _ }) {
+  setup(r, { emit: $ }) {
     var M;
-    const s = r, v = _, e = H(), i = F(s.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)
@@ -168,7 +166,7 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
       return n;
     };
     let y = new ne({});
-    y.increment(V(((M = s.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)
@@ -176,9 +174,9 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
       return l;
     }), D = () => {
       var n, u;
-      if (!((n = s.http) != null && n.resource)) return;
+      if (!((n = a.http) != null && n.resource)) return;
       let l = y.getData();
-      v("loading"), oe((u = s.http) == null ? void 0 : u.resource, l).then((c) => {
+      v("loading"), oe((u = a.http) == null ? void 0 : u.resource, l).then((c) => {
         y.turnStoredIntoOriginal(), i.value = c.data, v("results", c.data), v("response", c);
       }).catch((c) => {
         v("error", c);
@@ -186,52 +184,55 @@ const ue = { class: "lkt-menu-entry-main" }, ae = { class: "lkt-entry-content" }
     }, w = () => {
       v("click-outside");
     };
-    return R(() => s.modelValue, (l) => {
+    return R(() => a.modelValue, (l) => {
       i.value = l;
     }, { deep: !0 }), R(i, (l) => {
       v("update:modelValue", l);
-    }, { deep: !0 }), D(), (l, n) => (a(), d("div", de, [
-      b("div", ve, [
-        (a(!0), d(Q, null, j(i.value, (u, c) => (a(), g(ce, {
-          modelValue: i.value[c],
-          "onUpdate:modelValue": (t) => i.value[c] = t,
-          key: u.key,
-          class: $(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))
+    }, { deep: !0 }), D(), (l, n) => (s(), d("div", de, [
+      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))
+        ])
       ]),
-      b("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) => (O.toggleSlot = r, !0);
+}, Ve = (r) => (O.toggleSlot = r, !0);
 export {
-  ge as default,
-  _e as setMenuToggleSlot
+  _e as default,
+  Ve as setMenuToggleSlot
 };