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-checkbox p-component" @click="onToggleAll">
<div class="p-hidden-accessible">
<input type="checkbox" readonly>
<input type="checkbox" readonly @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
</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>
</div>
</div>
@ -78,6 +78,7 @@ export default {
data() {
return {
focused: false,
headerCheckboxFocused: false,
filterValue: null,
overlayVisible: false
};
@ -122,6 +123,12 @@ export default {
onBlur() {
this.focused = false;
},
onHeaderCheckboxFocus() {
this.headerCheckboxFocused = true;
},
onHeaderCheckboxBlur() {
this.headerCheckboxFocused = false;
},
onClick() {
if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) {
this.overlayVisible = !this.overlayVisible;
@ -327,11 +334,20 @@ export default {
return label;
},
allSelected() {
if (this.filterValue && this.filterValue.trim().length > 0)
return this.value && this.visibleOptions && (this.value.length > 0 && this.value.length === this.visibleOptions.length);
else
if (this.filterValue && this.filterValue.trim().length > 0) {
let allSelected = true;
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);
}
}
}
}
</script>