Update MultiSelect doc and demo
mertsincan
parent
6c6b9c0c68
commit
5c7bfccc15
|
|
@ -47,6 +47,9 @@
|
|||
|
||||
<h5>Loading State</h5>
|
||||
<MultiSelect placeholder="Loading..." loading></MultiSelect>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 34 }" placeholder="Select Item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -64,6 +67,8 @@ export default {
|
|||
selectedCities2: null,
|
||||
selectedCountries: null,
|
||||
selectedGroupedCities: null,
|
||||
selectedItems: null,
|
||||
selectAll: false,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -84,7 +89,7 @@ export default {
|
|||
{name: 'United States', code: 'US'}
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -93,7 +98,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -102,14 +107,24 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]
|
||||
}],
|
||||
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectAllChange(event) {
|
||||
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
|
||||
this.selectAll = event.checked;
|
||||
},
|
||||
onChange(event) {
|
||||
this.selectAll = event.value.length === this.items.length
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
return {
|
||||
selectedGroupedCities: null,
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities"
|
||||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities"
|
||||
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
</MultiSelect>
|
||||
</template>
|
||||
|
|
@ -301,6 +301,30 @@ export default {
|
|||
<td>string</td>
|
||||
<td>pi pi-spinner pi-spin</td>
|
||||
<td>Icon to display in loading state.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxSelectedLabels</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Decides how many selected item labels to show at most.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectedItemsLabel</td>
|
||||
<td>string</td>
|
||||
<td>{0} items selected</td>
|
||||
<td>Label to display after exceeding max selected labels.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectAll</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether all data is selected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>virtualScrollerOptions</td>
|
||||
<td>object</td>
|
||||
<td>null</td>
|
||||
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -349,6 +373,12 @@ export default {
|
|||
event.value: Filter value </td>
|
||||
<td>Callback to invoke on filter input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectall-change</td>
|
||||
<td>event.originalEvent: Original event <br />
|
||||
event.checked: Whether all data is selected.</td>
|
||||
<td>Callback to invoke when all data is selected.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -528,6 +558,9 @@ export default {
|
|||
|
||||
<h5>Loading State</h5>
|
||||
<MultiSelect placeholder="Loading..." loading></MultiSelect>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 34 }" placeholder="Select Item" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -539,6 +572,8 @@ export default {
|
|||
selectedCities2: null,
|
||||
selectedCountries: null,
|
||||
selectedGroupedCities: null,
|
||||
selectedItems: null,
|
||||
selectAll: false,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -559,7 +594,7 @@ export default {
|
|||
{name: 'United States', code: 'US'}
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -568,7 +603,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -577,14 +612,24 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]
|
||||
}],
|
||||
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
|
||||
},
|
||||
methods: {
|
||||
onSelectAllChange(event) {
|
||||
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
|
||||
this.selectAll = event.checked;
|
||||
},
|
||||
onChange(event) {
|
||||
this.selectAll = event.value.length === this.items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -664,6 +709,9 @@ export default {
|
|||
|
||||
<h5>Loading State</h5>
|
||||
<MultiSelect placeholder="Loading..." loading></MultiSelect>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 34 }" placeholder="Select Item" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -676,6 +724,8 @@ export default {
|
|||
const selectedCities2 = ref();
|
||||
const selectedCountries = ref();
|
||||
const selectedGroupedCities = ref();
|
||||
const selectedItems = ref();
|
||||
const selectAll = ref(false);
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -697,7 +747,7 @@ export default {
|
|||
]);
|
||||
const groupedCities = ref([
|
||||
{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -706,7 +756,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -715,7 +765,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
|
|
@ -724,8 +774,18 @@ export default {
|
|||
]
|
||||
}
|
||||
]);
|
||||
const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
|
||||
|
||||
return { selectedCities1, selectedCities2, selectedCountries, selectedGroupedCities, cities, countries, groupedCities }
|
||||
return { selectedCities1, selectedCities2, selectedCountries, selectedGroupedCities, cities, countries, groupedCities, items, selectedItems, selectAll }
|
||||
},
|
||||
methods: {
|
||||
onSelectAllChange(event) {
|
||||
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
|
||||
this.selectAll = event.checked;
|
||||
},
|
||||
onChange(event) {
|
||||
this.selectAll = event.value.length === this.items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue