@xyz/navigation 1.2.3 → 2.0.1
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.cjs
CHANGED
|
@@ -105,26 +105,16 @@ export {}
|
|
|
105
105
|
return `export const translationResolver = ${resolverFn}`;
|
|
106
106
|
}
|
|
107
107
|
});
|
|
108
|
-
if (
|
|
109
|
-
|
|
110
|
-
filename: "navigation-config.mjs",
|
|
111
|
-
getContents: () => `export default ${JSON.stringify(options.items, null, 2)}`
|
|
112
|
-
});
|
|
108
|
+
if (navigationConfigFromFile) {
|
|
109
|
+
const navConfigPath = resolver.resolve(nuxt.options.rootDir, "navigation.config.ts");
|
|
113
110
|
kit.addImports({
|
|
114
111
|
name: "default",
|
|
115
112
|
as: "navigationConfig",
|
|
116
|
-
from:
|
|
113
|
+
from: navConfigPath
|
|
117
114
|
});
|
|
118
115
|
if (nuxt.options.dev) {
|
|
119
116
|
console.log("[xyz-navigation] Using navigation configuration from config files");
|
|
120
117
|
}
|
|
121
|
-
} else if (navigationConfigFromFile) {
|
|
122
|
-
const navConfigPath = resolver.resolve(nuxt.options.rootDir, "navigation.config.ts");
|
|
123
|
-
kit.addImports({
|
|
124
|
-
name: "default",
|
|
125
|
-
as: "navigationConfig",
|
|
126
|
-
from: navConfigPath
|
|
127
|
-
});
|
|
128
118
|
}
|
|
129
119
|
}
|
|
130
120
|
});
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -102,26 +102,16 @@ export {}
|
|
|
102
102
|
return `export const translationResolver = ${resolverFn}`;
|
|
103
103
|
}
|
|
104
104
|
});
|
|
105
|
-
if (
|
|
106
|
-
|
|
107
|
-
filename: "navigation-config.mjs",
|
|
108
|
-
getContents: () => `export default ${JSON.stringify(options.items, null, 2)}`
|
|
109
|
-
});
|
|
105
|
+
if (navigationConfigFromFile) {
|
|
106
|
+
const navConfigPath = resolver.resolve(nuxt.options.rootDir, "navigation.config.ts");
|
|
110
107
|
addImports({
|
|
111
108
|
name: "default",
|
|
112
109
|
as: "navigationConfig",
|
|
113
|
-
from:
|
|
110
|
+
from: navConfigPath
|
|
114
111
|
});
|
|
115
112
|
if (nuxt.options.dev) {
|
|
116
113
|
console.log("[xyz-navigation] Using navigation configuration from config files");
|
|
117
114
|
}
|
|
118
|
-
} else if (navigationConfigFromFile) {
|
|
119
|
-
const navConfigPath = resolver.resolve(nuxt.options.rootDir, "navigation.config.ts");
|
|
120
|
-
addImports({
|
|
121
|
-
name: "default",
|
|
122
|
-
as: "navigationConfig",
|
|
123
|
-
from: navConfigPath
|
|
124
|
-
});
|
|
125
115
|
}
|
|
126
116
|
}
|
|
127
117
|
});
|
|
@@ -1,21 +1,30 @@
|
|
|
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
|
* ```
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
18
22
|
* Main composable for context-aware navigation
|
|
19
|
-
*
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```ts
|
|
26
|
+
* // navigationConfig is auto-imported globally
|
|
27
|
+
* const { app, organization } = useNavigation(navigationConfig)
|
|
28
|
+
* ```
|
|
20
29
|
*/
|
|
21
|
-
export declare function useNavigation<T extends Record<string,
|
|
30
|
+
export declare function useNavigation<T extends Record<string, NavigationItemConfig[]>>(config: NavigationConfig<T>, options?: UseNavigationOptions): NavigationResult<T>;
|
|
@@ -1,22 +1,18 @@
|
|
|
1
1
|
import { computed, isRef, unref } from "vue";
|
|
2
2
|
import { useNuxtApp } from "#app";
|
|
3
|
-
import navigationConfig from "#build/navigation-config";
|
|
4
3
|
import { useNavigationContext } from "./useNavigationContext.js";
|
|
5
4
|
import { processNavigationItems } from "../utils/processor.js";
|
|
6
5
|
import { createTemplateRegistry } from "../config/default-templates.js";
|
|
7
6
|
import { validateNavigationConfig } from "../utils/validators.js";
|
|
8
7
|
import { computeActiveStates } from "../utils/active-state.js";
|
|
9
|
-
function
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
export function useNavigation(config = navigationConfig, options = {}) {
|
|
13
|
-
if (!config) {
|
|
8
|
+
export function useNavigation(config, options = {}) {
|
|
9
|
+
if (!config || !config.sections) {
|
|
14
10
|
throw new Error(
|
|
15
|
-
"[xyz-navigation] No navigation config provided
|
|
11
|
+
"[xyz-navigation] No navigation config provided.\nUsage: useNavigation(navigationConfig)\nMake sure you have navigation.config.ts at project root."
|
|
16
12
|
);
|
|
17
13
|
}
|
|
18
14
|
if (process.dev) {
|
|
19
|
-
validateNavigationConfig(config);
|
|
15
|
+
validateNavigationConfig(config.sections);
|
|
20
16
|
}
|
|
21
17
|
const baseContext = useNavigationContext();
|
|
22
18
|
const context = computed(() => {
|
|
@@ -35,40 +31,13 @@ export function useNavigation(config = navigationConfig, options = {}) {
|
|
|
35
31
|
templates,
|
|
36
32
|
translationFn: translateFn
|
|
37
33
|
};
|
|
38
|
-
const sectionsRaw = Object.keys(config).reduce((acc, key) => {
|
|
34
|
+
const sectionsRaw = Object.keys(config.sections).reduce((acc, key) => {
|
|
39
35
|
const sectionKey = key;
|
|
40
|
-
const section = config[sectionKey];
|
|
36
|
+
const section = config.sections[sectionKey];
|
|
41
37
|
acc[sectionKey] = computed(() => {
|
|
42
38
|
const ctx = context.value;
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
if (section.header) {
|
|
46
|
-
result.header = typeof section.header === "function" ? section.header(ctx) : section.header;
|
|
47
|
-
}
|
|
48
|
-
if (section.items) {
|
|
49
|
-
const items = processNavigationItems(section.items, ctx, processingOptions);
|
|
50
|
-
result.items = computeActiveStates(items, ctx.route.path);
|
|
51
|
-
}
|
|
52
|
-
if (section.children) {
|
|
53
|
-
const children = processNavigationItems(section.children, ctx, processingOptions);
|
|
54
|
-
result.children = computeActiveStates(children, ctx.route.path);
|
|
55
|
-
}
|
|
56
|
-
if (section.footer) {
|
|
57
|
-
const footer = processNavigationItems(section.footer, ctx, processingOptions);
|
|
58
|
-
result.footer = computeActiveStates(footer, ctx.route.path);
|
|
59
|
-
}
|
|
60
|
-
} else {
|
|
61
|
-
const items = processNavigationItems(
|
|
62
|
-
section,
|
|
63
|
-
ctx,
|
|
64
|
-
processingOptions
|
|
65
|
-
);
|
|
66
|
-
result.items = computeActiveStates(items, ctx.route.path);
|
|
67
|
-
result.header = void 0;
|
|
68
|
-
result.children = [];
|
|
69
|
-
result.footer = [];
|
|
70
|
-
}
|
|
71
|
-
return result;
|
|
39
|
+
const items = processNavigationItems(section, ctx, processingOptions);
|
|
40
|
+
return computeActiveStates(items, ctx.route.path);
|
|
72
41
|
});
|
|
73
42
|
return acc;
|
|
74
43
|
}, {});
|
|
@@ -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
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* Nested section configuration
|
|
149
|
-
*/
|
|
150
|
-
export interface NestedSectionConfig {
|
|
151
|
-
/**
|
|
152
|
-
* Header data (avatar, title, subtitle)
|
|
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
|
-
}
|
|
136
|
+
export type NavigationSection = NavigationItemConfig[];
|
|
172
137
|
/**
|
|
173
|
-
*
|
|
138
|
+
* Navigation configuration
|
|
174
139
|
*/
|
|
175
|
-
export
|
|
176
|
-
|
|
177
|
-
|
|
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
|
*/
|
|
@@ -218,7 +172,7 @@ export type NavigationResult<T extends Record<string, NavigationSection>> = {
|
|
|
218
172
|
/**
|
|
219
173
|
* All sections grouped in a single computed ref
|
|
220
174
|
*/
|
|
221
|
-
sections: import('vue').ComputedRef<Record<keyof T,
|
|
175
|
+
sections: import('vue').ComputedRef<Record<keyof T, NavigationMenuItem[]>>;
|
|
222
176
|
/**
|
|
223
177
|
* Navigation context
|
|
224
178
|
*/
|
|
@@ -228,7 +182,7 @@ export type NavigationResult<T extends Record<string, NavigationSection>> = {
|
|
|
228
182
|
*/
|
|
229
183
|
refresh: () => void;
|
|
230
184
|
} & {
|
|
231
|
-
[K in keyof T]: import('vue').ComputedRef<
|
|
185
|
+
[K in keyof T]: import('vue').ComputedRef<NavigationMenuItem[]>;
|
|
232
186
|
};
|
|
233
187
|
/**
|
|
234
188
|
* Sidebar state options
|