@vaadin/combo-box 25.1.0-alpha8 → 25.1.0-beta1
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 +14 -14
- package/web-types.json +221 -221
- package/web-types.lit.json +91 -91
package/web-types.json
CHANGED
|
@@ -1,40 +1,49 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-beta1",
|
|
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.1.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.1.0-beta1/#/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.1.0-beta1/#/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.1.0-beta1/#/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.1.0-beta1/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "accessible-name",
|
|
15
|
+
"description": "String used to label the component to screen reader users.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"
|
|
18
|
+
"string",
|
|
19
19
|
"null",
|
|
20
20
|
"undefined"
|
|
21
21
|
]
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
25
|
+
"name": "accessible-name-ref",
|
|
26
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
27
27
|
"value": {
|
|
28
28
|
"type": [
|
|
29
|
-
"
|
|
29
|
+
"string",
|
|
30
30
|
"null",
|
|
31
31
|
"undefined"
|
|
32
32
|
]
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
"name": "
|
|
37
|
-
"description": "
|
|
36
|
+
"name": "allow-custom-value",
|
|
37
|
+
"description": "If `true`, the user can input a value that is not present in the items list.\n`value` property will be set to the input value in this case.\nAlso, when `value` is set programmatically, the input value will be set\nto reflect that value.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"boolean"
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "allowed-char-pattern",
|
|
46
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
38
47
|
"value": {
|
|
39
48
|
"type": [
|
|
40
49
|
"string",
|
|
@@ -44,8 +53,8 @@
|
|
|
44
53
|
}
|
|
45
54
|
},
|
|
46
55
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "Set to
|
|
56
|
+
"name": "auto-open-disabled",
|
|
57
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
49
58
|
"value": {
|
|
50
59
|
"type": [
|
|
51
60
|
"boolean",
|
|
@@ -55,8 +64,8 @@
|
|
|
55
64
|
}
|
|
56
65
|
},
|
|
57
66
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
67
|
+
"name": "autofocus",
|
|
68
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
60
69
|
"value": {
|
|
61
70
|
"type": [
|
|
62
71
|
"boolean",
|
|
@@ -66,8 +75,8 @@
|
|
|
66
75
|
}
|
|
67
76
|
},
|
|
68
77
|
{
|
|
69
|
-
"name": "
|
|
70
|
-
"description": "
|
|
78
|
+
"name": "autoselect",
|
|
79
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
71
80
|
"value": {
|
|
72
81
|
"type": [
|
|
73
82
|
"boolean",
|
|
@@ -77,30 +86,30 @@
|
|
|
77
86
|
}
|
|
78
87
|
},
|
|
79
88
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
89
|
+
"name": "clear-button-visible",
|
|
90
|
+
"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.",
|
|
82
91
|
"value": {
|
|
83
92
|
"type": [
|
|
84
|
-
"
|
|
93
|
+
"boolean",
|
|
85
94
|
"null",
|
|
86
95
|
"undefined"
|
|
87
96
|
]
|
|
88
97
|
}
|
|
89
98
|
},
|
|
90
99
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
100
|
+
"name": "disabled",
|
|
101
|
+
"description": "If true, the user cannot interact with this element.",
|
|
93
102
|
"value": {
|
|
94
103
|
"type": [
|
|
95
|
-
"
|
|
104
|
+
"boolean",
|
|
96
105
|
"null",
|
|
97
106
|
"undefined"
|
|
98
107
|
]
|
|
99
108
|
}
|
|
100
109
|
},
|
|
101
110
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "
|
|
111
|
+
"name": "error-message",
|
|
112
|
+
"description": "Error to show when the field is invalid.",
|
|
104
113
|
"value": {
|
|
105
114
|
"type": [
|
|
106
115
|
"string",
|
|
@@ -110,19 +119,17 @@
|
|
|
110
119
|
}
|
|
111
120
|
},
|
|
112
121
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
122
|
+
"name": "filter",
|
|
123
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
115
124
|
"value": {
|
|
116
125
|
"type": [
|
|
117
|
-
"string"
|
|
118
|
-
"null",
|
|
119
|
-
"undefined"
|
|
126
|
+
"string"
|
|
120
127
|
]
|
|
121
128
|
}
|
|
122
129
|
},
|
|
123
130
|
{
|
|
124
|
-
"name": "
|
|
125
|
-
"description": "
|
|
131
|
+
"name": "helper-text",
|
|
132
|
+
"description": "String used for the helper text.",
|
|
126
133
|
"value": {
|
|
127
134
|
"type": [
|
|
128
135
|
"string",
|
|
@@ -132,8 +139,8 @@
|
|
|
132
139
|
}
|
|
133
140
|
},
|
|
134
141
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "Set to true
|
|
142
|
+
"name": "invalid",
|
|
143
|
+
"description": "Set to true when the field is invalid.",
|
|
137
144
|
"value": {
|
|
138
145
|
"type": [
|
|
139
146
|
"boolean",
|
|
@@ -143,8 +150,8 @@
|
|
|
143
150
|
}
|
|
144
151
|
},
|
|
145
152
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
"description": "
|
|
153
|
+
"name": "item-id-path",
|
|
154
|
+
"description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin `selectedItem` and `filteredItems` (items given by the\n`dataProvider` callback).",
|
|
148
155
|
"value": {
|
|
149
156
|
"type": [
|
|
150
157
|
"string",
|
|
@@ -154,30 +161,26 @@
|
|
|
154
161
|
}
|
|
155
162
|
},
|
|
156
163
|
{
|
|
157
|
-
"name": "
|
|
158
|
-
"description": "If
|
|
164
|
+
"name": "item-label-path",
|
|
165
|
+
"description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
|
|
159
166
|
"value": {
|
|
160
167
|
"type": [
|
|
161
|
-
"
|
|
162
|
-
"null",
|
|
163
|
-
"undefined"
|
|
168
|
+
"string"
|
|
164
169
|
]
|
|
165
170
|
}
|
|
166
171
|
},
|
|
167
172
|
{
|
|
168
|
-
"name": "
|
|
169
|
-
"description": "
|
|
173
|
+
"name": "item-value-path",
|
|
174
|
+
"description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
|
|
170
175
|
"value": {
|
|
171
176
|
"type": [
|
|
172
|
-
"string"
|
|
173
|
-
"null",
|
|
174
|
-
"undefined"
|
|
177
|
+
"string"
|
|
175
178
|
]
|
|
176
179
|
}
|
|
177
180
|
},
|
|
178
181
|
{
|
|
179
|
-
"name": "
|
|
180
|
-
"description": "
|
|
182
|
+
"name": "label",
|
|
183
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
181
184
|
"value": {
|
|
182
185
|
"type": [
|
|
183
186
|
"string",
|
|
@@ -187,8 +190,8 @@
|
|
|
187
190
|
}
|
|
188
191
|
},
|
|
189
192
|
{
|
|
190
|
-
"name": "
|
|
191
|
-
"description": "When
|
|
193
|
+
"name": "loading",
|
|
194
|
+
"description": "When set to `true`, \"loading\" attribute is added to host and the overlay element.",
|
|
192
195
|
"value": {
|
|
193
196
|
"type": [
|
|
194
197
|
"boolean"
|
|
@@ -196,19 +199,19 @@
|
|
|
196
199
|
}
|
|
197
200
|
},
|
|
198
201
|
{
|
|
199
|
-
"name": "
|
|
200
|
-
"description": "
|
|
202
|
+
"name": "manual-validation",
|
|
203
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
201
204
|
"value": {
|
|
202
205
|
"type": [
|
|
203
|
-
"
|
|
206
|
+
"boolean",
|
|
204
207
|
"null",
|
|
205
208
|
"undefined"
|
|
206
209
|
]
|
|
207
210
|
}
|
|
208
211
|
},
|
|
209
212
|
{
|
|
210
|
-
"name": "
|
|
211
|
-
"description": "
|
|
213
|
+
"name": "name",
|
|
214
|
+
"description": "The name of this field.",
|
|
212
215
|
"value": {
|
|
213
216
|
"type": [
|
|
214
217
|
"string",
|
|
@@ -218,92 +221,89 @@
|
|
|
218
221
|
}
|
|
219
222
|
},
|
|
220
223
|
{
|
|
221
|
-
"name": "
|
|
222
|
-
"description": "
|
|
223
|
-
"value": {
|
|
224
|
-
"type": [
|
|
225
|
-
"number"
|
|
226
|
-
]
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
"name": "size",
|
|
231
|
-
"description": "Total number of items.",
|
|
224
|
+
"name": "opened",
|
|
225
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
232
226
|
"value": {
|
|
233
227
|
"type": [
|
|
234
|
-
"
|
|
235
|
-
"undefined"
|
|
228
|
+
"boolean"
|
|
236
229
|
]
|
|
237
230
|
}
|
|
238
231
|
},
|
|
239
232
|
{
|
|
240
|
-
"name": "
|
|
241
|
-
"description": "
|
|
233
|
+
"name": "page-size",
|
|
234
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
242
235
|
"value": {
|
|
243
236
|
"type": [
|
|
244
|
-
"
|
|
237
|
+
"number"
|
|
245
238
|
]
|
|
246
239
|
}
|
|
247
240
|
},
|
|
248
241
|
{
|
|
249
|
-
"name": "
|
|
250
|
-
"description": "
|
|
242
|
+
"name": "pattern",
|
|
243
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
251
244
|
"value": {
|
|
252
245
|
"type": [
|
|
253
|
-
"
|
|
246
|
+
"string",
|
|
254
247
|
"null",
|
|
255
248
|
"undefined"
|
|
256
249
|
]
|
|
257
250
|
}
|
|
258
251
|
},
|
|
259
252
|
{
|
|
260
|
-
"name": "
|
|
261
|
-
"description": "
|
|
253
|
+
"name": "placeholder",
|
|
254
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
262
255
|
"value": {
|
|
263
256
|
"type": [
|
|
264
|
-
"string"
|
|
257
|
+
"string",
|
|
258
|
+
"null",
|
|
259
|
+
"undefined"
|
|
265
260
|
]
|
|
266
261
|
}
|
|
267
262
|
},
|
|
268
263
|
{
|
|
269
|
-
"name": "
|
|
270
|
-
"description": "
|
|
264
|
+
"name": "readonly",
|
|
265
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
271
266
|
"value": {
|
|
272
267
|
"type": [
|
|
273
|
-
"
|
|
268
|
+
"boolean"
|
|
274
269
|
]
|
|
275
270
|
}
|
|
276
271
|
},
|
|
277
272
|
{
|
|
278
|
-
"name": "
|
|
279
|
-
"description": "
|
|
273
|
+
"name": "required",
|
|
274
|
+
"description": "Specifies that the user must fill in a value.",
|
|
280
275
|
"value": {
|
|
281
276
|
"type": [
|
|
282
|
-
"
|
|
277
|
+
"boolean",
|
|
278
|
+
"null",
|
|
279
|
+
"undefined"
|
|
283
280
|
]
|
|
284
281
|
}
|
|
285
282
|
},
|
|
286
283
|
{
|
|
287
|
-
"name": "
|
|
288
|
-
"description": "
|
|
284
|
+
"name": "size",
|
|
285
|
+
"description": "Total number of items.",
|
|
289
286
|
"value": {
|
|
290
287
|
"type": [
|
|
291
|
-
"
|
|
288
|
+
"number",
|
|
289
|
+
"undefined"
|
|
292
290
|
]
|
|
293
291
|
}
|
|
294
292
|
},
|
|
295
293
|
{
|
|
296
|
-
"name": "
|
|
297
|
-
"description": "
|
|
294
|
+
"name": "theme",
|
|
295
|
+
"description": "The theme variants to apply to the component.",
|
|
298
296
|
"value": {
|
|
299
297
|
"type": [
|
|
300
|
-
"
|
|
298
|
+
"string",
|
|
299
|
+
"null",
|
|
300
|
+
"undefined"
|
|
301
301
|
]
|
|
302
302
|
}
|
|
303
303
|
},
|
|
304
304
|
{
|
|
305
|
-
"name": "
|
|
306
|
-
"description": "
|
|
305
|
+
"name": "title",
|
|
306
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
307
307
|
"value": {
|
|
308
308
|
"type": [
|
|
309
309
|
"string",
|
|
@@ -313,8 +313,8 @@
|
|
|
313
313
|
}
|
|
314
314
|
},
|
|
315
315
|
{
|
|
316
|
-
"name": "
|
|
317
|
-
"description": "The
|
|
316
|
+
"name": "value",
|
|
317
|
+
"description": "The value of the field.",
|
|
318
318
|
"value": {
|
|
319
319
|
"type": [
|
|
320
320
|
"string",
|
|
@@ -327,30 +327,39 @@
|
|
|
327
327
|
"js": {
|
|
328
328
|
"properties": [
|
|
329
329
|
{
|
|
330
|
-
"name": "
|
|
331
|
-
"description": "
|
|
330
|
+
"name": "accessibleName",
|
|
331
|
+
"description": "String used to label the component to screen reader users.",
|
|
332
332
|
"value": {
|
|
333
333
|
"type": [
|
|
334
|
-
"
|
|
334
|
+
"string",
|
|
335
335
|
"null",
|
|
336
336
|
"undefined"
|
|
337
337
|
]
|
|
338
338
|
}
|
|
339
339
|
},
|
|
340
340
|
{
|
|
341
|
-
"name": "
|
|
342
|
-
"description": "
|
|
341
|
+
"name": "accessibleNameRef",
|
|
342
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
343
343
|
"value": {
|
|
344
344
|
"type": [
|
|
345
|
-
"
|
|
345
|
+
"string",
|
|
346
346
|
"null",
|
|
347
347
|
"undefined"
|
|
348
348
|
]
|
|
349
349
|
}
|
|
350
350
|
},
|
|
351
351
|
{
|
|
352
|
-
"name": "
|
|
353
|
-
"description": "
|
|
352
|
+
"name": "allowCustomValue",
|
|
353
|
+
"description": "If `true`, the user can input a value that is not present in the items list.\n`value` property will be set to the input value in this case.\nAlso, when `value` is set programmatically, the input value will be set\nto reflect that value.",
|
|
354
|
+
"value": {
|
|
355
|
+
"type": [
|
|
356
|
+
"boolean"
|
|
357
|
+
]
|
|
358
|
+
}
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "allowedCharPattern",
|
|
362
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
354
363
|
"value": {
|
|
355
364
|
"type": [
|
|
356
365
|
"string",
|
|
@@ -360,8 +369,8 @@
|
|
|
360
369
|
}
|
|
361
370
|
},
|
|
362
371
|
{
|
|
363
|
-
"name": "
|
|
364
|
-
"description": "
|
|
372
|
+
"name": "autofocus",
|
|
373
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
365
374
|
"value": {
|
|
366
375
|
"type": [
|
|
367
376
|
"boolean",
|
|
@@ -371,8 +380,8 @@
|
|
|
371
380
|
}
|
|
372
381
|
},
|
|
373
382
|
{
|
|
374
|
-
"name": "
|
|
375
|
-
"description": "Set
|
|
383
|
+
"name": "autoOpenDisabled",
|
|
384
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
376
385
|
"value": {
|
|
377
386
|
"type": [
|
|
378
387
|
"boolean",
|
|
@@ -382,8 +391,8 @@
|
|
|
382
391
|
}
|
|
383
392
|
},
|
|
384
393
|
{
|
|
385
|
-
"name": "
|
|
386
|
-
"description": "
|
|
394
|
+
"name": "autoselect",
|
|
395
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
387
396
|
"value": {
|
|
388
397
|
"type": [
|
|
389
398
|
"boolean",
|
|
@@ -393,41 +402,40 @@
|
|
|
393
402
|
}
|
|
394
403
|
},
|
|
395
404
|
{
|
|
396
|
-
"name": "
|
|
397
|
-
"description": "
|
|
405
|
+
"name": "clearButtonVisible",
|
|
406
|
+
"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.",
|
|
398
407
|
"value": {
|
|
399
408
|
"type": [
|
|
400
|
-
"
|
|
409
|
+
"boolean",
|
|
401
410
|
"null",
|
|
402
411
|
"undefined"
|
|
403
412
|
]
|
|
404
413
|
}
|
|
405
414
|
},
|
|
406
415
|
{
|
|
407
|
-
"name": "
|
|
408
|
-
"description": "
|
|
416
|
+
"name": "dataProvider",
|
|
417
|
+
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n\n`params.pageSize` Current page size\n\n`params.filter` Currently applied filter\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items.",
|
|
409
418
|
"value": {
|
|
410
419
|
"type": [
|
|
411
|
-
"
|
|
412
|
-
"null",
|
|
420
|
+
"ComboBoxDataProvider",
|
|
413
421
|
"undefined"
|
|
414
422
|
]
|
|
415
423
|
}
|
|
416
424
|
},
|
|
417
425
|
{
|
|
418
|
-
"name": "
|
|
419
|
-
"description": "
|
|
426
|
+
"name": "disabled",
|
|
427
|
+
"description": "If true, the user cannot interact with this element.",
|
|
420
428
|
"value": {
|
|
421
429
|
"type": [
|
|
422
|
-
"
|
|
430
|
+
"boolean",
|
|
423
431
|
"null",
|
|
424
432
|
"undefined"
|
|
425
433
|
]
|
|
426
434
|
}
|
|
427
435
|
},
|
|
428
436
|
{
|
|
429
|
-
"name": "
|
|
430
|
-
"description": "
|
|
437
|
+
"name": "errorMessage",
|
|
438
|
+
"description": "Error to show when the field is invalid.",
|
|
431
439
|
"value": {
|
|
432
440
|
"type": [
|
|
433
441
|
"string",
|
|
@@ -437,30 +445,28 @@
|
|
|
437
445
|
}
|
|
438
446
|
},
|
|
439
447
|
{
|
|
440
|
-
"name": "
|
|
441
|
-
"description": "
|
|
448
|
+
"name": "filter",
|
|
449
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
442
450
|
"value": {
|
|
443
451
|
"type": [
|
|
444
|
-
"string"
|
|
445
|
-
"null",
|
|
446
|
-
"undefined"
|
|
452
|
+
"string"
|
|
447
453
|
]
|
|
448
454
|
}
|
|
449
455
|
},
|
|
450
456
|
{
|
|
451
|
-
"name": "
|
|
452
|
-
"description": "
|
|
457
|
+
"name": "filteredItems",
|
|
458
|
+
"description": "A subset of items, filtered based on the user input. Filtered items\ncan be assigned directly to omit the internal filtering functionality.\nThe items can be of either `String` or `Object` type.",
|
|
453
459
|
"value": {
|
|
454
460
|
"type": [
|
|
455
|
-
"
|
|
456
|
-
"
|
|
461
|
+
"Array.<ComboBoxItem",
|
|
462
|
+
"string>",
|
|
457
463
|
"undefined"
|
|
458
464
|
]
|
|
459
465
|
}
|
|
460
466
|
},
|
|
461
467
|
{
|
|
462
|
-
"name": "
|
|
463
|
-
"description": "
|
|
468
|
+
"name": "helperText",
|
|
469
|
+
"description": "String used for the helper text.",
|
|
464
470
|
"value": {
|
|
465
471
|
"type": [
|
|
466
472
|
"string",
|
|
@@ -470,8 +476,8 @@
|
|
|
470
476
|
}
|
|
471
477
|
},
|
|
472
478
|
{
|
|
473
|
-
"name": "
|
|
474
|
-
"description": "
|
|
479
|
+
"name": "invalid",
|
|
480
|
+
"description": "Set to true when the field is invalid.",
|
|
475
481
|
"value": {
|
|
476
482
|
"type": [
|
|
477
483
|
"boolean",
|
|
@@ -481,19 +487,19 @@
|
|
|
481
487
|
}
|
|
482
488
|
},
|
|
483
489
|
{
|
|
484
|
-
"name": "
|
|
485
|
-
"description": "The name
|
|
490
|
+
"name": "itemClassNameGenerator",
|
|
491
|
+
"description": "A function used to generate CSS class names for dropdown\nitems based on the item. The return value should be the\ngenerated class name as a string, or multiple class names\nseparated by whitespace characters.",
|
|
486
492
|
"value": {
|
|
487
493
|
"type": [
|
|
488
|
-
"
|
|
494
|
+
"Object",
|
|
489
495
|
"null",
|
|
490
496
|
"undefined"
|
|
491
497
|
]
|
|
492
498
|
}
|
|
493
499
|
},
|
|
494
500
|
{
|
|
495
|
-
"name": "
|
|
496
|
-
"description": "
|
|
501
|
+
"name": "itemIdPath",
|
|
502
|
+
"description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin `selectedItem` and `filteredItems` (items given by the\n`dataProvider` callback).",
|
|
497
503
|
"value": {
|
|
498
504
|
"type": [
|
|
499
505
|
"string",
|
|
@@ -503,68 +509,59 @@
|
|
|
503
509
|
}
|
|
504
510
|
},
|
|
505
511
|
{
|
|
506
|
-
"name": "
|
|
507
|
-
"description": "
|
|
508
|
-
"value": {
|
|
509
|
-
"type": [
|
|
510
|
-
"boolean"
|
|
511
|
-
]
|
|
512
|
-
}
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
"name": "title",
|
|
516
|
-
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
512
|
+
"name": "itemLabelGenerator",
|
|
513
|
+
"description": "A function that is used to generate the label for dropdown\nitems based on the item. Receives one argument:\n- `item` The item to generate the label for.",
|
|
517
514
|
"value": {
|
|
518
515
|
"type": [
|
|
519
|
-
"
|
|
516
|
+
"Object",
|
|
520
517
|
"null",
|
|
521
518
|
"undefined"
|
|
522
519
|
]
|
|
523
520
|
}
|
|
524
521
|
},
|
|
525
522
|
{
|
|
526
|
-
"name": "
|
|
527
|
-
"description": "
|
|
523
|
+
"name": "itemLabelPath",
|
|
524
|
+
"description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
|
|
528
525
|
"value": {
|
|
529
526
|
"type": [
|
|
530
|
-
"string"
|
|
531
|
-
"null",
|
|
532
|
-
"undefined"
|
|
527
|
+
"string"
|
|
533
528
|
]
|
|
534
529
|
}
|
|
535
530
|
},
|
|
536
531
|
{
|
|
537
|
-
"name": "
|
|
538
|
-
"description": "
|
|
532
|
+
"name": "items",
|
|
533
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
539
534
|
"value": {
|
|
540
535
|
"type": [
|
|
541
|
-
"
|
|
536
|
+
"Array.<ComboBoxItem",
|
|
537
|
+
"string>",
|
|
538
|
+
"undefined"
|
|
542
539
|
]
|
|
543
540
|
}
|
|
544
541
|
},
|
|
545
542
|
{
|
|
546
|
-
"name": "
|
|
547
|
-
"description": "
|
|
543
|
+
"name": "itemValuePath",
|
|
544
|
+
"description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
|
|
548
545
|
"value": {
|
|
549
546
|
"type": [
|
|
550
|
-
"
|
|
551
|
-
"undefined"
|
|
547
|
+
"string"
|
|
552
548
|
]
|
|
553
549
|
}
|
|
554
550
|
},
|
|
555
551
|
{
|
|
556
|
-
"name": "
|
|
557
|
-
"description": "
|
|
552
|
+
"name": "label",
|
|
553
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
558
554
|
"value": {
|
|
559
555
|
"type": [
|
|
560
|
-
"
|
|
556
|
+
"string",
|
|
557
|
+
"null",
|
|
561
558
|
"undefined"
|
|
562
559
|
]
|
|
563
560
|
}
|
|
564
561
|
},
|
|
565
562
|
{
|
|
566
|
-
"name": "
|
|
567
|
-
"description": "
|
|
563
|
+
"name": "loading",
|
|
564
|
+
"description": "When set to `true`, \"loading\" attribute is added to host and the overlay element.",
|
|
568
565
|
"value": {
|
|
569
566
|
"type": [
|
|
570
567
|
"boolean"
|
|
@@ -572,8 +569,8 @@
|
|
|
572
569
|
}
|
|
573
570
|
},
|
|
574
571
|
{
|
|
575
|
-
"name": "
|
|
576
|
-
"description": "Set true to
|
|
572
|
+
"name": "manualValidation",
|
|
573
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
577
574
|
"value": {
|
|
578
575
|
"type": [
|
|
579
576
|
"boolean",
|
|
@@ -583,62 +580,62 @@
|
|
|
583
580
|
}
|
|
584
581
|
},
|
|
585
582
|
{
|
|
586
|
-
"name": "
|
|
587
|
-
"description": "
|
|
583
|
+
"name": "name",
|
|
584
|
+
"description": "The name of this field.",
|
|
588
585
|
"value": {
|
|
589
586
|
"type": [
|
|
590
|
-
"
|
|
591
|
-
"
|
|
587
|
+
"string",
|
|
588
|
+
"null",
|
|
592
589
|
"undefined"
|
|
593
590
|
]
|
|
594
591
|
}
|
|
595
592
|
},
|
|
596
593
|
{
|
|
597
|
-
"name": "
|
|
598
|
-
"description": "
|
|
594
|
+
"name": "opened",
|
|
595
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
599
596
|
"value": {
|
|
600
597
|
"type": [
|
|
601
|
-
"
|
|
602
|
-
"string>",
|
|
603
|
-
"undefined"
|
|
598
|
+
"boolean"
|
|
604
599
|
]
|
|
605
600
|
}
|
|
606
601
|
},
|
|
607
602
|
{
|
|
608
|
-
"name": "
|
|
609
|
-
"description": "
|
|
603
|
+
"name": "pageSize",
|
|
604
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
610
605
|
"value": {
|
|
611
606
|
"type": [
|
|
612
|
-
"
|
|
607
|
+
"number"
|
|
613
608
|
]
|
|
614
609
|
}
|
|
615
610
|
},
|
|
616
611
|
{
|
|
617
|
-
"name": "
|
|
618
|
-
"description": "A
|
|
612
|
+
"name": "pattern",
|
|
613
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
619
614
|
"value": {
|
|
620
615
|
"type": [
|
|
621
|
-
"
|
|
616
|
+
"string",
|
|
622
617
|
"null",
|
|
623
618
|
"undefined"
|
|
624
619
|
]
|
|
625
620
|
}
|
|
626
621
|
},
|
|
627
622
|
{
|
|
628
|
-
"name": "
|
|
629
|
-
"description": "
|
|
623
|
+
"name": "placeholder",
|
|
624
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
630
625
|
"value": {
|
|
631
626
|
"type": [
|
|
632
|
-
"string"
|
|
627
|
+
"string",
|
|
628
|
+
"null",
|
|
629
|
+
"undefined"
|
|
633
630
|
]
|
|
634
631
|
}
|
|
635
632
|
},
|
|
636
633
|
{
|
|
637
|
-
"name": "
|
|
638
|
-
"description": "
|
|
634
|
+
"name": "readonly",
|
|
635
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
639
636
|
"value": {
|
|
640
637
|
"type": [
|
|
641
|
-
"
|
|
638
|
+
"boolean"
|
|
642
639
|
]
|
|
643
640
|
}
|
|
644
641
|
},
|
|
@@ -653,48 +650,51 @@
|
|
|
653
650
|
}
|
|
654
651
|
},
|
|
655
652
|
{
|
|
656
|
-
"name": "
|
|
657
|
-
"description": "
|
|
653
|
+
"name": "required",
|
|
654
|
+
"description": "Specifies that the user must fill in a value.",
|
|
658
655
|
"value": {
|
|
659
656
|
"type": [
|
|
660
|
-
"boolean"
|
|
657
|
+
"boolean",
|
|
658
|
+
"null",
|
|
659
|
+
"undefined"
|
|
661
660
|
]
|
|
662
661
|
}
|
|
663
662
|
},
|
|
664
663
|
{
|
|
665
|
-
"name": "
|
|
666
|
-
"description": "
|
|
664
|
+
"name": "selectedItem",
|
|
665
|
+
"description": "The selected item from the `items` array.",
|
|
667
666
|
"value": {
|
|
668
667
|
"type": [
|
|
669
|
-
"
|
|
668
|
+
"ComboBoxItem",
|
|
669
|
+
"string",
|
|
670
|
+
"undefined"
|
|
670
671
|
]
|
|
671
672
|
}
|
|
672
673
|
},
|
|
673
674
|
{
|
|
674
|
-
"name": "
|
|
675
|
-
"description": "
|
|
675
|
+
"name": "size",
|
|
676
|
+
"description": "Total number of items.",
|
|
676
677
|
"value": {
|
|
677
678
|
"type": [
|
|
678
|
-
"
|
|
679
|
-
"string",
|
|
679
|
+
"number",
|
|
680
680
|
"undefined"
|
|
681
681
|
]
|
|
682
682
|
}
|
|
683
683
|
},
|
|
684
684
|
{
|
|
685
|
-
"name": "
|
|
686
|
-
"description": "
|
|
685
|
+
"name": "title",
|
|
686
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
687
687
|
"value": {
|
|
688
688
|
"type": [
|
|
689
|
-
"
|
|
689
|
+
"string",
|
|
690
690
|
"null",
|
|
691
691
|
"undefined"
|
|
692
692
|
]
|
|
693
693
|
}
|
|
694
694
|
},
|
|
695
695
|
{
|
|
696
|
-
"name": "
|
|
697
|
-
"description": "
|
|
696
|
+
"name": "value",
|
|
697
|
+
"description": "The value of the field.",
|
|
698
698
|
"value": {
|
|
699
699
|
"type": [
|
|
700
700
|
"string",
|
|
@@ -705,21 +705,29 @@
|
|
|
705
705
|
}
|
|
706
706
|
],
|
|
707
707
|
"events": [
|
|
708
|
-
{
|
|
709
|
-
"name": "validated",
|
|
710
|
-
"description": "Fired whenever the field is validated."
|
|
711
|
-
},
|
|
712
708
|
{
|
|
713
709
|
"name": "change",
|
|
714
710
|
"description": "Fired when the user commits a value change."
|
|
715
711
|
},
|
|
712
|
+
{
|
|
713
|
+
"name": "custom-value-set",
|
|
714
|
+
"description": "Fired when the user sets a custom value."
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
"name": "filter-changed",
|
|
718
|
+
"description": "Fired when the `filter` property changes."
|
|
719
|
+
},
|
|
716
720
|
{
|
|
717
721
|
"name": "input",
|
|
718
722
|
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
719
723
|
},
|
|
720
724
|
{
|
|
721
|
-
"name": "
|
|
722
|
-
"description": "Fired when the
|
|
725
|
+
"name": "invalid-changed",
|
|
726
|
+
"description": "Fired when the `invalid` property changes."
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
"name": "opened-changed",
|
|
730
|
+
"description": "Fired when the `opened` property changes."
|
|
723
731
|
},
|
|
724
732
|
{
|
|
725
733
|
"name": "selected-item-changed",
|
|
@@ -734,20 +742,12 @@
|
|
|
734
742
|
"description": "Fired after the `vaadin-combo-box-overlay` opens."
|
|
735
743
|
},
|
|
736
744
|
{
|
|
737
|
-
"name": "
|
|
738
|
-
"description": "Fired
|
|
739
|
-
},
|
|
740
|
-
{
|
|
741
|
-
"name": "invalid-changed",
|
|
742
|
-
"description": "Fired when the `invalid` property changes."
|
|
743
|
-
},
|
|
744
|
-
{
|
|
745
|
-
"name": "opened-changed",
|
|
746
|
-
"description": "Fired when the `opened` property changes."
|
|
745
|
+
"name": "validated",
|
|
746
|
+
"description": "Fired whenever the field is validated."
|
|
747
747
|
},
|
|
748
748
|
{
|
|
749
|
-
"name": "
|
|
750
|
-
"description": "Fired when the
|
|
749
|
+
"name": "value-changed",
|
|
750
|
+
"description": "Fired when the value changes."
|
|
751
751
|
}
|
|
752
752
|
]
|
|
753
753
|
}
|