@vaadin/select 25.1.2 → 25.2.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 +309 -3
- package/package.json +16 -16
- package/src/vaadin-select-base-mixin.js +1 -1
- package/src/vaadin-select.js +0 -6
- package/web-types.json +35 -99
- package/web-types.lit.json +36 -36
package/custom-elements.json
CHANGED
|
@@ -54,6 +54,20 @@
|
|
|
54
54
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "field",
|
|
59
|
+
"name": "autofocus",
|
|
60
|
+
"privacy": "public",
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "boolean"
|
|
63
|
+
},
|
|
64
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
65
|
+
"attribute": "autofocus",
|
|
66
|
+
"inheritedFrom": {
|
|
67
|
+
"name": "DelegateFocusMixin",
|
|
68
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
57
71
|
{
|
|
58
72
|
"kind": "method",
|
|
59
73
|
"name": "checkValidity",
|
|
@@ -62,6 +76,24 @@
|
|
|
62
76
|
"type": {
|
|
63
77
|
"text": "boolean"
|
|
64
78
|
}
|
|
79
|
+
},
|
|
80
|
+
"inheritedFrom": {
|
|
81
|
+
"name": "ValidateMixin",
|
|
82
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"kind": "field",
|
|
87
|
+
"name": "disabled",
|
|
88
|
+
"privacy": "public",
|
|
89
|
+
"type": {
|
|
90
|
+
"text": "boolean"
|
|
91
|
+
},
|
|
92
|
+
"description": "If true, the user cannot interact with this element.",
|
|
93
|
+
"attribute": "disabled",
|
|
94
|
+
"inheritedFrom": {
|
|
95
|
+
"name": "TabindexMixin",
|
|
96
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
65
97
|
}
|
|
66
98
|
},
|
|
67
99
|
{
|
|
@@ -92,6 +124,20 @@
|
|
|
92
124
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
93
125
|
}
|
|
94
126
|
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "field",
|
|
129
|
+
"name": "invalid",
|
|
130
|
+
"privacy": "public",
|
|
131
|
+
"type": {
|
|
132
|
+
"text": "boolean"
|
|
133
|
+
},
|
|
134
|
+
"description": "Set to true when the field is invalid.",
|
|
135
|
+
"attribute": "invalid",
|
|
136
|
+
"inheritedFrom": {
|
|
137
|
+
"name": "ValidateMixin",
|
|
138
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
95
141
|
{
|
|
96
142
|
"kind": "field",
|
|
97
143
|
"name": "items",
|
|
@@ -116,6 +162,20 @@
|
|
|
116
162
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
117
163
|
}
|
|
118
164
|
},
|
|
165
|
+
{
|
|
166
|
+
"kind": "field",
|
|
167
|
+
"name": "manualValidation",
|
|
168
|
+
"privacy": "public",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "boolean"
|
|
171
|
+
},
|
|
172
|
+
"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.",
|
|
173
|
+
"attribute": "manual-validation",
|
|
174
|
+
"inheritedFrom": {
|
|
175
|
+
"name": "ValidateMixin",
|
|
176
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
177
|
+
}
|
|
178
|
+
},
|
|
119
179
|
{
|
|
120
180
|
"kind": "field",
|
|
121
181
|
"name": "name",
|
|
@@ -181,6 +241,34 @@
|
|
|
181
241
|
"name": "requestContentUpdate",
|
|
182
242
|
"description": "Requests an update for the content of the select.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
|
|
183
243
|
},
|
|
244
|
+
{
|
|
245
|
+
"kind": "field",
|
|
246
|
+
"name": "required",
|
|
247
|
+
"privacy": "public",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "boolean"
|
|
250
|
+
},
|
|
251
|
+
"description": "Specifies that the user must fill in a value.",
|
|
252
|
+
"attribute": "required",
|
|
253
|
+
"inheritedFrom": {
|
|
254
|
+
"name": "ValidateMixin",
|
|
255
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"kind": "method",
|
|
260
|
+
"name": "validate",
|
|
261
|
+
"description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
|
|
262
|
+
"return": {
|
|
263
|
+
"type": {
|
|
264
|
+
"text": "boolean"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
"inheritedFrom": {
|
|
268
|
+
"name": "ValidateMixin",
|
|
269
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
184
272
|
{
|
|
185
273
|
"kind": "field",
|
|
186
274
|
"name": "value",
|
|
@@ -198,6 +286,16 @@
|
|
|
198
286
|
"type": {
|
|
199
287
|
"text": "CustomEvent"
|
|
200
288
|
}
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"name": "validated",
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "CustomEvent"
|
|
294
|
+
},
|
|
295
|
+
"inheritedFrom": {
|
|
296
|
+
"name": "ValidateMixin",
|
|
297
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
298
|
+
}
|
|
201
299
|
}
|
|
202
300
|
],
|
|
203
301
|
"attributes": [
|
|
@@ -225,6 +323,30 @@
|
|
|
225
323
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
226
324
|
}
|
|
227
325
|
},
|
|
326
|
+
{
|
|
327
|
+
"name": "autofocus",
|
|
328
|
+
"type": {
|
|
329
|
+
"text": "boolean"
|
|
330
|
+
},
|
|
331
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
332
|
+
"fieldName": "autofocus",
|
|
333
|
+
"inheritedFrom": {
|
|
334
|
+
"name": "DelegateFocusMixin",
|
|
335
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "disabled",
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "boolean"
|
|
342
|
+
},
|
|
343
|
+
"description": "If true, the user cannot interact with this element.",
|
|
344
|
+
"fieldName": "disabled",
|
|
345
|
+
"inheritedFrom": {
|
|
346
|
+
"name": "TabindexMixin",
|
|
347
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
228
350
|
{
|
|
229
351
|
"name": "error-message",
|
|
230
352
|
"type": {
|
|
@@ -249,6 +371,18 @@
|
|
|
249
371
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
250
372
|
}
|
|
251
373
|
},
|
|
374
|
+
{
|
|
375
|
+
"name": "invalid",
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "boolean"
|
|
378
|
+
},
|
|
379
|
+
"description": "Set to true when the field is invalid.",
|
|
380
|
+
"fieldName": "invalid",
|
|
381
|
+
"inheritedFrom": {
|
|
382
|
+
"name": "ValidateMixin",
|
|
383
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
384
|
+
}
|
|
385
|
+
},
|
|
252
386
|
{
|
|
253
387
|
"name": "label",
|
|
254
388
|
"type": {
|
|
@@ -261,6 +395,18 @@
|
|
|
261
395
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
262
396
|
}
|
|
263
397
|
},
|
|
398
|
+
{
|
|
399
|
+
"name": "manual-validation",
|
|
400
|
+
"type": {
|
|
401
|
+
"text": "boolean"
|
|
402
|
+
},
|
|
403
|
+
"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.",
|
|
404
|
+
"fieldName": "manualValidation",
|
|
405
|
+
"inheritedFrom": {
|
|
406
|
+
"name": "ValidateMixin",
|
|
407
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
408
|
+
}
|
|
409
|
+
},
|
|
264
410
|
{
|
|
265
411
|
"name": "name",
|
|
266
412
|
"type": {
|
|
@@ -309,6 +455,18 @@
|
|
|
309
455
|
"description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
|
|
310
456
|
"fieldName": "renderer"
|
|
311
457
|
},
|
|
458
|
+
{
|
|
459
|
+
"name": "required",
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "boolean"
|
|
462
|
+
},
|
|
463
|
+
"description": "Specifies that the user must fill in a value.",
|
|
464
|
+
"fieldName": "required",
|
|
465
|
+
"inheritedFrom": {
|
|
466
|
+
"name": "ValidateMixin",
|
|
467
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
468
|
+
}
|
|
469
|
+
},
|
|
312
470
|
{
|
|
313
471
|
"name": "value",
|
|
314
472
|
"type": {
|
|
@@ -907,6 +1065,20 @@
|
|
|
907
1065
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
908
1066
|
}
|
|
909
1067
|
},
|
|
1068
|
+
{
|
|
1069
|
+
"kind": "field",
|
|
1070
|
+
"name": "autofocus",
|
|
1071
|
+
"privacy": "public",
|
|
1072
|
+
"type": {
|
|
1073
|
+
"text": "boolean"
|
|
1074
|
+
},
|
|
1075
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
1076
|
+
"attribute": "autofocus",
|
|
1077
|
+
"inheritedFrom": {
|
|
1078
|
+
"name": "DelegateFocusMixin",
|
|
1079
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
1080
|
+
}
|
|
1081
|
+
},
|
|
910
1082
|
{
|
|
911
1083
|
"kind": "method",
|
|
912
1084
|
"name": "checkValidity",
|
|
@@ -917,8 +1089,22 @@
|
|
|
917
1089
|
}
|
|
918
1090
|
},
|
|
919
1091
|
"inheritedFrom": {
|
|
920
|
-
"name": "
|
|
921
|
-
"
|
|
1092
|
+
"name": "ValidateMixin",
|
|
1093
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1094
|
+
}
|
|
1095
|
+
},
|
|
1096
|
+
{
|
|
1097
|
+
"kind": "field",
|
|
1098
|
+
"name": "disabled",
|
|
1099
|
+
"privacy": "public",
|
|
1100
|
+
"type": {
|
|
1101
|
+
"text": "boolean"
|
|
1102
|
+
},
|
|
1103
|
+
"description": "If true, the user cannot interact with this element.",
|
|
1104
|
+
"attribute": "disabled",
|
|
1105
|
+
"inheritedFrom": {
|
|
1106
|
+
"name": "TabindexMixin",
|
|
1107
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
922
1108
|
}
|
|
923
1109
|
},
|
|
924
1110
|
{
|
|
@@ -949,6 +1135,20 @@
|
|
|
949
1135
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
950
1136
|
}
|
|
951
1137
|
},
|
|
1138
|
+
{
|
|
1139
|
+
"kind": "field",
|
|
1140
|
+
"name": "invalid",
|
|
1141
|
+
"privacy": "public",
|
|
1142
|
+
"type": {
|
|
1143
|
+
"text": "boolean"
|
|
1144
|
+
},
|
|
1145
|
+
"description": "Set to true when the field is invalid.",
|
|
1146
|
+
"attribute": "invalid",
|
|
1147
|
+
"inheritedFrom": {
|
|
1148
|
+
"name": "ValidateMixin",
|
|
1149
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1150
|
+
}
|
|
1151
|
+
},
|
|
952
1152
|
{
|
|
953
1153
|
"kind": "field",
|
|
954
1154
|
"name": "items",
|
|
@@ -977,6 +1177,20 @@
|
|
|
977
1177
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
978
1178
|
}
|
|
979
1179
|
},
|
|
1180
|
+
{
|
|
1181
|
+
"kind": "field",
|
|
1182
|
+
"name": "manualValidation",
|
|
1183
|
+
"privacy": "public",
|
|
1184
|
+
"type": {
|
|
1185
|
+
"text": "boolean"
|
|
1186
|
+
},
|
|
1187
|
+
"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.",
|
|
1188
|
+
"attribute": "manual-validation",
|
|
1189
|
+
"inheritedFrom": {
|
|
1190
|
+
"name": "ValidateMixin",
|
|
1191
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1192
|
+
}
|
|
1193
|
+
},
|
|
980
1194
|
{
|
|
981
1195
|
"kind": "field",
|
|
982
1196
|
"name": "name",
|
|
@@ -1070,6 +1284,34 @@
|
|
|
1070
1284
|
"module": "src/vaadin-select-base-mixin.js"
|
|
1071
1285
|
}
|
|
1072
1286
|
},
|
|
1287
|
+
{
|
|
1288
|
+
"kind": "field",
|
|
1289
|
+
"name": "required",
|
|
1290
|
+
"privacy": "public",
|
|
1291
|
+
"type": {
|
|
1292
|
+
"text": "boolean"
|
|
1293
|
+
},
|
|
1294
|
+
"description": "Specifies that the user must fill in a value.",
|
|
1295
|
+
"attribute": "required",
|
|
1296
|
+
"inheritedFrom": {
|
|
1297
|
+
"name": "ValidateMixin",
|
|
1298
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1299
|
+
}
|
|
1300
|
+
},
|
|
1301
|
+
{
|
|
1302
|
+
"kind": "method",
|
|
1303
|
+
"name": "validate",
|
|
1304
|
+
"description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
|
|
1305
|
+
"return": {
|
|
1306
|
+
"type": {
|
|
1307
|
+
"text": "boolean"
|
|
1308
|
+
}
|
|
1309
|
+
},
|
|
1310
|
+
"inheritedFrom": {
|
|
1311
|
+
"name": "ValidateMixin",
|
|
1312
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1313
|
+
}
|
|
1314
|
+
},
|
|
1073
1315
|
{
|
|
1074
1316
|
"kind": "field",
|
|
1075
1317
|
"name": "value",
|
|
@@ -1112,11 +1354,15 @@
|
|
|
1112
1354
|
"name": "opened-changed"
|
|
1113
1355
|
},
|
|
1114
1356
|
{
|
|
1357
|
+
"name": "validated",
|
|
1115
1358
|
"type": {
|
|
1116
1359
|
"text": "CustomEvent"
|
|
1117
1360
|
},
|
|
1118
1361
|
"description": "Fired whenever the field is validated.",
|
|
1119
|
-
"
|
|
1362
|
+
"inheritedFrom": {
|
|
1363
|
+
"name": "ValidateMixin",
|
|
1364
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1365
|
+
}
|
|
1120
1366
|
},
|
|
1121
1367
|
{
|
|
1122
1368
|
"type": {
|
|
@@ -1179,6 +1425,30 @@
|
|
|
1179
1425
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1180
1426
|
}
|
|
1181
1427
|
},
|
|
1428
|
+
{
|
|
1429
|
+
"name": "autofocus",
|
|
1430
|
+
"type": {
|
|
1431
|
+
"text": "boolean"
|
|
1432
|
+
},
|
|
1433
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
1434
|
+
"fieldName": "autofocus",
|
|
1435
|
+
"inheritedFrom": {
|
|
1436
|
+
"name": "DelegateFocusMixin",
|
|
1437
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
1438
|
+
}
|
|
1439
|
+
},
|
|
1440
|
+
{
|
|
1441
|
+
"name": "disabled",
|
|
1442
|
+
"type": {
|
|
1443
|
+
"text": "boolean"
|
|
1444
|
+
},
|
|
1445
|
+
"description": "If true, the user cannot interact with this element.",
|
|
1446
|
+
"fieldName": "disabled",
|
|
1447
|
+
"inheritedFrom": {
|
|
1448
|
+
"name": "TabindexMixin",
|
|
1449
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
1450
|
+
}
|
|
1451
|
+
},
|
|
1182
1452
|
{
|
|
1183
1453
|
"name": "error-message",
|
|
1184
1454
|
"type": {
|
|
@@ -1203,6 +1473,18 @@
|
|
|
1203
1473
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1204
1474
|
}
|
|
1205
1475
|
},
|
|
1476
|
+
{
|
|
1477
|
+
"name": "invalid",
|
|
1478
|
+
"type": {
|
|
1479
|
+
"text": "boolean"
|
|
1480
|
+
},
|
|
1481
|
+
"description": "Set to true when the field is invalid.",
|
|
1482
|
+
"fieldName": "invalid",
|
|
1483
|
+
"inheritedFrom": {
|
|
1484
|
+
"name": "ValidateMixin",
|
|
1485
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1486
|
+
}
|
|
1487
|
+
},
|
|
1206
1488
|
{
|
|
1207
1489
|
"name": "label",
|
|
1208
1490
|
"type": {
|
|
@@ -1215,6 +1497,18 @@
|
|
|
1215
1497
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
1216
1498
|
}
|
|
1217
1499
|
},
|
|
1500
|
+
{
|
|
1501
|
+
"name": "manual-validation",
|
|
1502
|
+
"type": {
|
|
1503
|
+
"text": "boolean"
|
|
1504
|
+
},
|
|
1505
|
+
"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.",
|
|
1506
|
+
"fieldName": "manualValidation",
|
|
1507
|
+
"inheritedFrom": {
|
|
1508
|
+
"name": "ValidateMixin",
|
|
1509
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1510
|
+
}
|
|
1511
|
+
},
|
|
1218
1512
|
{
|
|
1219
1513
|
"name": "name",
|
|
1220
1514
|
"type": {
|
|
@@ -1287,6 +1581,18 @@
|
|
|
1287
1581
|
"module": "src/vaadin-select-base-mixin.js"
|
|
1288
1582
|
}
|
|
1289
1583
|
},
|
|
1584
|
+
{
|
|
1585
|
+
"name": "required",
|
|
1586
|
+
"type": {
|
|
1587
|
+
"text": "boolean"
|
|
1588
|
+
},
|
|
1589
|
+
"description": "Specifies that the user must fill in a value.",
|
|
1590
|
+
"fieldName": "required",
|
|
1591
|
+
"inheritedFrom": {
|
|
1592
|
+
"name": "ValidateMixin",
|
|
1593
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1594
|
+
}
|
|
1595
|
+
},
|
|
1290
1596
|
{
|
|
1291
1597
|
"name": "value",
|
|
1292
1598
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/select",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,24 +37,24 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "
|
|
41
|
-
"@vaadin/button": "
|
|
42
|
-
"@vaadin/component-base": "
|
|
43
|
-
"@vaadin/field-base": "
|
|
44
|
-
"@vaadin/input-container": "
|
|
45
|
-
"@vaadin/item": "
|
|
46
|
-
"@vaadin/list-box": "
|
|
47
|
-
"@vaadin/lit-renderer": "
|
|
48
|
-
"@vaadin/overlay": "
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
41
|
+
"@vaadin/button": "25.2.0-alpha10",
|
|
42
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
43
|
+
"@vaadin/field-base": "25.2.0-alpha10",
|
|
44
|
+
"@vaadin/input-container": "25.2.0-alpha10",
|
|
45
|
+
"@vaadin/item": "25.2.0-alpha10",
|
|
46
|
+
"@vaadin/list-box": "25.2.0-alpha10",
|
|
47
|
+
"@vaadin/lit-renderer": "25.2.0-alpha10",
|
|
48
|
+
"@vaadin/overlay": "25.2.0-alpha10",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
50
50
|
"lit": "^3.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@vaadin/aura": "
|
|
54
|
-
"@vaadin/chai-plugins": "
|
|
55
|
-
"@vaadin/test-runner-commands": "
|
|
53
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
54
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
55
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
56
56
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
57
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
57
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
58
58
|
"sinon": "^21.0.2"
|
|
59
59
|
},
|
|
60
60
|
"customElements": "custom-elements.json",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"web-types.json",
|
|
63
63
|
"web-types.lit.json"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
66
66
|
}
|
|
@@ -271,7 +271,7 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
271
271
|
'click',
|
|
272
272
|
(e) => {
|
|
273
273
|
const item = e.composedPath().find((el) => el._hasVaadinItemMixin);
|
|
274
|
-
this.__dispatchChangePending = Boolean(item
|
|
274
|
+
this.__dispatchChangePending = Boolean(item?.value !== undefined && item.value !== this.value);
|
|
275
275
|
this.opened = false;
|
|
276
276
|
},
|
|
277
277
|
true,
|
package/src/vaadin-select.js
CHANGED
|
@@ -220,12 +220,6 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
|
|
|
220
220
|
this._menuElement.focus({ focusVisible: isKeyboardActive() });
|
|
221
221
|
}
|
|
222
222
|
}
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
* Fired when the user commits a value change.
|
|
226
|
-
*
|
|
227
|
-
* @event change
|
|
228
|
-
*/
|
|
229
223
|
}
|
|
230
224
|
|
|
231
225
|
defineCustomElement(Select);
|
package/web-types.json
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/select",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-select",
|
|
11
|
-
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\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-select-overlay-width` | Width of the overlay |\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 toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`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`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
11
|
+
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\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-select-overlay-width` | Width of the overlay |\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 toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`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`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-name",
|
|
15
15
|
"description": "String used to label the component to screen reader users.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"string"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"string"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -37,9 +33,7 @@
|
|
|
37
33
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
38
34
|
"value": {
|
|
39
35
|
"type": [
|
|
40
|
-
"boolean"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
36
|
+
"boolean"
|
|
43
37
|
]
|
|
44
38
|
}
|
|
45
39
|
},
|
|
@@ -48,9 +42,7 @@
|
|
|
48
42
|
"description": "If true, the user cannot interact with this element.",
|
|
49
43
|
"value": {
|
|
50
44
|
"type": [
|
|
51
|
-
"boolean"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
45
|
+
"boolean"
|
|
54
46
|
]
|
|
55
47
|
}
|
|
56
48
|
},
|
|
@@ -59,9 +51,7 @@
|
|
|
59
51
|
"description": "Error to show when the field is invalid.",
|
|
60
52
|
"value": {
|
|
61
53
|
"type": [
|
|
62
|
-
"string"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
54
|
+
"string"
|
|
65
55
|
]
|
|
66
56
|
}
|
|
67
57
|
},
|
|
@@ -70,9 +60,7 @@
|
|
|
70
60
|
"description": "String used for the helper text.",
|
|
71
61
|
"value": {
|
|
72
62
|
"type": [
|
|
73
|
-
"string"
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
63
|
+
"string"
|
|
76
64
|
]
|
|
77
65
|
}
|
|
78
66
|
},
|
|
@@ -81,9 +69,7 @@
|
|
|
81
69
|
"description": "Set to true when the field is invalid.",
|
|
82
70
|
"value": {
|
|
83
71
|
"type": [
|
|
84
|
-
"boolean"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
72
|
+
"boolean"
|
|
87
73
|
]
|
|
88
74
|
}
|
|
89
75
|
},
|
|
@@ -92,9 +78,7 @@
|
|
|
92
78
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
93
79
|
"value": {
|
|
94
80
|
"type": [
|
|
95
|
-
"string"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
81
|
+
"string"
|
|
98
82
|
]
|
|
99
83
|
}
|
|
100
84
|
},
|
|
@@ -103,9 +87,7 @@
|
|
|
103
87
|
"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.",
|
|
104
88
|
"value": {
|
|
105
89
|
"type": [
|
|
106
|
-
"boolean"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
90
|
+
"boolean"
|
|
109
91
|
]
|
|
110
92
|
}
|
|
111
93
|
},
|
|
@@ -114,9 +96,7 @@
|
|
|
114
96
|
"description": "The name of this element.",
|
|
115
97
|
"value": {
|
|
116
98
|
"type": [
|
|
117
|
-
"string"
|
|
118
|
-
"null",
|
|
119
|
-
"undefined"
|
|
99
|
+
"string"
|
|
120
100
|
]
|
|
121
101
|
}
|
|
122
102
|
},
|
|
@@ -125,9 +105,7 @@
|
|
|
125
105
|
"description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.",
|
|
126
106
|
"value": {
|
|
127
107
|
"type": [
|
|
128
|
-
"boolean"
|
|
129
|
-
"null",
|
|
130
|
-
"undefined"
|
|
108
|
+
"boolean"
|
|
131
109
|
]
|
|
132
110
|
}
|
|
133
111
|
},
|
|
@@ -136,9 +114,7 @@
|
|
|
136
114
|
"description": "Set when the select is open",
|
|
137
115
|
"value": {
|
|
138
116
|
"type": [
|
|
139
|
-
"boolean"
|
|
140
|
-
"null",
|
|
141
|
-
"undefined"
|
|
117
|
+
"boolean"
|
|
142
118
|
]
|
|
143
119
|
}
|
|
144
120
|
},
|
|
@@ -147,9 +123,7 @@
|
|
|
147
123
|
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be displayed in the case that there\nis no item selected, or the selected item has an empty\nstring label, or the selected item has no label and it's\nDOM content is empty.",
|
|
148
124
|
"value": {
|
|
149
125
|
"type": [
|
|
150
|
-
"string"
|
|
151
|
-
"null",
|
|
152
|
-
"undefined"
|
|
126
|
+
"string"
|
|
153
127
|
]
|
|
154
128
|
}
|
|
155
129
|
},
|
|
@@ -158,9 +132,7 @@
|
|
|
158
132
|
"description": "When present, it specifies that the element is read-only.",
|
|
159
133
|
"value": {
|
|
160
134
|
"type": [
|
|
161
|
-
"boolean"
|
|
162
|
-
"null",
|
|
163
|
-
"undefined"
|
|
135
|
+
"boolean"
|
|
164
136
|
]
|
|
165
137
|
}
|
|
166
138
|
},
|
|
@@ -169,9 +141,7 @@
|
|
|
169
141
|
"description": "Specifies that the user must fill in a value.",
|
|
170
142
|
"value": {
|
|
171
143
|
"type": [
|
|
172
|
-
"boolean"
|
|
173
|
-
"null",
|
|
174
|
-
"undefined"
|
|
144
|
+
"boolean"
|
|
175
145
|
]
|
|
176
146
|
}
|
|
177
147
|
},
|
|
@@ -191,9 +161,7 @@
|
|
|
191
161
|
"description": "The `value` property of the selected item, or an empty string\nif no item is selected.\nOn change or initialization, the component finds the item which matches the\nvalue and displays it.\nIf no value is provided to the component, it selects the first item without\nvalue or empty value.\nHint: If you do not want to select any item by default, you can either set all\nthe values of inner vaadin-items, or set the vaadin-select value to\nan inexistent value in the items list.",
|
|
192
162
|
"value": {
|
|
193
163
|
"type": [
|
|
194
|
-
"string"
|
|
195
|
-
"null",
|
|
196
|
-
"undefined"
|
|
164
|
+
"string"
|
|
197
165
|
]
|
|
198
166
|
}
|
|
199
167
|
}
|
|
@@ -205,9 +173,7 @@
|
|
|
205
173
|
"description": "String used to label the component to screen reader users.",
|
|
206
174
|
"value": {
|
|
207
175
|
"type": [
|
|
208
|
-
"string"
|
|
209
|
-
"null",
|
|
210
|
-
"undefined"
|
|
176
|
+
"string"
|
|
211
177
|
]
|
|
212
178
|
}
|
|
213
179
|
},
|
|
@@ -216,9 +182,7 @@
|
|
|
216
182
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
217
183
|
"value": {
|
|
218
184
|
"type": [
|
|
219
|
-
"string"
|
|
220
|
-
"null",
|
|
221
|
-
"undefined"
|
|
185
|
+
"string"
|
|
222
186
|
]
|
|
223
187
|
}
|
|
224
188
|
},
|
|
@@ -227,9 +191,7 @@
|
|
|
227
191
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
228
192
|
"value": {
|
|
229
193
|
"type": [
|
|
230
|
-
"boolean"
|
|
231
|
-
"null",
|
|
232
|
-
"undefined"
|
|
194
|
+
"boolean"
|
|
233
195
|
]
|
|
234
196
|
}
|
|
235
197
|
},
|
|
@@ -238,9 +200,7 @@
|
|
|
238
200
|
"description": "If true, the user cannot interact with this element.",
|
|
239
201
|
"value": {
|
|
240
202
|
"type": [
|
|
241
|
-
"boolean"
|
|
242
|
-
"null",
|
|
243
|
-
"undefined"
|
|
203
|
+
"boolean"
|
|
244
204
|
]
|
|
245
205
|
}
|
|
246
206
|
},
|
|
@@ -249,9 +209,7 @@
|
|
|
249
209
|
"description": "Error to show when the field is invalid.",
|
|
250
210
|
"value": {
|
|
251
211
|
"type": [
|
|
252
|
-
"string"
|
|
253
|
-
"null",
|
|
254
|
-
"undefined"
|
|
212
|
+
"string"
|
|
255
213
|
]
|
|
256
214
|
}
|
|
257
215
|
},
|
|
@@ -260,9 +218,7 @@
|
|
|
260
218
|
"description": "String used for the helper text.",
|
|
261
219
|
"value": {
|
|
262
220
|
"type": [
|
|
263
|
-
"string"
|
|
264
|
-
"null",
|
|
265
|
-
"undefined"
|
|
221
|
+
"string"
|
|
266
222
|
]
|
|
267
223
|
}
|
|
268
224
|
},
|
|
@@ -271,9 +227,7 @@
|
|
|
271
227
|
"description": "Set to true when the field is invalid.",
|
|
272
228
|
"value": {
|
|
273
229
|
"type": [
|
|
274
|
-
"boolean"
|
|
275
|
-
"null",
|
|
276
|
-
"undefined"
|
|
230
|
+
"boolean"
|
|
277
231
|
]
|
|
278
232
|
}
|
|
279
233
|
},
|
|
@@ -282,7 +236,7 @@
|
|
|
282
236
|
"description": "An array containing items that will be rendered as the options of the select.\n\n#### Example\n```js\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\nNote: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.\nTo render the item with a custom component, provide a tag name by the `component` property.",
|
|
283
237
|
"value": {
|
|
284
238
|
"type": [
|
|
285
|
-
"Array
|
|
239
|
+
"Array<SelectItem>"
|
|
286
240
|
]
|
|
287
241
|
}
|
|
288
242
|
},
|
|
@@ -291,9 +245,7 @@
|
|
|
291
245
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
292
246
|
"value": {
|
|
293
247
|
"type": [
|
|
294
|
-
"string"
|
|
295
|
-
"null",
|
|
296
|
-
"undefined"
|
|
248
|
+
"string"
|
|
297
249
|
]
|
|
298
250
|
}
|
|
299
251
|
},
|
|
@@ -302,9 +254,7 @@
|
|
|
302
254
|
"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.",
|
|
303
255
|
"value": {
|
|
304
256
|
"type": [
|
|
305
|
-
"boolean"
|
|
306
|
-
"null",
|
|
307
|
-
"undefined"
|
|
257
|
+
"boolean"
|
|
308
258
|
]
|
|
309
259
|
}
|
|
310
260
|
},
|
|
@@ -313,9 +263,7 @@
|
|
|
313
263
|
"description": "The name of this element.",
|
|
314
264
|
"value": {
|
|
315
265
|
"type": [
|
|
316
|
-
"string"
|
|
317
|
-
"null",
|
|
318
|
-
"undefined"
|
|
266
|
+
"string"
|
|
319
267
|
]
|
|
320
268
|
}
|
|
321
269
|
},
|
|
@@ -324,9 +272,7 @@
|
|
|
324
272
|
"description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.",
|
|
325
273
|
"value": {
|
|
326
274
|
"type": [
|
|
327
|
-
"boolean"
|
|
328
|
-
"null",
|
|
329
|
-
"undefined"
|
|
275
|
+
"boolean"
|
|
330
276
|
]
|
|
331
277
|
}
|
|
332
278
|
},
|
|
@@ -335,9 +281,7 @@
|
|
|
335
281
|
"description": "Set when the select is open",
|
|
336
282
|
"value": {
|
|
337
283
|
"type": [
|
|
338
|
-
"boolean"
|
|
339
|
-
"null",
|
|
340
|
-
"undefined"
|
|
284
|
+
"boolean"
|
|
341
285
|
]
|
|
342
286
|
}
|
|
343
287
|
},
|
|
@@ -346,9 +290,7 @@
|
|
|
346
290
|
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be displayed in the case that there\nis no item selected, or the selected item has an empty\nstring label, or the selected item has no label and it's\nDOM content is empty.",
|
|
347
291
|
"value": {
|
|
348
292
|
"type": [
|
|
349
|
-
"string"
|
|
350
|
-
"null",
|
|
351
|
-
"undefined"
|
|
293
|
+
"string"
|
|
352
294
|
]
|
|
353
295
|
}
|
|
354
296
|
},
|
|
@@ -357,9 +299,7 @@
|
|
|
357
299
|
"description": "When present, it specifies that the element is read-only.",
|
|
358
300
|
"value": {
|
|
359
301
|
"type": [
|
|
360
|
-
"boolean"
|
|
361
|
-
"null",
|
|
362
|
-
"undefined"
|
|
302
|
+
"boolean"
|
|
363
303
|
]
|
|
364
304
|
}
|
|
365
305
|
},
|
|
@@ -378,9 +318,7 @@
|
|
|
378
318
|
"description": "Specifies that the user must fill in a value.",
|
|
379
319
|
"value": {
|
|
380
320
|
"type": [
|
|
381
|
-
"boolean"
|
|
382
|
-
"null",
|
|
383
|
-
"undefined"
|
|
321
|
+
"boolean"
|
|
384
322
|
]
|
|
385
323
|
}
|
|
386
324
|
},
|
|
@@ -389,9 +327,7 @@
|
|
|
389
327
|
"description": "The `value` property of the selected item, or an empty string\nif no item is selected.\nOn change or initialization, the component finds the item which matches the\nvalue and displays it.\nIf no value is provided to the component, it selects the first item without\nvalue or empty value.\nHint: If you do not want to select any item by default, you can either set all\nthe values of inner vaadin-items, or set the vaadin-select value to\nan inexistent value in the items list.",
|
|
390
328
|
"value": {
|
|
391
329
|
"type": [
|
|
392
|
-
"string"
|
|
393
|
-
"null",
|
|
394
|
-
"undefined"
|
|
330
|
+
"string"
|
|
395
331
|
]
|
|
396
332
|
}
|
|
397
333
|
}
|
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/select",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,124 +16,124 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-select",
|
|
19
|
-
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\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-select-overlay-width` | Width of the overlay |\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 toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`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`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
19
|
+
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\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-select-overlay-width` | Width of the overlay |\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 toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`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`phone` | Set when the overlay is shown in phone mode\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.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
22
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
23
|
+
"name": ".accessibleName",
|
|
24
|
+
"description": "String used to label the component to screen reader users.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".accessibleNameRef",
|
|
31
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?autofocus",
|
|
38
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": "?
|
|
45
|
-
"description": "
|
|
44
|
+
"name": "?disabled",
|
|
45
|
+
"description": "If true, the user cannot interact with this element.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "
|
|
52
|
-
"description": "
|
|
51
|
+
"name": ".errorMessage",
|
|
52
|
+
"description": "Error to show when the field is invalid.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": ".helperText",
|
|
59
|
+
"description": "String used for the helper text.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "
|
|
65
|
+
"name": "?invalid",
|
|
66
|
+
"description": "Set to true when the field is invalid.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".items",
|
|
73
|
+
"description": "An array containing items that will be rendered as the options of the select.\n\n#### Example\n```js\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\nNote: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.\nTo render the item with a custom component, provide a tag name by the `component` property.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".label",
|
|
80
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": "
|
|
87
|
-
"description": "
|
|
86
|
+
"name": "?manualValidation",
|
|
87
|
+
"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.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".name",
|
|
94
|
+
"description": "The name of this element.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": "
|
|
101
|
-
"description": "
|
|
100
|
+
"name": "?noVerticalOverlap",
|
|
101
|
+
"description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": "
|
|
108
|
-
"description": "
|
|
107
|
+
"name": "?opened",
|
|
108
|
+
"description": "Set when the select is open",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "
|
|
114
|
+
"name": ".placeholder",
|
|
115
|
+
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be displayed in the case that there\nis no item selected, or the selected item has an empty\nstring label, or the selected item has no label and it's\nDOM content is empty.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": "
|
|
122
|
-
"description": "
|
|
121
|
+
"name": "?readonly",
|
|
122
|
+
"description": "When present, it specifies that the element is read-only.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": ".
|
|
129
|
-
"description": "
|
|
128
|
+
"name": ".renderer",
|
|
129
|
+
"description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": "?required",
|
|
136
|
+
"description": "Specifies that the user must fill in a value.",
|
|
137
137
|
"value": {
|
|
138
138
|
"kind": "expression"
|
|
139
139
|
}
|