@vuecs/navigation 1.1.0 → 2.0.0

package/dist/index.mjs

@@ -1,436 +1,487 @@
-import { hasNormalizedSlot, normalizeSlot, applyStoreManagerOptions, installStoreManager } from '@vuecs/core';
-import { inject, ref, provide, hasInjectionContext, isRef, defineComponent, toRef, h, resolveComponent, computed } from 'vue';
+import { createComponentOptionsManager, mergeOption, inject, provide, hasNormalizedSlot, normalizeSlot, installStoreManager, applyStoreManagerOptions } from '@vuecs/core';
+import { EventEmitter } from '@posva/event-emitter';
 import { VCLink } from '@vuecs/link';
+import { defineComponent, resolveComponent, toRef, h, ref, onMounted, onUnmounted, computed } from 'vue';
 
-let instance;
-function useNavigationProvider(module) {
-    if (typeof instance !== 'undefined') {
-        return instance;
-    }
-    if (typeof module === 'undefined') {
-        throw new Error('A Navigation Provider must be set!');
-    }
-    instance = module;
-    return instance;
-}
-function setNavigationProvider(module) {
-    instance = module;
-}
-function createNavigationProvider(input) {
-    return input;
+function buildComponentOptions() {
+    const manager = createComponentOptionsManager({
+        name: 'navigation'
+    });
+    return {
+        groupClass: mergeOption('class', manager.get('groupClass'), 'vc-nav-items'),
+        groupTag: manager.get('groupTag') || 'ul',
+        itemClass: mergeOption('class', manager.get('itemClass'), 'vc-nav-item'),
+        itemTag: manager.get('itemTag') || 'li',
+        subGroupTitleClass: mergeOption('class', manager.get('subGroupTitleClass'), 'vc-nav-sub-level-title'),
+        subGroupItemsClass: mergeOption('class', manager.get('subGroupTitleClass'), 'vc-nav-sub-level-items'),
+        separatorTag: manager.get('separatorTag') || 'div',
+        separatorClass: mergeOption('class', manager.get('iconClass'), 'vc-nav-separator'),
+        iconClass: mergeOption('class', manager.get('iconClass'), 'vc-nav-icon'),
+        linkClass: mergeOption('class', manager.get('linkClass'), 'vc-nav-link'),
+        linkRootClass: mergeOption('class', manager.get('linkRootClass'), 'vc-nav-link-root'),
+        linkTextTag: manager.get('linkTextTag') || 'span',
+        linkTextClass: mergeOption('class', manager.get('linkTextClass'), 'vc-nav-link-text')
+    };
 }
 
-const StoreSymbol = Symbol.for('VLNavigationStore');
-function isStoreInjected() {
-    if (!hasInjectionContext()) {
-        return false;
+function findItemMatchesIF(items, options, parent) {
+    const output = [];
+    for(let i = 0; i < items.length; i++){
+        const item = items[i];
+        let { score } = parent;
+        if (options.path) {
+            if (item.activeMatch) {
+                if (item.activeMatch === options.path) {
+                    score += 3;
+                } else if (options.path.startsWith(item.activeMatch)) {
+                    score += 2;
+                }
+            }
+            if (item.url && item.url !== '/') {
+                if (item.url === options.path) {
+                    score += 3;
+                } else if (options.path.startsWith(item.url)) {
+                    score += 2;
+                }
+            }
+        }
+        if (item.default) {
+            score += 1;
+        }
+        if (item.children) {
+            const childMatches = findItemMatchesIF(item.children, options, {
+                score
+            });
+            output.push(...childMatches);
+        }
+        output.push({
+            data: item,
+            score
+        });
     }
-    const instance = inject(StoreSymbol);
-    return !!instance;
+    return output.sort((a, b)=>b.score - a.score);
 }
-function setupStore(app) {
-    const store = {
-        items: ref([]),
-        itemsActive: ref([])
+function findBestItemMatches(items, options = {}) {
+    const result = findItemMatchesIF(items, options, {
+        score: 0
+    });
+    const [first] = result;
+    if (!first) {
+        return [];
+    }
+    return result.filter((match)=>match.score === first.score).map((match)=>match.data);
+}
+
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ function normalizeItemIF(item, defaults, trace) {
+    const output = {
+        ...item,
+        level: defaults.level,
+        children: [],
+        trace: [
+            ...trace,
+            item.name
+        ]
     };
-    if (typeof app === 'undefined') {
-        if (isStoreInjected()) {
-            return;
-        }
-        provide(StoreSymbol, store);
-        return;
+    if (!item.children) {
+        return output;
     }
-    if (app._context && app._context.provides && app._context.provides[StoreSymbol]) {
-        return;
+    for(let i = 0; i < item.children.length; i++){
+        output.children.push(normalizeItemIF(item.children[i], defaults, output.trace));
     }
-    app.provide(StoreSymbol, store);
+    return output;
 }
-function injectStore() {
-    const instance = inject(StoreSymbol);
-    if (!instance) {
-        throw new Error('The Store is not set.');
-    }
-    return instance;
+function normalizeItem(item, defaults) {
+    return normalizeItemIF(item, defaults, []);
+}
+function normalizeItems(items, options) {
+    return items.map((item)=>normalizeItem(item, options));
 }
 
-function isNavigationItemMatch(one, two) {
-    if (!one || !two) {
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ function isTraceEqual(a, b) {
+    if (a.length !== b.length) {
         return false;
     }
-    if (one.id && two.id && one.id === two.id) {
-        return true;
-    }
-    if (one.name && two.name && one.name === two.name) {
-        return true;
-    }
-    if (one.url && two.url && one.url === two.url) {
-        return true;
-    }
-    if (one.children && two.children && one.children.length === two.children.length) {
-        for(let i = 0; i < one.children.length; i++){
-            if (!isNavigationItemMatch(one.children[i], two.children[i])) {
-                return false;
-            }
+    for(let i = 0; i < a.length; i++){
+        if (a[i] !== b[i]) {
+            return false;
         }
-        return true;
     }
-    return false;
+    return true;
 }
-
-// --------------------------------------------------
-function setNavigationExpansion(items, item, parentMatch = false) {
-    let matchInIteration = false;
-    for(let i = 0; i < items.length; i++){
-        const isMatch = isNavigationItemMatch(items[i], item);
-        let isChildMatch = false;
-        const { children } = items[i];
-        if (typeof children !== 'undefined') {
-            const { items: childItems, match: childMatch } = setNavigationExpansion(children, item, isMatch);
-            items[i].children = childItems;
-            isChildMatch = childMatch;
-        }
-        if (isMatch) {
-            items[i].active = true;
-        }
-        if (isMatch || isChildMatch) {
-            items[i].display = true;
-            items[i].displayChildren = true;
-        }
-        if (parentMatch) {
-            items[i].display = true;
-        }
-        if (!matchInIteration) {
-            matchInIteration = isMatch || isChildMatch;
-        }
-    }
-    if (matchInIteration) {
-        for(let i = 0; i < items.length; i++){
-            items[i].display = true;
+function isTracePartOf(item, parent) {
+    for(let i = 0; i < item.length; i++){
+        if (parent[i] !== item[i]) {
+            return false;
         }
     }
-    return {
-        items,
-        match: matchInIteration
-    };
+    return true;
 }
 
-function resetNavigationItem(items, root = true) {
+function resetItemsByTraceIF(items, trace) {
     for(let i = 0; i < items.length; i++){
-        items[i].display = root;
-        items[i].displayChildren = false;
-        items[i].active = false;
-        const { children } = items[i];
-        if (typeof children !== 'undefined') {
-            items[i].children = resetNavigationItem(children, false);
+        const item = items[i];
+        const isEqual = isTraceEqual(items[i].trace, trace);
+        item.active = isEqual;
+        item.display = true;
+        if (isEqual) {
+            item.displayChildren = true;
+        } else {
+            item.displayChildren = isTracePartOf(item.trace, trace);
         }
+        item.children = resetItemsByTraceIF(item.children, trace);
     }
     return items;
 }
+function resetItemsByTrace(items, trace) {
+    return resetItemsByTraceIF(items, trace);
+}
 
-function findNavigationItemsForTier(items, tier) {
-    const filterFn = (component)=>typeof component.tier !== 'undefined' && component.tier === tier;
-    return items.filter(filterFn);
+function findItemsWithLevel(items, tier) {
+    return items.filter((item)=>item.level === tier);
 }
-function findNavigationItemForTier(items, tier) {
-    const data = findNavigationItemsForTier(items, tier);
+function findItemWithLevel(tier, items) {
+    const data = findItemsWithLevel(items, tier);
     if (data.length >= 1) {
         return data[0];
     }
     return undefined;
 }
-function setTierForNavigationItems(items, tier) {
-    const mapFn = (component)=>{
-        component.tier = tier;
-        return component;
-    };
-    if (isRef(items)) {
-        return items.value.map(mapFn);
-    }
-    return items.map(mapFn);
-}
-function removeTierFromNavigationItems(items, tier) {
-    const filterFn = (items)=>typeof items.tier === 'undefined' || items.tier !== tier;
-    if (isRef(items)) {
-        return items.value.filter(filterFn);
-    }
-    return items.filter(filterFn);
+function removeItemsWithLevel(tier, items) {
+    return items.filter((item)=>item.level !== tier);
 }
-
-function replaceNavigationTierItemActive(store, tier, item) {
-    const items = removeTierFromNavigationItems(store.itemsActive.value, tier);
-    if (item) {
-        item.tier = tier;
-        store.itemsActive.value = [
-            ...items,
-            item
+function replaceLevelItem(tier, input, next) {
+    const output = removeItemsWithLevel(tier, input);
+    if (next) {
+        next.level = tier;
+        return [
+            ...output,
+            next
         ];
-    } else {
-        store.itemsActive.value = items;
     }
+    return output;
 }
-function replaceNavigationTierItems(store, tier, items) {
-    const componentsExisting = removeTierFromNavigationItems(store.items.value, tier);
-    store.items.value = [
+function replaceLevelItems(tier, src, next) {
+    const componentsExisting = removeItemsWithLevel(tier, src);
+    return [
         ...componentsExisting,
-        ...setTierForNavigationItems(items, tier)
+        ...next
     ];
 }
 
-function refreshNavigationTierItems(store, tier) {
-    const components = resetNavigationItem(findNavigationItemsForTier(store.items.value, tier));
-    const component = findNavigationItemForTier(store.itemsActive.value, tier);
-    if (component) {
-        const { items } = setNavigationExpansion(components, component);
-        replaceNavigationTierItems(store, tier, items);
-        return;
-    }
-    replaceNavigationTierItems(store, tier, components);
+function isAbsoluteURL(str) {
+    return str.substring(0, 7) === 'http://' || str.substring(0, 8) === 'https://';
 }
 
-async function buildNavigationForTier(store, tier, itemsActive) {
-    if (typeof itemsActive === 'undefined' || itemsActive.length === 0) {
-        let tierStartIndex = 0;
-        const tierEndIndex = tier;
-        itemsActive = [];
-        while(tierStartIndex <= tierEndIndex){
-            const component = findNavigationItemForTier(store.itemsActive.value, tierStartIndex);
-            if (!component) {
+class NavigationManager extends EventEmitter {
+    getItems(tier) {
+        if (typeof tier === 'undefined') {
+            return this.items;
+        }
+        return this.items.filter((item)=>item.level === tier);
+    }
+    async build(options) {
+        if (this.built) {
+            return this.items;
+        }
+        this.built = true;
+        this.items = [];
+        this.itemsActive = [];
+        let parent;
+        let level = 0;
+        while(true){
+            const raw = await this.itemsFn({
+                level,
+                parent
+            });
+            if (!raw || raw.length === 0) {
+                break;
+            }
+            const items = normalizeItems(raw, {
+                level
+            });
+            const matches = findBestItemMatches(items, {
+                path: options.path
+            });
+            const [match] = matches;
+            if (!match) {
                 break;
             }
-            itemsActive.push(component);
-            tierStartIndex++;
+            this.itemsActive.push(match);
+            await this.buildLevel(level);
+            parent = match;
+            level++;
         }
+        this.emit('updated', this.items);
+        return this.items;
     }
-    const items = await useNavigationProvider().getItems(tier, itemsActive);
-    if (typeof items === 'undefined') {
-        return false;
-    }
-    replaceNavigationTierItems(store, tier, items);
-    refreshNavigationTierItems(store, tier);
-    return true;
-}
-
-function flattenNestedNavigationItems(items) {
-    const output = [];
-    for(let i = 0; i < items.length; i++){
-        const { children, ...data } = items[i];
-        output.push(data);
-        if (children && children.length > 0) {
-            output.push(...flattenNestedNavigationItems([
-                ...children
-            ]));
+    async select(level, itemNew) {
+        const itemOld = findItemWithLevel(level, this.itemsActive);
+        if (itemOld && isTraceEqual(itemOld.trace, itemNew.trace)) {
+            return;
+        }
+        this.itemsActive = this.itemsActive.filter((el)=>el.level < level);
+        this.itemsActive.push(itemNew);
+        const startLevel = level;
+        while(true){
+            const built = await this.buildLevel(level, startLevel === level);
+            if (!built) {
+                break;
+            }
+            level++;
         }
     }
-    return output;
-}
-
-async function selectNavigationTierItem(store, tier, component) {
-    const isMatch = isNavigationItemMatch(findNavigationItemForTier(store.itemsActive.value, tier), component);
-    if (isMatch) {
-        return;
+    async toggle(level, item) {
+        let isMatch;
+        if (item.displayChildren) {
+            isMatch = true;
+        } else {
+            const itemOld = findItemWithLevel(level, this.itemsActive);
+            isMatch = !!itemOld && isTraceEqual(item.trace, itemOld.trace);
+        }
+        if (isMatch) {
+            this.itemsActive = removeItemsWithLevel(level, this.itemsActive);
+        } else {
+            this.itemsActive = replaceLevelItem(level, this.itemsActive, item);
+        }
+        await this.buildLevel(level, true);
+    }
+    async buildLevel(level, cached) {
+        let items;
+        if (cached) {
+            items = findItemsWithLevel(this.items, level);
+        } else {
+            const parent = findItemWithLevel(level - 1, this.itemsActive);
+            const raw = await this.itemsFn({
+                level,
+                parent
+            });
+            items = raw && raw.length > 0 ? normalizeItems(raw, {
+                level
+            }) : [];
+        }
+        if (!items || items.length === 0) {
+            this.items = this.items.filter((item)=>item.level < level);
+            this.emit('tierUpdated', level, []);
+            return false;
+        }
+        let trace = [];
+        const item = findItemWithLevel(level, this.itemsActive);
+        if (item) {
+            trace = item.trace;
+        }
+        resetItemsByTrace(items, trace);
+        this.items = replaceLevelItems(level, this.items, items);
+        this.emit('tierUpdated', level, items);
+        return true;
     }
-    replaceNavigationTierItemActive(store, tier, component);
-    refreshNavigationTierItems(store, tier);
-    tier++;
-    // eslint-disable-next-line no-constant-condition
-    while(true){
-        const built = await buildNavigationForTier(store, tier);
-        if (!built) {
-            break;
+    constructor(options){
+        super();
+        let itemsFn;
+        if (typeof options.items === 'function') {
+            itemsFn = options.items;
+        } else {
+            itemsFn = async ({ level })=>{
+                if (level > 0) {
+                    return [];
+                }
+                return options.items;
+            };
         }
-        tier++;
+        this.itemsFn = itemsFn;
+        this.items = [];
+        this.itemsActive = [];
+        this.built = false;
     }
 }
 
-function toggleNavigation(store, tier, component) {
-    const isMatch = component.displayChildren || isNavigationItemMatch(findNavigationItemForTier(store.itemsActive.value, tier), component);
-    if (isMatch) {
-        replaceNavigationTierItemActive(store, tier, undefined);
-    } else {
-        replaceNavigationTierItemActive(store, tier, component);
+const sym = Symbol.for('VCNavigationManager');
+function injectNavigationManager(app) {
+    const instance = inject(sym, app);
+    if (!instance) {
+        throw new Error('A navigation provider has not been provided.');
     }
-    refreshNavigationTierItems(store, tier);
+    return instance;
 }
-
-function isAbsoluteURL(str) {
-    return str.substring(0, 7) === 'http://' || str.substring(0, 8) === 'https://';
+function provideNavigationManager(manager, app) {
+    provide(sym, manager, app);
 }
 
-var SlotName;
-(function(SlotName) {
+var SlotName = /*#__PURE__*/ function(SlotName) {
     SlotName["ITEM"] = "item";
     SlotName["SEPARATOR"] = "separator";
     SlotName["LINK"] = "link";
     SlotName["SUB"] = "sub";
     SlotName["SUB_TITLE"] = "sub-title";
     SlotName["SUB_ITEMS"] = "sub-items";
-})(SlotName || (SlotName = {}));
-var ElementType;
-(function(ElementType) {
+    return SlotName;
+}({});
+var ElementType = /*#__PURE__*/ function(ElementType) {
     ElementType["LINK"] = "link";
     ElementType["SEPARATOR"] = "separator";
-})(ElementType || (ElementType = {}));
+    return ElementType;
+}({});
 
 const VCNavItem = defineComponent({
     props: {
-        tier: {
-            type: Number,
-            default: 0
-        },
-        component: {
+        data: {
             type: Object,
             required: true
         }
     },
     setup (props, { slots }) {
-        const store = injectStore();
-        const component = toRef(props, 'component');
-        const selectComponent = async (value)=>{
-            await selectNavigationTierItem(store, props.tier, value);
+        const itemsNode = resolveComponent('VCNavItems');
+        const options = buildComponentOptions();
+        const manager = injectNavigationManager();
+        const data = toRef(props, 'data');
+        const select = async (value)=>{
+            await manager.select(data.value.level, value);
+        };
+        const toggle = async (value)=>{
+            await manager.toggle(data.value.level, value);
         };
-        const toggleComponentExpansion = async (value)=>toggleNavigation(store, props.tier, value);
         return ()=>{
             const buildItem = ()=>{
-                let item;
-                switch(component.value.type){
-                    case ElementType.SEPARATOR:
-                        {
-                            const hasSlot = hasNormalizedSlot(SlotName.SEPARATOR, slots);
-                            if (hasSlot) {
-                                item = normalizeSlot(SlotName.SEPARATOR, {
-                                    component: component.value
-                                }, slots);
-                            } else {
-                                item = h('div', {
-                                    class: 'nav-separator'
-                                }, component.value.name);
+                // type: separator
+                if (data.value.type === ElementType.SEPARATOR) {
+                    const hasSlot = hasNormalizedSlot(SlotName.SEPARATOR, slots);
+                    if (hasSlot) {
+                        return normalizeSlot(SlotName.SEPARATOR, {
+                            data: data.value
+                        }, slots);
+                    }
+                    return h(options.separatorTag, {
+                        class: options.separatorClass
+                    }, data.value.name);
+                }
+                // type: group
+                if (!data.value.children || data.value.children.length === 0) {
+                    const hasSlot = hasNormalizedSlot(SlotName.LINK, slots);
+                    if (hasSlot) {
+                        return normalizeSlot(SlotName.LINK, {
+                            data: data.value,
+                            select,
+                            isActive: data.value.active
+                        }, slots);
+                    }
+                    const linkProps = {
+                        active: data.value.active,
+                        disabled: false,
+                        prefetch: true
+                    };
+                    if (data.value.url) {
+                        if (isAbsoluteURL(data.value.url) || data.value.url.startsWith('#')) {
+                            linkProps.href = data.value.url;
+                            if (data.value.urlTarget) {
+                                linkProps.target = data.value.urlTarget;
                             }
-                            break;
+                        } else {
+                            linkProps.to = data.value.url;
                         }
-                    default:
-                        {
-                            if (typeof component.value.children === 'undefined') {
-                                const hasSlot = hasNormalizedSlot(SlotName.LINK, slots);
-                                if (hasSlot) {
-                                    item = normalizeSlot(SlotName.LINK, {
-                                        component: component.value,
-                                        selectComponent,
-                                        isActive: component.value.active
-                                    }, slots);
-                                } else {
-                                    const linkProps = {
-                                        active: component.value.active,
-                                        disabled: false,
-                                        prefetch: true
-                                    };
-                                    if (component.value.url) {
-                                        if (isAbsoluteURL(component.value.url) || component.value.url.startsWith('#')) {
-                                            linkProps.href = component.value.url;
-                                            if (component.value.urlTarget) {
-                                                linkProps.target = component.value.urlTarget;
-                                            }
-                                        } else {
-                                            linkProps.to = component.value.url;
-                                        }
-                                    }
-                                    item = h(VCLink, {
-                                        class: [
-                                            'nav-link',
-                                            {
-                                                'root-link': component.value.root
-                                            }
-                                        ],
-                                        ...linkProps,
-                                        onClicked () {
-                                            if (!component.value.url) {
-                                                return selectComponent.call(null, component.value);
-                                            }
-                                            return undefined;
-                                        },
-                                        onClick () {
-                                            return selectComponent.call(null, component.value);
-                                        }
-                                    }, {
-                                        default: ()=>[
-                                                ...component.value.icon ? [
-                                                    h('i', {
-                                                        class: component.value.icon
-                                                    })
-                                                ] : [],
-                                                h('span', {
-                                                    class: 'nav-link-text'
-                                                }, [
-                                                    component.value.name
-                                                ])
-                                            ]
-                                    });
-                                }
-                            } else if (hasNormalizedSlot(SlotName.SUB, slots)) {
-                                item = normalizeSlot(SlotName.SUB, {
-                                    component: component.value,
-                                    selectComponent,
-                                    toggleComponentExpansion
-                                }, slots);
-                            } else {
-                                let title;
-                                if (hasNormalizedSlot(SlotName.SUB_TITLE, slots)) {
-                                    title = normalizeSlot(SlotName.SUB_TITLE, {
-                                        component: component.value,
-                                        selectComponent,
-                                        toggleComponentExpansion
-                                    });
-                                } else {
-                                    title = h('div', {
-                                        class: 'nav-sub-title',
-                                        onClick ($event) {
-                                            $event.preventDefault();
-                                            return toggleComponentExpansion.call(null, component.value);
-                                        }
-                                    }, [
-                                        [
-                                            ...component.value.icon ? [
-                                                h('i', {
-                                                    class: component.value.icon
-                                                })
-                                            ] : [],
-                                            h('span', {
-                                                class: 'nav-link-text'
-                                            }, [
-                                                component.value.name
-                                            ])
-                                        ]
-                                    ]);
-                                }
-                                let items;
-                                if (hasNormalizedSlot(SlotName.SUB_ITEMS, slots)) {
-                                    items = normalizeSlot(SlotName.SUB_ITEMS, {
-                                        component: component.value,
-                                        selectComponent,
-                                        toggleComponentExpansion
-                                    });
-                                } else if (component.value.displayChildren) {
-                                    const navigationComponents = resolveComponent('VCNavItems');
-                                    items = h(navigationComponents, {
-                                        class: 'list-unstyled nav-sub-items',
-                                        tier: props.tier,
-                                        entities: component.value.children
-                                    });
-                                }
-                                item = [
-                                    title,
-                                    items
-                                ];
+                    }
+                    return h(VCLink, {
+                        class: [
+                            options.linkClass,
+                            data.value.url && data.value.url === '/' ? [
+                                options.linkRootClass
+                            ] : []
+                        ],
+                        ...linkProps,
+                        onClicked () {
+                            if (!data.value.url) {
+                                return select.call(null, data.value);
                             }
-                            break;
+                            return undefined;
+                        },
+                        onClick () {
+                            return select.call(null, data.value);
                         }
+                    }, {
+                        default: ()=>[
+                                ...data.value.icon ? [
+                                    h('i', {
+                                        class: data.value.icon
+                                    })
+                                ] : [],
+                                h(options.linkTextTag, {
+                                    class: options.linkTextClass
+                                }, [
+                                    data.value.name
+                                ])
+                            ]
+                    });
+                }
+                if (hasNormalizedSlot(SlotName.SUB, slots)) {
+                    return normalizeSlot(SlotName.SUB, {
+                        data: data.value,
+                        select,
+                        toggle
+                    }, slots);
+                }
+                let title;
+                if (hasNormalizedSlot(SlotName.SUB_TITLE, slots)) {
+                    title = normalizeSlot(SlotName.SUB_TITLE, {
+                        data: data.value,
+                        select,
+                        toggle
+                    });
+                } else {
+                    title = h('div', {
+                        class: options.subGroupTitleClass,
+                        onClick ($event) {
+                            $event.preventDefault();
+                            return toggle(data.value);
+                        }
+                    }, [
+                        [
+                            ...data.value.icon ? [
+                                h('i', {
+                                    class: data.value.icon
+                                })
+                            ] : [],
+                            h(options.linkTextTag, {
+                                class: options.linkTextClass
+                            }, [
+                                data.value.name
+                            ])
+                        ]
+                    ]);
+                }
+                if (!data.value.displayChildren) {
+                    return title;
                 }
-                return item;
+                let vNodes;
+                if (hasNormalizedSlot(SlotName.SUB_ITEMS, slots)) {
+                    vNodes = normalizeSlot(SlotName.SUB_ITEMS, {
+                        data: data.value,
+                        select,
+                        toggle
+                    });
+                } else {
+                    vNodes = h(itemsNode, {
+                        level: data.value.level,
+                        data: data.value.children
+                    });
+                }
+                return [
+                    title,
+                    vNodes
+                ];
             };
-            return h('div', {
+            return h(options.itemTag, {
                 class: [
-                    'nav-item',
+                    options.itemClass,
                     {
-                        active: component.value.active || component.value.displayChildren
+                        active: data.value.active || data.value.displayChildren
                     }
                 ]
             }, [
@@ -442,131 +493,79 @@ const VCNavItem = defineComponent({
 
 const VCNavItems = defineComponent({
     props: {
-        tier: {
+        level: {
             type: Number,
             default: 0
         },
-        entities: {
+        data: {
             type: Array,
             default: undefined
         }
     },
     setup (props, { slots }) {
-        const store = injectStore();
-        const items = computed(()=>{
-            if (typeof props.entities !== 'undefined') {
-                return props.entities;
-            }
-            return findNavigationItemsForTier(store.items.value, props.tier);
-        });
-        const buildChild = (context)=>{
-            if (hasNormalizedSlot(SlotName.ITEM, slots)) {
-                return normalizeSlot(SlotName.ITEM, context, slots);
-            }
-            return h(VCNavItem, context);
-        };
-        const buildChildren = ()=>{
-            const entities = [];
-            if (items.value) {
-                for(let i = 0; i < items.value.length; i++){
-                    if (items.value[i].display) {
-                        entities.push(h('li', {
-                            key: i
-                        }, [
-                            buildChild({
-                                tier: props.tier,
-                                component: items.value[i]
-                            })
-                        ]));
-                    }
+        const options = buildComponentOptions();
+        const manager = injectNavigationManager();
+        const managerItems = ref([]);
+        if (!props.data) {
+            managerItems.value = manager.getItems(props.level);
+        }
+        const counter = ref(0);
+        let removeListener;
+        onMounted(()=>{
+            removeListener = manager.on('tierUpdated', (tier, items)=>{
+                if (tier !== props.level) {
+                    return;
                 }
+                managerItems.value = items;
+                counter.value++;
+            });
+        });
+        onUnmounted(()=>{
+            if (typeof removeListener === 'function') {
+                removeListener();
+                removeListener = undefined;
             }
-            return entities;
-        };
-        return ()=>h('ul', {
-                class: 'nav-items'
-            }, [
-                buildChildren()
-            ]);
-    }
-});
-
-async function buildNavigation(context = {}) {
-    const store = injectStore();
-    const navigationProvider = useNavigationProvider();
-    let itemsActive = [];
-    if (typeof context.itemsActive !== 'undefined') {
-        itemsActive = context.itemsActive;
-    } else if (context.route) {
-        if (typeof navigationProvider.getItemsActiveByRoute !== 'undefined') {
-            itemsActive = await navigationProvider.getItemsActiveByRoute(context.route);
-        } else if (typeof navigationProvider.getItemsActiveByURL !== 'undefined') {
-            itemsActive = await navigationProvider.getItemsActiveByURL(context.route.fullPath);
-        }
-    } else if (context.url && typeof navigationProvider.getItemsActiveByURL !== 'undefined') {
-        itemsActive = await navigationProvider.getItemsActiveByURL(context.url);
-    }
-    if (itemsActive.length > 0) {
-        for(let i = 0; i < itemsActive.length; i++){
-            if (typeof itemsActive[i].tier === 'undefined') {
-                itemsActive[i].tier = i;
+        });
+        const items = computed(()=>{
+            if (typeof props.data !== 'undefined') {
+                return props.data;
             }
-        }
-    }
-    let tierIndex = 0;
-    let url;
-    if (typeof context.url === 'string') {
-        url = context.url;
-    } else if (typeof context.route !== 'undefined') {
-        url = context.route.fullPath;
-    }
-    // eslint-disable-next-line no-constant-condition
-    while(true){
-        let items = await navigationProvider.getItems(tierIndex, itemsActive);
-        if (!items || items.length === 0) {
-            break;
-        }
-        // ensure tier property
-        items = setTierForNavigationItems(items, tierIndex);
-        let currentItem = findNavigationItemForTier(itemsActive, tierIndex);
-        if (!currentItem) {
-            if (url) {
-                const urlMatches = items.filter((item)=>isNavigationItemMatch(item, {
-                        url
-                    }));
-                if (urlMatches.length > 0) {
-                    [currentItem] = urlMatches;
+            return managerItems.value;
+        });
+        return ()=>{
+            const vNodes = [];
+            for(let i = 0; i < items.value.length; i++){
+                if (!items.value[i].display && !items.value[i].displayChildren) {
+                    continue;
                 }
-            }
-            if (!currentItem) {
-                const defaultItem = items.filter((item)=>item.default);
-                if (defaultItem.length > 0) {
-                    currentItem = defaultItem;
+                let vNode;
+                if (hasNormalizedSlot(SlotName.ITEM, slots)) {
+                    vNode = normalizeSlot(SlotName.ITEM, {
+                        data: items.value[i]
+                    }, slots);
                 } else {
-                    [currentItem] = items;
+                    vNode = h(VCNavItem, {
+                        key: `${i}:${counter.value}`,
+                        data: items.value[i]
+                    });
                 }
+                vNodes.push(vNode);
             }
-            currentItem.tier = tierIndex;
-            itemsActive.push(currentItem);
-        }
-        if (!currentItem) {
-            continue;
-        }
-        replaceNavigationTierItemActive(store, tierIndex, currentItem);
-        await buildNavigationForTier(store, tierIndex, itemsActive);
-        tierIndex++;
+            return h(options.groupTag, {
+                class: props.data ? options.subGroupItemsClass : options.groupClass
+            }, vNodes);
+        };
     }
-}
+});
 
 function install(instance, options) {
-    if (options.provider) {
-        setNavigationProvider(options.provider);
-    }
-    setupStore(instance);
+    const manager = new NavigationManager({
+        items: options.items
+    });
+    provideNavigationManager(manager, instance);
+    const storeManager = installStoreManager(instance);
     if (options.storeManager) {
-        applyStoreManagerOptions(instance, options.storeManager);
-    } else {
-        installStoreManager(instance);
+        applyStoreManagerOptions(storeManager, options.storeManager);
     }
     Object.entries({
         VCNavItem,
@@ -579,5 +578,5 @@ var index = {
     install
 };
 
-export { VCNavItem, VCNavItems, buildNavigation, buildNavigationForTier, createNavigationProvider, index as default, flattenNestedNavigationItems, install, setNavigationProvider, useNavigationProvider };
+export { NavigationManager, VCNavItem, VCNavItems, index as default, injectNavigationManager, install, provideNavigationManager };
 //# sourceMappingURL=index.mjs.map