vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update MultiSelect doc and demo

pull/1994/head
mertsincan 2021-08-17 14:09:24 +03:00
parent 6c6b9c0c68
commit 5c7bfccc15
2 changed files with 91 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/multiselect/MultiSelectDemo.vue
View File

@ -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'},
@ -109,7 +114,17 @@ export default {
{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: {

64
src/views/multiselect/MultiSelectDoc.vue
View File

@ -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>&#123;0&#125; 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'},
@ -584,7 +619,17 @@ export default {
{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'},
@ -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>