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

Prevent menu style being cleared after update

pull/973/head
Cagatay Civici 2021-02-08 16:40:02 +03:00
parent baacf46d6b
commit 61a0ebf3e8
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/datatable/ColumnFilter.vue
View File

@ -8,7 +8,7 @@
@click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button> @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
<button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button> <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" :style="filterMenuStyle"> <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" /> <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'"> <template v-if="display === 'row'">
<ul class="p-column-filter-row-items"> <ul class="p-column-filter-row-items">
@ -342,6 +342,11 @@ export default {
document.body.appendChild(this.overlay); document.body.appendChild(this.overlay);
this.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
DomHandler.absolutePosition(this.overlay, this.$refs.icon); DomHandler.absolutePosition(this.overlay, this.$refs.icon);
if (this.filterMenuStyle) {
for (let prop in this.filterMenuStyle) {
this.overlay.style[prop] = this.filterMenuStyle[prop];
}
}
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindScrollListener(); this.bindScrollListener();
this.bindResizeListener(); this.bindResizeListener();

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -57,7 +57,7 @@
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div> <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" filterMenuStyle="width:14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
<template #body="{data}"> <template #body="{data}">
<span class="p-column-title">Agent</span> <span class="p-column-title">Agent</span>
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
@ -93,7 +93,7 @@
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" /> <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template> </template>
</Column> </Column>
<Column field="status" header="Status" filterMenuStyle="min-width:14rem"> <Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}">
<template #body="{data}"> <template #body="{data}">
<span class="p-column-title">Status</span> <span class="p-column-title">Status</span>
<span :class="'customer-badge status-' + data.status">{{data.status}}</span> <span :class="'customer-badge status-' + data.status">{{data.status}}</span>