@xyz/navigation 1.2.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import type { NavigationConfig, NavigationResult, UseNavigationOptions,
|
|
1
|
+
import type { NavigationConfig, NavigationResult, UseNavigationOptions, NavigationItemConfig } from '../types/index.js';
|
|
2
2
|
/**
|
|
3
|
-
* Main navigation
|
|
4
|
-
*
|
|
3
|
+
* Main composable for context-aware navigation
|
|
4
|
+
* Auto-uses navigationConfig if no config provided
|
|
5
5
|
*
|
|
6
6
|
* @example
|
|
7
7
|
* ```ts
|
|
8
8
|
* const config = {
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* sections: {
|
|
10
|
+
* app: [
|
|
11
|
+
* { label: 'Dashboard', to: '{org}', icon: 'i-lucide-layout-dashboard' },
|
|
12
|
+
* { label: 'Settings', to: '{org}/settings', icon: 'i-lucide-settings' }
|
|
13
|
+
* ]
|
|
14
|
+
* }
|
|
13
15
|
* }
|
|
14
16
|
*
|
|
15
|
-
* const {
|
|
16
|
-
* //
|
|
17
|
+
* const { app } = useNavigation(config)
|
|
18
|
+
* // app.value → processed items array
|
|
17
19
|
* ```
|
|
18
|
-
* Main composable for context-aware navigation
|
|
19
|
-
* Auto-uses navigationConfig if no config provided
|
|
20
20
|
*/
|
|
21
|
-
export declare function useNavigation<T extends Record<string,
|
|
21
|
+
export declare function useNavigation<T extends Record<string, NavigationItemConfig[]>>(config?: NavigationConfig<T>, options?: UseNavigationOptions): NavigationResult<T>;
|
|
@@ -6,12 +6,14 @@ import { processNavigationItems } from "../utils/processor.js";
|
|
|
6
6
|
import { createTemplateRegistry } from "../config/default-templates.js";
|
|
7
7
|
import { validateNavigationConfig } from "../utils/validators.js";
|
|
8
8
|
import { computeActiveStates } from "../utils/active-state.js";
|
|
9
|
-
function isNestedSection(section) {
|
|
10
|
-
return typeof section === "object" && !Array.isArray(section) && ("items" in section || "children" in section || "footer" in section || "header" in section);
|
|
11
|
-
}
|
|
12
9
|
export function useNavigation(config = navigationConfig, options = {}) {
|
|
13
|
-
if (
|
|
14
|
-
|
|
10
|
+
if (!config || !config.sections) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
"[xyz-navigation] No navigation config provided. Either create navigation.config.ts or pass config to useNavigation(config)."
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
if (process.dev) {
|
|
16
|
+
validateNavigationConfig(config.sections);
|
|
15
17
|
}
|
|
16
18
|
const baseContext = useNavigationContext();
|
|
17
19
|
const context = computed(() => {
|
|
@@ -30,40 +32,13 @@ export function useNavigation(config = navigationConfig, options = {}) {
|
|
|
30
32
|
templates,
|
|
31
33
|
translationFn: translateFn
|
|
32
34
|
};
|
|
33
|
-
const sectionsRaw = Object.keys(config).reduce((acc, key) => {
|
|
35
|
+
const sectionsRaw = Object.keys(config.sections).reduce((acc, key) => {
|
|
34
36
|
const sectionKey = key;
|
|
35
|
-
const section = config[sectionKey];
|
|
37
|
+
const section = config.sections[sectionKey];
|
|
36
38
|
acc[sectionKey] = computed(() => {
|
|
37
39
|
const ctx = context.value;
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
if (section.header) {
|
|
41
|
-
result.header = section.header(ctx);
|
|
42
|
-
}
|
|
43
|
-
if (section.items) {
|
|
44
|
-
const items = processNavigationItems(section.items, ctx, processingOptions);
|
|
45
|
-
result.items = computeActiveStates(items, ctx.route.path);
|
|
46
|
-
}
|
|
47
|
-
if (section.children) {
|
|
48
|
-
const children = processNavigationItems(section.children, ctx, processingOptions);
|
|
49
|
-
result.children = computeActiveStates(children, ctx.route.path);
|
|
50
|
-
}
|
|
51
|
-
if (section.footer) {
|
|
52
|
-
const footer = processNavigationItems(section.footer, ctx, processingOptions);
|
|
53
|
-
result.footer = computeActiveStates(footer, ctx.route.path);
|
|
54
|
-
}
|
|
55
|
-
} else {
|
|
56
|
-
const items = processNavigationItems(
|
|
57
|
-
section,
|
|
58
|
-
ctx,
|
|
59
|
-
processingOptions
|
|
60
|
-
);
|
|
61
|
-
result.items = computeActiveStates(items, ctx.route.path);
|
|
62
|
-
result.header = void 0;
|
|
63
|
-
result.children = [];
|
|
64
|
-
result.footer = [];
|
|
65
|
-
}
|
|
66
|
-
return result;
|
|
40
|
+
const items = processNavigationItems(section, ctx, processingOptions);
|
|
41
|
+
return computeActiveStates(items, ctx.route.path);
|
|
67
42
|
});
|
|
68
43
|
return acc;
|
|
69
44
|
}, {});
|
|
@@ -125,67 +125,21 @@ export interface NavigationItemConfig {
|
|
|
125
125
|
divider?: boolean;
|
|
126
126
|
}
|
|
127
127
|
/**
|
|
128
|
-
* Processed navigation menu item (
|
|
128
|
+
* Processed navigation menu item (with active state)
|
|
129
129
|
*/
|
|
130
|
-
export interface NavigationMenuItem extends
|
|
131
|
-
to?: string;
|
|
132
|
-
children?: NavigationMenuItem[];
|
|
130
|
+
export interface NavigationMenuItem extends NavigationItemConfig {
|
|
133
131
|
active?: boolean;
|
|
134
132
|
}
|
|
135
133
|
/**
|
|
136
|
-
*
|
|
134
|
+
* Navigation section - always a flat array of items
|
|
137
135
|
*/
|
|
138
|
-
export
|
|
139
|
-
title?: string;
|
|
140
|
-
subtitle?: string;
|
|
141
|
-
avatar?: {
|
|
142
|
-
src?: string | null;
|
|
143
|
-
icon?: string;
|
|
144
|
-
fallback?: string;
|
|
145
|
-
};
|
|
146
|
-
}
|
|
136
|
+
export type NavigationSection = NavigationItemConfig[];
|
|
147
137
|
/**
|
|
148
|
-
*
|
|
138
|
+
* Navigation configuration
|
|
149
139
|
*/
|
|
150
|
-
export
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
*/
|
|
154
|
-
header?: (ctx: NavigationContext) => SectionHeader;
|
|
155
|
-
/**
|
|
156
|
-
* Base path for relative path resolution
|
|
157
|
-
*/
|
|
158
|
-
basePath?: string | ((ctx: NavigationContext) => string);
|
|
159
|
-
/**
|
|
160
|
-
* Main navigation items
|
|
161
|
-
*/
|
|
162
|
-
items?: NavigationItemConfig[];
|
|
163
|
-
/**
|
|
164
|
-
* Child/secondary items
|
|
165
|
-
*/
|
|
166
|
-
children?: NavigationItemConfig[];
|
|
167
|
-
/**
|
|
168
|
-
* Footer items
|
|
169
|
-
*/
|
|
170
|
-
footer?: NavigationItemConfig[];
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Processed nested section (after resolution)
|
|
174
|
-
*/
|
|
175
|
-
export interface ProcessedNestedSection {
|
|
176
|
-
header?: SectionHeader;
|
|
177
|
-
items?: NavigationMenuItem[];
|
|
178
|
-
children?: NavigationMenuItem[];
|
|
179
|
-
footer?: NavigationMenuItem[];
|
|
180
|
-
}
|
|
181
|
-
/**
|
|
182
|
-
* Section can be flat array or nested object
|
|
183
|
-
*/
|
|
184
|
-
export type NavigationSection = NavigationItemConfig[] | NestedSectionConfig;
|
|
185
|
-
/**
|
|
186
|
-
* Navigation configuration type
|
|
187
|
-
*/
|
|
188
|
-
export type NavigationConfig = Record<string, NavigationSection>;
|
|
140
|
+
export type NavigationConfig<T extends Record<string, NavigationSection> = Record<string, NavigationSection>> = {
|
|
141
|
+
sections: T;
|
|
142
|
+
};
|
|
189
143
|
/**
|
|
190
144
|
* Options for useNavigation composable
|
|
191
145
|
*/
|
|
@@ -212,24 +166,24 @@ export interface UseNavigationOptions {
|
|
|
212
166
|
translationFn?: (key: string) => string;
|
|
213
167
|
}
|
|
214
168
|
/**
|
|
215
|
-
* Result
|
|
169
|
+
* Result returned by useNavigation composable
|
|
216
170
|
*/
|
|
217
|
-
export
|
|
171
|
+
export type NavigationResult<T extends Record<string, NavigationSection>> = {
|
|
218
172
|
/**
|
|
219
|
-
*
|
|
173
|
+
* All sections grouped in a single computed ref
|
|
220
174
|
*/
|
|
221
|
-
sections:
|
|
222
|
-
[K in keyof T]: import('vue').ComputedRef<NavigationMenuItem[]>;
|
|
223
|
-
};
|
|
175
|
+
sections: import('vue').ComputedRef<Record<keyof T, NavigationMenuItem[]>>;
|
|
224
176
|
/**
|
|
225
|
-
*
|
|
177
|
+
* Navigation context
|
|
226
178
|
*/
|
|
227
179
|
context: import('vue').ComputedRef<NavigationContext>;
|
|
228
180
|
/**
|
|
229
|
-
*
|
|
181
|
+
* Force refresh/recompute navigation
|
|
230
182
|
*/
|
|
231
183
|
refresh: () => void;
|
|
232
|
-
}
|
|
184
|
+
} & {
|
|
185
|
+
[K in keyof T]: import('vue').ComputedRef<NavigationMenuItem[]>;
|
|
186
|
+
};
|
|
233
187
|
/**
|
|
234
188
|
* Sidebar state options
|
|
235
189
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyz/navigation",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Context-aware, type-safe navigation for multi-tenant Nuxt applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -47,14 +47,6 @@
|
|
|
47
47
|
],
|
|
48
48
|
"author": "xyz",
|
|
49
49
|
"license": "MIT",
|
|
50
|
-
"repository": {
|
|
51
|
-
"type": "git",
|
|
52
|
-
"url": "git+https://github.com/xyzhub/xyz-navigation.git"
|
|
53
|
-
},
|
|
54
|
-
"bugs": {
|
|
55
|
-
"url": "https://github.com/xyzhub/xyz-navigation/issues"
|
|
56
|
-
},
|
|
57
|
-
"homepage": "https://github.com/xyzhub/xyz-navigation#readme",
|
|
58
50
|
"dependencies": {
|
|
59
51
|
"defu": "^6.1.4"
|
|
60
52
|
},
|