Fixed #1288 - MultiSelect selectionLimit showToggleAll

primefaces · May 21, 2021 · b23d409 · b23d409
1 parent 0679d9c
commit b23d409
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -19,6 +19,8 @@ declare class MultiSelect extends Vue {
     appendTo?: string;
     emptyFilterMessage?: string;
     display?: string;
+    selectionLimit?: number;
+    showToggleAll?: boolean;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'before-show'): this;

diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
@@ -25,8 +25,8 @@
         </div>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div ref="overlay" class="p-multiselect-panel p-component" v-if="overlayVisible">
-                <div class="p-multiselect-header">
-                    <div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
+                <div class="p-multiselect-header" v-if="(showToggleAll && selectionLimit == null) || filter">
+                    <div class="p-checkbox p-component" v-if="showToggleAll && selectionLimit == null" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
                         <div class="p-hidden-accessible">
                             <input type="checkbox" readonly @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
                         </div>
@@ -100,6 +100,14 @@ export default {
         display: {
             type: String,
             default: 'comma'
+        },
+        selectionLimit: {
+            type: Number,
+            default: null
+        },
+        showToggleAll: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -134,6 +142,9 @@ export default {
             return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
         isOptionDisabled(option) {
+            if (this.maxSelectionLimitReached && !this.isSelected(option)) {
+                return true;
+            }
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
         isSelected(option) {
@@ -483,6 +494,9 @@ export default {
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
+        },
+        maxSelectionLimitReached() {
+            return this.selectionLimit && (this.value && this.value.length === this.selectionLimit);
         }
     },
     directives: {
@@ -592,6 +606,7 @@ export default {
     flex-shrink: 0;
     overflow: hidden;
     position: relative;
+    margin-left: auto;
 }
 
 .p-fluid .p-multiselect {

diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
@@ -189,6 +189,18 @@ data() {
                                 <td>string</td>
                                 <td>comma</td>
                                 <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
+                            </tr>
+                            <tr>
+                                <td>selectionLimit</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Maximum number of selectable items.</td>
+                            </tr>
+                            <tr>
+                                <td>showToggleAll</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to show the header checkbox to toggle the selection of all items at once.</td>
                             </tr>
 						</tbody>
 					</table>