@vaadin/multi-select-combo-box 25.0.0-alpha8 → 25.0.0-alpha9
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/src/styles/vaadin-multi-select-combo-box-core-styles.js +4 -0
- package/src/vaadin-multi-select-combo-box-mixin.d.ts +9 -80
- package/src/vaadin-multi-select-combo-box-mixin.js +380 -266
- package/src/vaadin-multi-select-combo-box.d.ts +13 -6
- package/src/vaadin-multi-select-combo-box.js +34 -87
- package/web-types.json +207 -230
- package/web-types.lit.json +78 -78
- package/src/vaadin-multi-select-combo-box-internal-mixin.js +0 -446
- package/src/vaadin-multi-select-combo-box-internal.js +0 -57
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/multi-select-combo-box",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-multi-select-combo-box",
|
|
19
|
-
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps slotted chips for selected items\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\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\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------------|-----------------\n`disabled` | Set to a disabled element\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`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`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-
|
|
19
|
+
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps slotted chips for selected items\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\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 to a disabled element\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`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`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -26,6 +26,27 @@
|
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?opened",
|
|
31
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?autoOpenDisabled",
|
|
38
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?readonly",
|
|
45
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
29
50
|
{
|
|
30
51
|
"name": "?autofocus",
|
|
31
52
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
@@ -56,7 +77,7 @@
|
|
|
56
77
|
},
|
|
57
78
|
{
|
|
58
79
|
"name": "?clearButtonVisible",
|
|
59
|
-
"description": "Set to true to display the clear icon which clears the input.",
|
|
80
|
+
"description": "Set to true to display the clear icon which clears the input.\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.",
|
|
60
81
|
"value": {
|
|
61
82
|
"kind": "expression"
|
|
62
83
|
}
|
|
@@ -68,13 +89,6 @@
|
|
|
68
89
|
"kind": "expression"
|
|
69
90
|
}
|
|
70
91
|
},
|
|
71
|
-
{
|
|
72
|
-
"name": "?readonly",
|
|
73
|
-
"description": "When present, it specifies that the field is read-only.",
|
|
74
|
-
"value": {
|
|
75
|
-
"kind": "expression"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
92
|
{
|
|
79
93
|
"name": "?autoExpandHorizontally",
|
|
80
94
|
"description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
|
|
@@ -89,13 +103,6 @@
|
|
|
89
103
|
"kind": "expression"
|
|
90
104
|
}
|
|
91
105
|
},
|
|
92
|
-
{
|
|
93
|
-
"name": "?autoOpenDisabled",
|
|
94
|
-
"description": "Set true to prevent the overlay from opening automatically.",
|
|
95
|
-
"value": {
|
|
96
|
-
"kind": "expression"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
106
|
{
|
|
100
107
|
"name": "?keepFilter",
|
|
101
108
|
"description": "When true, filter string isn't cleared after selecting an item.",
|
|
@@ -110,13 +117,6 @@
|
|
|
110
117
|
"kind": "expression"
|
|
111
118
|
}
|
|
112
119
|
},
|
|
113
|
-
{
|
|
114
|
-
"name": "?opened",
|
|
115
|
-
"description": "True if the dropdown is open, false otherwise.",
|
|
116
|
-
"value": {
|
|
117
|
-
"kind": "expression"
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
120
|
{
|
|
121
121
|
"name": "?allowCustomValue",
|
|
122
122
|
"description": "When true, the user can input a value that is not present in the items list.",
|
|
@@ -132,162 +132,162 @@
|
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": ".
|
|
136
|
-
"description": "
|
|
135
|
+
"name": ".pageSize",
|
|
136
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": ".
|
|
143
|
-
"description": "
|
|
142
|
+
"name": ".size",
|
|
143
|
+
"description": "Total number of items.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".dataProvider",
|
|
150
|
+
"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.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "
|
|
156
|
+
"name": ".overlayClass",
|
|
157
|
+
"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.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": ".
|
|
164
|
-
"description": "
|
|
163
|
+
"name": ".items",
|
|
164
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": ".
|
|
171
|
-
"description": "A
|
|
170
|
+
"name": ".filteredItems",
|
|
171
|
+
"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.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
|
-
"name": ".
|
|
178
|
-
"description": "
|
|
177
|
+
"name": ".filter",
|
|
178
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
|
-
"name": ".
|
|
185
|
-
"description": "
|
|
184
|
+
"name": ".itemLabelPath",
|
|
185
|
+
"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.",
|
|
186
186
|
"value": {
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
190
|
{
|
|
191
|
-
"name": ".
|
|
192
|
-
"description": "
|
|
191
|
+
"name": ".itemValuePath",
|
|
192
|
+
"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.",
|
|
193
193
|
"value": {
|
|
194
194
|
"kind": "expression"
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
|
-
"name": ".
|
|
199
|
-
"description": "
|
|
198
|
+
"name": ".label",
|
|
199
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
200
200
|
"value": {
|
|
201
201
|
"kind": "expression"
|
|
202
202
|
}
|
|
203
203
|
},
|
|
204
204
|
{
|
|
205
|
-
"name": ".
|
|
206
|
-
"description": "
|
|
205
|
+
"name": ".errorMessage",
|
|
206
|
+
"description": "Error to show when the field is invalid.",
|
|
207
207
|
"value": {
|
|
208
208
|
"kind": "expression"
|
|
209
209
|
}
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
|
-
"name": ".
|
|
213
|
-
"description": "
|
|
212
|
+
"name": ".helperText",
|
|
213
|
+
"description": "String used for the helper text.",
|
|
214
214
|
"value": {
|
|
215
215
|
"kind": "expression"
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
|
-
"name": ".
|
|
220
|
-
"description": "
|
|
219
|
+
"name": ".accessibleName",
|
|
220
|
+
"description": "String used to label the component to screen reader users.",
|
|
221
221
|
"value": {
|
|
222
222
|
"kind": "expression"
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
|
-
"name": ".
|
|
227
|
-
"description": "
|
|
226
|
+
"name": ".accessibleNameRef",
|
|
227
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
228
228
|
"value": {
|
|
229
229
|
"kind": "expression"
|
|
230
230
|
}
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
|
-
"name": ".
|
|
234
|
-
"description": "
|
|
233
|
+
"name": ".allowedCharPattern",
|
|
234
|
+
"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-]\"`",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
|
-
"name": ".
|
|
241
|
-
"description": "
|
|
240
|
+
"name": ".name",
|
|
241
|
+
"description": "The name of this field.",
|
|
242
242
|
"value": {
|
|
243
243
|
"kind": "expression"
|
|
244
244
|
}
|
|
245
245
|
},
|
|
246
246
|
{
|
|
247
|
-
"name": ".
|
|
248
|
-
"description": "
|
|
247
|
+
"name": ".placeholder",
|
|
248
|
+
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
|
|
249
249
|
"value": {
|
|
250
250
|
"kind": "expression"
|
|
251
251
|
}
|
|
252
252
|
},
|
|
253
253
|
{
|
|
254
|
-
"name": ".
|
|
255
|
-
"description": "
|
|
254
|
+
"name": ".title",
|
|
255
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
256
256
|
"value": {
|
|
257
257
|
"kind": "expression"
|
|
258
258
|
}
|
|
259
259
|
},
|
|
260
260
|
{
|
|
261
|
-
"name": ".
|
|
262
|
-
"description": "
|
|
261
|
+
"name": ".itemClassNameGenerator",
|
|
262
|
+
"description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
|
|
263
263
|
"value": {
|
|
264
264
|
"kind": "expression"
|
|
265
265
|
}
|
|
266
266
|
},
|
|
267
267
|
{
|
|
268
|
-
"name": ".
|
|
269
|
-
"description": "
|
|
268
|
+
"name": ".itemIdPath",
|
|
269
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
270
270
|
"value": {
|
|
271
271
|
"kind": "expression"
|
|
272
272
|
}
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
|
-
"name": ".
|
|
276
|
-
"description": "
|
|
275
|
+
"name": ".i18n",
|
|
276
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Screen reader announcement on clear button click.\n cleared: 'Selection cleared',\n // Screen reader announcement when a chip is focused.\n focused: ' focused. Press Backspace to remove',\n // Screen reader announcement when item is selected.\n selected: 'added to selection',\n // Screen reader announcement when item is deselected.\n deselected: 'removed from selection',\n // Screen reader announcement of the selected items count.\n // {count} is replaced with the actual count of items.\n total: '{count} items selected',\n}\n```",
|
|
277
277
|
"value": {
|
|
278
278
|
"kind": "expression"
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
{
|
|
282
|
-
"name": ".
|
|
283
|
-
"description": "
|
|
282
|
+
"name": ".selectedItems",
|
|
283
|
+
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
|
284
284
|
"value": {
|
|
285
285
|
"kind": "expression"
|
|
286
286
|
}
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
|
-
"name": ".
|
|
290
|
-
"description": "
|
|
289
|
+
"name": ".renderer",
|
|
290
|
+
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.",
|
|
291
291
|
"value": {
|
|
292
292
|
"kind": "expression"
|
|
293
293
|
}
|
|
@@ -321,29 +321,29 @@
|
|
|
321
321
|
}
|
|
322
322
|
},
|
|
323
323
|
{
|
|
324
|
-
"name": "@
|
|
325
|
-
"description": "Fired when the `
|
|
324
|
+
"name": "@opened-changed",
|
|
325
|
+
"description": "Fired when the `opened` property changes.",
|
|
326
326
|
"value": {
|
|
327
327
|
"kind": "expression"
|
|
328
328
|
}
|
|
329
329
|
},
|
|
330
330
|
{
|
|
331
|
-
"name": "@
|
|
332
|
-
"description": "Fired when the `
|
|
331
|
+
"name": "@filter-changed",
|
|
332
|
+
"description": "Fired when the `filter` property changes.",
|
|
333
333
|
"value": {
|
|
334
334
|
"kind": "expression"
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
337
|
{
|
|
338
|
-
"name": "@
|
|
339
|
-
"description": "Fired when the `
|
|
338
|
+
"name": "@invalid-changed",
|
|
339
|
+
"description": "Fired when the `invalid` property changes.",
|
|
340
340
|
"value": {
|
|
341
341
|
"kind": "expression"
|
|
342
342
|
}
|
|
343
343
|
},
|
|
344
344
|
{
|
|
345
|
-
"name": "@
|
|
346
|
-
"description": "Fired when the `
|
|
345
|
+
"name": "@selected-items-changed",
|
|
346
|
+
"description": "Fired when the `selectedItems` property changes.",
|
|
347
347
|
"value": {
|
|
348
348
|
"kind": "expression"
|
|
349
349
|
}
|