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

Add filterMenuStyle and filterMenuClass

pull/973/head
Cagatay Civici 2021-02-08 11:12:53 +03:00
parent 6c7d36e24b
commit 219dd6d78b
5 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/column/Column.d.ts vendored
View File

@ -16,6 +16,8 @@ declare class Column extends Vue {
footerClass?: string;
filterHeaderStyle?: object;
filterHeaderClass?: string;
filterMenuStyle?: object;
filterMenuClass?: string;
filterFunction?: Function;
excludeGlobalFilter?: boolean;
selectionMode?: string;

10
src/components/column/Column.vue
View File

@ -104,7 +104,15 @@ export default {
},
filterHeaderStyle: {
type: null,
default: false
default: null
},
filterMenuClass: {
type: String,
default: null
},
filterMenuStyle: {
type: null,
default: null
},
selectionMode: {
type: String,

22
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>
<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">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" :style="filterMenuStyle">
<component :is="filterHeader" :field="field" />
<template v-if="display === 'row'">
<ul class="p-column-filter-row-items">
@ -110,6 +110,14 @@ export default {
filters: {
type: Object,
default: null
},
filterMenuClass: {
type: String,
default: null
},
filterMenuStyle: {
type: null,
default: null
}
},
data() {
@ -265,18 +273,26 @@ export default {
_filters[this.field].constraints[index].matchMode = value;
if (!this.showApplyButton) {
this.$emit('filter-change', _filters);
this.$emit('filter-apply');
}
},
addConstraint() {
let _filters = {...this.filters};
_filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
this.$emit('filter-change', _filters);
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
removeConstraint(index) {
let _filters = {...this.filters};
_filters[this.field].constraints.splice(index, 1);
this.$emit('filter-change', _filters);
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
filterCallback() {
this.$emit('filter-apply');
@ -386,7 +402,7 @@ export default {
]
},
overlayClass() {
return {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'};
return [this.filterMenuyClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
},
showMenuButton() {
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);

4
src/components/datatable/TableHeader.vue
View File

@ -17,7 +17,7 @@
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
<DTColumnFilter v-if="filterDisplay === 'menu' && col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
:showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
</div>
@ -30,7 +30,7 @@
:class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
<DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
:showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />

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

@ -84,13 +84,16 @@
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column field="status" header="Status">
<Column field="status" header="Status" filterMenuStyle="min-width:14rem">
<template #body="{data}">
<span class="p-column-title">Status</span>
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
</template>
<template #filter="{filterModel}">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #value="slotProps">
<span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
</template>
<template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template>