@record-evolution/widget-sidenav 1.0.12 → 1.0.13
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/README.md +122 -12
- package/dist/widget-sidenav.js +2 -2
- package/package.json +1 -1
- package/src/definition-schema.d.ts +34 -7
- package/src/definition-schema.json +16 -7
package/README.md
CHANGED
|
@@ -1,35 +1,145 @@
|
|
|
1
|
-
#
|
|
1
|
+
# widget-sidenav
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
IronFlock widget: A Lit 3.x web component that renders a vertical side navigation menu with Material Design icons. Supports route-based highlighting and emits navigation events for integration with SPA routers.
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
|
-
npm i widget-sidenav
|
|
10
|
+
npm i @record-evolution/widget-sidenav
|
|
9
11
|
```
|
|
10
12
|
|
|
13
|
+
**Peer Dependencies:** This widget requires `@material/web` to be available at runtime via import map or bundled separately.
|
|
14
|
+
|
|
11
15
|
## Usage
|
|
12
16
|
|
|
13
17
|
```html
|
|
14
18
|
<script type="module">
|
|
15
|
-
import '
|
|
19
|
+
import '@record-evolution/widget-sidenav'
|
|
16
20
|
</script>
|
|
17
21
|
|
|
18
|
-
<widget-sidenav></widget-sidenav>
|
|
22
|
+
<widget-sidenav-1.0.12></widget-sidenav-1.0.12>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
> **Note:** The element tag includes the version number (e.g., `widget-sidenav-1.0.12`). This is replaced at build time via `@rollup/plugin-replace`.
|
|
26
|
+
|
|
27
|
+
## Configuration
|
|
28
|
+
|
|
29
|
+
The widget accepts an `inputData` property with the following structure:
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
interface InputData {
|
|
33
|
+
title?: string
|
|
34
|
+
route?: string // Navigation route for title click
|
|
35
|
+
leadingSlash?: boolean // Add leading slash to routes
|
|
36
|
+
trailingSlash?: boolean // Add trailing slash to routes
|
|
37
|
+
style?: {
|
|
38
|
+
fontSize?: number
|
|
39
|
+
fontWeight?: number
|
|
40
|
+
color?: string // Font color
|
|
41
|
+
backgroundColor?: string
|
|
42
|
+
}
|
|
43
|
+
navItems?: Array<{
|
|
44
|
+
label?: string
|
|
45
|
+
iconName?: string // Material icon name (e.g., "home", "settings")
|
|
46
|
+
route?: string // Navigation route on click
|
|
47
|
+
leadingSlash?: boolean
|
|
48
|
+
trailingSlash?: boolean
|
|
49
|
+
}>
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Example Configuration
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
element.inputData = {
|
|
57
|
+
title: 'Dashboard',
|
|
58
|
+
route: '/',
|
|
59
|
+
style: {
|
|
60
|
+
fontSize: 16,
|
|
61
|
+
fontWeight: 500
|
|
62
|
+
},
|
|
63
|
+
navItems: [
|
|
64
|
+
{ label: 'Home', iconName: 'home', route: '/' },
|
|
65
|
+
{ label: 'Analytics', iconName: 'analytics', route: '/analytics' },
|
|
66
|
+
{ label: 'Settings', iconName: 'settings', route: '/settings' }
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Navigation Events
|
|
72
|
+
|
|
73
|
+
When a navigation item is clicked, the widget dispatches a `nav-submit` custom event:
|
|
74
|
+
|
|
75
|
+
```javascript
|
|
76
|
+
element.addEventListener('nav-submit', (e) => {
|
|
77
|
+
console.log(e.detail)
|
|
78
|
+
// { path: "/settings" }
|
|
79
|
+
})
|
|
19
80
|
```
|
|
20
81
|
|
|
21
|
-
##
|
|
82
|
+
## Route Matching
|
|
22
83
|
|
|
23
|
-
|
|
84
|
+
The widget highlights the active navigation item based on the current route:
|
|
24
85
|
|
|
25
|
-
|
|
86
|
+
```javascript
|
|
87
|
+
element.route = '/settings/profile' // Highlights "Settings" nav item
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
- Routes starting with `/` are matched from the beginning (absolute)
|
|
91
|
+
- Other routes are matched from the end (relative)
|
|
92
|
+
|
|
93
|
+
## Material Icons
|
|
94
|
+
|
|
95
|
+
Icons are rendered using `@material/web` icon component. Use icon names from [Google Material Symbols](https://fonts.google.com/icons):
|
|
96
|
+
|
|
97
|
+
```javascript
|
|
98
|
+
{
|
|
99
|
+
iconName: 'home'
|
|
100
|
+
} // Home icon
|
|
101
|
+
{
|
|
102
|
+
iconName: 'settings'
|
|
103
|
+
} // Settings gear icon
|
|
104
|
+
{
|
|
105
|
+
iconName: 'person'
|
|
106
|
+
} // User profile icon
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Theming
|
|
26
110
|
|
|
27
|
-
|
|
111
|
+
The widget supports theming via CSS custom properties or the `theme` property:
|
|
28
112
|
|
|
29
|
-
|
|
113
|
+
**CSS Custom Properties:**
|
|
114
|
+
|
|
115
|
+
```css
|
|
116
|
+
widget-sidenav-1.0.12 {
|
|
117
|
+
--re-text-color: #333;
|
|
118
|
+
--re-tile-background-color: #fff;
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
**Theme Object:**
|
|
123
|
+
|
|
124
|
+
```javascript
|
|
125
|
+
element.theme = {
|
|
126
|
+
theme_name: 'dark',
|
|
127
|
+
theme_object: {
|
|
128
|
+
backgroundColor: '#1a1a1a',
|
|
129
|
+
title: { textStyle: { color: '#fff' } }
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Development
|
|
30
135
|
|
|
31
136
|
```bash
|
|
32
|
-
npm start
|
|
137
|
+
npm run start # Dev server at localhost:8000/demo/
|
|
138
|
+
npm run build # Production build to dist/
|
|
139
|
+
npm run types # Regenerate TypeScript types from schema
|
|
140
|
+
npm run release # Build, bump version, push to git with tag
|
|
33
141
|
```
|
|
34
142
|
|
|
35
|
-
|
|
143
|
+
## License
|
|
144
|
+
|
|
145
|
+
MIT
|
package/dist/widget-sidenav.js
CHANGED
|
@@ -9,7 +9,7 @@ var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (t, e, o
|
|
|
9
9
|
};
|
|
10
10
|
let s = class extends u {
|
|
11
11
|
constructor() {
|
|
12
|
-
super(...arguments), this.version = "1.0.
|
|
12
|
+
super(...arguments), this.version = "1.0.13";
|
|
13
13
|
}
|
|
14
14
|
update(t) {
|
|
15
15
|
t.has("theme") && this.registerTheme(this.theme), super.update(t);
|
|
@@ -152,7 +152,7 @@ a([
|
|
|
152
152
|
c()
|
|
153
153
|
], s.prototype, "themeTitleColor", 2);
|
|
154
154
|
s = a([
|
|
155
|
-
g("widget-sidenav-1.0.
|
|
155
|
+
g("widget-sidenav-1.0.13")
|
|
156
156
|
], s);
|
|
157
157
|
export {
|
|
158
158
|
s as WidgetSidenav
|
package/package.json
CHANGED
|
@@ -5,38 +5,53 @@
|
|
|
5
5
|
* and run json-schema-to-typescript to regenerate this file.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* The header text displayed at the top of the side navigation, typically used for branding or section identification.
|
|
10
|
+
*/
|
|
8
11
|
export type TitleSettings = string;
|
|
9
12
|
/**
|
|
10
|
-
*
|
|
13
|
+
* The destination path when the title/header is clicked. Use for navigating to a home or main page. Use relative paths or enable leadingSlash for absolute routing.
|
|
11
14
|
*/
|
|
12
15
|
export type TitleNavigation = string;
|
|
13
16
|
/**
|
|
14
|
-
*
|
|
17
|
+
* When enabled, prepends '/' to the title's navigation route making it absolute from the root. When disabled, routes are relative to the current location.
|
|
15
18
|
*/
|
|
16
19
|
export type AddLeadingSlash = boolean;
|
|
17
20
|
/**
|
|
18
|
-
*
|
|
21
|
+
* When enabled, appends '/' to the end of the title's navigation route. Required by some routing configurations.
|
|
19
22
|
*/
|
|
20
23
|
export type AddTraillingSlash = boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Font size in pixels for navigation item labels.
|
|
26
|
+
*/
|
|
21
27
|
export type FontSize = number;
|
|
28
|
+
/**
|
|
29
|
+
* Font weight for navigation items (100=thin, 400=normal, 700=bold, 900=black).
|
|
30
|
+
*/
|
|
22
31
|
export type FontWeight = number;
|
|
32
|
+
/**
|
|
33
|
+
* The text displayed for this navigation item. Should clearly describe the destination section.
|
|
34
|
+
*/
|
|
23
35
|
export type Label = string;
|
|
24
36
|
/**
|
|
25
|
-
*
|
|
37
|
+
* Material icon name displayed alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'dashboard', 'settings', 'analytics', 'people').
|
|
26
38
|
*/
|
|
27
39
|
export type IconName = string;
|
|
28
40
|
/**
|
|
29
|
-
*
|
|
41
|
+
* The destination path when this item is clicked. Use relative paths that append to the current URL, or enable leadingSlash for absolute routing.
|
|
30
42
|
*/
|
|
31
43
|
export type NavigationRoute = string;
|
|
32
44
|
/**
|
|
33
|
-
*
|
|
45
|
+
* When enabled, prepends '/' to this item's route making it absolute from the root.
|
|
34
46
|
*/
|
|
35
47
|
export type AddLeadingSlash1 = boolean;
|
|
36
48
|
/**
|
|
37
|
-
*
|
|
49
|
+
* When enabled, appends '/' to the end of this item's route.
|
|
38
50
|
*/
|
|
39
51
|
export type AddTraillingSlash1 = boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Array of navigation links displayed vertically in the sidebar. Each item can have a label, icon, and destination route.
|
|
54
|
+
*/
|
|
40
55
|
export type NavigationItems = {
|
|
41
56
|
label?: Label;
|
|
42
57
|
iconName?: IconName;
|
|
@@ -46,6 +61,9 @@ export type NavigationItems = {
|
|
|
46
61
|
[k: string]: unknown;
|
|
47
62
|
}[];
|
|
48
63
|
|
|
64
|
+
/**
|
|
65
|
+
* A vertical side navigation widget for creating sidebar menus in dashboards. Use this widget to provide hierarchical or list-based navigation along the side of the dashboard. Features a clickable title/header and multiple navigation items with icons. Supports customizable styling for fonts and colors to match your dashboard theme. Ideal for applications with multiple sections, settings pages, or when you need persistent navigation that doesn't take up header space.
|
|
66
|
+
*/
|
|
49
67
|
export interface InputData {
|
|
50
68
|
title?: TitleSettings;
|
|
51
69
|
route?: TitleNavigation;
|
|
@@ -55,6 +73,9 @@ export interface InputData {
|
|
|
55
73
|
navItems?: NavigationItems;
|
|
56
74
|
[k: string]: unknown;
|
|
57
75
|
}
|
|
76
|
+
/**
|
|
77
|
+
* Global styling options applied to all navigation items in the sidebar.
|
|
78
|
+
*/
|
|
58
79
|
export interface ItemStyle {
|
|
59
80
|
fontSize?: FontSize;
|
|
60
81
|
fontWeight?: FontWeight;
|
|
@@ -62,9 +83,15 @@ export interface ItemStyle {
|
|
|
62
83
|
backgroundColor?: BackgroundColor;
|
|
63
84
|
[k: string]: unknown;
|
|
64
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* Text color for navigation item labels and icons.
|
|
88
|
+
*/
|
|
65
89
|
export interface FontColor {
|
|
66
90
|
[k: string]: unknown;
|
|
67
91
|
}
|
|
92
|
+
/**
|
|
93
|
+
* Background color of the side navigation panel.
|
|
94
|
+
*/
|
|
68
95
|
export interface BackgroundColor {
|
|
69
96
|
[k: string]: unknown;
|
|
70
97
|
}
|
|
@@ -1,57 +1,64 @@
|
|
|
1
1
|
{
|
|
2
2
|
"title": "Input Data",
|
|
3
|
+
"description": "A vertical side navigation widget for creating sidebar menus in dashboards. Use this widget to provide hierarchical or list-based navigation along the side of the dashboard. Features a clickable title/header and multiple navigation items with icons. Supports customizable styling for fonts and colors to match your dashboard theme. Ideal for applications with multiple sections, settings pages, or when you need persistent navigation that doesn't take up header space.",
|
|
3
4
|
"type": "object",
|
|
4
5
|
"properties": {
|
|
5
6
|
"title": {
|
|
6
7
|
"title": "Title Settings",
|
|
8
|
+
"description": "The header text displayed at the top of the side navigation, typically used for branding or section identification.",
|
|
7
9
|
"order": 1,
|
|
8
10
|
"type": "string"
|
|
9
11
|
},
|
|
10
12
|
"route": {
|
|
11
13
|
"title": "Title Navigation",
|
|
12
14
|
"order": 3,
|
|
13
|
-
"description": "
|
|
15
|
+
"description": "The destination path when the title/header is clicked. Use for navigating to a home or main page. Use relative paths or enable leadingSlash for absolute routing.",
|
|
14
16
|
"type": "string"
|
|
15
17
|
},
|
|
16
18
|
"leadingSlash": {
|
|
17
19
|
"title": "Add Leading Slash",
|
|
18
20
|
"order": 4,
|
|
19
|
-
"description": "
|
|
21
|
+
"description": "When enabled, prepends '/' to the title's navigation route making it absolute from the root. When disabled, routes are relative to the current location.",
|
|
20
22
|
"dataDrivenDisabled": true,
|
|
21
23
|
"type": "boolean"
|
|
22
24
|
},
|
|
23
25
|
"trailingSlash": {
|
|
24
26
|
"title": "Add Trailling Slash",
|
|
25
27
|
"order": 5,
|
|
26
|
-
"description": "
|
|
28
|
+
"description": "When enabled, appends '/' to the end of the title's navigation route. Required by some routing configurations.",
|
|
27
29
|
"dataDrivenDisabled": true,
|
|
28
30
|
"type": "boolean"
|
|
29
31
|
},
|
|
30
32
|
"style": {
|
|
31
33
|
"title": "Item Style",
|
|
34
|
+
"description": "Global styling options applied to all navigation items in the sidebar.",
|
|
32
35
|
"order": 6,
|
|
33
36
|
"type": "object",
|
|
34
37
|
"properties": {
|
|
35
38
|
"fontSize": {
|
|
36
39
|
"title": "Font Size",
|
|
40
|
+
"description": "Font size in pixels for navigation item labels.",
|
|
37
41
|
"order": 1,
|
|
38
42
|
"dataDrivenDisabled": true,
|
|
39
43
|
"type": "number"
|
|
40
44
|
},
|
|
41
45
|
"fontWeight": {
|
|
42
46
|
"title": "Font Weight",
|
|
47
|
+
"description": "Font weight for navigation items (100=thin, 400=normal, 700=bold, 900=black).",
|
|
43
48
|
"order": 3,
|
|
44
49
|
"dataDrivenDisabled": true,
|
|
45
50
|
"type": "number"
|
|
46
51
|
},
|
|
47
52
|
"color": {
|
|
48
53
|
"title": "Font Color",
|
|
54
|
+
"description": "Text color for navigation item labels and icons.",
|
|
49
55
|
"order": 4,
|
|
50
56
|
"type": "color",
|
|
51
57
|
"dataDrivenDisabled": true
|
|
52
58
|
},
|
|
53
59
|
"backgroundColor": {
|
|
54
60
|
"title": "Background Color",
|
|
61
|
+
"description": "Background color of the side navigation panel.",
|
|
55
62
|
"order": 4,
|
|
56
63
|
"type": "color",
|
|
57
64
|
"dataDrivenDisabled": true
|
|
@@ -60,6 +67,7 @@
|
|
|
60
67
|
},
|
|
61
68
|
"navItems": {
|
|
62
69
|
"title": "Navigation Items",
|
|
70
|
+
"description": "Array of navigation links displayed vertically in the sidebar. Each item can have a label, icon, and destination route.",
|
|
63
71
|
"order": 7,
|
|
64
72
|
"type": "array",
|
|
65
73
|
"items": {
|
|
@@ -67,33 +75,34 @@
|
|
|
67
75
|
"properties": {
|
|
68
76
|
"label": {
|
|
69
77
|
"title": "Label",
|
|
78
|
+
"description": "The text displayed for this navigation item. Should clearly describe the destination section.",
|
|
70
79
|
"order": 1,
|
|
71
80
|
"type": "string"
|
|
72
81
|
},
|
|
73
82
|
"iconName": {
|
|
74
83
|
"title": "Icon Name",
|
|
75
84
|
"order": 2,
|
|
76
|
-
"description": "
|
|
85
|
+
"description": "Material icon name displayed alongside the label. Find icon names at https://fonts.google.com/icons (e.g., 'dashboard', 'settings', 'analytics', 'people').",
|
|
77
86
|
"dataDrivenDisabled": true,
|
|
78
87
|
"type": "string"
|
|
79
88
|
},
|
|
80
89
|
"route": {
|
|
81
90
|
"title": "Navigation Route",
|
|
82
91
|
"order": 3,
|
|
83
|
-
"description": "
|
|
92
|
+
"description": "The destination path when this item is clicked. Use relative paths that append to the current URL, or enable leadingSlash for absolute routing.",
|
|
84
93
|
"type": "string"
|
|
85
94
|
},
|
|
86
95
|
"leadingSlash": {
|
|
87
96
|
"title": "Add Leading Slash",
|
|
88
97
|
"order": 4,
|
|
89
|
-
"description": "
|
|
98
|
+
"description": "When enabled, prepends '/' to this item's route making it absolute from the root.",
|
|
90
99
|
"dataDrivenDisabled": true,
|
|
91
100
|
"type": "boolean"
|
|
92
101
|
},
|
|
93
102
|
"trailingSlash": {
|
|
94
103
|
"title": "Add Trailling Slash",
|
|
95
104
|
"order": 5,
|
|
96
|
-
"description": "
|
|
105
|
+
"description": "When enabled, appends '/' to the end of this item's route.",
|
|
97
106
|
"dataDrivenDisabled": true,
|
|
98
107
|
"type": "boolean"
|
|
99
108
|
}
|