@vaadin/combo-box 24.2.0-alpha7 → 24.2.0-alpha8
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/package.json +13 -13
- package/src/vaadin-combo-box-light.d.ts +8 -0
- package/src/vaadin-combo-box-mixin.js +6 -1
- package/src/vaadin-combo-box.d.ts +8 -0
- package/web-types.json +54 -2
- package/web-types.lit.json +30 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,21 +38,21 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/a11y-base": "24.2.0-
|
|
42
|
-
"@vaadin/component-base": "24.2.0-
|
|
43
|
-
"@vaadin/field-base": "24.2.0-
|
|
44
|
-
"@vaadin/input-container": "24.2.0-
|
|
45
|
-
"@vaadin/item": "24.2.0-
|
|
46
|
-
"@vaadin/lit-renderer": "24.2.0-
|
|
47
|
-
"@vaadin/overlay": "24.2.0-
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
49
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
50
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
41
|
+
"@vaadin/a11y-base": "24.2.0-alpha8",
|
|
42
|
+
"@vaadin/component-base": "24.2.0-alpha8",
|
|
43
|
+
"@vaadin/field-base": "24.2.0-alpha8",
|
|
44
|
+
"@vaadin/input-container": "24.2.0-alpha8",
|
|
45
|
+
"@vaadin/item": "24.2.0-alpha8",
|
|
46
|
+
"@vaadin/lit-renderer": "24.2.0-alpha8",
|
|
47
|
+
"@vaadin/overlay": "24.2.0-alpha8",
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha8",
|
|
49
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha8",
|
|
50
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha8"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@esm-bundle/chai": "^4.3.4",
|
|
54
54
|
"@vaadin/testing-helpers": "^0.4.3",
|
|
55
|
-
"@vaadin/text-field": "24.2.0-
|
|
55
|
+
"@vaadin/text-field": "24.2.0-alpha8",
|
|
56
56
|
"lit": "^2.0.0",
|
|
57
57
|
"sinon": "^13.0.2"
|
|
58
58
|
},
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"web-types.json",
|
|
61
61
|
"web-types.lit.json"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "2c024e8fd462d178430418f76a61f498fb549998"
|
|
64
64
|
}
|
|
@@ -41,6 +41,11 @@ export type ComboBoxLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
41
41
|
*/
|
|
42
42
|
export type ComboBoxLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
43
43
|
|
|
44
|
+
/**
|
|
45
|
+
* Fired when the `dirty` property changes.
|
|
46
|
+
*/
|
|
47
|
+
export type ComboBoxLightDirtyChangedEvent = CustomEvent<{ value: boolean }>;
|
|
48
|
+
|
|
44
49
|
/**
|
|
45
50
|
* Fired when the `value` property changes.
|
|
46
51
|
*/
|
|
@@ -72,6 +77,8 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
|
|
|
72
77
|
|
|
73
78
|
'invalid-changed': ComboBoxLightInvalidChangedEvent;
|
|
74
79
|
|
|
80
|
+
'dirty-changed': ComboBoxLightDirtyChangedEvent;
|
|
81
|
+
|
|
75
82
|
'value-changed': ComboBoxLightValueChangedEvent;
|
|
76
83
|
|
|
77
84
|
'selected-item-changed': ComboBoxLightSelectedItemChangedEvent<TItem>;
|
|
@@ -122,6 +129,7 @@ export interface ComboBoxLightEventMap<TItem> extends HTMLElementEventMap {
|
|
|
122
129
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
123
130
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
124
131
|
* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
|
|
132
|
+
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
125
133
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
126
134
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
127
135
|
*/
|
|
@@ -1086,13 +1086,18 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
1086
1086
|
|
|
1087
1087
|
/** @private */
|
|
1088
1088
|
_detectAndDispatchChange() {
|
|
1089
|
+
const isValueChanged = this.value !== this._lastCommittedValue;
|
|
1090
|
+
if (isValueChanged) {
|
|
1091
|
+
this.dirty = true;
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1089
1094
|
// Do not validate when focusout is caused by document
|
|
1090
1095
|
// losing focus, which happens on browser tab switch.
|
|
1091
1096
|
if (document.hasFocus()) {
|
|
1092
1097
|
this.validate();
|
|
1093
1098
|
}
|
|
1094
1099
|
|
|
1095
|
-
if (
|
|
1100
|
+
if (isValueChanged) {
|
|
1096
1101
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
1097
1102
|
this._lastCommittedValue = this.value;
|
|
1098
1103
|
}
|
|
@@ -53,6 +53,11 @@ export type ComboBoxOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
53
53
|
*/
|
|
54
54
|
export type ComboBoxInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
55
55
|
|
|
56
|
+
/**
|
|
57
|
+
* Fired when the `dirty` property changes.
|
|
58
|
+
*/
|
|
59
|
+
export type ComboBoxDirtyChangedEvent = CustomEvent<{ value: boolean }>;
|
|
60
|
+
|
|
56
61
|
/**
|
|
57
62
|
* Fired when the `value` property changes.
|
|
58
63
|
*/
|
|
@@ -84,6 +89,8 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
|
|
|
84
89
|
|
|
85
90
|
'invalid-changed': ComboBoxInvalidChangedEvent;
|
|
86
91
|
|
|
92
|
+
'dirty-changed': ComboBoxDirtyChangedEvent;
|
|
93
|
+
|
|
87
94
|
'value-changed': ComboBoxValueChangedEvent;
|
|
88
95
|
|
|
89
96
|
'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
|
|
@@ -212,6 +219,7 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
|
|
|
212
219
|
* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
|
|
213
220
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
214
221
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
222
|
+
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
215
223
|
* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
|
|
216
224
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
217
225
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
package/web-types.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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -73,6 +73,17 @@
|
|
|
73
73
|
]
|
|
74
74
|
}
|
|
75
75
|
},
|
|
76
|
+
{
|
|
77
|
+
"name": "dirty",
|
|
78
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
79
|
+
"value": {
|
|
80
|
+
"type": [
|
|
81
|
+
"boolean",
|
|
82
|
+
"null",
|
|
83
|
+
"undefined"
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
76
87
|
{
|
|
77
88
|
"name": "overlay-class",
|
|
78
89
|
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
@@ -265,6 +276,17 @@
|
|
|
265
276
|
]
|
|
266
277
|
}
|
|
267
278
|
},
|
|
279
|
+
{
|
|
280
|
+
"name": "dirty",
|
|
281
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
282
|
+
"value": {
|
|
283
|
+
"type": [
|
|
284
|
+
"boolean",
|
|
285
|
+
"null",
|
|
286
|
+
"undefined"
|
|
287
|
+
]
|
|
288
|
+
}
|
|
289
|
+
},
|
|
268
290
|
{
|
|
269
291
|
"name": "overlayClass",
|
|
270
292
|
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
@@ -447,6 +469,10 @@
|
|
|
447
469
|
"name": "invalid-changed",
|
|
448
470
|
"description": "Fired when the `invalid` property changes."
|
|
449
471
|
},
|
|
472
|
+
{
|
|
473
|
+
"name": "dirty-changed",
|
|
474
|
+
"description": "Fired when the `dirty` property changes."
|
|
475
|
+
},
|
|
450
476
|
{
|
|
451
477
|
"name": "opened-changed",
|
|
452
478
|
"description": "Fired when the `opened` property changes."
|
|
@@ -460,7 +486,7 @@
|
|
|
460
486
|
},
|
|
461
487
|
{
|
|
462
488
|
"name": "vaadin-combo-box",
|
|
463
|
-
"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/24.2.0-
|
|
489
|
+
"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/24.2.0-alpha8/#/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/24.2.0-alpha8/#/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/24.2.0-alpha8/#/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\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
464
490
|
"attributes": [
|
|
465
491
|
{
|
|
466
492
|
"name": "disabled",
|
|
@@ -572,6 +598,17 @@
|
|
|
572
598
|
]
|
|
573
599
|
}
|
|
574
600
|
},
|
|
601
|
+
{
|
|
602
|
+
"name": "dirty",
|
|
603
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
604
|
+
"value": {
|
|
605
|
+
"type": [
|
|
606
|
+
"boolean",
|
|
607
|
+
"null",
|
|
608
|
+
"undefined"
|
|
609
|
+
]
|
|
610
|
+
}
|
|
611
|
+
},
|
|
575
612
|
{
|
|
576
613
|
"name": "clear-button-visible",
|
|
577
614
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -888,6 +925,17 @@
|
|
|
888
925
|
]
|
|
889
926
|
}
|
|
890
927
|
},
|
|
928
|
+
{
|
|
929
|
+
"name": "dirty",
|
|
930
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
931
|
+
"value": {
|
|
932
|
+
"type": [
|
|
933
|
+
"boolean",
|
|
934
|
+
"null",
|
|
935
|
+
"undefined"
|
|
936
|
+
]
|
|
937
|
+
}
|
|
938
|
+
},
|
|
891
939
|
{
|
|
892
940
|
"name": "clearButtonVisible",
|
|
893
941
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -1171,6 +1219,10 @@
|
|
|
1171
1219
|
"name": "invalid-changed",
|
|
1172
1220
|
"description": "Fired when the `invalid` property changes."
|
|
1173
1221
|
},
|
|
1222
|
+
{
|
|
1223
|
+
"name": "dirty-changed",
|
|
1224
|
+
"description": "Fired when the `dirty` property changes."
|
|
1225
|
+
},
|
|
1174
1226
|
{
|
|
1175
1227
|
"name": "opened-changed",
|
|
1176
1228
|
"description": "Fired when the `opened` property changes."
|
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": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -40,6 +40,13 @@
|
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?dirty",
|
|
45
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
43
50
|
{
|
|
44
51
|
"name": "?opened",
|
|
45
52
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -229,6 +236,13 @@
|
|
|
229
236
|
"kind": "expression"
|
|
230
237
|
}
|
|
231
238
|
},
|
|
239
|
+
{
|
|
240
|
+
"name": "@dirty-changed",
|
|
241
|
+
"description": "Fired when the `dirty` property changes.",
|
|
242
|
+
"value": {
|
|
243
|
+
"kind": "expression"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
232
246
|
{
|
|
233
247
|
"name": "@opened-changed",
|
|
234
248
|
"description": "Fired when the `opened` property changes.",
|
|
@@ -247,7 +261,7 @@
|
|
|
247
261
|
},
|
|
248
262
|
{
|
|
249
263
|
"name": "vaadin-combo-box",
|
|
250
|
-
"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/24.2.0-
|
|
264
|
+
"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/24.2.0-alpha8/#/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/24.2.0-alpha8/#/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/24.2.0-alpha8/#/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\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha8/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
251
265
|
"extension": true,
|
|
252
266
|
"attributes": [
|
|
253
267
|
{
|
|
@@ -278,6 +292,13 @@
|
|
|
278
292
|
"kind": "expression"
|
|
279
293
|
}
|
|
280
294
|
},
|
|
295
|
+
{
|
|
296
|
+
"name": "?dirty",
|
|
297
|
+
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
298
|
+
"value": {
|
|
299
|
+
"kind": "expression"
|
|
300
|
+
}
|
|
301
|
+
},
|
|
281
302
|
{
|
|
282
303
|
"name": "?clearButtonVisible",
|
|
283
304
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -551,6 +572,13 @@
|
|
|
551
572
|
"kind": "expression"
|
|
552
573
|
}
|
|
553
574
|
},
|
|
575
|
+
{
|
|
576
|
+
"name": "@dirty-changed",
|
|
577
|
+
"description": "Fired when the `dirty` property changes.",
|
|
578
|
+
"value": {
|
|
579
|
+
"kind": "expression"
|
|
580
|
+
}
|
|
581
|
+
},
|
|
554
582
|
{
|
|
555
583
|
"name": "@opened-changed",
|
|
556
584
|
"description": "Fired when the `opened` property changes.",
|