lkt-menu 1.0.0

package/README.md

@@ -0,0 +1,250 @@
+# 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.d.ts

@@ -0,0 +1,21 @@
+declare function j(n: any, o: any, e: any): {
+    key: any;
+    href: any;
+    text: any;
+    isOpened: boolean;
+    children: any[];
+    setChildren: (o: any) => h;
+};
+declare namespace b {
+    function install(n: any): void;
+}
+declare class h {
+    constructor(o: any, e: any, s: any);
+    key: any;
+    href: any;
+    text: any;
+    isOpened: boolean;
+    children: any[];
+    setChildren(o: any): this;
+}
+export { j as createMenuEntry, b as default };

package/dist/build.js

@@ -0,0 +1,103 @@
+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;
+  }
+  setChildren(o) {
+    return this.children = o, this;
+  }
+}
+const O = { class: "lkt-entry-content" }, w = /* @__PURE__ */ i("div", { class: "lkt-menu-entry-icon" }, " icn ", -1), B = {
+  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 = {
+  key: 1,
+  class: "lkt-anchor"
+}, D = {
+  key: 0,
+  class: "lkt-menu-entry-children"
+}, F = /* @__PURE__ */ p({
+  __name: "MenuItem",
+  props: {
+    modelValue: { default: () => new h("", "", "") }
+  },
+  setup(n) {
+    const e = _(n.modelValue), s = () => {
+      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
+          }, {
+            default: $(() => [
+              y(f, {
+                modelValue: e.value,
+                "onUpdate:modelValue": u[0] || (u[0] = (r) => e.value = r)
+              }, null, 8, ["modelValue"])
+            ]),
+            _: 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,
+            class: "lkt-menu-entry-toggle",
+            onClick: s
+          }, [
+            i("div", {
+              class: E(["lkt-menu-entry-toggle-triangle", e.value.isOpened ? "is-opened" : ""])
+            }, null, 2)
+          ])) : d("", !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)
+      ]);
+    };
+  }
+}), I = { class: "lkt-menu" }, S = /* @__PURE__ */ p({
+  __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))
+    ]));
+  }
+}), b = {
+  install: (n) => {
+    n.component("lkt-menu") === void 0 && n.component("lkt-menu", S);
+  }
+}, j = (n, o, e) => M(new h(n, o, e));
+export {
+  j as createMenuEntry,
+  b as default
+};

package/dist/classes/MenuEntry.d.ts

@@ -0,0 +1,9 @@
+export declare class MenuEntry {
+    key: string;
+    href: string;
+    text: string;
+    isOpened: boolean;
+    children: MenuEntry[];
+    constructor(key: string, href: string, text: string);
+    setChildren(children: MenuEntry[]): this;
+}

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

@@ -0,0 +1,30 @@
+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/dist/components/MenuItem.vue.d.ts

@@ -0,0 +1,30 @@
+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/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vue';
+import "../style.css";
+import { MenuEntry } from "./classes/MenuEntry";
+declare const LktMenu: Plugin;
+export default LktMenu;
+export declare const createMenuEntry: (key: string, href: string, label: string) => MenuEntry;

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

@@ -0,0 +1,30 @@
+import { MenuEntry } from "../classes/MenuEntry";
+declare const _default: 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<{
+    modelValue?: MenuEntry[] | undefined;
+}>, {
+    modelValue: () => never[];
+}>>>, {
+    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/dist/settings/Settings.d.ts

@@ -0,0 +1,4 @@
+export declare class Settings {
+    static toggleSlot: string;
+    static debugEnabled: boolean;
+}

package/dist/style.css

@@ -0,0 +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}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "lkt-menu",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "lkt",
+    "lkt-web-tech",
+    "ts",
+    "typescript",
+    "vue",
+    "vue3",
+    "js",
+    "javascript"
+  ],
+  "type": "module",
+  "module": "./dist/build.js",
+  "exports": {
+    ".": {
+      "import": "./dist/build.js"
+    },
+    "./styles": "./dist/style.css",
+    "./theme": "./theme/default.css",
+    "./theme/default": "./theme/default.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/*",
+    "src/**/*.vue",
+    "theme/**/*.css"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
+  },
+  "author": "Antonio Ibáñez",
+  "devDependencies": {
+    "@babel/types": "^7.23.6",
+    "@types/node": "^20.11.19",
+    "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "rollup": "^4.9.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.27"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "lkt-anchor": "^1.1.4",
+    "lkt-control-tools": "^1.0.3",
+    "lkt-events": "^1.0.2",
+    "lkt-http-client": "^1.0.21",
+    "lkt-loader": "^1.0.1",
+    "lkt-modal-confirm": "^1.0.0",
+    "lkt-string-tools": "^1.0.1",
+    "lkt-ts-interfaces": "^1.0.0",
+    "vue": "^3.3.0",
+    "vue-router": "^4.3.3"
+  }
+}

package/src/components/EntryContent.vue

@@ -0,0 +1,27 @@
+<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>

package/src/components/MenuItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {MenuEntry} from "../classes/MenuEntry";
+import {ref} from "vue";
+import EntryContent from "./EntryContent.vue";
+
+const props = withDefaults(defineProps<{
+    modelValue?: MenuEntry
+}>(), {
+    modelValue: () => (new MenuEntry('', '', ''))
+});
+
+const entry = ref(props.modelValue);
+
+const onClickToggle = () => {
+    entry.value.isOpened = !entry.value.isOpened;
+}
+</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>
+        <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-children" v-if="entry.isOpened">
+        <menu-item v-for="(_, i) in entry.children" v-model="entry.children[i]"/>
+    </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

package/src/lib-components/LktMenu.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {MenuEntry} from "../classes/MenuEntry";
+import MenuItem from "../components/MenuItem.vue";
+import {ref} from "vue";
+
+const props = withDefaults(defineProps<{
+    modelValue?: MenuEntry[]
+}>(), {
+    modelValue: () => []
+});
+
+const entries = ref(props.modelValue);
+</script>
+
+<template>
+<div class="lkt-menu">
+    <menu-item v-for="(_, i) in entries" v-model="entries[i]"/>
+</div>
+</template>
+
+<style scoped>
+
+</style>

package/theme/default.css

@@ -0,0 +1,54 @@
+:root {
+    /** Font */
+    --lkt-menu-font-family: system-ui, Helvetica;
+    --lkt-menu-font-size: 17px;
+    --lkt-menu-font-weight: 400;
+    --lkt-menu-line-height: 1;
+    --lkt-menu-text-align: left;
+    --lkt-menu-text-decoration: none;
+    --lkt-menu-text-decoration-hover: none;
+
+    /** 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;
+
+    /** 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);
+
+    /** State: Disabled */
+    --lkt-menu-color-disabled: var(--disabled-contrast);
+    --lkt-menu-bg-disabled: var(--disabled-color);
+    --lkt-menu-border-color-disabled: var(--disabled-color);
+
+    /** Internal image */
+    --lkt-button-img-max-width: 50px;
+    --lkt-button-img-max-height: 50px;
+
+    /** Split Button */
+    --lkt-button-split-arrow-width: 40px;
+    --lkt-button-split-arrow-bg: transparent;
+}