Skip to content

Commit 5b86a6c

Browse files
DiegoCardosoDiegoCardoso
authored
chore: improve multi-select-combo-box dev page (#9579)
1 parent 3c9afd6 commit 5b86a6c

File tree

1 file changed

+101
-20
lines changed

1 file changed

+101
-20
lines changed

‎dev/multi-select-combo-box.html‎

Lines changed: 101 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,81 @@
99
<script type="module" src="./common.js"></script>
1010

1111
<script type="module">
12+
import '@vaadin/checkbox';
13+
import '@vaadin/checkbox-group';
1214
import '@vaadin/multi-select-combo-box';
15+
import '@vaadin/radio-group';
16+
import '@vaadin/text-field';
1317
import '@vaadin/tooltip';
1418
</script>
1519
</head>
1620
<body>
17-
<vaadin-multi-select-combo-box
18-
label="Element"
19-
clear-button-visible
20-
required
21-
error-message="Select at least one"
22-
allow-custom-value
23-
auto-expand-horizontally
24-
auto-expand-vertically
25-
>
26-
<vaadin-tooltip slot="tooltip" text="Vaadin multi-select-combo-box tooltip text"></vaadin-tooltip>
27-
</vaadin-multi-select-combo-box>
28-
29-
<!--
30-
<vaadin-multi-select-combo-box
31-
label="Element"
32-
clear-button-visible
33-
item-label-path="name"
34-
item-id-path="id"
35-
></vaadin-multi-select-combo-box>
36-
-->
21+
<style>
22+
.controls {
23+
display: grid;
24+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
25+
gap: 2rem;
26+
margin-bottom: 2rem;
27+
font-size: 0.875rem;
28+
}
29+
30+
.control-group {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 0.5em;
34+
}
35+
</style>
36+
37+
<div class="controls">
38+
<div class="control-group">
39+
<vaadin-checkbox-group label="Features">
40+
<vaadin-checkbox id="allowCustomValue" value="allowCustomValue" label="Allow custom value"></vaadin-checkbox>
41+
<vaadin-checkbox
42+
id="autoExpandHorizontally"
43+
value="autoExpandHorizontally"
44+
label="Auto expand horizontally"
45+
></vaadin-checkbox>
46+
<vaadin-checkbox
47+
id="autoExpandVertically"
48+
value="autoExpandVertically"
49+
label="Auto expand vertically"
50+
></vaadin-checkbox>
51+
<vaadin-checkbox id="autoOpenDisabled" value="autoOpenDisabled" label="Auto open disabled"></vaadin-checkbox>
52+
<vaadin-checkbox id="keepFilter" value="keepFilter" label="Keep filter"></vaadin-checkbox>
53+
<vaadin-checkbox
54+
id="selectedItemsOnTop"
55+
value="selectedItemsOnTop"
56+
label="Selected items on top"
57+
></vaadin-checkbox>
58+
</vaadin-checkbox-group>
59+
</div>
60+
61+
<div class="control-group">
62+
<vaadin-checkbox-group label="State">
63+
<vaadin-checkbox id="clearButton" value="clearButton" label="Clear button visible"></vaadin-checkbox>
64+
<vaadin-checkbox id="required" value="required" label="Required"></vaadin-checkbox>
65+
<vaadin-checkbox id="disabled" value="disabled" label="Disabled"></vaadin-checkbox>
66+
<vaadin-checkbox id="readonly" value="readonly" label="Read-only"></vaadin-checkbox>
67+
</vaadin-checkbox-group>
68+
</div>
69+
70+
<div class="control-group">
71+
<vaadin-radio-group id="direction" label="Direction">
72+
<vaadin-radio-button label="LTR" value="ltr" checked></vaadin-radio-button>
73+
<vaadin-radio-button label="RTL" value="rtl"></vaadin-radio-button>
74+
</vaadin-radio-group>
75+
</div>
76+
</div>
77+
78+
<div>
79+
<vaadin-multi-select-combo-box
80+
label="Element"
81+
error-message="Select at least one"
82+
placeholder="Search elements..."
83+
>
84+
<vaadin-tooltip slot="tooltip" text="Vaadin multi-select-combo-box tooltip text"></vaadin-tooltip>
85+
</vaadin-multi-select-combo-box>
86+
</div>
3787

3888
<script>
3989
const comboBox = document.querySelector('vaadin-multi-select-combo-box');
@@ -73,6 +123,37 @@
73123

74124
comboBox.selectedItems = ['Hydrogen', 'Helium', 'Lithium'];
75125

126+
// Handle features toggles
127+
[
128+
'allowCustomValue',
129+
'autoExpandHorizontally',
130+
'autoExpandVertically',
131+
'autoOpenDisabled',
132+
'keepFilter',
133+
'selectedItemsOnTop',
134+
].forEach((prop) => {
135+
document.getElementById(prop).addEventListener('checked-changed', (e) => {
136+
comboBox[prop] = e.detail.value;
137+
});
138+
});
139+
140+
// Handle state toggles
141+
['clearButton', 'required', 'disabled', 'readonly'].forEach((prop) => {
142+
document.getElementById(prop).addEventListener('checked-changed', (e) => {
143+
if (prop === 'clearButton') {
144+
comboBox.clearButtonVisible = e.detail.value;
145+
} else {
146+
comboBox[prop] = e.detail.value;
147+
}
148+
});
149+
});
150+
151+
// Handle direction changes
152+
document.getElementById('direction').addEventListener('value-changed', (e) => {
153+
comboBox.setAttribute('dir', e.detail.value);
154+
});
155+
156+
// Event listeners for changes
76157
comboBox.addEventListener('custom-value-set', (event) => {
77158
const item = event.detail;
78159
comboBox.items.push(item);

0 commit comments

Comments
 (0)