@vaadin/combo-box 25.2.7 → 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 +37 -4
- package/package.json +14 -14
- package/src/vaadin-combo-box-base-mixin.js +3 -10
- package/src/vaadin-combo-box-item.js +4 -3
- 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 +25 -9
- package/web-types.lit.json +11 -4
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",
|
|
@@ -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",
|
|
@@ -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
|
+
"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": "
|
|
40
|
-
"@vaadin/component-base": "
|
|
41
|
-
"@vaadin/field-base": "
|
|
42
|
-
"@vaadin/input-container": "
|
|
43
|
-
"@vaadin/item": "
|
|
44
|
-
"@vaadin/lit-renderer": "
|
|
45
|
-
"@vaadin/overlay": "
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
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": "
|
|
51
|
-
"@vaadin/chai-plugins": "
|
|
52
|
-
"@vaadin/test-runner-commands": "
|
|
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": "
|
|
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,6 +8,7 @@ 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
13
|
import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
|
|
13
14
|
|
|
@@ -285,11 +286,7 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
285
286
|
}
|
|
286
287
|
|
|
287
288
|
const item = this._getItemElements().find((el) => el.index === index);
|
|
288
|
-
|
|
289
|
-
input.setAttribute('aria-activedescendant', item.id);
|
|
290
|
-
} else {
|
|
291
|
-
input.removeAttribute('aria-activedescendant');
|
|
292
|
-
}
|
|
289
|
+
setOrRemoveAttribute(input, 'aria-activedescendant', item?.id);
|
|
293
290
|
}
|
|
294
291
|
|
|
295
292
|
/** @private */
|
|
@@ -322,11 +319,7 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
322
319
|
if (input) {
|
|
323
320
|
input.setAttribute('aria-expanded', !!opened);
|
|
324
321
|
|
|
325
|
-
|
|
326
|
-
input.setAttribute('aria-controls', this._scroller.id);
|
|
327
|
-
} else {
|
|
328
|
-
input.removeAttribute('aria-controls');
|
|
329
|
-
}
|
|
322
|
+
setOrRemoveAttribute(input, 'aria-controls', opened && this._scroller.id);
|
|
330
323
|
}
|
|
331
324
|
}
|
|
332
325
|
|
|
@@ -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 };
|
|
@@ -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.
|
|
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.
|
|
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"
|
|
@@ -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"
|
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.
|
|
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.
|
|
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
|
}
|