lkt-menu 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-menu",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "",
   "keywords": [
     "lkt",
@@ -25,7 +25,6 @@
   "types": "./dist/build.d.ts",
   "files": [
     "dist/*",
-    "src/**/*.vue",
     "theme/**/*.css"
   ],
   "license": "MIT",

package/theme/default.css

@@ -32,4 +32,12 @@
 
     /** Event: Hover */
     --lkt-menu--hover--text-decoration: none;
+
+    /** Element: Container */
+    --lkt-menu--container--width: 100%;
+    --lkt-menu--container--top: 0;
+    --lkt-menu--container--bottom: 0;
+    --lkt-menu--container--background: transparent;
+    --lkt-menu--container--transition: all linear 100ms;
+    --lkt-menu--container--max-height: 100%;
 }

package/src/components/MenuItem.vue

@@ -1,182 +0,0 @@
-<script setup lang="ts">
-    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([
-        'update:modelValue',
-    ]);
-
-    const props = withDefaults(defineProps<{
-        modelValue?: MenuEntryConfig
-    }>(), {
-        modelValue: () => ({}),
-    });
-
-    const entry = ref(<MenuEntryConfig>props.modelValue),
-        slots = useSlots(),
-        router = useRouter(),
-        isActive = ref(false);
-
-    const onClickToggle = () => {
-            entry.value.isOpened = !entry.value.isOpened;
-        },
-        onClick = () => {
-            if (typeof entry.value.children !== 'undefined' && entry.value.children?.length > 0 && !entry.value.keepOpenOnChildClick) onClickToggle();
-
-            if (typeof entry.value.events?.click === 'function') {
-                entry.value.events.click({
-                    entry: entry.value,
-                });
-                return 1;
-            }
-            return 1;
-        };
-
-    const canRenderIcon = computed(() => {
-            return slots['icon-' + entry.value.key]
-                || entry.value.icon !== '';
-        }),
-        classes = 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 ?? []);
-        }),
-        entryIconSlots = computed((): Array<string> => {
-            let r = [];
-            for (let k in slots) {
-                if (k.startsWith('icon-')) {
-                    if (availableKeys.value.includes(k.substring(5))) {
-                        r.push(k);
-                    }
-                }
-            }
-            return r;
-        }),
-        computedIsActive = computed(() => {
-            if (entry.value.isActive) return true;
-
-            if (typeof entry.value.isActiveChecker === 'function') {
-                let r = entry.value.isActiveChecker({
-                    entry: entry.value,
-                });
-                return !!r;
-            }
-
-            return false;
-        }),
-        hasToggleSlot = computed(() => {
-            return !!Settings.toggleSlot;
-        }),
-        toggleSlot = computed(() => {
-            return Settings.toggleSlot;
-        });
-
-    watch(() => props.modelValue, (v) => {
-        entry.value = v;
-    }, { deep: true });
-
-    watch(entry, (v) => {
-        emit('update:modelValue', v);
-    }, { deep: true });
-
-    onMounted(() => {
-        let currentRoute = router?.currentRoute;
-        if (currentRoute) {
-            if (currentRoute.value.path === entry.value.anchor?.to) {
-                entry.value.isOpened = true;
-
-            } 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.anchor?.to) opened = true;
-                });
-
-                if (opened) entry.value.isOpened = true;
-            }
-        }
-    });
-</script>
-
-<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-header
-                v-else-if="entry.type === MenuEntryType.Header"
-                v-bind="entry.header"
-            />
-
-            <lkt-anchor
-                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"
-            >
-                <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>
-                </template>
-            </lkt-anchor>
-
-            <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" :class="entry.isOpened ? 'is-opened' : '' ">
-                    <i class="lkt-icn-angle-bottom" />
-                </div>
-            </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]"
-                       :key="entry.children[i].key">
-                <template v-for="slot in entryIconSlots" v-slot:[slot]>
-                    <slot :name="slot" />
-                </template>
-            </menu-item>
-        </div>
-    </div>
-</template>

package/src/lib-components/LktMenu.vue

@@ -1,111 +0,0 @@
-<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]);
-            }
-        }
-        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;
-
-            let d = resourceDataState.getData();
-            emit('loading');
-
-            httpCall(props.http?.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');
-    };
-
-    watch(() => props.modelValue, (v) => {
-        entries.value = v;
-    }, { deep: true });
-
-    watch(entries, (v) => {
-        emit('update:modelValue', v);
-    }, { deep: true });
-
-    loadResource();
-</script>
-
-<template>
-    <div class="lkt-menu">
-        <div class="lkt-menu-main">
-            <template v-if="slots.before">
-                <slot name="before"/>
-            </template>
-            <div class="lkt-menu-entries">
-                <menu-item v-for="(entry, i) in entries" v-model="entries[i]" :key="entry.key" :class="entry.class">
-                    <template v-for="slot in entryIconSlots" v-slot:[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>
-        <div class="lkt-menu-outside" v-on:click="onClickOutside" />
-    </div>
-</template>