@rivinia/menu 0.3.3 → 0.3.4
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 +55 -43
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ UI. The menu follows the WAI-ARIA menu-button interaction pattern; it is for
|
|
|
5
5
|
actions, not a menubar or a general-purpose listbox.
|
|
6
6
|
|
|
7
7
|
- Install: `npm install @rivinia/menu`
|
|
8
|
-
-
|
|
8
|
+
- Package version: **0.3.4**
|
|
9
9
|
- Angular peer dependency: `@angular/core ^22.0.0`
|
|
10
10
|
- `@rivinia/menu` exports the headless controller and types.
|
|
11
11
|
- `@rivinia/menu/ui` exports the standalone menu component and item directive.
|
|
@@ -24,16 +24,7 @@ import { RiviniaMenuComponent } from '@rivinia/menu/ui';
|
|
|
24
24
|
@Component({
|
|
25
25
|
standalone: true,
|
|
26
26
|
imports: [RiviniaMenuComponent],
|
|
27
|
-
|
|
28
|
-
<rv-menu
|
|
29
|
-
[items]="accountActions"
|
|
30
|
-
menuLabel="Account actions"
|
|
31
|
-
placement="bottom-end"
|
|
32
|
-
(picked)="onPicked($event)"
|
|
33
|
-
>
|
|
34
|
-
<button type="button" rvMenuTrigger>Account</button>
|
|
35
|
-
</rv-menu>
|
|
36
|
-
`,
|
|
27
|
+
templateUrl: './account-menu.component.html',
|
|
37
28
|
})
|
|
38
29
|
export class AccountMenu {
|
|
39
30
|
readonly accountActions: readonly RiviniaMenuItemData[] = [
|
|
@@ -43,29 +34,45 @@ export class AccountMenu {
|
|
|
43
34
|
];
|
|
44
35
|
|
|
45
36
|
onPicked(pick: MenuPick): void {
|
|
46
|
-
// picked is an object; use pick.id, not the event itself as a string.
|
|
47
37
|
console.log('Selected action:', pick.id);
|
|
48
38
|
}
|
|
49
39
|
}
|
|
50
40
|
```
|
|
51
41
|
|
|
42
|
+
```html
|
|
43
|
+
<!-- src/app/account-menu.component.html -->
|
|
44
|
+
<rv-menu
|
|
45
|
+
[items]="accountActions"
|
|
46
|
+
menuLabel="Account actions"
|
|
47
|
+
placement="bottom-end"
|
|
48
|
+
(picked)="onPicked($event)"
|
|
49
|
+
>
|
|
50
|
+
<button type="button" rvMenuTrigger>Account</button>
|
|
51
|
+
</rv-menu>
|
|
52
|
+
```
|
|
53
|
+
|
|
52
54
|
`menuLabel` provides the accessible name for the menu panel and is
|
|
53
55
|
recommended. The trigger is consumer markup; the component adds its menu
|
|
54
56
|
button ARIA state and handles its keyboard activation. There are no service
|
|
55
57
|
providers or global styles to configure.
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
`(picked)` is the output name; `onPicked` is only the example handler method
|
|
60
|
+
name. Rename it freely (for example, `(picked)="onSelect($event)"`) and use
|
|
61
|
+
`$event.id` for the selected action ID.
|
|
59
62
|
|
|
60
|
-
|
|
61
|
-
import { NgModule } from '@angular/core';
|
|
62
|
-
import { RiviniaMenuComponent } from '@rivinia/menu/ui';
|
|
63
|
+
The main template pieces have distinct jobs:
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
| Template piece | What it does |
|
|
66
|
+
| -------------------------- | -------------------------------------------------------------------------------- |
|
|
67
|
+
| `<rv-menu>` | Owns open/close behavior, positioning, keyboard handling, and the panel. |
|
|
68
|
+
| `[items]="accountActions"` | Renders the supplied `{ id, label, disabled? }` rows. |
|
|
69
|
+
| `menuLabel` | Gives assistive technology an accessible name for the menu. |
|
|
70
|
+
| `placement` | Chooses the preferred logical side of the trigger; the panel can flip to fit. |
|
|
71
|
+
| `rvMenuTrigger` | Marks consumer-provided trigger content and enables menu-button interaction. |
|
|
72
|
+
| `rvMenuPanel` | Marks the custom projected panel when using custom content instead of `[items]`. |
|
|
73
|
+
| `rvMenuItem` | Registers one interactive custom row; give each row a unique stable `id`. |
|
|
74
|
+
| `(picked)` | Fixed output name; emits `{ id }` after an enabled row is selected. |
|
|
75
|
+
| `onPicked($event)` | Consumer-chosen handler name; `$event.id` is the selected row ID. |
|
|
69
76
|
|
|
70
77
|
### Custom panel content
|
|
71
78
|
|
|
@@ -79,17 +86,7 @@ import { RiviniaMenuComponent, RiviniaMenuItem } from '@rivinia/menu/ui';
|
|
|
79
86
|
@Component({
|
|
80
87
|
standalone: true,
|
|
81
88
|
imports: [RiviniaMenuComponent, RiviniaMenuItem],
|
|
82
|
-
|
|
83
|
-
<rv-menu menuLabel="Account actions" (picked)="runAction($event.id)">
|
|
84
|
-
<button type="button" rvMenuTrigger>Account</button>
|
|
85
|
-
|
|
86
|
-
<div rvMenuPanel>
|
|
87
|
-
<p class="menu-heading">Signed in as Ada</p>
|
|
88
|
-
<button type="button" rvMenuItem id="profile">Profile</button>
|
|
89
|
-
<button type="button" rvMenuItem id="sign-out">Sign out</button>
|
|
90
|
-
</div>
|
|
91
|
-
</rv-menu>
|
|
92
|
-
`,
|
|
89
|
+
templateUrl: './custom-account-menu.component.html',
|
|
93
90
|
})
|
|
94
91
|
export class CustomAccountMenu {
|
|
95
92
|
runAction(id: string): void {
|
|
@@ -98,6 +95,18 @@ export class CustomAccountMenu {
|
|
|
98
95
|
}
|
|
99
96
|
```
|
|
100
97
|
|
|
98
|
+
```html
|
|
99
|
+
<!-- src/app/custom-account-menu.component.html -->
|
|
100
|
+
<rv-menu menuLabel="Account actions" (picked)="runAction($event.id)">
|
|
101
|
+
<button type="button" rvMenuTrigger>Account</button>
|
|
102
|
+
<div rvMenuPanel>
|
|
103
|
+
<p class="menu-heading">Signed in as Ada</p>
|
|
104
|
+
<button type="button" rvMenuItem id="profile">Profile</button>
|
|
105
|
+
<button type="button" rvMenuItem id="sign-out">Sign out</button>
|
|
106
|
+
</div>
|
|
107
|
+
</rv-menu>
|
|
108
|
+
```
|
|
109
|
+
|
|
101
110
|
Every `rvMenuItem` needs a unique `id` within its menu. Items register and
|
|
102
111
|
unregister automatically, including rows rendered with `@for`; changing an
|
|
103
112
|
item's `id` or `disabled` state updates its registration. Non-item projected
|
|
@@ -174,16 +183,7 @@ import { RiviniaMenuComponent, RiviniaMenuItem } from '@rivinia/menu/ui';
|
|
|
174
183
|
@Component({
|
|
175
184
|
standalone: true,
|
|
176
185
|
imports: [RiviniaMenuComponent, RiviniaMenuItem],
|
|
177
|
-
|
|
178
|
-
<rv-menu [menu]="menu" menuLabel="Export actions" (picked)="exportAs($event.id)">
|
|
179
|
-
<button type="button" rvMenuTrigger>Export</button>
|
|
180
|
-
<div rvMenuPanel>
|
|
181
|
-
<button type="button" rvMenuItem id="csv">CSV</button>
|
|
182
|
-
<button type="button" rvMenuItem id="json">JSON</button>
|
|
183
|
-
</div>
|
|
184
|
-
</rv-menu>
|
|
185
|
-
<button type="button" (click)="menu.openMenu('last')">Open at last action</button>
|
|
186
|
-
`,
|
|
186
|
+
templateUrl: './export-menu.component.html',
|
|
187
187
|
})
|
|
188
188
|
export class ExportMenu {
|
|
189
189
|
readonly menu = new RiviniaMenu();
|
|
@@ -194,6 +194,18 @@ export class ExportMenu {
|
|
|
194
194
|
}
|
|
195
195
|
```
|
|
196
196
|
|
|
197
|
+
```html
|
|
198
|
+
<!-- src/app/export-menu.component.html -->
|
|
199
|
+
<rv-menu [menu]="menu" menuLabel="Export actions" (picked)="exportAs($event.id)">
|
|
200
|
+
<button type="button" rvMenuTrigger>Export</button>
|
|
201
|
+
<div rvMenuPanel>
|
|
202
|
+
<button type="button" rvMenuItem id="csv">CSV</button>
|
|
203
|
+
<button type="button" rvMenuItem id="json">JSON</button>
|
|
204
|
+
</div>
|
|
205
|
+
</rv-menu>
|
|
206
|
+
<button type="button" (click)="menu.openMenu('last')">Open at last action</button>
|
|
207
|
+
```
|
|
208
|
+
|
|
197
209
|
`RiviniaMenu` has readonly `open`, `activeId`, and `items` signals. Its
|
|
198
210
|
methods include `openMenu('first' | 'last' | 'none')`, `closeMenu()`,
|
|
199
211
|
`toggle()`, `activate(id)`, `activateFirst()`, `activateLast()`,
|