Update MultiSelect doc and demo

src/views/multiselect/MultiSelectDemo.vue

@@ -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: {

src/views/multiselect/MultiSelectDoc.vue

@@ -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>
-&lt;MultiSelect v-model="selectedGroupedCities" :options="groupedCities" 
+&lt;MultiSelect v-model="selectedGroupedCities" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/MultiSelect&gt;
 </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>&#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'},
@@ -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>