@vaadin/combo-box 25.3.0-alpha1 → 25.3.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 +39 -6
- package/package.json +14 -14
- package/src/vaadin-combo-box-base-mixin.js +13 -14
- package/src/vaadin-combo-box-item.js +4 -3
- package/src/vaadin-combo-box-mixin.js +3 -1
- package/src/vaadin-combo-box-overlay-mixin.js +10 -13
- package/src/vaadin-combo-box-overlay.js +4 -1
- package/src/vaadin-combo-box-scroller-mixin.js +2 -5
- package/src/vaadin-combo-box-scroller.js +3 -1
- package/src/vaadin-combo-box.js +1 -0
- package/web-types.json +27 -11
- package/web-types.lit.json +12 -5
package/custom-elements.json
CHANGED
|
@@ -1723,6 +1723,20 @@
|
|
|
1723
1723
|
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n`loader` | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`loading` | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
1724
1724
|
"name": "ComboBox",
|
|
1725
1725
|
"members": [
|
|
1726
|
+
{
|
|
1727
|
+
"kind": "field",
|
|
1728
|
+
"name": "accessibleDescriptionRef",
|
|
1729
|
+
"privacy": "public",
|
|
1730
|
+
"type": {
|
|
1731
|
+
"text": "string"
|
|
1732
|
+
},
|
|
1733
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1734
|
+
"attribute": "accessible-description-ref",
|
|
1735
|
+
"inheritedFrom": {
|
|
1736
|
+
"name": "FieldMixin",
|
|
1737
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1738
|
+
}
|
|
1739
|
+
},
|
|
1726
1740
|
{
|
|
1727
1741
|
"kind": "field",
|
|
1728
1742
|
"name": "accessibleName",
|
|
@@ -1730,7 +1744,7 @@
|
|
|
1730
1744
|
"type": {
|
|
1731
1745
|
"text": "string"
|
|
1732
1746
|
},
|
|
1733
|
-
"description": "String used to label the component
|
|
1747
|
+
"description": "String used to label the component for screen reader users.",
|
|
1734
1748
|
"attribute": "accessible-name",
|
|
1735
1749
|
"inheritedFrom": {
|
|
1736
1750
|
"name": "FieldMixin",
|
|
@@ -1744,7 +1758,7 @@
|
|
|
1744
1758
|
"type": {
|
|
1745
1759
|
"text": "string"
|
|
1746
1760
|
},
|
|
1747
|
-
"description": "
|
|
1761
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1748
1762
|
"attribute": "accessible-name-ref",
|
|
1749
1763
|
"inheritedFrom": {
|
|
1750
1764
|
"name": "FieldMixin",
|
|
@@ -1860,7 +1874,7 @@
|
|
|
1860
1874
|
"type": {
|
|
1861
1875
|
"text": "boolean"
|
|
1862
1876
|
},
|
|
1863
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
1877
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
1864
1878
|
"attribute": "clear-button-visible",
|
|
1865
1879
|
"inheritedFrom": {
|
|
1866
1880
|
"name": "ClearButtonMixin",
|
|
@@ -2399,12 +2413,24 @@
|
|
|
2399
2413
|
}
|
|
2400
2414
|
],
|
|
2401
2415
|
"attributes": [
|
|
2416
|
+
{
|
|
2417
|
+
"name": "accessible-description-ref",
|
|
2418
|
+
"type": {
|
|
2419
|
+
"text": "string"
|
|
2420
|
+
},
|
|
2421
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
2422
|
+
"fieldName": "accessibleDescriptionRef",
|
|
2423
|
+
"inheritedFrom": {
|
|
2424
|
+
"name": "FieldMixin",
|
|
2425
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
2426
|
+
}
|
|
2427
|
+
},
|
|
2402
2428
|
{
|
|
2403
2429
|
"name": "accessible-name",
|
|
2404
2430
|
"type": {
|
|
2405
2431
|
"text": "string"
|
|
2406
2432
|
},
|
|
2407
|
-
"description": "String used to label the component
|
|
2433
|
+
"description": "String used to label the component for screen reader users.",
|
|
2408
2434
|
"fieldName": "accessibleName",
|
|
2409
2435
|
"inheritedFrom": {
|
|
2410
2436
|
"name": "FieldMixin",
|
|
@@ -2416,7 +2442,7 @@
|
|
|
2416
2442
|
"type": {
|
|
2417
2443
|
"text": "string"
|
|
2418
2444
|
},
|
|
2419
|
-
"description": "
|
|
2445
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
2420
2446
|
"fieldName": "accessibleNameRef",
|
|
2421
2447
|
"inheritedFrom": {
|
|
2422
2448
|
"name": "FieldMixin",
|
|
@@ -2488,7 +2514,7 @@
|
|
|
2488
2514
|
"type": {
|
|
2489
2515
|
"text": "boolean"
|
|
2490
2516
|
},
|
|
2491
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
2517
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
2492
2518
|
"fieldName": "clearButtonVisible",
|
|
2493
2519
|
"inheritedFrom": {
|
|
2494
2520
|
"name": "ClearButtonMixin",
|
|
@@ -2759,6 +2785,13 @@
|
|
|
2759
2785
|
"module": "src/vaadin-combo-box-data-provider-mixin.js"
|
|
2760
2786
|
}
|
|
2761
2787
|
},
|
|
2788
|
+
{
|
|
2789
|
+
"type": {
|
|
2790
|
+
"text": "string"
|
|
2791
|
+
},
|
|
2792
|
+
"description": "The theme variants to apply to the component.",
|
|
2793
|
+
"name": "theme"
|
|
2794
|
+
},
|
|
2762
2795
|
{
|
|
2763
2796
|
"name": "title",
|
|
2764
2797
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/field-base": "25.3.0-
|
|
42
|
-
"@vaadin/input-container": "25.3.0-
|
|
43
|
-
"@vaadin/item": "25.3.0-
|
|
44
|
-
"@vaadin/lit-renderer": "25.3.0-
|
|
45
|
-
"@vaadin/overlay": "25.3.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
39
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
42
|
+
"@vaadin/input-container": "25.3.0-alpha10",
|
|
43
|
+
"@vaadin/item": "25.3.0-alpha10",
|
|
44
|
+
"@vaadin/lit-renderer": "25.3.0-alpha10",
|
|
45
|
+
"@vaadin/overlay": "25.3.0-alpha10",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
47
47
|
"lit": "^3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/aura": "25.3.0-
|
|
51
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
52
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
50
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
51
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
52
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
53
53
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
54
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
54
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
55
55
|
"sinon": "^22.0.0"
|
|
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": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
63
63
|
}
|
|
@@ -8,8 +8,8 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
|
8
8
|
import { isElementFocused, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
9
9
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
10
10
|
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
|
|
11
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
11
12
|
import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
|
|
12
|
-
import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
|
|
13
13
|
import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
|
|
14
14
|
|
|
15
15
|
export const ComboBoxBaseMixin = (superClass) =>
|
|
@@ -168,8 +168,6 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
168
168
|
if (this.clearElement) {
|
|
169
169
|
this.clearElement.addEventListener('mousedown', this._boundOnClearButtonMouseDown);
|
|
170
170
|
}
|
|
171
|
-
|
|
172
|
-
this.addController(new VirtualKeyboardController(this));
|
|
173
171
|
}
|
|
174
172
|
|
|
175
173
|
/** @protected */
|
|
@@ -212,6 +210,12 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
212
210
|
this._overlayOpened = e.detail.value;
|
|
213
211
|
});
|
|
214
212
|
|
|
213
|
+
// Finish close lifecycle only after the overlay closing animation completes.
|
|
214
|
+
overlay.addEventListener('vaadin-overlay-closed', () => {
|
|
215
|
+
this._scroller.items = [];
|
|
216
|
+
this._onOverlayClosed();
|
|
217
|
+
});
|
|
218
|
+
|
|
215
219
|
this._overlayElement = overlay;
|
|
216
220
|
}
|
|
217
221
|
|
|
@@ -258,7 +262,6 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
258
262
|
this._onOpened();
|
|
259
263
|
} else if (wasOpened && this._hasDropdownItems) {
|
|
260
264
|
this.close();
|
|
261
|
-
this._onOverlayClosed();
|
|
262
265
|
}
|
|
263
266
|
}
|
|
264
267
|
|
|
@@ -283,11 +286,7 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
283
286
|
}
|
|
284
287
|
|
|
285
288
|
const item = this._getItemElements().find((el) => el.index === index);
|
|
286
|
-
|
|
287
|
-
input.setAttribute('aria-activedescendant', item.id);
|
|
288
|
-
} else {
|
|
289
|
-
input.removeAttribute('aria-activedescendant');
|
|
290
|
-
}
|
|
289
|
+
setOrRemoveAttribute(input, 'aria-activedescendant', item?.id);
|
|
291
290
|
}
|
|
292
291
|
|
|
293
292
|
/** @private */
|
|
@@ -320,11 +319,7 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
320
319
|
if (input) {
|
|
321
320
|
input.setAttribute('aria-expanded', !!opened);
|
|
322
321
|
|
|
323
|
-
|
|
324
|
-
input.setAttribute('aria-controls', this._scroller.id);
|
|
325
|
-
} else {
|
|
326
|
-
input.removeAttribute('aria-controls');
|
|
327
|
-
}
|
|
322
|
+
setOrRemoveAttribute(input, 'aria-controls', opened && this._scroller.id);
|
|
328
323
|
}
|
|
329
324
|
}
|
|
330
325
|
|
|
@@ -708,6 +703,10 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
708
703
|
// Stop this private event from leaking outside.
|
|
709
704
|
e.stopPropagation();
|
|
710
705
|
|
|
706
|
+
if (this.hasAttribute('closing')) {
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
709
|
+
|
|
711
710
|
if (e.detail.item instanceof ComboBoxPlaceholder) {
|
|
712
711
|
// Placeholder items should not be selectable.
|
|
713
712
|
return;
|
|
@@ -34,12 +34,11 @@ import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
|
|
|
34
34
|
*
|
|
35
35
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
36
36
|
*
|
|
37
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
37
38
|
* @customElement vaadin-combo-box-item
|
|
38
39
|
* @private
|
|
39
40
|
*/
|
|
40
|
-
|
|
41
|
-
ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
42
|
-
) {
|
|
41
|
+
class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
43
42
|
static get is() {
|
|
44
43
|
return 'vaadin-combo-box-item';
|
|
45
44
|
}
|
|
@@ -60,3 +59,5 @@ export class ComboBoxItem extends ComboBoxItemMixin(
|
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
defineCustomElement(ComboBoxItem);
|
|
62
|
+
|
|
63
|
+
export { ComboBoxItem };
|
|
@@ -160,8 +160,10 @@ export const ComboBoxMixin = (superClass) =>
|
|
|
160
160
|
getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
+
const isClosing = this.hasAttribute('closing');
|
|
164
|
+
|
|
163
165
|
this._scroller.setProperties({
|
|
164
|
-
items: opened ? items : [],
|
|
166
|
+
items: opened || isClosing ? items : [],
|
|
165
167
|
opened,
|
|
166
168
|
focusedIndex,
|
|
167
169
|
theme,
|
|
@@ -8,16 +8,22 @@ import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin
|
|
|
8
8
|
|
|
9
9
|
export const ComboBoxOverlayMixin = (superClass) =>
|
|
10
10
|
class ComboBoxOverlayMixin extends PositionMixin(superClass) {
|
|
11
|
-
static get observers() {
|
|
12
|
-
return ['_setOverlayWidth(positionTarget, opened)'];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
11
|
constructor() {
|
|
16
12
|
super();
|
|
17
13
|
|
|
18
14
|
this.requiredVerticalSpace = 200;
|
|
19
15
|
}
|
|
20
16
|
|
|
17
|
+
/** @protected */
|
|
18
|
+
willUpdate(props) {
|
|
19
|
+
super.willUpdate(props);
|
|
20
|
+
|
|
21
|
+
// Update width here so that `PositionMixin` uses correct width in `updated()`.
|
|
22
|
+
if ((props.has('opened') || props.has('positionTarget')) && this.opened && this.positionTarget) {
|
|
23
|
+
this._updateOverlayWidth();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
21
27
|
/**
|
|
22
28
|
* Override method inherited from `Overlay`
|
|
23
29
|
* to not close on position target click.
|
|
@@ -49,13 +55,4 @@ export const ComboBoxOverlayMixin = (superClass) =>
|
|
|
49
55
|
_updateOverlayWidth() {
|
|
50
56
|
this.style.setProperty(`--_${this.localName}-default-width`, `${this.positionTarget.offsetWidth}px`);
|
|
51
57
|
}
|
|
52
|
-
|
|
53
|
-
/** @private */
|
|
54
|
-
_setOverlayWidth(positionTarget, opened) {
|
|
55
|
-
if (positionTarget && opened) {
|
|
56
|
-
this._updateOverlayWidth();
|
|
57
|
-
|
|
58
|
-
this._updatePosition();
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
58
|
};
|
|
@@ -17,11 +17,12 @@ import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
|
|
|
17
17
|
/**
|
|
18
18
|
* An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
|
|
19
19
|
*
|
|
20
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
20
21
|
* @customElement vaadin-combo-box-overlay
|
|
21
22
|
* @extends HTMLElement
|
|
22
23
|
* @private
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
+
class ComboBoxOverlay extends ComboBoxOverlayMixin(
|
|
25
26
|
OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
|
|
26
27
|
) {
|
|
27
28
|
static get is() {
|
|
@@ -44,3 +45,5 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(
|
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
defineCustomElement(ComboBoxOverlay);
|
|
48
|
+
|
|
49
|
+
export { ComboBoxOverlay };
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2015 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
6
7
|
import { get } from '@vaadin/component-base/src/path-utils.js';
|
|
7
8
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
8
9
|
import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
|
|
@@ -389,11 +390,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
|
|
|
389
390
|
el.setAttribute('aria-posinset', index + 1);
|
|
390
391
|
el.setAttribute('aria-setsize', this.items.length);
|
|
391
392
|
|
|
392
|
-
|
|
393
|
-
el.setAttribute('theme', this.theme);
|
|
394
|
-
} else {
|
|
395
|
-
el.removeAttribute('theme');
|
|
396
|
-
}
|
|
393
|
+
setOrRemoveAttribute(el, 'theme', this.theme);
|
|
397
394
|
|
|
398
395
|
if (item instanceof ComboBoxPlaceholder) {
|
|
399
396
|
this.__requestItemByIndex(index);
|
|
@@ -16,7 +16,7 @@ import { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
|
|
|
16
16
|
* @extends HTMLElement
|
|
17
17
|
* @private
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
class ComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
|
|
20
20
|
static get is() {
|
|
21
21
|
return 'vaadin-combo-box-scroller';
|
|
22
22
|
}
|
|
@@ -36,3 +36,5 @@ export class ComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElem
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
defineCustomElement(ComboBoxScroller);
|
|
39
|
+
|
|
40
|
+
export { ComboBoxScroller };
|
package/src/vaadin-combo-box.js
CHANGED
|
@@ -161,6 +161,7 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
|
|
|
161
161
|
* @fires {CustomEvent} vaadin-combo-box-dropdown-opened - Fired after the `vaadin-combo-box-overlay` opens.
|
|
162
162
|
* @fires {CustomEvent} vaadin-combo-box-dropdown-closed - Fired after the `vaadin-combo-box-overlay` closes.
|
|
163
163
|
*
|
|
164
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
164
165
|
* @customElement vaadin-combo-box
|
|
165
166
|
* @extends HTMLElement
|
|
166
167
|
*/
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-combo-box",
|
|
11
|
-
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
11
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n`loader` | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`loading` | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -75,7 +84,7 @@
|
|
|
75
84
|
},
|
|
76
85
|
{
|
|
77
86
|
"name": "clear-button-visible",
|
|
78
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
87
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
79
88
|
"value": {
|
|
80
89
|
"type": [
|
|
81
90
|
"boolean"
|
|
@@ -258,9 +267,7 @@
|
|
|
258
267
|
"description": "The theme variants to apply to the component.",
|
|
259
268
|
"value": {
|
|
260
269
|
"type": [
|
|
261
|
-
"string"
|
|
262
|
-
"null",
|
|
263
|
-
"undefined"
|
|
270
|
+
"string"
|
|
264
271
|
]
|
|
265
272
|
}
|
|
266
273
|
},
|
|
@@ -285,9 +292,18 @@
|
|
|
285
292
|
],
|
|
286
293
|
"js": {
|
|
287
294
|
"properties": [
|
|
295
|
+
{
|
|
296
|
+
"name": "accessibleDescriptionRef",
|
|
297
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
298
|
+
"value": {
|
|
299
|
+
"type": [
|
|
300
|
+
"string"
|
|
301
|
+
]
|
|
302
|
+
}
|
|
303
|
+
},
|
|
288
304
|
{
|
|
289
305
|
"name": "accessibleName",
|
|
290
|
-
"description": "String used to label the component
|
|
306
|
+
"description": "String used to label the component for screen reader users.",
|
|
291
307
|
"value": {
|
|
292
308
|
"type": [
|
|
293
309
|
"string"
|
|
@@ -296,7 +312,7 @@
|
|
|
296
312
|
},
|
|
297
313
|
{
|
|
298
314
|
"name": "accessibleNameRef",
|
|
299
|
-
"description": "
|
|
315
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
300
316
|
"value": {
|
|
301
317
|
"type": [
|
|
302
318
|
"string"
|
|
@@ -350,7 +366,7 @@
|
|
|
350
366
|
},
|
|
351
367
|
{
|
|
352
368
|
"name": "clearButtonVisible",
|
|
353
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
369
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
354
370
|
"value": {
|
|
355
371
|
"type": [
|
|
356
372
|
"boolean"
|
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/combo-box",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,19 +16,26 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-combo-box",
|
|
19
|
-
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
19
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n`loader` | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`loading` | Set when loading items from the data provider\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -70,7 +77,7 @@
|
|
|
70
77
|
},
|
|
71
78
|
{
|
|
72
79
|
"name": "?clearButtonVisible",
|
|
73
|
-
"description": "Set to true to display the clear icon which clears the input.\
|
|
80
|
+
"description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
|
|
74
81
|
"value": {
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|