lkt-menu 1.4.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "description": "",
   "keywords": [
     "lkt",
@@ -54,7 +54,7 @@
     "lkt-data-state": "^1.0.11",
     "lkt-http-client": "^1.0.34",
     "lkt-i18n": "^1.0.6",
-    "lkt-vue-kernel": "1.0.44",
+    "lkt-vue-kernel": "^1.0.46",
     "vue": "^3.3.0",
     "vue-router": "^4.3.3"
   }

package/src/components/MenuItem.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-  import { extractI18nValue, LktObject, MenuEntry } from 'lkt-vue-kernel';
-  import { computed, onMounted, ref, useSlots, watch } from 'vue';
-  import { fetchKeys } from '../functions/helpers';
-  import { useRouter } from 'vue-router';
-  import { Settings } from '../settings/Settings';
+    import { MenuEntryConfig, MenuEntryType } from 'lkt-vue-kernel';
+    import { computed, onMounted, ref, useSlots, watch } from 'vue';
+    import { fetchKeys } from '../functions/helpers';
+    import { useRouter } from 'vue-router';
+    import { Settings } from '../settings/Settings';
 
-  const emit = defineEmits([
+    const emit = defineEmits([
     'update:modelValue'
   ]);
 
 const props = withDefaults(defineProps<{
-    modelValue?: MenuEntry
+    modelValue?: MenuEntryConfig
 }>(), {
-    modelValue: () => (new MenuEntry())
+    modelValue: () => ({})
 });
 
-const entry = ref(props.modelValue),
+const entry = ref(<MenuEntryConfig>props.modelValue),
     slots = useSlots(),
     router = useRouter(),
     isActive = ref(false);
@@ -24,7 +24,7 @@ const onClickToggle = () => {
         entry.value.isOpened = !entry.value.isOpened;
     },
     onClick = () => {
-        if (entry.value.children?.length > 0) onClickToggle();
+        if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0) onClickToggle();
 
         if (typeof entry.value.events?.click === 'function') {
           entry.value.events.click({
@@ -49,14 +49,15 @@ const canRenderIcon = computed(() => {
         let r = [];
         if (canRenderIcon.value) r.push('has-icon');
         if (isActive.value) r.push('is-active');
+        if (entry.value.type) r.push(`is-${entry.value.type}`);
         return r.join(' ');
     });
 
 const availableKeys = computed(() => {
         let r: string[] = [];
-        return fetchKeys(r, entry.value.children);
+        return fetchKeys(r, entry.value?.children ?? []);
     }),
-    entryIconSlots = computed((): LktObject => {
+    entryIconSlots = computed((): Array<string> => {
         let r = [];
         for (let k in slots) {
             if (k.startsWith('icon-')) {
@@ -67,9 +68,6 @@ const availableKeys = computed(() => {
         }
         return r;
     }),
-    computedLabel = computed(() => {
-        return extractI18nValue(entry.value.label);
-    }),
     computedIsActive = computed(() => {
         if (entry.value.isActive) return true;
 
@@ -100,13 +98,13 @@ watch(entry, (v) => {
 onMounted(() => {
     let currentRoute = router?.currentRoute;
     if (currentRoute) {
-      if (currentRoute.value.path === entry.value.href) {
+      if (currentRoute.value.path === entry.value.anchor?.to) {
           entry.value.isOpened = true;
 
-      } else if (entry.value.children?.length > 0) {
+      } else if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0) {
           let opened = false;
           entry.value.children?.forEach((child) => {
-              if (currentRoute.value.path === child.href) opened = true;
+              if (currentRoute.value.path === child.anchor?.to) opened = true;
           });
 
           if (opened) entry.value.isOpened = true;
@@ -118,34 +116,55 @@ onMounted(() => {
 <template>
     <div class="lkt-menu-entry" :class="classes">
         <div class="lkt-menu-entry-main">
+            <lkt-button
+                v-if="entry.type === MenuEntryType.Button"
+                v-bind="entry.button"
+            >
+                <template v-if="slots.tooltip" #tooltip>
+                    <slot name="tooltip"/>
+                </template>
+                <template v-if="slots.split" #split>
+                    <slot name="split"/>
+                </template>
+            </lkt-button>
+
             <lkt-anchor
-                :to="entry.href"
+                v-else-if="entry.type === MenuEntryType.Anchor"
+                v-bind="entry.anchor"
+            />
+            <lkt-anchor
+                v-else
+                v-bind="entry.anchor"
                 :on-click="onClick"
                 :is-active="computedIsActive"
                 @active="($e: any) => isActive = $e"
             >
-                <div class="lkt-entry-content">
-                    <div class="lkt-menu-entry-icon" v-if="canRenderIcon">
-                        <template v-if="slots['icon-'+entry.key]">
-                            <slot :name="'icon-'+entry.key"
-                                  :key="entry.key"
-                                  :entry="entry"/>
-                        </template>
-                        <template v-else-if="entry.icon !== ''">
-                            <i :class="entry.icon"/>
-                        </template>
-                    </div>
-                    <div class="lkt-menu-entry-text" v-if="entry.label !== ''">
-                        {{ computedLabel }}
+                <template #text="{text}">
+                    <div class="lkt-entry-content">
+                        <div class="lkt-menu-entry-icon" v-if="canRenderIcon">
+                            <template v-if="slots['icon-'+entry.key]">
+                                <slot :name="'icon-'+entry.key"
+                                      :key="entry.key"
+                                      :entry="entry"/>
+                            </template>
+                            <template v-else-if="entry.icon !== ''">
+                                <i :class="entry.icon"/>
+                            </template>
+                        </div>
+                        <div class="lkt-menu-entry-text" v-if="text !== ''">
+                            {{ text }}
+                        </div>
                     </div>
-                </div>
+                </template>
             </lkt-anchor>
 
-            <div class="lkt-menu-entry-toggle" v-if="entry.children?.length > 0" @click="onClickToggle">
+            <div class="lkt-menu-entry-toggle" v-if="entry.type !== MenuEntryType.Button && entry.children && entry.children?.length > 0" @click="onClickToggle">
                 <template v-if="hasToggleSlot">
                     <component :is="toggleSlot" class="lkt-menu-entry-toggle-inner" :class="entry.isOpened ? 'is-opened' : '' "/>
                 </template>
-                <div v-else class="lkt-menu-entry-toggle-inner lkt-menu-entry-toggle-triangle" :class="entry.isOpened ? 'is-opened' : '' "/>
+                <div v-else class="lkt-menu-entry-toggle-inner" :class="entry.isOpened ? 'is-opened' : '' ">
+                    <i class="lkt-icn-angle-bottom"/>
+                </div>
             </div>
         </div>
         <div class="lkt-menu-entry-children" v-if="entry.isOpened">

package/src/lib-components/LktMenu.vue

@@ -1,87 +1,87 @@
 <script setup lang="ts">
-  import MenuItem from '../components/MenuItem.vue';
-  import { computed, ref, useSlots, watch } from 'vue';
-  import { getDefaultValues, LktObject, Menu, MenuConfig } from 'lkt-vue-kernel';
-  import { fetchKeys } from '../functions/helpers';
-  import { DataState } from 'lkt-data-state';
-  import { httpCall, HTTPResponse } from 'lkt-http-client';
-
-  const props = withDefaults(defineProps<MenuConfig>(), getDefaultValues(Menu));
-
-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]);
+    import MenuItem from '../components/MenuItem.vue';
+    import { computed, ref, useSlots, watch } from 'vue';
+    import { getDefaultValues, LktObject, Menu, MenuConfig } from 'lkt-vue-kernel';
+    import { fetchKeys } from '../functions/helpers';
+    import { DataState } from 'lkt-data-state';
+    import { httpCall, HTTPResponse } from 'lkt-http-client';
+
+    const props = withDefaults(defineProps<MenuConfig>(), getDefaultValues(Menu));
+
+    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));
         }
-    }
-    return d;
-}
-let resourceDataState = new DataState({});
-resourceDataState.increment(parseFilters(props.resourceData))
-
-const availableKeys = computed(() => {
-        let r:string[] = [];
-        return fetchKeys(r, entries.value);
-    }),
-    entryIconSlots = computed((): LktObject => {
-        let r = [];
-        for (let k in slots) {
-            if (k.startsWith('icon-')) {
-                if (availableKeys.value.includes(k.substring(5))) {
-                    r.push(k);
-                }
+        for (let k in d) {
+            if (Array.isArray(d[k]) || typeof d[k] === 'object') {
+                d[k] = JSON.stringify(d[k]);
             }
         }
-        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);
-        });
+        return d;
     };
+    let resourceDataState = new DataState({});
+    resourceDataState.increment(parseFilters(props.http?.data ?? {}));
+
+    const availableKeys = computed(() => {
+            let r: string[] = [];
+            return fetchKeys(r, entries.value);
+        }),
+        entryIconSlots = computed((): LktObject => {
+            let r = [];
+            for (let k in slots) {
+                if (k.startsWith('icon-')) {
+                    if (availableKeys.value.includes(k.substring(5))) {
+                        r.push(k);
+                    }
+                }
+            }
+            return r;
+        }),
+        loadResource = () => {
+            if (!props.http?.resource) return;
 
-const onClickOutside = () => {
-    emit('click-outside');
-}
+            let d = resourceDataState.getData();
+            emit('loading');
 
-watch(() => props.modelValue, (v) => {
-    entries.value = v;
-}, {deep: true})
+            httpCall(props.http?.resource, d).then((r: HTTPResponse) => {
+                resourceDataState.turnStoredIntoOriginal();
+                //@ts-ignore
+                entries.value = r.data;
+                emit('results', r.data);
+                emit('response', r);
 
-watch(entries, (v) => {
-    emit('update:modelValue', v);
-}, {deep: true})
+            }).catch((r: any) => {
+                emit('error', r);
+            });
+        };
 
-loadResource();
+    const onClickOutside = () => {
+        emit('click-outside');
+    };
+
+    watch(() => props.modelValue, (v) => {
+        entries.value = v;
+    }, { deep: true });
+
+    watch(entries, (v) => {
+        emit('update:modelValue', v);
+    }, { deep: true });
+
+    loadResource();
 </script>
 
 <template>
@@ -89,10 +89,18 @@ loadResource();
         <div class="lkt-menu">
             <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key">
                 <template v-for="slot in entryIconSlots" v-slot:[slot]>
-                    <slot :name="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 class="lkt-menu-outside" v-on:click="onClickOutside"/>
+        <div class="lkt-menu-outside" v-on:click="onClickOutside" />
     </div>
 </template>

package/theme/default.css

@@ -1,35 +1,35 @@
 :root {
     /** Font */
-    --lkt-menu-font-family: system-ui, Helvetica;
-    --lkt-menu-font-size: 16px;
-    --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;
+    --lkt-menu--font-family: system-ui, Helvetica;
+    --lkt-menu--font-size: 16px;
+    --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: 0;
-    --lkt-menu-max-width: initial;
-    --lkt-menu-min-height: 0;
-    --lkt-menu-padding: 15px;
-    --lkt-menu-gap: 15px;
-    --lkt-menu-gap-entries: 0;
+    --lkt-menu--width: 100%;
+    --lkt-menu--min-width: 0;
+    --lkt-menu--max-width: initial;
+    --lkt-menu--min-height: 0;
+    --lkt-menu--padding: 15px;
+    --lkt-menu--gap: 15px;
+    --lkt-menu--entry--gap: 0;
 
     /** Colors */
-    --lkt-menu-bg: #ffffff;
-    --lkt-menu-color-toggle: #444444;
+    --lkt-menu--bg: #ffffff;
+    --lkt-menu--toggle--color: #444444;
 
     /** Sizing: Entries */
-    --lkt-menu-padding-entry: 15px;
-    --lkt-menu-padding-text: 0 0 0 30px;
-    --lkt-menu-padding-text-with-icon: 0;
-    --lkt-menu-padding-text-without-icon: 0;
+    --lkt-menu--entry--padding: 15px;
+    --lkt-menu--text--padding: 0 0 0 30px;
+    --lkt-menu--text-with-icon--padding: 0;
+    --lkt-menu--text-without-icon--padding: 0;
 
     /** Sizing: Children */
-    --lkt-menu-padding-children: 0 0 0 10px;
+    --lkt-menu--children--padding: 0 0 0 10px;
 
     /** Colors: Outside */
-    --lkt-menu-bg-outside: rgba(255, 255, 255, 0.75);
+    --lkt-menu--outside--bg: rgba(255, 255, 255, 0.75);
 }