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

Templating for header,footer and buttons in filter menu

pull/973/head
Cagatay Civici 2021-02-08 14:34:23 +03:00
parent b84812339b
commit dd9eb7d71b
4 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
<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" :style="filterMenuStyle">
<component :is="filterHeader" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'">
<ul class="p-column-filter-row-items">
<li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label"
@ -37,11 +37,15 @@
<CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
</div>
<div class="p-column-filter-buttonbar">
<CFButton type="button" class="p-button-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
<CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel" v-if="showApplyButton"></CFButton>
<CFButton v-if="!filterClearTemplate" type="button" class="p-button-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel"></CFButton>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
</template>
</div>
</template>
<component :is="filterFooter" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<component :is="filterFooterTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
</transition>
</div>
@ -105,8 +109,10 @@ export default {
default: 2
},
filterElement: null,
filterHeader: null,
filterFooter: null,
filterHeaderTemplate: null,
filterFooterTemplate: null,
filterClearTemplate: null,
filterApplyTemplate: null,
filters: {
type: Object,
default: null

2
src/components/datatable/DataTable.vue
View File

@ -2152,7 +2152,7 @@ export default {
justify-content: space-between;
}
.p-column-filter-buttonbar .p-button {
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
width: auto;
}
</style>

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

@ -16,7 +16,9 @@
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<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"
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter"
:filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter"
:filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply"
:filters="filters" :filtersStore="filtersStore" @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')"

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

@ -47,6 +47,15 @@
<template #filter="{filterModel}">
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
</template>
<template #filterclear="{filterCallback}">
<Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
</template>
<template #filterapply="{filterCallback}">
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
</template>
<template #filterfooter>
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" filterMenuStyle="width:14rem">
<template #body="{data}">