@vuecs/navigation 1.1.1 → 2.0.0

package/README.md

@@ -30,63 +30,54 @@ $ npm i --save @vuecs/navigation
 
 ## Usage
 
-To use the navigation component, a constant must be defined, 
-which satisfy the [NavigationProvider](#navigationprovider) type.
-
-The implementation will provide different navigation elements for each tier.
-The tier is a numeric value, which can be any positive integer (including 0).
+To use the navigation component, a function must be defined, 
+to retrieve a set of elements for a specific level and parent element.
 
 `module.ts`
 
 ```typescript
 import {
-    NavigationItem,
-    createNavigationProvider
+    NavigationItem
 } from "@vuecs/navigation";
 
-const primaryItems: NavigationItem[] = [
-    {
-        name: 'Home',
-        url: '/',
-        icon: 'fa fa-home'
-    },
-    {
-        name: 'About',
-        url: '/about',
-        icon: 'fa fa-info'
+const topNav: NavigationItem[] = [
+    { name: 'Home', url: '/', icon: 'fa fa-home' },
+    { name: 'Admin', url: '/admin/', activeMatch: '/admin/', icon: 'fas fa-cog' }
+];
+
+const sideDefaultNav : NavigationItem[] = [
+    { name: 'Home', url: '/', icon: 'fa fa-home' },
+    { name: 'About', url: '/info', icon: 'fa fa-info' }
+];
+
+const sideAdminNav : NavigatioNitem[] = [
+    { name: 'Home', url: '/admin/', icon: 'fa fa-home' },
+    { name: 'Users', url: '/admin/users', icon: 'fa fa-user' },
+    
+];
+
+export function getNavigationItems(
+    level: number,
+    parent?: NavigationItem
+) {
+    if (level === 0) {
+        return topNav;
     }
-]
-
-export const provider = createNavigationProvider({
-    async getItems(tier: number, itemsActive: NavigationItem[]) {
-        // Return elements for a specific tier.
-        // The context provides the current active elements for
-        // the parent tiers.
-        
-        if(tier === 0) {
-            return primaryItems;
-        }
-        
-        // tier does not exist
-        return undefined;
-    },
-    async getItemsActiveByURL(url: string) {
-        // build element context for url
-        if (url === '/') {
-            return [
-                primaryItems[0]
-            ]
-        }
-
-        if (url === '/about') {
-            return [
-                primaryItems[1]
-            ]
+    
+    if(parent) {
+        if(level === 1) {
+            if(parent.name === 'Home') {
+                return sideDefaultNav;
+            } 
+            
+            if(parent.name === 'Admin') {
+                return sideAdminNav;
+            }
         }
-
-        return undefined;
     }
-});
+
+    return [];
+}
 ```
 
 The next step is to create the vue entrypoint. 
@@ -95,30 +86,34 @@ The next step is to create the vue entrypoint.
 
 ```typescript
 import {
-    buildNavigation,
+    injectNavigationManager,
     install
 } from '@vuecs/navigation';
 import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
-import { provider } from './module';
+import { getNavigationItems } from './module';
 
 const app = createApp();
 
 app.use(install({
-    provider
+    items: ({ level, parent }) => {
+        return getNavigationItems(level, parent);
+    }
 }));
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
-        /* ... */     
+        /* ... */
     ],
 });
 app.use(router);
 
 (async () => {
-    const url = router?.currentRoute?.value?.fullPath;
-    await buildNavigation({ url });
+    const path = router?.currentRoute?.value?.fullPath;
+    
+    const navigationManager = injectNavigationManager();
+    await navigationManager.build({ path });
 
     app.mount('#app');
 })();
@@ -132,87 +127,22 @@ if registered globally.
 ```vue
 <template>
     <div>
-        <VCNavItems :tier="0" />
+        <VCNavItems :level="0" />
         
-        <VCNavItems :tier="1" />
+        <VCNavItems :level="1" />
     </div>
 </template>
 ```
 
-## Functions
-
-### buildNavigation
-
-
-▸ `function` **buildNavigation**(`context?: NavigationBuildContext`): `Promise`<`void`>
-
-Build all navigation tiers, by `url` or active `items`. 
-
-#### Example
-**`URL`**
-```typescript
-import { buildNavigation } from '@vuecs/navigation';
-
-await buildNavigation({
-    url: '/'
-});
-```
-
-This will call the `getItemsActive` method of the `NavigationProvider` implementation,
-to calculate the active items.
-
-**`items`**
-```typescript
-import { buildNavigation } from '@vuecs/navigation';
-
-await buildNavigation({
-    items: [
-        {id: 'default', tier: 0, name: 'Home'}
-    ]
-})
-```
-
-The `items` property will be passed as second argument to the `getItems` method of
-the `NavigationProvider` implementation, to build a specific tier navigation.
-
-**`route`**
-```typescript
-import { RouteLocation } from 'vue-router';
-import { buildNavigationWithRoute } from '@vuecs/navigation';
-
-const route : RouteLocation = {
-    fullPath: '/',
-    ...
-};
-
-await buildNavigation({
-    route
-})
-```
-
 ## Types
 
-### NavigationBuildContext
-
-```typescript
-import { NavigationItem } from '@vuecs/navigation';
-import { RouteLocationNormalized } from 'vue-router';
-
-declare type NavigationBuildContext = {
-    items?: NavigationItem[],
-    route?: RouteLocationNormalized,
-    url?: string
-};
-```
-
 ### NavigationItem
 
 ```typescript
 import { ElementType } from '@vuecs/navigation';
 
 declare type NavigationItem = {
-    id?: string | number,
-    tier?: number,
+    level?: number,
     name?: string,
 
     url?: string,
@@ -225,6 +155,7 @@ declare type NavigationItem = {
     icon?: string,
 
     active?: boolean,
+    activeMatch?: string,
 
     display?: boolean,
     displayChildren?: boolean,
@@ -232,33 +163,14 @@ declare type NavigationItem = {
     root?: boolean,
     children?: NavigationItem[],
 
-    requireLoggedIn?: boolean,
-    requireLoggedOut?: boolean,
-    requirePermissions?: string | string[] | ((checker: (name: string) => boolean) => boolean)
-
-    [key: string]: any
-};
-```
-
-### NavigationProvider
-
-```typescript
-import { NavigationItem } from '@vuecs/navigation';
-
-declare type NavigationProvider = {
-    getItems: (
-        tier: number, items: NavigationItem[]
-    ) => Promise<NavigationItem[] | undefined> | undefined | NavigationItem[],
-    getItemsActive: (
-        url: string
-    ) => Promise<NavigationItem[]> | NavigationItem[]
+    meta?: Record<string, any>
 };
 ```
 
 ## Example
 
 For an implementation example, on how to use this library, check out the example
-[package](https://github.com/tada5hi/vuecs/tree/master/examples/basic).
+[package](https://github.com/tada5hi/vuecs/tree/master/examples/nuxt).
 
 ## License
 

package/dist/components/index.d.ts

@@ -1,3 +1,3 @@
-export * from './item';
+export * from './item/module';
 export * from './items';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/components/item/index.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/item/index.ts"],"names":[],"mappings":"AAOA,cAAc,UAAU,CAAC"}

package/dist/components/item/module.d.ts

@@ -0,0 +1,16 @@
+import type { PropType } from 'vue';
+import type { NavigationItemNormalized } from '../../types';
+export declare const VCNavItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<NavigationItemNormalized>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<NavigationItemNormalized>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=module.d.ts.map

package/dist/components/item/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../src/components/item/module.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAI5D,eAAO,MAAM,SAAS;;cAGM,QAAQ,CAAC,wBAAwB,CAAC;;;;;;;cAAlC,QAAQ,CAAC,wBAAwB,CAAC;;;iGAqL5D,CAAC"}

package/dist/components/items/index.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/items/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/items/index.ts"],"names":[],"mappings":"AAOA,cAAc,UAAU,CAAC"}

package/dist/components/items/module.d.ts

@@ -0,0 +1,27 @@
+import type { PropType } from 'vue';
+import type { NavigationItemNormalized } from '../../types';
+export declare const VCNavItems: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+    data: {
+        type: PropType<NavigationItemNormalized[]>;
+        default: any;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+    data: {
+        type: PropType<NavigationItemNormalized[]>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    level: number;
+    data: NavigationItemNormalized[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=module.d.ts.map

package/dist/components/items/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../src/components/items/module.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACR,QAAQ,EAGX,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAI5D,eAAO,MAAM,UAAU;;;;;;cAOI,QAAQ,CAAC,wBAAwB,EAAE,CAAC;;;;;;;;;;;cAApC,QAAQ,CAAC,wBAAwB,EAAE,CAAC;;;;;;4EA2E7D,CAAC"}

package/dist/helpers/component/build.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentOptions } from './types';
+export declare function buildComponentOptions(): ComponentOptions;
+//# sourceMappingURL=build.d.ts.map

package/dist/helpers/component/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/helpers/component/build.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,qBAAqB,IAAK,gBAAgB,CAyBzD"}

package/dist/helpers/component/index.d.ts

@@ -0,0 +1,3 @@
+export * from './build';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/helpers/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/component/index.ts"],"names":[],"mappings":"AAOA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/helpers/component/types.d.ts

@@ -0,0 +1,17 @@
+import type { VNodeClass } from '@vuecs/core';
+export type ComponentOptions = {
+    groupClass: VNodeClass;
+    groupTag: VNodeClass;
+    subGroupTitleClass: VNodeClass;
+    subGroupItemsClass: VNodeClass;
+    itemClass: VNodeClass;
+    itemTag: string;
+    separatorTag: string;
+    separatorClass: VNodeClass;
+    iconClass: VNodeClass;
+    linkClass: VNodeClass;
+    linkRootClass?: VNodeClass;
+    linkTextTag: string;
+    linkTextClass: VNodeClass;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/helpers/component/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/helpers/component/types.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,UAAU,CAAC;IAErB,kBAAkB,EAAE,UAAU,CAAC;IAC/B,kBAAkB,EAAE,UAAU,CAAC;IAE/B,SAAS,EAAE,UAAU,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAEhB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,UAAU,CAAC;IAE3B,SAAS,EAAE,UAAU,CAAA;IAErB,SAAS,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,UAAU,CAAC;CAC7B,CAAC"}

package/dist/helpers/index.d.ts

@@ -0,0 +1,8 @@
+export * from './component';
+export * from './match';
+export * from './normalize';
+export * from './reset';
+export * from './level';
+export * from './trace';
+export * from './url';
+//# sourceMappingURL=index.d.ts.map

package/dist/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC"}

package/dist/helpers/level.d.ts

@@ -0,0 +1,11 @@
+type LevelRecord = {
+    level: number;
+    [key: string]: any;
+};
+export declare function findItemsWithLevel<T extends LevelRecord>(items: T[], tier: number): T[];
+export declare function findItemWithLevel<T extends LevelRecord>(tier: number, items: T[]): T | undefined;
+export declare function removeItemsWithLevel<T extends LevelRecord>(tier: number, items: T[]): T[];
+export declare function replaceLevelItem<T extends LevelRecord>(tier: number, input: T[], next: T | undefined): T[];
+export declare function replaceLevelItems<T extends LevelRecord>(tier: number, src: T[], next: T[]): T[];
+export {};
+//# sourceMappingURL=level.d.ts.map

package/dist/helpers/level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"level.d.ts","sourceRoot":"","sources":["../../src/helpers/level.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACrB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EACpD,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,MAAM,GACZ,CAAC,EAAE,CAEN;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACnD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,EAAE,GACV,CAAC,GAAG,SAAS,CAOhB;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,EACtD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,EAAE,GACV,CAAC,EAAE,CAEN;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAClD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,CAAC,GAAG,SAAS,GACpB,CAAC,EAAE,CAaL;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACnD,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,CAAC,EAAE,EACR,IAAI,EAAE,CAAC,EAAE,GACT,CAAC,EAAE,CAON"}

package/dist/helpers/match.d.ts

@@ -0,0 +1,7 @@
+import type { NavigationItemNormalized } from '../types';
+type ItemMatchesFindOptions = {
+    path?: string;
+};
+export declare function findBestItemMatches(items: NavigationItemNormalized[], options?: ItemMatchesFindOptions): NavigationItemNormalized[];
+export {};
+//# sourceMappingURL=match.d.ts.map

package/dist/helpers/match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../src/helpers/match.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAMzD,KAAK,sBAAsB,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAqDF,wBAAgB,mBAAmB,CAC/B,KAAK,EAAE,wBAAwB,EAAE,EACjC,OAAO,GAAE,sBAA2B,GACpC,wBAAwB,EAAE,CAU7B"}

package/dist/helpers/normalize.d.ts

@@ -0,0 +1,8 @@
+import type { NavigationItem, NavigationItemNormalized } from '../types';
+type NormalizeItemOptions = {
+    level: number;
+};
+export declare function normalizeItem(item: NavigationItem, defaults: NormalizeItemOptions): NavigationItemNormalized;
+export declare function normalizeItems(items: NavigationItem[], options: NormalizeItemOptions): NavigationItemNormalized[];
+export {};
+//# sourceMappingURL=normalize.d.ts.map

package/dist/helpers/normalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.d.ts","sourceRoot":"","sources":["../../src/helpers/normalize.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzE,KAAK,oBAAoB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CAChB,CAAC;AA4BF,wBAAgB,aAAa,CACzB,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,oBAAoB,GAC9B,wBAAwB,CAE3B;AAED,wBAAgB,cAAc,CAC1B,KAAK,EAAE,cAAc,EAAE,EACvB,OAAO,EAAE,oBAAoB,GAC7B,wBAAwB,EAAE,CAE7B"}

package/dist/helpers/reset.d.ts

@@ -0,0 +1,3 @@
+import type { NavigationItemNormalized } from '../types';
+export declare function resetItemsByTrace(items: NavigationItemNormalized[], trace: string[]): NavigationItemNormalized[];
+//# sourceMappingURL=reset.d.ts.map

package/dist/helpers/reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.d.ts","sourceRoot":"","sources":["../../src/helpers/reset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AA0BzD,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,wBAAwB,EAAE,EACjC,KAAK,EAAE,MAAM,EAAE,8BAGlB"}

package/dist/helpers/trace.d.ts

@@ -0,0 +1,3 @@
+export declare function isTraceEqual(a: string[], b: string[]): boolean;
+export declare function isTracePartOf(item: string[], parent: string[]): boolean;
+//# sourceMappingURL=trace.d.ts.map

package/dist/helpers/trace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../../src/helpers/trace.ts"],"names":[],"mappings":"AAOA,wBAAgB,YAAY,CACxB,CAAC,EAAE,MAAM,EAAE,EACX,CAAC,EAAE,MAAM,EAAE,GACZ,OAAO,CAYT;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAQ7D"}

package/dist/helpers/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/helpers/url.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAGlD"}