@vaadin/menu-bar 25.2.0-alpha1 → 25.2.0-alpha10
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/custom-elements.json +145 -2
- package/package.json +15 -15
- package/src/vaadin-menu-bar-item.js +5 -0
- package/src/vaadin-menu-bar-mixin.d.ts +46 -11
- package/src/vaadin-menu-bar-mixin.js +79 -99
- package/src/vaadin-menu-bar-submenu.js +12 -0
- package/src/vaadin-menu-bar-tooltip-controller.js +31 -0
- package/src/vaadin-menu-bar.js +0 -18
- package/web-types.json +14 -41
- package/web-types.lit.json +13 -13
package/custom-elements.json
CHANGED
|
@@ -31,6 +31,20 @@
|
|
|
31
31
|
"name": "close",
|
|
32
32
|
"description": "Closes the current submenu."
|
|
33
33
|
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "field",
|
|
36
|
+
"name": "disabled",
|
|
37
|
+
"privacy": "public",
|
|
38
|
+
"type": {
|
|
39
|
+
"text": "boolean"
|
|
40
|
+
},
|
|
41
|
+
"description": "If true, the user cannot interact with this element.",
|
|
42
|
+
"attribute": "disabled",
|
|
43
|
+
"inheritedFrom": {
|
|
44
|
+
"name": "DisabledMixin",
|
|
45
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
34
48
|
{
|
|
35
49
|
"kind": "field",
|
|
36
50
|
"name": "i18n",
|
|
@@ -52,7 +66,7 @@
|
|
|
52
66
|
"type": {
|
|
53
67
|
"text": "!Array<!MenuBarItem>"
|
|
54
68
|
},
|
|
55
|
-
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled
|
|
69
|
+
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
|
|
56
70
|
"attribute": "items"
|
|
57
71
|
},
|
|
58
72
|
{
|
|
@@ -95,6 +109,18 @@
|
|
|
95
109
|
}
|
|
96
110
|
],
|
|
97
111
|
"attributes": [
|
|
112
|
+
{
|
|
113
|
+
"name": "disabled",
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "boolean"
|
|
116
|
+
},
|
|
117
|
+
"description": "If true, the user cannot interact with this element.",
|
|
118
|
+
"fieldName": "disabled",
|
|
119
|
+
"inheritedFrom": {
|
|
120
|
+
"name": "DisabledMixin",
|
|
121
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
98
124
|
{
|
|
99
125
|
"name": "i18n",
|
|
100
126
|
"type": {
|
|
@@ -172,6 +198,97 @@
|
|
|
172
198
|
}
|
|
173
199
|
]
|
|
174
200
|
},
|
|
201
|
+
{
|
|
202
|
+
"kind": "javascript-module",
|
|
203
|
+
"path": "src/vaadin-menu-bar-tooltip-controller.js",
|
|
204
|
+
"declarations": [
|
|
205
|
+
{
|
|
206
|
+
"kind": "class",
|
|
207
|
+
"description": "Controller for the tooltip slotted into `<vaadin-menu-bar>`. Extends\n`ContextMenuTooltipController` to also support menu-bar buttons as\ntargets, in addition to sub-menu items.",
|
|
208
|
+
"name": "MenuBarTooltipController",
|
|
209
|
+
"members": [
|
|
210
|
+
{
|
|
211
|
+
"kind": "method",
|
|
212
|
+
"name": "close",
|
|
213
|
+
"parameters": [
|
|
214
|
+
{
|
|
215
|
+
"name": "immediate",
|
|
216
|
+
"type": {
|
|
217
|
+
"text": "boolean"
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
],
|
|
221
|
+
"inheritedFrom": {
|
|
222
|
+
"name": "ContextMenuTooltipController",
|
|
223
|
+
"package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"kind": "method",
|
|
228
|
+
"name": "initCustomNode",
|
|
229
|
+
"parameters": [
|
|
230
|
+
{
|
|
231
|
+
"name": "tooltipNode"
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"inheritedFrom": {
|
|
235
|
+
"name": "ContextMenuTooltipController",
|
|
236
|
+
"package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"kind": "method",
|
|
241
|
+
"name": "open",
|
|
242
|
+
"parameters": [
|
|
243
|
+
{
|
|
244
|
+
"name": "{ trigger }"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "options",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "{ trigger: 'hover' | 'focus' }"
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
],
|
|
253
|
+
"inheritedFrom": {
|
|
254
|
+
"name": "ContextMenuTooltipController",
|
|
255
|
+
"package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"kind": "method",
|
|
260
|
+
"name": "setTarget",
|
|
261
|
+
"parameters": [
|
|
262
|
+
{
|
|
263
|
+
"name": "target",
|
|
264
|
+
"type": {
|
|
265
|
+
"text": "HTMLElement | null"
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
],
|
|
269
|
+
"inheritedFrom": {
|
|
270
|
+
"name": "ContextMenuTooltipController",
|
|
271
|
+
"package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
],
|
|
275
|
+
"superclass": {
|
|
276
|
+
"name": "ContextMenuTooltipController",
|
|
277
|
+
"package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
],
|
|
281
|
+
"exports": [
|
|
282
|
+
{
|
|
283
|
+
"kind": "js",
|
|
284
|
+
"name": "MenuBarTooltipController",
|
|
285
|
+
"declaration": {
|
|
286
|
+
"name": "MenuBarTooltipController",
|
|
287
|
+
"module": "src/vaadin-menu-bar-tooltip-controller.js"
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
]
|
|
291
|
+
},
|
|
175
292
|
{
|
|
176
293
|
"kind": "javascript-module",
|
|
177
294
|
"path": "src/vaadin-menu-bar.js",
|
|
@@ -190,6 +307,20 @@
|
|
|
190
307
|
"module": "src/vaadin-menu-bar-mixin.js"
|
|
191
308
|
}
|
|
192
309
|
},
|
|
310
|
+
{
|
|
311
|
+
"kind": "field",
|
|
312
|
+
"name": "disabled",
|
|
313
|
+
"privacy": "public",
|
|
314
|
+
"type": {
|
|
315
|
+
"text": "boolean"
|
|
316
|
+
},
|
|
317
|
+
"description": "If true, the user cannot interact with this element.",
|
|
318
|
+
"attribute": "disabled",
|
|
319
|
+
"inheritedFrom": {
|
|
320
|
+
"name": "DisabledMixin",
|
|
321
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
322
|
+
}
|
|
323
|
+
},
|
|
193
324
|
{
|
|
194
325
|
"kind": "field",
|
|
195
326
|
"name": "i18n",
|
|
@@ -211,7 +342,7 @@
|
|
|
211
342
|
"type": {
|
|
212
343
|
"text": "!Array<!MenuBarItem>"
|
|
213
344
|
},
|
|
214
|
-
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled
|
|
345
|
+
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
|
|
215
346
|
"attribute": "items",
|
|
216
347
|
"inheritedFrom": {
|
|
217
348
|
"name": "MenuBarMixin",
|
|
@@ -303,6 +434,18 @@
|
|
|
303
434
|
"tagName": "vaadin-menu-bar",
|
|
304
435
|
"customElement": true,
|
|
305
436
|
"attributes": [
|
|
437
|
+
{
|
|
438
|
+
"name": "disabled",
|
|
439
|
+
"type": {
|
|
440
|
+
"text": "boolean"
|
|
441
|
+
},
|
|
442
|
+
"description": "If true, the user cannot interact with this element.",
|
|
443
|
+
"fieldName": "disabled",
|
|
444
|
+
"inheritedFrom": {
|
|
445
|
+
"name": "DisabledMixin",
|
|
446
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
447
|
+
}
|
|
448
|
+
},
|
|
306
449
|
{
|
|
307
450
|
"name": "i18n",
|
|
308
451
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/menu-bar",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,23 +35,23 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
39
|
-
"@vaadin/button": "25.2.0-
|
|
40
|
-
"@vaadin/component-base": "25.2.0-
|
|
41
|
-
"@vaadin/context-menu": "25.2.0-
|
|
42
|
-
"@vaadin/item": "25.2.0-
|
|
43
|
-
"@vaadin/list-box": "25.2.0-
|
|
44
|
-
"@vaadin/overlay": "25.2.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/button": "25.2.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
41
|
+
"@vaadin/context-menu": "25.2.0-alpha10",
|
|
42
|
+
"@vaadin/item": "25.2.0-alpha10",
|
|
43
|
+
"@vaadin/list-box": "25.2.0-alpha10",
|
|
44
|
+
"@vaadin/overlay": "25.2.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "25.2.0-
|
|
50
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
51
|
-
"@vaadin/icon": "25.2.0-
|
|
52
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
49
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
50
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
51
|
+
"@vaadin/icon": "25.2.0-alpha10",
|
|
52
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
53
53
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
54
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
54
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
55
55
|
"sinon": "^21.0.2"
|
|
56
56
|
},
|
|
57
57
|
"customElements": "custom-elements.json",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
63
63
|
}
|
|
@@ -49,6 +49,11 @@ class MenuBarItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInje
|
|
|
49
49
|
// because the role is removed when teleporting to button.
|
|
50
50
|
this.setAttribute('role', 'menuitem');
|
|
51
51
|
}
|
|
52
|
+
|
|
53
|
+
/** @override */
|
|
54
|
+
__shouldAllowFocusWhenDisabled() {
|
|
55
|
+
return window.Vaadin.featureFlags.accessibleDisabledMenuItems;
|
|
56
|
+
}
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
defineCustomElement(MenuBarItem);
|
|
@@ -22,6 +22,13 @@ export type MenuBarItem<TItemData extends object = object> = {
|
|
|
22
22
|
* Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
|
|
23
23
|
*/
|
|
24
24
|
tooltip?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Position of the button's tooltip relative to the button
|
|
27
|
+
* (e.g. `bottom`, `top-start`). Defaults to `bottom`. If the slotted
|
|
28
|
+
* `<vaadin-tooltip>` has its `position` property set, that value is
|
|
29
|
+
* used instead.
|
|
30
|
+
*/
|
|
31
|
+
tooltipPosition?: string;
|
|
25
32
|
/**
|
|
26
33
|
* The component to represent the button content.
|
|
27
34
|
* Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
|
|
@@ -48,6 +55,19 @@ export type MenuBarItem<TItemData extends object = object> = {
|
|
|
48
55
|
|
|
49
56
|
export type SubMenuItem<TItemData extends object = object> = {
|
|
50
57
|
text?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Text to be set as the menu item's tooltip.
|
|
60
|
+
* Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
|
|
61
|
+
*/
|
|
62
|
+
tooltip?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Position of the item's tooltip relative to the item
|
|
65
|
+
* (e.g. `end`, `top`, `bottom-start`). Items with a sub-menu default to `start` to
|
|
66
|
+
* avoid overlap with the opening sub-menu; all other items, including disabled ones
|
|
67
|
+
* (whose sub-menus cannot be opened), default to `end`. If the slotted
|
|
68
|
+
* `<vaadin-tooltip>` has its `position` property set, that value is used instead.
|
|
69
|
+
*/
|
|
70
|
+
tooltipPosition?: string;
|
|
51
71
|
component?: HTMLElement | string;
|
|
52
72
|
disabled?: boolean;
|
|
53
73
|
theme?: string[] | string;
|
|
@@ -101,22 +121,37 @@ export declare class MenuBarMixinClass<TItem extends MenuBarItem = MenuBarItem>
|
|
|
101
121
|
* ];
|
|
102
122
|
* ```
|
|
103
123
|
*
|
|
104
|
-
* #### Disabled
|
|
124
|
+
* #### Disabled items
|
|
105
125
|
*
|
|
106
|
-
* When disabled, menu bar
|
|
107
|
-
* as "dimmed" and prevent all user interactions (mouse and keyboard).
|
|
126
|
+
* When disabled, menu bar items are rendered as "dimmed".
|
|
108
127
|
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
* which makes disabled buttons focusable and hoverable, while still
|
|
115
|
-
* preventing them from being triggered:
|
|
128
|
+
* By default, disabled items are not focusable and don't react to hover.
|
|
129
|
+
* As a result, they are hidden from assistive technologies, and it's not
|
|
130
|
+
* possible to show a tooltip to explain why they are disabled. This can be
|
|
131
|
+
* addressed by enabling several feature flags, which makes disabled items
|
|
132
|
+
* focusable and hoverable, while still preventing them from being activated:
|
|
116
133
|
*
|
|
117
134
|
* ```js
|
|
118
|
-
* //
|
|
135
|
+
* // Allow focus and hover interactions with disabled menu bar root items (buttons)
|
|
119
136
|
* window.Vaadin.featureFlags.accessibleDisabledButtons = true;
|
|
137
|
+
*
|
|
138
|
+
* // Allow focus and hover interactions with disabled menu bar sub-menu items
|
|
139
|
+
* window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;
|
|
140
|
+
* ```
|
|
141
|
+
*
|
|
142
|
+
* Both flags must be set before any menu bar is attached to the DOM.
|
|
143
|
+
*
|
|
144
|
+
* #### Item tooltips
|
|
145
|
+
*
|
|
146
|
+
* Buttons and sub-menu items can have tooltips that are shown on
|
|
147
|
+
* hover and keyboard focus. To enable them, add a slotted
|
|
148
|
+
* `<vaadin-tooltip>` element and set the `tooltip` property on
|
|
149
|
+
* each item that should have one:
|
|
150
|
+
*
|
|
151
|
+
* ```html
|
|
152
|
+
* <vaadin-menu-bar>
|
|
153
|
+
* <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
|
|
154
|
+
* </vaadin-menu-bar>
|
|
120
155
|
* ```
|
|
121
156
|
*/
|
|
122
157
|
items: TItem[];
|
|
@@ -15,6 +15,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
|
|
|
15
15
|
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
16
16
|
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
17
17
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
18
|
+
import { MenuBarTooltipController } from './vaadin-menu-bar-tooltip-controller.js';
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* Custom Lit directive for rendering item components
|
|
@@ -76,6 +77,9 @@ export const MenuBarMixin = (superClass) =>
|
|
|
76
77
|
* @property {string} text - Text to be set as the menu button component's textContent.
|
|
77
78
|
* @property {string} tooltip - Text to be set as the menu button's tooltip.
|
|
78
79
|
* Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
|
|
80
|
+
* @property {string} tooltipPosition - Position of the button's tooltip relative to
|
|
81
|
+
* the button (e.g. `bottom`, `top-start`). Defaults to `bottom`. If the slotted
|
|
82
|
+
* `<vaadin-tooltip>` has its `position` property set, that value is used instead.
|
|
79
83
|
* @property {string | HTMLElement} component - The component to represent the button content.
|
|
80
84
|
* Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
|
|
81
85
|
* @property {boolean} disabled - If true, the button is disabled and cannot be activated.
|
|
@@ -87,6 +91,13 @@ export const MenuBarMixin = (superClass) =>
|
|
|
87
91
|
* @typedef SubMenuItem
|
|
88
92
|
* @type {object}
|
|
89
93
|
* @property {string} text - Text to be set as the menu item component's textContent.
|
|
94
|
+
* @property {string} tooltip - Text to be set as the menu item's tooltip.
|
|
95
|
+
* Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
|
|
96
|
+
* @property {string} tooltipPosition - Position of the item's tooltip relative to the
|
|
97
|
+
* item (e.g. `end`, `top`, `bottom-start`). Items with a sub-menu default to `start`
|
|
98
|
+
* to avoid overlap with the opening sub-menu; all other items, including disabled
|
|
99
|
+
* ones (whose sub-menus cannot be opened), default to `end`. If the slotted
|
|
100
|
+
* `<vaadin-tooltip>` has its `position` property set, that value is used instead.
|
|
90
101
|
* @property {string | HTMLElement} component - The component to represent the item.
|
|
91
102
|
* Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
|
|
92
103
|
* @property {boolean} disabled - If true, the item is disabled and cannot be selected.
|
|
@@ -123,22 +134,37 @@ export const MenuBarMixin = (superClass) =>
|
|
|
123
134
|
* ];
|
|
124
135
|
* ```
|
|
125
136
|
*
|
|
126
|
-
* #### Disabled
|
|
137
|
+
* #### Disabled items
|
|
127
138
|
*
|
|
128
|
-
* When disabled, menu bar
|
|
129
|
-
* as "dimmed" and prevent all user interactions (mouse and keyboard).
|
|
139
|
+
* When disabled, menu bar items are rendered as "dimmed".
|
|
130
140
|
*
|
|
131
|
-
*
|
|
132
|
-
*
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
136
|
-
* which makes disabled buttons focusable and hoverable, while still
|
|
137
|
-
* preventing them from being triggered:
|
|
141
|
+
* By default, disabled items are not focusable and don't react to hover.
|
|
142
|
+
* As a result, they are hidden from assistive technologies, and it's not
|
|
143
|
+
* possible to show a tooltip to explain why they are disabled. This can be
|
|
144
|
+
* addressed by enabling several feature flags, which makes disabled items
|
|
145
|
+
* focusable and hoverable, while still preventing them from being activated:
|
|
138
146
|
*
|
|
139
147
|
* ```js
|
|
140
|
-
* //
|
|
148
|
+
* // Allow focus and hover interactions with disabled menu bar root items (buttons)
|
|
141
149
|
* window.Vaadin.featureFlags.accessibleDisabledButtons = true;
|
|
150
|
+
*
|
|
151
|
+
* // Allow focus and hover interactions with disabled menu bar sub-menu items
|
|
152
|
+
* window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;
|
|
153
|
+
* ```
|
|
154
|
+
*
|
|
155
|
+
* Both flags must be set before any menu bar is attached to the DOM.
|
|
156
|
+
*
|
|
157
|
+
* #### Item tooltips
|
|
158
|
+
*
|
|
159
|
+
* Buttons and sub-menu items can have tooltips that are shown on
|
|
160
|
+
* hover and keyboard focus. To enable them, add a slotted
|
|
161
|
+
* `<vaadin-tooltip>` element and set the `tooltip` property on
|
|
162
|
+
* each item that should have one:
|
|
163
|
+
*
|
|
164
|
+
* ```html
|
|
165
|
+
* <vaadin-menu-bar>
|
|
166
|
+
* <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
|
|
167
|
+
* </vaadin-menu-bar>
|
|
142
168
|
* ```
|
|
143
169
|
*
|
|
144
170
|
* @type {!Array<!MenuBarItem>}
|
|
@@ -203,7 +229,6 @@ export const MenuBarMixin = (superClass) =>
|
|
|
203
229
|
constructor() {
|
|
204
230
|
super();
|
|
205
231
|
this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
|
|
206
|
-
this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
|
|
207
232
|
}
|
|
208
233
|
|
|
209
234
|
/**
|
|
@@ -308,12 +333,15 @@ export const MenuBarMixin = (superClass) =>
|
|
|
308
333
|
},
|
|
309
334
|
});
|
|
310
335
|
|
|
336
|
+
this._tooltipController = new MenuBarTooltipController(this);
|
|
337
|
+
|
|
338
|
+
this.addEventListener('mousedown', () => this._tooltipController.close(true));
|
|
339
|
+
this.addEventListener('mouseleave', () => this._tooltipController.close());
|
|
340
|
+
|
|
341
|
+
this.addController(this._tooltipController);
|
|
311
342
|
this.addController(this._subMenuController);
|
|
312
343
|
this.addController(this._overflowController);
|
|
313
344
|
|
|
314
|
-
this.addEventListener('mousedown', () => this._hideTooltip(true));
|
|
315
|
-
this.addEventListener('mouseleave', () => this._hideTooltip());
|
|
316
|
-
|
|
317
345
|
this._container = this.shadowRoot.querySelector('[part="container"]');
|
|
318
346
|
}
|
|
319
347
|
|
|
@@ -365,7 +393,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
365
393
|
/** @protected */
|
|
366
394
|
disconnectedCallback() {
|
|
367
395
|
super.disconnectedCallback();
|
|
368
|
-
this.
|
|
396
|
+
this._tooltipController.setTarget(null);
|
|
369
397
|
}
|
|
370
398
|
|
|
371
399
|
/**
|
|
@@ -408,7 +436,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
408
436
|
/** @private */
|
|
409
437
|
__updateSubMenu() {
|
|
410
438
|
const subMenu = this._subMenu;
|
|
411
|
-
if (subMenu
|
|
439
|
+
if (subMenu?.opened) {
|
|
412
440
|
const button = subMenu._positionTarget;
|
|
413
441
|
|
|
414
442
|
// Close sub-menu if the corresponding button is no longer in the DOM,
|
|
@@ -421,7 +449,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
421
449
|
|
|
422
450
|
/** @private */
|
|
423
451
|
__i18nChanged(effectiveI18n) {
|
|
424
|
-
if (effectiveI18n
|
|
452
|
+
if (effectiveI18n?.moreOptions !== undefined) {
|
|
425
453
|
if (effectiveI18n.moreOptions) {
|
|
426
454
|
this._overflow.setAttribute('aria-label', effectiveI18n.moreOptions);
|
|
427
455
|
} else {
|
|
@@ -563,7 +591,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
563
591
|
let theme = hostTheme;
|
|
564
592
|
|
|
565
593
|
// Item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
|
|
566
|
-
const itemTheme = item
|
|
594
|
+
const itemTheme = item?.theme;
|
|
567
595
|
if (itemTheme != null) {
|
|
568
596
|
theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
|
|
569
597
|
}
|
|
@@ -597,7 +625,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
597
625
|
html`
|
|
598
626
|
${items.map((item) => {
|
|
599
627
|
const itemCopy = { ...item };
|
|
600
|
-
const hasChildren = Boolean(item
|
|
628
|
+
const hasChildren = Boolean(item?.children);
|
|
601
629
|
|
|
602
630
|
if (itemCopy.component) {
|
|
603
631
|
const component = this.__getComponent(itemCopy);
|
|
@@ -636,54 +664,6 @@ export const MenuBarMixin = (superClass) =>
|
|
|
636
664
|
}
|
|
637
665
|
}
|
|
638
666
|
|
|
639
|
-
/**
|
|
640
|
-
* @param {HTMLElement} button
|
|
641
|
-
* @protected
|
|
642
|
-
*/
|
|
643
|
-
_showTooltip(button, isHover) {
|
|
644
|
-
// Check if there is a slotted vaadin-tooltip element.
|
|
645
|
-
const tooltip = this._tooltipController.node;
|
|
646
|
-
if (tooltip && tooltip.isConnected) {
|
|
647
|
-
// If the tooltip element doesn't have a generator assigned, use a default one
|
|
648
|
-
// that reads the `tooltip` property of an item.
|
|
649
|
-
if (tooltip.generator === undefined) {
|
|
650
|
-
tooltip.generator = ({ item }) => item && item.tooltip;
|
|
651
|
-
}
|
|
652
|
-
|
|
653
|
-
if (!tooltip._mouseLeaveListenerAdded) {
|
|
654
|
-
tooltip._overlayElement.addEventListener('mouseleave', this.__boundOnTooltipMouseLeave);
|
|
655
|
-
tooltip._mouseLeaveListenerAdded = true;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
if (!this._subMenu.opened) {
|
|
659
|
-
this._tooltipController.setTarget(button);
|
|
660
|
-
this._tooltipController.setContext({ item: button.item });
|
|
661
|
-
|
|
662
|
-
// Trigger opening using the corresponding delay.
|
|
663
|
-
tooltip._stateController.open({
|
|
664
|
-
hover: isHover,
|
|
665
|
-
focus: !isHover,
|
|
666
|
-
});
|
|
667
|
-
}
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
/** @protected */
|
|
672
|
-
_hideTooltip(immediate) {
|
|
673
|
-
const tooltip = this._tooltipController && this._tooltipController.node;
|
|
674
|
-
if (tooltip) {
|
|
675
|
-
this._tooltipController.setContext({ item: null });
|
|
676
|
-
tooltip._stateController.close(immediate);
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
|
|
680
|
-
/** @private */
|
|
681
|
-
__onTooltipOverlayMouseLeave(event) {
|
|
682
|
-
if (event.relatedTarget !== this._tooltipController.target) {
|
|
683
|
-
this._hideTooltip();
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
|
|
687
667
|
/** @protected */
|
|
688
668
|
_setExpanded(button, expanded) {
|
|
689
669
|
button.toggleAttribute('expanded', expanded);
|
|
@@ -711,24 +691,24 @@ export const MenuBarMixin = (superClass) =>
|
|
|
711
691
|
* @protected
|
|
712
692
|
* @override
|
|
713
693
|
*/
|
|
714
|
-
_focusItem(
|
|
694
|
+
_focusItem(button, options, navigating) {
|
|
715
695
|
const wasExpanded = navigating && this.focused === this._expandedButton;
|
|
716
696
|
if (wasExpanded) {
|
|
717
697
|
this._close();
|
|
718
698
|
}
|
|
719
699
|
|
|
720
|
-
super._focusItem(
|
|
700
|
+
super._focusItem(button, options, navigating);
|
|
721
701
|
|
|
722
702
|
this._buttons.forEach((btn) => {
|
|
723
|
-
this._setTabindex(btn, btn ===
|
|
703
|
+
this._setTabindex(btn, btn === button);
|
|
724
704
|
});
|
|
725
705
|
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
this.
|
|
706
|
+
this._tooltipController.setTarget(button);
|
|
707
|
+
|
|
708
|
+
if (wasExpanded && button.item && button.item.children) {
|
|
709
|
+
this.__openSubMenu(button, true, { keepFocus: true });
|
|
730
710
|
} else {
|
|
731
|
-
this.
|
|
711
|
+
this._tooltipController.open({ trigger: 'focus' });
|
|
732
712
|
}
|
|
733
713
|
}
|
|
734
714
|
|
|
@@ -773,18 +753,19 @@ export const MenuBarMixin = (superClass) =>
|
|
|
773
753
|
* @protected
|
|
774
754
|
*/
|
|
775
755
|
_setFocused(focused) {
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
756
|
+
const target = focused ? this.__getFocusTarget() : null;
|
|
757
|
+
if (target) {
|
|
758
|
+
this._tooltipController.setTarget(target);
|
|
759
|
+
|
|
760
|
+
this._buttons.forEach((btn) => {
|
|
761
|
+
this._setTabindex(btn, btn === target);
|
|
762
|
+
});
|
|
763
|
+
|
|
764
|
+
if (isKeyboardActive()) {
|
|
765
|
+
this._tooltipController.open({ trigger: 'focus' });
|
|
785
766
|
}
|
|
786
767
|
} else {
|
|
787
|
-
this.
|
|
768
|
+
this._tooltipController.close(true);
|
|
788
769
|
}
|
|
789
770
|
}
|
|
790
771
|
|
|
@@ -854,7 +835,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
854
835
|
this._close(true);
|
|
855
836
|
}
|
|
856
837
|
|
|
857
|
-
this.
|
|
838
|
+
this._tooltipController.close(true);
|
|
858
839
|
}
|
|
859
840
|
|
|
860
841
|
/**
|
|
@@ -899,22 +880,19 @@ export const MenuBarMixin = (superClass) =>
|
|
|
899
880
|
}
|
|
900
881
|
|
|
901
882
|
const button = this._getButtonFromEvent(event);
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
} else if (button !== this._expandedButton) {
|
|
883
|
+
this._tooltipController.setTarget(button);
|
|
884
|
+
|
|
885
|
+
if (button && button !== this._expandedButton) {
|
|
906
886
|
// Switch sub-menu when moving cursor over another button
|
|
907
887
|
// with children, regardless of whether openOnHover is set.
|
|
908
888
|
// If the button has no children, keep the sub-menu opened.
|
|
909
889
|
if (button.item.children && (this.openOnHover || this._subMenu.opened)) {
|
|
910
890
|
this.__openSubMenu(button, false);
|
|
911
891
|
}
|
|
892
|
+
}
|
|
912
893
|
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
} else {
|
|
916
|
-
this._showTooltip(button, true);
|
|
917
|
-
}
|
|
894
|
+
if (!this._subMenu.opened) {
|
|
895
|
+
this._tooltipController.open({ trigger: 'hover' });
|
|
918
896
|
}
|
|
919
897
|
}
|
|
920
898
|
|
|
@@ -968,7 +946,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
968
946
|
}
|
|
969
947
|
}
|
|
970
948
|
|
|
971
|
-
const items = item
|
|
949
|
+
const items = item?.children;
|
|
972
950
|
if (!items || items.length === 0) {
|
|
973
951
|
this.__fireItemSelected(item);
|
|
974
952
|
return;
|
|
@@ -980,7 +958,7 @@ export const MenuBarMixin = (superClass) =>
|
|
|
980
958
|
const overlay = subMenu._overlayElement;
|
|
981
959
|
overlay.noVerticalOverlap = true;
|
|
982
960
|
|
|
983
|
-
this.
|
|
961
|
+
this._tooltipController.close(true);
|
|
984
962
|
|
|
985
963
|
this._expandedButton = button;
|
|
986
964
|
this._setExpanded(button, true);
|
|
@@ -1045,11 +1023,13 @@ export const MenuBarMixin = (superClass) =>
|
|
|
1045
1023
|
/** @private */
|
|
1046
1024
|
__deactivateButton(restoreFocus) {
|
|
1047
1025
|
const button = this._expandedButton;
|
|
1048
|
-
if (button
|
|
1026
|
+
if (button?.hasAttribute('expanded')) {
|
|
1049
1027
|
this._setExpanded(button, false);
|
|
1050
1028
|
if (restoreFocus) {
|
|
1051
1029
|
const focusOptions = { focusVisible: isKeyboardActive() };
|
|
1052
1030
|
this._focusItem(button, focusOptions, false);
|
|
1031
|
+
} else {
|
|
1032
|
+
this._tooltipController.close(true);
|
|
1053
1033
|
}
|
|
1054
1034
|
this._expandedButton = null;
|
|
1055
1035
|
}
|
|
@@ -55,6 +55,16 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
|
|
|
55
55
|
this.openOn = 'opensubmenu';
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
/** @protected */
|
|
59
|
+
ready() {
|
|
60
|
+
super.ready();
|
|
61
|
+
|
|
62
|
+
// The slotted `<vaadin-tooltip>` lives on the parent `<vaadin-menu-bar>`.
|
|
63
|
+
// Its tooltip controller instance is shared across sub-menus to reuse
|
|
64
|
+
// the same tooltip element for items at every nesting level.
|
|
65
|
+
this._tooltipController = this.parentElement._tooltipController;
|
|
66
|
+
}
|
|
67
|
+
|
|
58
68
|
/**
|
|
59
69
|
* Tag name prefix used by overlay, list-box and items.
|
|
60
70
|
* @protected
|
|
@@ -86,6 +96,8 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
|
|
|
86
96
|
<slot name="overlay"></slot>
|
|
87
97
|
<slot name="submenu" slot="submenu"></slot>
|
|
88
98
|
</vaadin-menu-bar-overlay>
|
|
99
|
+
|
|
100
|
+
<slot name="tooltip"></slot>
|
|
89
101
|
`;
|
|
90
102
|
}
|
|
91
103
|
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2019 - 2026 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { ContextMenuTooltipController } from '@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Controller for the tooltip slotted into `<vaadin-menu-bar>`. Extends
|
|
10
|
+
* `ContextMenuTooltipController` to also support menu-bar buttons as
|
|
11
|
+
* targets, in addition to sub-menu items.
|
|
12
|
+
*/
|
|
13
|
+
export class MenuBarTooltipController extends ContextMenuTooltipController {
|
|
14
|
+
/** @override */
|
|
15
|
+
_getItem(target) {
|
|
16
|
+
if (target.localName === 'vaadin-menu-bar-button') {
|
|
17
|
+
return target.item;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return super._getItem(target);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/** @override */
|
|
24
|
+
_getDefaultPosition(target) {
|
|
25
|
+
if (target.localName === 'vaadin-menu-bar-button') {
|
|
26
|
+
return 'bottom';
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return super._getDefaultPosition(target);
|
|
30
|
+
}
|
|
31
|
+
}
|
package/src/vaadin-menu-bar.js
CHANGED
|
@@ -9,7 +9,6 @@ import { html, LitElement } from 'lit';
|
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
-
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
13
12
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
14
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
14
|
import { menuBarStyles } from './styles/vaadin-menu-bar-base-styles.js';
|
|
@@ -96,23 +95,6 @@ class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
|
|
|
96
95
|
<slot name="tooltip"></slot>
|
|
97
96
|
`;
|
|
98
97
|
}
|
|
99
|
-
|
|
100
|
-
/** @protected */
|
|
101
|
-
ready() {
|
|
102
|
-
super.ready();
|
|
103
|
-
|
|
104
|
-
this._tooltipController = new TooltipController(this);
|
|
105
|
-
this._tooltipController.setManual(true);
|
|
106
|
-
this.addController(this._tooltipController);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Fired when either a submenu item or menu bar button without nested children is clicked.
|
|
111
|
-
*
|
|
112
|
-
* @event item-selected
|
|
113
|
-
* @param {Object} detail
|
|
114
|
-
* @param {Object} detail.value the selected menu bar item
|
|
115
|
-
*/
|
|
116
98
|
}
|
|
117
99
|
|
|
118
100
|
defineCustomElement(MenuBar);
|
package/web-types.json
CHANGED
|
@@ -1,34 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/menu-bar",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-menu-bar",
|
|
11
|
-
"description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
11
|
+
"description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n------------------|----------------\n`container` | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|----------------------------------\n`disabled` | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
15
15
|
"description": "If true, the user cannot interact with this element.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"boolean"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"name": "i18n",
|
|
26
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
27
|
-
"value": {
|
|
28
|
-
"type": [
|
|
29
|
-
"Object",
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
18
|
+
"boolean"
|
|
32
19
|
]
|
|
33
20
|
}
|
|
34
21
|
},
|
|
@@ -37,9 +24,7 @@
|
|
|
37
24
|
"description": "If true, the submenu will open on hover (mouseover) instead of click.",
|
|
38
25
|
"value": {
|
|
39
26
|
"type": [
|
|
40
|
-
"boolean"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
27
|
+
"boolean"
|
|
43
28
|
]
|
|
44
29
|
}
|
|
45
30
|
},
|
|
@@ -48,9 +33,7 @@
|
|
|
48
33
|
"description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
|
|
49
34
|
"value": {
|
|
50
35
|
"type": [
|
|
51
|
-
"boolean"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
36
|
+
"boolean"
|
|
54
37
|
]
|
|
55
38
|
}
|
|
56
39
|
},
|
|
@@ -59,9 +42,7 @@
|
|
|
59
42
|
"description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
|
|
60
43
|
"value": {
|
|
61
44
|
"type": [
|
|
62
|
-
"boolean"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
45
|
+
"boolean"
|
|
65
46
|
]
|
|
66
47
|
}
|
|
67
48
|
},
|
|
@@ -84,9 +65,7 @@
|
|
|
84
65
|
"description": "If true, the user cannot interact with this element.",
|
|
85
66
|
"value": {
|
|
86
67
|
"type": [
|
|
87
|
-
"boolean"
|
|
88
|
-
"null",
|
|
89
|
-
"undefined"
|
|
68
|
+
"boolean"
|
|
90
69
|
]
|
|
91
70
|
}
|
|
92
71
|
},
|
|
@@ -95,16 +74,16 @@
|
|
|
95
74
|
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n moreOptions: 'More options'\n}\n```",
|
|
96
75
|
"value": {
|
|
97
76
|
"type": [
|
|
98
|
-
"
|
|
77
|
+
"Object"
|
|
99
78
|
]
|
|
100
79
|
}
|
|
101
80
|
},
|
|
102
81
|
{
|
|
103
82
|
"name": "items",
|
|
104
|
-
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled
|
|
83
|
+
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
|
|
105
84
|
"value": {
|
|
106
85
|
"type": [
|
|
107
|
-
"Array
|
|
86
|
+
"Array<MenuBarItem>"
|
|
108
87
|
]
|
|
109
88
|
}
|
|
110
89
|
},
|
|
@@ -113,9 +92,7 @@
|
|
|
113
92
|
"description": "If true, the submenu will open on hover (mouseover) instead of click.",
|
|
114
93
|
"value": {
|
|
115
94
|
"type": [
|
|
116
|
-
"boolean"
|
|
117
|
-
"null",
|
|
118
|
-
"undefined"
|
|
95
|
+
"boolean"
|
|
119
96
|
]
|
|
120
97
|
}
|
|
121
98
|
},
|
|
@@ -124,9 +101,7 @@
|
|
|
124
101
|
"description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
|
|
125
102
|
"value": {
|
|
126
103
|
"type": [
|
|
127
|
-
"boolean"
|
|
128
|
-
"null",
|
|
129
|
-
"undefined"
|
|
104
|
+
"boolean"
|
|
130
105
|
]
|
|
131
106
|
}
|
|
132
107
|
},
|
|
@@ -135,9 +110,7 @@
|
|
|
135
110
|
"description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
|
|
136
111
|
"value": {
|
|
137
112
|
"type": [
|
|
138
|
-
"boolean"
|
|
139
|
-
"null",
|
|
140
|
-
"undefined"
|
|
113
|
+
"boolean"
|
|
141
114
|
]
|
|
142
115
|
}
|
|
143
116
|
}
|
|
@@ -145,7 +118,7 @@
|
|
|
145
118
|
"events": [
|
|
146
119
|
{
|
|
147
120
|
"name": "item-selected",
|
|
148
|
-
"description": "Fired when
|
|
121
|
+
"description": "Fired when a submenu item or menu bar button without children is clicked."
|
|
149
122
|
}
|
|
150
123
|
]
|
|
151
124
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/menu-bar",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-menu-bar",
|
|
19
|
-
"description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
19
|
+
"description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n------------------|----------------\n`container` | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|----------------------------------\n`disabled` | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -27,43 +27,43 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".i18n",
|
|
31
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n moreOptions: 'More options'\n}\n```",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"description": "
|
|
37
|
+
"name": ".items",
|
|
38
|
+
"description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n {\n text: 'File',\n className: 'file',\n children: [\n {text: 'Open', className: 'file open'}\n {text: 'Auto Save', checked: true},\n ]\n },\n {component: 'hr'},\n {\n text: 'Edit',\n children: [\n {text: 'Undo', disabled: true},\n {text: 'Redo'}\n ]\n },\n {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "If true, the
|
|
44
|
+
"name": "?openOnHover",
|
|
45
|
+
"description": "If true, the submenu will open on hover (mouseover) instead of click.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": "?reverseCollapse",
|
|
52
|
+
"description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "?tabNavigation",
|
|
59
|
+
"description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": "@item-selected",
|
|
66
|
-
"description": "Fired when
|
|
66
|
+
"description": "Fired when a submenu item or menu bar button without children is clicked.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|