@vaadin/combo-box 25.4.0-alpha3 → 25.4.0-alpha4
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 +28 -150
- package/package.json +14 -14
- package/src/vaadin-combo-box-base-mixin.js +32 -3
- package/web-types.json +14 -14
- package/web-types.lit.json +10 -10
package/custom-elements.json
CHANGED
|
@@ -215,8 +215,7 @@
|
|
|
215
215
|
"type": {
|
|
216
216
|
"text": "ComboBoxDataProvider | undefined"
|
|
217
217
|
},
|
|
218
|
-
"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."
|
|
219
|
-
"attribute": "data-provider"
|
|
218
|
+
"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."
|
|
220
219
|
},
|
|
221
220
|
{
|
|
222
221
|
"kind": "field",
|
|
@@ -240,14 +239,6 @@
|
|
|
240
239
|
}
|
|
241
240
|
],
|
|
242
241
|
"attributes": [
|
|
243
|
-
{
|
|
244
|
-
"name": "data-provider",
|
|
245
|
-
"type": {
|
|
246
|
-
"text": "ComboBoxDataProvider | undefined"
|
|
247
|
-
},
|
|
248
|
-
"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.",
|
|
249
|
-
"fieldName": "dataProvider"
|
|
250
|
-
},
|
|
251
242
|
{
|
|
252
243
|
"name": "page-size",
|
|
253
244
|
"type": {
|
|
@@ -380,8 +371,7 @@
|
|
|
380
371
|
"type": {
|
|
381
372
|
"text": "object"
|
|
382
373
|
},
|
|
383
|
-
"description": "The item to render."
|
|
384
|
-
"attribute": "item"
|
|
374
|
+
"description": "The item to render."
|
|
385
375
|
},
|
|
386
376
|
{
|
|
387
377
|
"kind": "field",
|
|
@@ -400,8 +390,7 @@
|
|
|
400
390
|
"type": {
|
|
401
391
|
"text": "function"
|
|
402
392
|
},
|
|
403
|
-
"description": "Custom function for rendering the item content."
|
|
404
|
-
"attribute": "renderer"
|
|
393
|
+
"description": "Custom function for rendering the item content."
|
|
405
394
|
},
|
|
406
395
|
{
|
|
407
396
|
"kind": "method",
|
|
@@ -447,14 +436,6 @@
|
|
|
447
436
|
"description": "The text to render in the item.",
|
|
448
437
|
"fieldName": "label"
|
|
449
438
|
},
|
|
450
|
-
{
|
|
451
|
-
"name": "renderer",
|
|
452
|
-
"type": {
|
|
453
|
-
"text": "function"
|
|
454
|
-
},
|
|
455
|
-
"description": "Custom function for rendering the item content.",
|
|
456
|
-
"fieldName": "renderer"
|
|
457
|
-
},
|
|
458
439
|
{
|
|
459
440
|
"name": "selected",
|
|
460
441
|
"type": {
|
|
@@ -554,8 +535,7 @@
|
|
|
554
535
|
"type": {
|
|
555
536
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
556
537
|
},
|
|
557
|
-
"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."
|
|
558
|
-
"attribute": "filtered-items"
|
|
538
|
+
"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."
|
|
559
539
|
},
|
|
560
540
|
{
|
|
561
541
|
"kind": "field",
|
|
@@ -574,8 +554,7 @@
|
|
|
574
554
|
"type": {
|
|
575
555
|
"text": "object"
|
|
576
556
|
},
|
|
577
|
-
"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."
|
|
578
|
-
"attribute": "item-label-generator"
|
|
557
|
+
"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."
|
|
579
558
|
},
|
|
580
559
|
{
|
|
581
560
|
"kind": "field",
|
|
@@ -594,8 +573,7 @@
|
|
|
594
573
|
"type": {
|
|
595
574
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
596
575
|
},
|
|
597
|
-
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type."
|
|
598
|
-
"attribute": "items"
|
|
576
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type."
|
|
599
577
|
},
|
|
600
578
|
{
|
|
601
579
|
"kind": "field",
|
|
@@ -906,7 +884,6 @@
|
|
|
906
884
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
907
885
|
},
|
|
908
886
|
"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.",
|
|
909
|
-
"attribute": "filtered-items",
|
|
910
887
|
"inheritedFrom": {
|
|
911
888
|
"name": "ComboBoxItemsMixin",
|
|
912
889
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -933,8 +910,7 @@
|
|
|
933
910
|
"type": {
|
|
934
911
|
"text": "object"
|
|
935
912
|
},
|
|
936
|
-
"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."
|
|
937
|
-
"attribute": "item-class-name-generator"
|
|
913
|
+
"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."
|
|
938
914
|
},
|
|
939
915
|
{
|
|
940
916
|
"kind": "field",
|
|
@@ -958,7 +934,6 @@
|
|
|
958
934
|
"text": "object"
|
|
959
935
|
},
|
|
960
936
|
"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.",
|
|
961
|
-
"attribute": "item-label-generator",
|
|
962
937
|
"inheritedFrom": {
|
|
963
938
|
"name": "ComboBoxItemsMixin",
|
|
964
939
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -986,7 +961,6 @@
|
|
|
986
961
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
987
962
|
},
|
|
988
963
|
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
989
|
-
"attribute": "items",
|
|
990
964
|
"inheritedFrom": {
|
|
991
965
|
"name": "ComboBoxItemsMixin",
|
|
992
966
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -1088,8 +1062,7 @@
|
|
|
1088
1062
|
"type": {
|
|
1089
1063
|
"text": "ComboBoxRenderer | undefined"
|
|
1090
1064
|
},
|
|
1091
|
-
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-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."
|
|
1092
|
-
"attribute": "renderer"
|
|
1065
|
+
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-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."
|
|
1093
1066
|
},
|
|
1094
1067
|
{
|
|
1095
1068
|
"kind": "method",
|
|
@@ -1121,8 +1094,7 @@
|
|
|
1121
1094
|
"type": {
|
|
1122
1095
|
"text": "ComboBoxItem | string | undefined"
|
|
1123
1096
|
},
|
|
1124
|
-
"description": "The selected item from the `items` array."
|
|
1125
|
-
"attribute": "selected-item"
|
|
1097
|
+
"description": "The selected item from the `items` array."
|
|
1126
1098
|
},
|
|
1127
1099
|
{
|
|
1128
1100
|
"kind": "method",
|
|
@@ -1332,14 +1304,6 @@
|
|
|
1332
1304
|
"module": "src/vaadin-combo-box-base-mixin.js"
|
|
1333
1305
|
}
|
|
1334
1306
|
},
|
|
1335
|
-
{
|
|
1336
|
-
"name": "renderer",
|
|
1337
|
-
"type": {
|
|
1338
|
-
"text": "ComboBoxRenderer | undefined"
|
|
1339
|
-
},
|
|
1340
|
-
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-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.",
|
|
1341
|
-
"fieldName": "renderer"
|
|
1342
|
-
},
|
|
1343
1307
|
{
|
|
1344
1308
|
"name": "required",
|
|
1345
1309
|
"type": {
|
|
@@ -1352,14 +1316,6 @@
|
|
|
1352
1316
|
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1353
1317
|
}
|
|
1354
1318
|
},
|
|
1355
|
-
{
|
|
1356
|
-
"name": "selected-item",
|
|
1357
|
-
"type": {
|
|
1358
|
-
"text": "ComboBoxItem | string | undefined"
|
|
1359
|
-
},
|
|
1360
|
-
"description": "The selected item from the `items` array.",
|
|
1361
|
-
"fieldName": "selectedItem"
|
|
1362
|
-
},
|
|
1363
1319
|
{
|
|
1364
1320
|
"name": "value",
|
|
1365
1321
|
"type": {
|
|
@@ -1460,7 +1416,6 @@
|
|
|
1460
1416
|
"text": "object"
|
|
1461
1417
|
},
|
|
1462
1418
|
"description": "The element next to which this overlay should be aligned.\nThe position of the overlay relative to the positionTarget can be adjusted\nwith properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`\nand `noVerticalOverlap`.",
|
|
1463
|
-
"attribute": "position-target",
|
|
1464
1419
|
"inheritedFrom": {
|
|
1465
1420
|
"name": "PositionMixin",
|
|
1466
1421
|
"package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js"
|
|
@@ -1469,17 +1424,13 @@
|
|
|
1469
1424
|
{
|
|
1470
1425
|
"kind": "field",
|
|
1471
1426
|
"name": "requiredVerticalSpace",
|
|
1472
|
-
"privacy": "public",
|
|
1473
1427
|
"type": {
|
|
1474
1428
|
"text": "number"
|
|
1475
1429
|
},
|
|
1476
|
-
"description": "If the overlay content has no intrinsic height, this property can be used to set\nthe minimum vertical space (in pixels) required by the overlay. Setting a value to\nthe property effectively disables the content measurement in favor of using this\nfixed value for determining the open direction.",
|
|
1477
|
-
"attribute": "required-vertical-space",
|
|
1478
1430
|
"default": "200",
|
|
1479
|
-
"
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
}
|
|
1431
|
+
"privacy": "public",
|
|
1432
|
+
"description": "If the overlay content has no intrinsic height, this property can be used to set\nthe minimum vertical space (in pixels) required by the overlay. Setting a value to\nthe property effectively disables the content measurement in favor of using this\nfixed value for determining the open direction.",
|
|
1433
|
+
"attribute": "required-vertical-space"
|
|
1483
1434
|
},
|
|
1484
1435
|
{
|
|
1485
1436
|
"kind": "field",
|
|
@@ -1629,8 +1580,7 @@
|
|
|
1629
1580
|
"type": {
|
|
1630
1581
|
"text": "object"
|
|
1631
1582
|
},
|
|
1632
|
-
"description": "Function used to set a label for every combo-box item."
|
|
1633
|
-
"attribute": "get-item-label"
|
|
1583
|
+
"description": "Function used to set a label for every combo-box item."
|
|
1634
1584
|
},
|
|
1635
1585
|
{
|
|
1636
1586
|
"kind": "field",
|
|
@@ -1639,8 +1589,7 @@
|
|
|
1639
1589
|
"type": {
|
|
1640
1590
|
"text": "object"
|
|
1641
1591
|
},
|
|
1642
|
-
"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."
|
|
1643
|
-
"attribute": "item-class-name-generator"
|
|
1592
|
+
"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."
|
|
1644
1593
|
},
|
|
1645
1594
|
{
|
|
1646
1595
|
"kind": "field",
|
|
@@ -1649,8 +1598,7 @@
|
|
|
1649
1598
|
"type": {
|
|
1650
1599
|
"text": "array"
|
|
1651
1600
|
},
|
|
1652
|
-
"description": "A full set of items to filter the visible options from.\nSet to an empty array when combo-box is not opened."
|
|
1653
|
-
"attribute": "items"
|
|
1601
|
+
"description": "A full set of items to filter the visible options from.\nSet to an empty array when combo-box is not opened."
|
|
1654
1602
|
},
|
|
1655
1603
|
{
|
|
1656
1604
|
"kind": "field",
|
|
@@ -1679,8 +1627,7 @@
|
|
|
1679
1627
|
"type": {
|
|
1680
1628
|
"text": "object"
|
|
1681
1629
|
},
|
|
1682
|
-
"description": "Reference to the owner (combo-box owner), used by the item elements."
|
|
1683
|
-
"attribute": "owner"
|
|
1630
|
+
"description": "Reference to the owner (combo-box owner), used by the item elements."
|
|
1684
1631
|
},
|
|
1685
1632
|
{
|
|
1686
1633
|
"kind": "field",
|
|
@@ -1689,8 +1636,7 @@
|
|
|
1689
1636
|
"type": {
|
|
1690
1637
|
"text": "object"
|
|
1691
1638
|
},
|
|
1692
|
-
"description": "Function used to render the content of every combo-box item."
|
|
1693
|
-
"attribute": "renderer"
|
|
1639
|
+
"description": "Function used to render the content of every combo-box item."
|
|
1694
1640
|
},
|
|
1695
1641
|
{
|
|
1696
1642
|
"kind": "method",
|
|
@@ -1725,8 +1671,7 @@
|
|
|
1725
1671
|
"type": {
|
|
1726
1672
|
"text": "object"
|
|
1727
1673
|
},
|
|
1728
|
-
"description": "The selected item from the `items` array."
|
|
1729
|
-
"attribute": "selected-item"
|
|
1674
|
+
"description": "The selected item from the `items` array."
|
|
1730
1675
|
},
|
|
1731
1676
|
{
|
|
1732
1677
|
"kind": "field",
|
|
@@ -1762,14 +1707,6 @@
|
|
|
1762
1707
|
"description": "Index of an item that has focus outline and is scrolled into view.\nThe actual focus still remains in the input field.",
|
|
1763
1708
|
"fieldName": "focusedIndex"
|
|
1764
1709
|
},
|
|
1765
|
-
{
|
|
1766
|
-
"name": "items",
|
|
1767
|
-
"type": {
|
|
1768
|
-
"text": "array"
|
|
1769
|
-
},
|
|
1770
|
-
"description": "A full set of items to filter the visible options from.\nSet to an empty array when combo-box is not opened.",
|
|
1771
|
-
"fieldName": "items"
|
|
1772
|
-
},
|
|
1773
1710
|
{
|
|
1774
1711
|
"name": "loading",
|
|
1775
1712
|
"type": {
|
|
@@ -1946,7 +1883,7 @@
|
|
|
1946
1883
|
{
|
|
1947
1884
|
"kind": "method",
|
|
1948
1885
|
"name": "checkValidity",
|
|
1949
|
-
"description": "Returns true if the
|
|
1886
|
+
"description": "Returns true if the current input value satisfies all constraints (if any).",
|
|
1950
1887
|
"return": {
|
|
1951
1888
|
"type": {
|
|
1952
1889
|
"text": "boolean"
|
|
@@ -2006,7 +1943,6 @@
|
|
|
2006
1943
|
"text": "ComboBoxDataProvider | undefined"
|
|
2007
1944
|
},
|
|
2008
1945
|
"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.",
|
|
2009
|
-
"attribute": "data-provider",
|
|
2010
1946
|
"inheritedFrom": {
|
|
2011
1947
|
"name": "ComboBoxDataProviderMixin",
|
|
2012
1948
|
"module": "src/vaadin-combo-box-data-provider-mixin.js"
|
|
@@ -2062,7 +1998,6 @@
|
|
|
2062
1998
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
2063
1999
|
},
|
|
2064
2000
|
"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.",
|
|
2065
|
-
"attribute": "filtered-items",
|
|
2066
2001
|
"inheritedFrom": {
|
|
2067
2002
|
"name": "ComboBoxItemsMixin",
|
|
2068
2003
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -2104,7 +2039,6 @@
|
|
|
2104
2039
|
"text": "object"
|
|
2105
2040
|
},
|
|
2106
2041
|
"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.",
|
|
2107
|
-
"attribute": "item-class-name-generator",
|
|
2108
2042
|
"inheritedFrom": {
|
|
2109
2043
|
"name": "ComboBoxMixin",
|
|
2110
2044
|
"module": "src/vaadin-combo-box-mixin.js"
|
|
@@ -2132,7 +2066,6 @@
|
|
|
2132
2066
|
"text": "object"
|
|
2133
2067
|
},
|
|
2134
2068
|
"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.",
|
|
2135
|
-
"attribute": "item-label-generator",
|
|
2136
2069
|
"inheritedFrom": {
|
|
2137
2070
|
"name": "ComboBoxItemsMixin",
|
|
2138
2071
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -2160,7 +2093,6 @@
|
|
|
2160
2093
|
"text": "!Array<!ComboBoxItem | string> | undefined"
|
|
2161
2094
|
},
|
|
2162
2095
|
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
2163
|
-
"attribute": "items",
|
|
2164
2096
|
"inheritedFrom": {
|
|
2165
2097
|
"name": "ComboBoxItemsMixin",
|
|
2166
2098
|
"module": "src/vaadin-combo-box-items-mixin.js"
|
|
@@ -2325,8 +2257,8 @@
|
|
|
2325
2257
|
"description": "When present, it specifies that the field is read-only.",
|
|
2326
2258
|
"attribute": "readonly",
|
|
2327
2259
|
"inheritedFrom": {
|
|
2328
|
-
"name": "
|
|
2329
|
-
"
|
|
2260
|
+
"name": "ComboBoxBaseMixin",
|
|
2261
|
+
"module": "src/vaadin-combo-box-base-mixin.js"
|
|
2330
2262
|
}
|
|
2331
2263
|
},
|
|
2332
2264
|
{
|
|
@@ -2337,7 +2269,6 @@
|
|
|
2337
2269
|
"text": "ComboBoxRenderer | undefined"
|
|
2338
2270
|
},
|
|
2339
2271
|
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-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.",
|
|
2340
|
-
"attribute": "renderer",
|
|
2341
2272
|
"inheritedFrom": {
|
|
2342
2273
|
"name": "ComboBoxMixin",
|
|
2343
2274
|
"module": "src/vaadin-combo-box-mixin.js"
|
|
@@ -2374,7 +2305,6 @@
|
|
|
2374
2305
|
"text": "ComboBoxItem | string | undefined"
|
|
2375
2306
|
},
|
|
2376
2307
|
"description": "The selected item from the `items` array.",
|
|
2377
|
-
"attribute": "selected-item",
|
|
2378
2308
|
"inheritedFrom": {
|
|
2379
2309
|
"name": "ComboBoxMixin",
|
|
2380
2310
|
"module": "src/vaadin-combo-box-mixin.js"
|
|
@@ -2439,15 +2369,11 @@
|
|
|
2439
2369
|
],
|
|
2440
2370
|
"events": [
|
|
2441
2371
|
{
|
|
2442
|
-
"name": "change",
|
|
2443
2372
|
"type": {
|
|
2444
|
-
"text": "
|
|
2373
|
+
"text": "Event"
|
|
2445
2374
|
},
|
|
2446
2375
|
"description": "Fired when the user commits a value change.",
|
|
2447
|
-
"
|
|
2448
|
-
"name": "InputConstraintsMixin",
|
|
2449
|
-
"package": "@vaadin/field-base/src/input-constraints-mixin.js"
|
|
2450
|
-
}
|
|
2376
|
+
"name": "change"
|
|
2451
2377
|
},
|
|
2452
2378
|
{
|
|
2453
2379
|
"type": {
|
|
@@ -2485,37 +2411,25 @@
|
|
|
2485
2411
|
"name": "selected-item-changed"
|
|
2486
2412
|
},
|
|
2487
2413
|
{
|
|
2488
|
-
"name": "vaadin-combo-box-dropdown-closed",
|
|
2489
2414
|
"type": {
|
|
2490
2415
|
"text": "CustomEvent"
|
|
2491
2416
|
},
|
|
2492
2417
|
"description": "Fired after the `vaadin-combo-box-overlay` closes.",
|
|
2493
|
-
"
|
|
2494
|
-
"name": "ComboBoxMixin",
|
|
2495
|
-
"module": "src/vaadin-combo-box-mixin.js"
|
|
2496
|
-
}
|
|
2418
|
+
"name": "vaadin-combo-box-dropdown-closed"
|
|
2497
2419
|
},
|
|
2498
2420
|
{
|
|
2499
|
-
"name": "vaadin-combo-box-dropdown-opened",
|
|
2500
2421
|
"type": {
|
|
2501
2422
|
"text": "CustomEvent"
|
|
2502
2423
|
},
|
|
2503
2424
|
"description": "Fired after the `vaadin-combo-box-overlay` opens.",
|
|
2504
|
-
"
|
|
2505
|
-
"name": "ComboBoxMixin",
|
|
2506
|
-
"module": "src/vaadin-combo-box-mixin.js"
|
|
2507
|
-
}
|
|
2425
|
+
"name": "vaadin-combo-box-dropdown-opened"
|
|
2508
2426
|
},
|
|
2509
2427
|
{
|
|
2510
|
-
"name": "validated",
|
|
2511
2428
|
"type": {
|
|
2512
2429
|
"text": "CustomEvent"
|
|
2513
2430
|
},
|
|
2514
2431
|
"description": "Fired whenever the field is validated.",
|
|
2515
|
-
"
|
|
2516
|
-
"name": "ValidateMixin",
|
|
2517
|
-
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
2518
|
-
}
|
|
2432
|
+
"name": "validated"
|
|
2519
2433
|
},
|
|
2520
2434
|
{
|
|
2521
2435
|
"type": {
|
|
@@ -2634,18 +2548,6 @@
|
|
|
2634
2548
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
2635
2549
|
}
|
|
2636
2550
|
},
|
|
2637
|
-
{
|
|
2638
|
-
"name": "data-provider",
|
|
2639
|
-
"type": {
|
|
2640
|
-
"text": "ComboBoxDataProvider | undefined"
|
|
2641
|
-
},
|
|
2642
|
-
"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.",
|
|
2643
|
-
"fieldName": "dataProvider",
|
|
2644
|
-
"inheritedFrom": {
|
|
2645
|
-
"name": "ComboBoxDataProviderMixin",
|
|
2646
|
-
"module": "src/vaadin-combo-box-data-provider-mixin.js"
|
|
2647
|
-
}
|
|
2648
|
-
},
|
|
2649
2551
|
{
|
|
2650
2552
|
"name": "disabled",
|
|
2651
2553
|
"type": {
|
|
@@ -2858,20 +2760,8 @@
|
|
|
2858
2760
|
"description": "When present, it specifies that the field is read-only.",
|
|
2859
2761
|
"fieldName": "readonly",
|
|
2860
2762
|
"inheritedFrom": {
|
|
2861
|
-
"name": "
|
|
2862
|
-
"
|
|
2863
|
-
}
|
|
2864
|
-
},
|
|
2865
|
-
{
|
|
2866
|
-
"name": "renderer",
|
|
2867
|
-
"type": {
|
|
2868
|
-
"text": "ComboBoxRenderer | undefined"
|
|
2869
|
-
},
|
|
2870
|
-
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-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.",
|
|
2871
|
-
"fieldName": "renderer",
|
|
2872
|
-
"inheritedFrom": {
|
|
2873
|
-
"name": "ComboBoxMixin",
|
|
2874
|
-
"module": "src/vaadin-combo-box-mixin.js"
|
|
2763
|
+
"name": "ComboBoxBaseMixin",
|
|
2764
|
+
"module": "src/vaadin-combo-box-base-mixin.js"
|
|
2875
2765
|
}
|
|
2876
2766
|
},
|
|
2877
2767
|
{
|
|
@@ -2886,18 +2776,6 @@
|
|
|
2886
2776
|
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
2887
2777
|
}
|
|
2888
2778
|
},
|
|
2889
|
-
{
|
|
2890
|
-
"name": "selected-item",
|
|
2891
|
-
"type": {
|
|
2892
|
-
"text": "ComboBoxItem | string | undefined"
|
|
2893
|
-
},
|
|
2894
|
-
"description": "The selected item from the `items` array.",
|
|
2895
|
-
"fieldName": "selectedItem",
|
|
2896
|
-
"inheritedFrom": {
|
|
2897
|
-
"name": "ComboBoxMixin",
|
|
2898
|
-
"module": "src/vaadin-combo-box-mixin.js"
|
|
2899
|
-
}
|
|
2900
|
-
},
|
|
2901
2779
|
{
|
|
2902
2780
|
"name": "size",
|
|
2903
2781
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "25.4.0-
|
|
3
|
+
"version": "25.4.0-alpha4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@vaadin/a11y-base": "25.4.0-
|
|
40
|
-
"@vaadin/component-base": "25.4.0-
|
|
41
|
-
"@vaadin/field-base": "25.4.0-
|
|
42
|
-
"@vaadin/input-container": "25.4.0-
|
|
43
|
-
"@vaadin/item": "25.4.0-
|
|
44
|
-
"@vaadin/lit-renderer": "25.4.0-
|
|
45
|
-
"@vaadin/overlay": "25.4.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "25.4.0-
|
|
39
|
+
"@vaadin/a11y-base": "25.4.0-alpha4",
|
|
40
|
+
"@vaadin/component-base": "25.4.0-alpha4",
|
|
41
|
+
"@vaadin/field-base": "25.4.0-alpha4",
|
|
42
|
+
"@vaadin/input-container": "25.4.0-alpha4",
|
|
43
|
+
"@vaadin/item": "25.4.0-alpha4",
|
|
44
|
+
"@vaadin/lit-renderer": "25.4.0-alpha4",
|
|
45
|
+
"@vaadin/overlay": "25.4.0-alpha4",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha4",
|
|
47
47
|
"lit": "^3.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/aura": "25.4.0-
|
|
51
|
-
"@vaadin/chai-plugins": "25.4.0-
|
|
52
|
-
"@vaadin/test-runner-commands": "25.4.0-
|
|
50
|
+
"@vaadin/aura": "25.4.0-alpha4",
|
|
51
|
+
"@vaadin/chai-plugins": "25.4.0-alpha4",
|
|
52
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha4",
|
|
53
53
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
54
|
-
"@vaadin/vaadin-lumo-styles": "25.4.0-
|
|
54
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha4",
|
|
55
55
|
"sinon": "^22.0.0"
|
|
56
56
|
},
|
|
57
57
|
"customElements": "custom-elements.json",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "7809e4c099538333a6dbd11d8da18a0c6ec30dad"
|
|
63
63
|
}
|
|
@@ -102,6 +102,7 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
102
102
|
this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
|
|
103
103
|
this._boundOnClick = this._onClick.bind(this);
|
|
104
104
|
this._boundOnOverlayTouchAction = this._onOverlayTouchAction.bind(this);
|
|
105
|
+
this._boundOnOverlayClick = this.__onOverlayClick.bind(this);
|
|
105
106
|
this._boundOnTouchend = this._onTouchend.bind(this);
|
|
106
107
|
}
|
|
107
108
|
|
|
@@ -219,6 +220,9 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
219
220
|
overlay.addEventListener('touchend', this._boundOnOverlayTouchAction);
|
|
220
221
|
overlay.addEventListener('touchmove', this._boundOnOverlayTouchAction);
|
|
221
222
|
|
|
223
|
+
// Use capture phase as the scroller stops click propagation
|
|
224
|
+
overlay.addEventListener('click', this._boundOnOverlayClick, true);
|
|
225
|
+
|
|
222
226
|
// Prevent blurring the input when clicking inside the overlay
|
|
223
227
|
overlay.addEventListener('mousedown', (e) => e.preventDefault());
|
|
224
228
|
|
|
@@ -338,6 +342,9 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
338
342
|
}
|
|
339
343
|
}
|
|
340
344
|
} else {
|
|
345
|
+
// Reset when a tap was not followed by a click, e.g. at the end of a scroll
|
|
346
|
+
this.__blurOnClick = false;
|
|
347
|
+
|
|
341
348
|
if (this.autoselect) {
|
|
342
349
|
// When the dropdown closes, the input remains focused. Mark that the next
|
|
343
350
|
// host click should re-trigger autoselect, since the normal focus event
|
|
@@ -357,9 +364,31 @@ export const ComboBoxBaseMixin = (superClass) =>
|
|
|
357
364
|
}
|
|
358
365
|
|
|
359
366
|
/** @private */
|
|
360
|
-
_onOverlayTouchAction() {
|
|
361
|
-
// On
|
|
362
|
-
//
|
|
367
|
+
_onOverlayTouchAction(event) {
|
|
368
|
+
// On tap, wait for the click: hiding the keyboard scrolls the page
|
|
369
|
+
// before iOS dispatches the click, which then misses its target.
|
|
370
|
+
if (event.type === 'touchend') {
|
|
371
|
+
this.__blurOnClick = true;
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
this.__blurInputKeepOpened();
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/** @private */
|
|
379
|
+
__onOverlayClick() {
|
|
380
|
+
if (this.__blurOnClick) {
|
|
381
|
+
this.__blurOnClick = false;
|
|
382
|
+
this.__blurInputKeepOpened();
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Blur the input on touch inside the overlay to hide the virtual keyboard,
|
|
388
|
+
* but don't close the overlay on this blur.
|
|
389
|
+
* @private
|
|
390
|
+
*/
|
|
391
|
+
__blurInputKeepOpened() {
|
|
363
392
|
this._closeOnBlurIsPrevented = true;
|
|
364
393
|
this.inputElement.blur();
|
|
365
394
|
this._closeOnBlurIsPrevented = false;
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "25.4.0-
|
|
4
|
+
"version": "25.4.0-alpha4",
|
|
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.4.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.4.0-alpha4/#/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.4.0-alpha4/#/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.4.0-alpha4/#/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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-combo-box-overlay-max-height` |\n| `--vaadin-combo-box-overlay-width` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\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.4.0-alpha4/#/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-description-ref",
|
|
@@ -347,8 +347,8 @@
|
|
|
347
347
|
}
|
|
348
348
|
},
|
|
349
349
|
{
|
|
350
|
-
"name": "
|
|
351
|
-
"description": "
|
|
350
|
+
"name": "autoOpenDisabled",
|
|
351
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
352
352
|
"value": {
|
|
353
353
|
"type": [
|
|
354
354
|
"boolean"
|
|
@@ -356,8 +356,8 @@
|
|
|
356
356
|
}
|
|
357
357
|
},
|
|
358
358
|
{
|
|
359
|
-
"name": "
|
|
360
|
-
"description": "
|
|
359
|
+
"name": "autofocus",
|
|
360
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
361
361
|
"value": {
|
|
362
362
|
"type": [
|
|
363
363
|
"boolean"
|
|
@@ -485,22 +485,22 @@
|
|
|
485
485
|
}
|
|
486
486
|
},
|
|
487
487
|
{
|
|
488
|
-
"name": "
|
|
489
|
-
"description": "
|
|
488
|
+
"name": "itemValuePath",
|
|
489
|
+
"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.",
|
|
490
490
|
"value": {
|
|
491
491
|
"type": [
|
|
492
|
-
"
|
|
493
|
-
"string>",
|
|
494
|
-
"undefined"
|
|
492
|
+
"string"
|
|
495
493
|
]
|
|
496
494
|
}
|
|
497
495
|
},
|
|
498
496
|
{
|
|
499
|
-
"name": "
|
|
500
|
-
"description": "
|
|
497
|
+
"name": "items",
|
|
498
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
501
499
|
"value": {
|
|
502
500
|
"type": [
|
|
503
|
-
"
|
|
501
|
+
"Array<ComboBoxItem",
|
|
502
|
+
"string>",
|
|
503
|
+
"undefined"
|
|
504
504
|
]
|
|
505
505
|
}
|
|
506
506
|
},
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "25.4.0-
|
|
4
|
+
"version": "25.4.0-alpha4",
|
|
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-combo-box",
|
|
19
|
-
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-
|
|
19
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/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.4.0-alpha4/#/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.4.0-alpha4/#/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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-combo-box-overlay-max-height` |\n| `--vaadin-combo-box-overlay-width` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\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.4.0-alpha4/#/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
|
{
|
|
@@ -55,15 +55,15 @@
|
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "?
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "?autoOpenDisabled",
|
|
59
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": "?
|
|
66
|
-
"description": "
|
|
65
|
+
"name": "?autofocus",
|
|
66
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
@@ -160,15 +160,15 @@
|
|
|
160
160
|
}
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
|
-
"name": ".
|
|
164
|
-
"description": "
|
|
163
|
+
"name": ".itemValuePath",
|
|
164
|
+
"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.",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
|
-
"name": ".
|
|
171
|
-
"description": "
|
|
170
|
+
"name": ".items",
|
|
171
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|