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

Fixed #2856 - Header checkbox is not styled as expected in Material themes.

pull/2862/head
mertsincan 2022-08-16 13:35:06 +01:00
parent ac714283c5
commit fa5ff89a39
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@
<span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span> <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot> <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header"> <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
<div v-if="showToggleAll && selectionLimit == null" class="p-checkbox p-component" @click="onToggleAll"> <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur"> <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur">
</div> </div>
@ -947,6 +947,12 @@ export default {
'p-ripple-disabled': this.$primevue.config.ripple === false 'p-ripple-disabled': this.$primevue.config.ripple === false
}]; }];
}, },
headerCheckboxClass() {
return ['p-checkbox p-component', {
'p-checkbox-checked': this.allSelected,
'p-checkbox-focused': this.headerCheckboxFocused
}];
},
visibleOptions() { visibleOptions() {
const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []); const options = this.optionGroupLabel ? this.flatOptions(this.options) : (this.options || []);