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

Refactor header checkbox toggle implementation

pull/12/head
cagataycivici 2018-12-30 23:58:02 +03:00
parent 8ae354e0bb
commit 67e01d0f35
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/multiselect/MultiSelect.vue
View File

@ -18,9 +18,9 @@
<div class="p-multiselect-header"> <div class="p-multiselect-header">
<div class="p-checkbox p-component" @click="onToggleAll"> <div class="p-checkbox p-component" @click="onToggleAll">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input type="checkbox" readonly> <input type="checkbox" readonly @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
</div> </div>
<div :class="['p-checkbox-box p-component', {'p-highlight': allSelected}]"> <div :class="['p-checkbox-box p-component', {'p-highlight': allSelected, 'p-focus': headerCheckboxFocused}]">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': allSelected}]"></span> <span :class="['p-checkbox-icon p-c', {'pi pi-check': allSelected}]"></span>
</div> </div>
</div> </div>
@ -78,6 +78,7 @@ export default {
data() { data() {
return { return {
focused: false, focused: false,
headerCheckboxFocused: false,
filterValue: null, filterValue: null,
overlayVisible: false overlayVisible: false
}; };
@ -122,6 +123,12 @@ export default {
onBlur() { onBlur() {
this.focused = false; this.focused = false;
}, },
onHeaderCheckboxFocus() {
this.headerCheckboxFocused = true;
},
onHeaderCheckboxBlur() {
this.headerCheckboxFocused = false;
},
onClick() { onClick() {
if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) { if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) {
this.overlayVisible = !this.overlayVisible; this.overlayVisible = !this.overlayVisible;
@ -327,10 +334,19 @@ export default {
return label; return label;
}, },
allSelected() { allSelected() {
if (this.filterValue && this.filterValue.trim().length > 0) if (this.filterValue && this.filterValue.trim().length > 0) {
return this.value && this.visibleOptions && (this.value.length > 0 && this.value.length === this.visibleOptions.length); let allSelected = true;
else for (let option of this.visibleOptions) {
if (!this.isSelected(option)) {
allSelected = false;
break;
}
}
return allSelected;
}
else {
return this.value && this.options && (this.value.length > 0 && this.value.length === this.options.length); return this.value && this.options && (this.value.length > 0 && this.value.length === this.options.length);
}
} }
} }
} }