@vaadin/combo-box 23.3.20 → 23.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -13
- package/web-types.json +150 -40
- package/web-types.lit.json +48 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.21",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,21 +38,21 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/component-base": "~23.3.
|
|
42
|
-
"@vaadin/field-base": "~23.3.
|
|
43
|
-
"@vaadin/input-container": "~23.3.
|
|
44
|
-
"@vaadin/item": "~23.3.
|
|
45
|
-
"@vaadin/lit-renderer": "~23.3.
|
|
46
|
-
"@vaadin/overlay": "~23.3.
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "~23.3.
|
|
48
|
-
"@vaadin/vaadin-material-styles": "~23.3.
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "~23.3.
|
|
41
|
+
"@vaadin/component-base": "~23.3.21",
|
|
42
|
+
"@vaadin/field-base": "~23.3.21",
|
|
43
|
+
"@vaadin/input-container": "~23.3.21",
|
|
44
|
+
"@vaadin/item": "~23.3.21",
|
|
45
|
+
"@vaadin/lit-renderer": "~23.3.21",
|
|
46
|
+
"@vaadin/overlay": "~23.3.21",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.21",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "~23.3.21",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.21"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@esm-bundle/chai": "^4.3.4",
|
|
53
|
-
"@vaadin/polymer-legacy-adapter": "~23.3.
|
|
53
|
+
"@vaadin/polymer-legacy-adapter": "~23.3.21",
|
|
54
54
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
55
|
-
"@vaadin/text-field": "~23.3.
|
|
55
|
+
"@vaadin/text-field": "~23.3.21",
|
|
56
56
|
"lit": "^2.0.0",
|
|
57
57
|
"sinon": "^13.0.2"
|
|
58
58
|
},
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"web-types.json",
|
|
61
61
|
"web-types.lit.json"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "5caee824b60295eb1e03b736880ed73f62a8988c"
|
|
64
64
|
}
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "24.2.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -29,6 +29,39 @@
|
|
|
29
29
|
]
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
|
+
{
|
|
33
|
+
"name": "disabled",
|
|
34
|
+
"description": "If true, the user cannot interact with this element.",
|
|
35
|
+
"value": {
|
|
36
|
+
"type": [
|
|
37
|
+
"boolean",
|
|
38
|
+
"null",
|
|
39
|
+
"undefined"
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "value",
|
|
45
|
+
"description": "The value of the field.",
|
|
46
|
+
"value": {
|
|
47
|
+
"type": [
|
|
48
|
+
"string",
|
|
49
|
+
"null",
|
|
50
|
+
"undefined"
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "overlay-class",
|
|
56
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
57
|
+
"value": {
|
|
58
|
+
"type": [
|
|
59
|
+
"string",
|
|
60
|
+
"null",
|
|
61
|
+
"undefined"
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
},
|
|
32
65
|
{
|
|
33
66
|
"name": "opened",
|
|
34
67
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -188,6 +221,39 @@
|
|
|
188
221
|
]
|
|
189
222
|
}
|
|
190
223
|
},
|
|
224
|
+
{
|
|
225
|
+
"name": "disabled",
|
|
226
|
+
"description": "If true, the user cannot interact with this element.",
|
|
227
|
+
"value": {
|
|
228
|
+
"type": [
|
|
229
|
+
"boolean",
|
|
230
|
+
"null",
|
|
231
|
+
"undefined"
|
|
232
|
+
]
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"name": "value",
|
|
237
|
+
"description": "The value of the field.",
|
|
238
|
+
"value": {
|
|
239
|
+
"type": [
|
|
240
|
+
"string",
|
|
241
|
+
"null",
|
|
242
|
+
"undefined"
|
|
243
|
+
]
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "overlayClass",
|
|
248
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
249
|
+
"value": {
|
|
250
|
+
"type": [
|
|
251
|
+
"string",
|
|
252
|
+
"null",
|
|
253
|
+
"undefined"
|
|
254
|
+
]
|
|
255
|
+
}
|
|
256
|
+
},
|
|
191
257
|
{
|
|
192
258
|
"name": "opened",
|
|
193
259
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -394,7 +460,7 @@
|
|
|
394
460
|
},
|
|
395
461
|
{
|
|
396
462
|
"name": "vaadin-combo-box",
|
|
397
|
-
"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/
|
|
463
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
398
464
|
"attributes": [
|
|
399
465
|
{
|
|
400
466
|
"name": "disabled",
|
|
@@ -474,8 +540,8 @@
|
|
|
474
540
|
}
|
|
475
541
|
},
|
|
476
542
|
{
|
|
477
|
-
"name": "
|
|
478
|
-
"description": "
|
|
543
|
+
"name": "accessible-name",
|
|
544
|
+
"description": "String used to label the component to screen reader users.",
|
|
479
545
|
"value": {
|
|
480
546
|
"type": [
|
|
481
547
|
"string",
|
|
@@ -485,8 +551,8 @@
|
|
|
485
551
|
}
|
|
486
552
|
},
|
|
487
553
|
{
|
|
488
|
-
"name": "
|
|
489
|
-
"description": "
|
|
554
|
+
"name": "accessible-name-ref",
|
|
555
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
490
556
|
"value": {
|
|
491
557
|
"type": [
|
|
492
558
|
"string",
|
|
@@ -496,11 +562,11 @@
|
|
|
496
562
|
}
|
|
497
563
|
},
|
|
498
564
|
{
|
|
499
|
-
"name": "
|
|
500
|
-
"description": "
|
|
565
|
+
"name": "value",
|
|
566
|
+
"description": "The value of the field.",
|
|
501
567
|
"value": {
|
|
502
568
|
"type": [
|
|
503
|
-
"
|
|
569
|
+
"string",
|
|
504
570
|
"null",
|
|
505
571
|
"undefined"
|
|
506
572
|
]
|
|
@@ -508,7 +574,29 @@
|
|
|
508
574
|
},
|
|
509
575
|
{
|
|
510
576
|
"name": "clear-button-visible",
|
|
511
|
-
"description": "Set to true to display the clear icon which clears the input.",
|
|
577
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
578
|
+
"value": {
|
|
579
|
+
"type": [
|
|
580
|
+
"boolean",
|
|
581
|
+
"null",
|
|
582
|
+
"undefined"
|
|
583
|
+
]
|
|
584
|
+
}
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
"name": "allowed-char-pattern",
|
|
588
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
589
|
+
"value": {
|
|
590
|
+
"type": [
|
|
591
|
+
"string",
|
|
592
|
+
"null",
|
|
593
|
+
"undefined"
|
|
594
|
+
]
|
|
595
|
+
}
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"name": "autoselect",
|
|
599
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
512
600
|
"value": {
|
|
513
601
|
"type": [
|
|
514
602
|
"boolean",
|
|
@@ -570,17 +658,6 @@
|
|
|
570
658
|
]
|
|
571
659
|
}
|
|
572
660
|
},
|
|
573
|
-
{
|
|
574
|
-
"name": "prevent-invalid-input",
|
|
575
|
-
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
576
|
-
"value": {
|
|
577
|
-
"type": [
|
|
578
|
-
"boolean",
|
|
579
|
-
"null",
|
|
580
|
-
"undefined"
|
|
581
|
-
]
|
|
582
|
-
}
|
|
583
|
-
},
|
|
584
661
|
{
|
|
585
662
|
"name": "page-size",
|
|
586
663
|
"description": "Number of items fetched at a time from the dataprovider.",
|
|
@@ -600,6 +677,17 @@
|
|
|
600
677
|
]
|
|
601
678
|
}
|
|
602
679
|
},
|
|
680
|
+
{
|
|
681
|
+
"name": "overlay-class",
|
|
682
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
683
|
+
"value": {
|
|
684
|
+
"type": [
|
|
685
|
+
"string",
|
|
686
|
+
"null",
|
|
687
|
+
"undefined"
|
|
688
|
+
]
|
|
689
|
+
}
|
|
690
|
+
},
|
|
603
691
|
{
|
|
604
692
|
"name": "opened",
|
|
605
693
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -768,8 +856,8 @@
|
|
|
768
856
|
}
|
|
769
857
|
},
|
|
770
858
|
{
|
|
771
|
-
"name": "
|
|
772
|
-
"description": "
|
|
859
|
+
"name": "accessibleName",
|
|
860
|
+
"description": "String used to label the component to screen reader users.",
|
|
773
861
|
"value": {
|
|
774
862
|
"type": [
|
|
775
863
|
"string",
|
|
@@ -779,8 +867,8 @@
|
|
|
779
867
|
}
|
|
780
868
|
},
|
|
781
869
|
{
|
|
782
|
-
"name": "
|
|
783
|
-
"description": "
|
|
870
|
+
"name": "accessibleNameRef",
|
|
871
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
784
872
|
"value": {
|
|
785
873
|
"type": [
|
|
786
874
|
"string",
|
|
@@ -790,11 +878,11 @@
|
|
|
790
878
|
}
|
|
791
879
|
},
|
|
792
880
|
{
|
|
793
|
-
"name": "
|
|
794
|
-
"description": "
|
|
881
|
+
"name": "value",
|
|
882
|
+
"description": "The value of the field.",
|
|
795
883
|
"value": {
|
|
796
884
|
"type": [
|
|
797
|
-
"
|
|
885
|
+
"string",
|
|
798
886
|
"null",
|
|
799
887
|
"undefined"
|
|
800
888
|
]
|
|
@@ -802,7 +890,29 @@
|
|
|
802
890
|
},
|
|
803
891
|
{
|
|
804
892
|
"name": "clearButtonVisible",
|
|
805
|
-
"description": "Set to true to display the clear icon which clears the input.",
|
|
893
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
894
|
+
"value": {
|
|
895
|
+
"type": [
|
|
896
|
+
"boolean",
|
|
897
|
+
"null",
|
|
898
|
+
"undefined"
|
|
899
|
+
]
|
|
900
|
+
}
|
|
901
|
+
},
|
|
902
|
+
{
|
|
903
|
+
"name": "allowedCharPattern",
|
|
904
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
905
|
+
"value": {
|
|
906
|
+
"type": [
|
|
907
|
+
"string",
|
|
908
|
+
"null",
|
|
909
|
+
"undefined"
|
|
910
|
+
]
|
|
911
|
+
}
|
|
912
|
+
},
|
|
913
|
+
{
|
|
914
|
+
"name": "autoselect",
|
|
915
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
806
916
|
"value": {
|
|
807
917
|
"type": [
|
|
808
918
|
"boolean",
|
|
@@ -864,17 +974,6 @@
|
|
|
864
974
|
]
|
|
865
975
|
}
|
|
866
976
|
},
|
|
867
|
-
{
|
|
868
|
-
"name": "preventInvalidInput",
|
|
869
|
-
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
870
|
-
"value": {
|
|
871
|
-
"type": [
|
|
872
|
-
"boolean",
|
|
873
|
-
"null",
|
|
874
|
-
"undefined"
|
|
875
|
-
]
|
|
876
|
-
}
|
|
877
|
-
},
|
|
878
977
|
{
|
|
879
978
|
"name": "pageSize",
|
|
880
979
|
"description": "Number of items fetched at a time from the dataprovider.",
|
|
@@ -904,6 +1003,17 @@
|
|
|
904
1003
|
]
|
|
905
1004
|
}
|
|
906
1005
|
},
|
|
1006
|
+
{
|
|
1007
|
+
"name": "overlayClass",
|
|
1008
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
1009
|
+
"value": {
|
|
1010
|
+
"type": [
|
|
1011
|
+
"string",
|
|
1012
|
+
"null",
|
|
1013
|
+
"undefined"
|
|
1014
|
+
]
|
|
1015
|
+
}
|
|
1016
|
+
},
|
|
907
1017
|
{
|
|
908
1018
|
"name": "opened",
|
|
909
1019
|
"description": "True if the dropdown is open, false otherwise.",
|
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": "
|
|
4
|
+
"version": "24.2.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,6 +19,13 @@
|
|
|
19
19
|
"description": "`<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing\nonly the dropdown functionality and leaving the input field definition to the user.\n\nThe element has the same API as `<vaadin-combo-box>`.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `value` by default. For example, you can use `<vaadin-text-field>` element:\n\n```html\n<vaadin-combo-box-light>\n <vaadin-text-field></vaadin-text-field>\n</vaadin-combo-box-light>\n```\n\nIf you are using custom input field that has other property for value,\nset `class=\"input\"` to enable corresponding logic, and use `attr-for-value`\nattribute to specify which property to use:\n\n```html\n<vaadin-combo-box-light attr-for-value=\"input-value\">\n <custom-input class=\"input\"></custom-input>\n</vaadin-combo-box-light>\n```\n\nYou can also pass custom toggle and clear buttons with corresponding classes:\n\n```html\n<vaadin-combo-box-light>\n <custom-input class=\"input\" attr-for-value=\"input-value\">\n <button slot=\"suffix\" class=\"clear-button\">Clear</button>\n <button slot=\"suffix\" class=\"toggle-button\">Toggle</button>\n </custom-input>\n</vaadin-combo-box-light>\n```",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": "?opened",
|
|
24
31
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -89,6 +96,20 @@
|
|
|
89
96
|
"kind": "expression"
|
|
90
97
|
}
|
|
91
98
|
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".value",
|
|
101
|
+
"description": "The value of the field.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".overlayClass",
|
|
108
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
92
113
|
{
|
|
93
114
|
"name": ".renderer",
|
|
94
115
|
"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.",
|
|
@@ -226,7 +247,7 @@
|
|
|
226
247
|
},
|
|
227
248
|
{
|
|
228
249
|
"name": "vaadin-combo-box",
|
|
229
|
-
"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/
|
|
250
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
230
251
|
"extension": true,
|
|
231
252
|
"attributes": [
|
|
232
253
|
{
|
|
@@ -258,15 +279,15 @@
|
|
|
258
279
|
}
|
|
259
280
|
},
|
|
260
281
|
{
|
|
261
|
-
"name": "?
|
|
262
|
-
"description": "
|
|
282
|
+
"name": "?clearButtonVisible",
|
|
283
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
263
284
|
"value": {
|
|
264
285
|
"kind": "expression"
|
|
265
286
|
}
|
|
266
287
|
},
|
|
267
288
|
{
|
|
268
|
-
"name": "?
|
|
269
|
-
"description": "
|
|
289
|
+
"name": "?autoselect",
|
|
290
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
270
291
|
"value": {
|
|
271
292
|
"kind": "expression"
|
|
272
293
|
}
|
|
@@ -278,13 +299,6 @@
|
|
|
278
299
|
"kind": "expression"
|
|
279
300
|
}
|
|
280
301
|
},
|
|
281
|
-
{
|
|
282
|
-
"name": "?preventInvalidInput",
|
|
283
|
-
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
284
|
-
"value": {
|
|
285
|
-
"kind": "expression"
|
|
286
|
-
}
|
|
287
|
-
},
|
|
288
302
|
{
|
|
289
303
|
"name": "?opened",
|
|
290
304
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -334,6 +348,20 @@
|
|
|
334
348
|
"kind": "expression"
|
|
335
349
|
}
|
|
336
350
|
},
|
|
351
|
+
{
|
|
352
|
+
"name": ".accessibleName",
|
|
353
|
+
"description": "String used to label the component to screen reader users.",
|
|
354
|
+
"value": {
|
|
355
|
+
"kind": "expression"
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": ".accessibleNameRef",
|
|
360
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
361
|
+
"value": {
|
|
362
|
+
"kind": "expression"
|
|
363
|
+
}
|
|
364
|
+
},
|
|
337
365
|
{
|
|
338
366
|
"name": ".value",
|
|
339
367
|
"description": "The value of the field.",
|
|
@@ -397,6 +425,13 @@
|
|
|
397
425
|
"kind": "expression"
|
|
398
426
|
}
|
|
399
427
|
},
|
|
428
|
+
{
|
|
429
|
+
"name": ".overlayClass",
|
|
430
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
431
|
+
"value": {
|
|
432
|
+
"kind": "expression"
|
|
433
|
+
}
|
|
434
|
+
},
|
|
400
435
|
{
|
|
401
436
|
"name": ".renderer",
|
|
402
437
|
"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.",
|