@vaadin/combo-box 23.3.21 → 23.3.23
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 +40 -150
- package/web-types.lit.json +13 -48
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.23",
|
|
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.23",
|
|
42
|
+
"@vaadin/field-base": "~23.3.23",
|
|
43
|
+
"@vaadin/input-container": "~23.3.23",
|
|
44
|
+
"@vaadin/item": "~23.3.23",
|
|
45
|
+
"@vaadin/lit-renderer": "~23.3.23",
|
|
46
|
+
"@vaadin/overlay": "~23.3.23",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.23",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "~23.3.23",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.23"
|
|
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.23",
|
|
54
54
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
55
|
-
"@vaadin/text-field": "~23.3.
|
|
55
|
+
"@vaadin/text-field": "~23.3.23",
|
|
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": "0027e59e0405f668a089c10e75bb488da9a665b8"
|
|
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": "23.3.23",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -29,39 +29,6 @@
|
|
|
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
|
-
},
|
|
65
32
|
{
|
|
66
33
|
"name": "opened",
|
|
67
34
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -221,39 +188,6 @@
|
|
|
221
188
|
]
|
|
222
189
|
}
|
|
223
190
|
},
|
|
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
|
-
},
|
|
257
191
|
{
|
|
258
192
|
"name": "opened",
|
|
259
193
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -460,7 +394,7 @@
|
|
|
460
394
|
},
|
|
461
395
|
{
|
|
462
396
|
"name": "vaadin-combo-box",
|
|
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/
|
|
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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/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/custom-theme/styling-components) documentation.",
|
|
464
398
|
"attributes": [
|
|
465
399
|
{
|
|
466
400
|
"name": "disabled",
|
|
@@ -539,28 +473,6 @@
|
|
|
539
473
|
]
|
|
540
474
|
}
|
|
541
475
|
},
|
|
542
|
-
{
|
|
543
|
-
"name": "accessible-name",
|
|
544
|
-
"description": "String used to label the component to screen reader users.",
|
|
545
|
-
"value": {
|
|
546
|
-
"type": [
|
|
547
|
-
"string",
|
|
548
|
-
"null",
|
|
549
|
-
"undefined"
|
|
550
|
-
]
|
|
551
|
-
}
|
|
552
|
-
},
|
|
553
|
-
{
|
|
554
|
-
"name": "accessible-name-ref",
|
|
555
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
556
|
-
"value": {
|
|
557
|
-
"type": [
|
|
558
|
-
"string",
|
|
559
|
-
"null",
|
|
560
|
-
"undefined"
|
|
561
|
-
]
|
|
562
|
-
}
|
|
563
|
-
},
|
|
564
476
|
{
|
|
565
477
|
"name": "value",
|
|
566
478
|
"description": "The value of the field.",
|
|
@@ -573,30 +485,30 @@
|
|
|
573
485
|
}
|
|
574
486
|
},
|
|
575
487
|
{
|
|
576
|
-
"name": "
|
|
577
|
-
"description": "
|
|
488
|
+
"name": "allowed-char-pattern",
|
|
489
|
+
"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-]\"`",
|
|
578
490
|
"value": {
|
|
579
491
|
"type": [
|
|
580
|
-
"
|
|
492
|
+
"string",
|
|
581
493
|
"null",
|
|
582
494
|
"undefined"
|
|
583
495
|
]
|
|
584
496
|
}
|
|
585
497
|
},
|
|
586
498
|
{
|
|
587
|
-
"name": "
|
|
588
|
-
"description": "
|
|
499
|
+
"name": "autoselect",
|
|
500
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
589
501
|
"value": {
|
|
590
502
|
"type": [
|
|
591
|
-
"
|
|
503
|
+
"boolean",
|
|
592
504
|
"null",
|
|
593
505
|
"undefined"
|
|
594
506
|
]
|
|
595
507
|
}
|
|
596
508
|
},
|
|
597
509
|
{
|
|
598
|
-
"name": "
|
|
599
|
-
"description": "
|
|
510
|
+
"name": "clear-button-visible",
|
|
511
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
600
512
|
"value": {
|
|
601
513
|
"type": [
|
|
602
514
|
"boolean",
|
|
@@ -659,31 +571,31 @@
|
|
|
659
571
|
}
|
|
660
572
|
},
|
|
661
573
|
{
|
|
662
|
-
"name": "
|
|
663
|
-
"description": "
|
|
574
|
+
"name": "prevent-invalid-input",
|
|
575
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
664
576
|
"value": {
|
|
665
577
|
"type": [
|
|
666
|
-
"
|
|
578
|
+
"boolean",
|
|
579
|
+
"null",
|
|
580
|
+
"undefined"
|
|
667
581
|
]
|
|
668
582
|
}
|
|
669
583
|
},
|
|
670
584
|
{
|
|
671
|
-
"name": "size",
|
|
672
|
-
"description": "
|
|
585
|
+
"name": "page-size",
|
|
586
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
673
587
|
"value": {
|
|
674
588
|
"type": [
|
|
675
|
-
"number"
|
|
676
|
-
"undefined"
|
|
589
|
+
"number"
|
|
677
590
|
]
|
|
678
591
|
}
|
|
679
592
|
},
|
|
680
593
|
{
|
|
681
|
-
"name": "
|
|
682
|
-
"description": "
|
|
594
|
+
"name": "size",
|
|
595
|
+
"description": "Total number of items.",
|
|
683
596
|
"value": {
|
|
684
597
|
"type": [
|
|
685
|
-
"
|
|
686
|
-
"null",
|
|
598
|
+
"number",
|
|
687
599
|
"undefined"
|
|
688
600
|
]
|
|
689
601
|
}
|
|
@@ -855,28 +767,6 @@
|
|
|
855
767
|
]
|
|
856
768
|
}
|
|
857
769
|
},
|
|
858
|
-
{
|
|
859
|
-
"name": "accessibleName",
|
|
860
|
-
"description": "String used to label the component to screen reader users.",
|
|
861
|
-
"value": {
|
|
862
|
-
"type": [
|
|
863
|
-
"string",
|
|
864
|
-
"null",
|
|
865
|
-
"undefined"
|
|
866
|
-
]
|
|
867
|
-
}
|
|
868
|
-
},
|
|
869
|
-
{
|
|
870
|
-
"name": "accessibleNameRef",
|
|
871
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
872
|
-
"value": {
|
|
873
|
-
"type": [
|
|
874
|
-
"string",
|
|
875
|
-
"null",
|
|
876
|
-
"undefined"
|
|
877
|
-
]
|
|
878
|
-
}
|
|
879
|
-
},
|
|
880
770
|
{
|
|
881
771
|
"name": "value",
|
|
882
772
|
"description": "The value of the field.",
|
|
@@ -889,30 +779,30 @@
|
|
|
889
779
|
}
|
|
890
780
|
},
|
|
891
781
|
{
|
|
892
|
-
"name": "
|
|
893
|
-
"description": "
|
|
782
|
+
"name": "allowedCharPattern",
|
|
783
|
+
"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-]\"`",
|
|
894
784
|
"value": {
|
|
895
785
|
"type": [
|
|
896
|
-
"
|
|
786
|
+
"string",
|
|
897
787
|
"null",
|
|
898
788
|
"undefined"
|
|
899
789
|
]
|
|
900
790
|
}
|
|
901
791
|
},
|
|
902
792
|
{
|
|
903
|
-
"name": "
|
|
904
|
-
"description": "
|
|
793
|
+
"name": "autoselect",
|
|
794
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
905
795
|
"value": {
|
|
906
796
|
"type": [
|
|
907
|
-
"
|
|
797
|
+
"boolean",
|
|
908
798
|
"null",
|
|
909
799
|
"undefined"
|
|
910
800
|
]
|
|
911
801
|
}
|
|
912
802
|
},
|
|
913
803
|
{
|
|
914
|
-
"name": "
|
|
915
|
-
"description": "
|
|
804
|
+
"name": "clearButtonVisible",
|
|
805
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
916
806
|
"value": {
|
|
917
807
|
"type": [
|
|
918
808
|
"boolean",
|
|
@@ -974,6 +864,17 @@
|
|
|
974
864
|
]
|
|
975
865
|
}
|
|
976
866
|
},
|
|
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
|
+
},
|
|
977
878
|
{
|
|
978
879
|
"name": "pageSize",
|
|
979
880
|
"description": "Number of items fetched at a time from the dataprovider.",
|
|
@@ -1003,17 +904,6 @@
|
|
|
1003
904
|
]
|
|
1004
905
|
}
|
|
1005
906
|
},
|
|
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
|
-
},
|
|
1017
907
|
{
|
|
1018
908
|
"name": "opened",
|
|
1019
909
|
"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": "23.3.23",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,13 +19,6 @@
|
|
|
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
|
-
},
|
|
29
22
|
{
|
|
30
23
|
"name": "?opened",
|
|
31
24
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -96,20 +89,6 @@
|
|
|
96
89
|
"kind": "expression"
|
|
97
90
|
}
|
|
98
91
|
},
|
|
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
|
-
},
|
|
113
92
|
{
|
|
114
93
|
"name": ".renderer",
|
|
115
94
|
"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.",
|
|
@@ -247,7 +226,7 @@
|
|
|
247
226
|
},
|
|
248
227
|
{
|
|
249
228
|
"name": "vaadin-combo-box",
|
|
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/
|
|
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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/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/23.3.23/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.23/#/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/custom-theme/styling-components) documentation.",
|
|
251
230
|
"extension": true,
|
|
252
231
|
"attributes": [
|
|
253
232
|
{
|
|
@@ -279,15 +258,15 @@
|
|
|
279
258
|
}
|
|
280
259
|
},
|
|
281
260
|
{
|
|
282
|
-
"name": "?
|
|
283
|
-
"description": "
|
|
261
|
+
"name": "?autoselect",
|
|
262
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
284
263
|
"value": {
|
|
285
264
|
"kind": "expression"
|
|
286
265
|
}
|
|
287
266
|
},
|
|
288
267
|
{
|
|
289
|
-
"name": "?
|
|
290
|
-
"description": "
|
|
268
|
+
"name": "?clearButtonVisible",
|
|
269
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
291
270
|
"value": {
|
|
292
271
|
"kind": "expression"
|
|
293
272
|
}
|
|
@@ -299,6 +278,13 @@
|
|
|
299
278
|
"kind": "expression"
|
|
300
279
|
}
|
|
301
280
|
},
|
|
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
|
+
},
|
|
302
288
|
{
|
|
303
289
|
"name": "?opened",
|
|
304
290
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -348,20 +334,6 @@
|
|
|
348
334
|
"kind": "expression"
|
|
349
335
|
}
|
|
350
336
|
},
|
|
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
|
-
},
|
|
365
337
|
{
|
|
366
338
|
"name": ".value",
|
|
367
339
|
"description": "The value of the field.",
|
|
@@ -425,13 +397,6 @@
|
|
|
425
397
|
"kind": "expression"
|
|
426
398
|
}
|
|
427
399
|
},
|
|
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
|
-
},
|
|
435
400
|
{
|
|
436
401
|
"name": ".renderer",
|
|
437
402
|
"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.",
|