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

Implement slider support column filter

pull/973/head
Cagatay Civici 2021-02-08 12:10:46 +03:00
parent 219dd6d78b
commit 0f929f832d
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
</div> </div>
<div class="p-column-filter-buttonbar"> <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-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
<CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel"></CFButton> <CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel" v-if="showApplyButton"></CFButton>
</div> </div>
</template> </template>
<component :is="filterFooter" :field="field" /> <component :is="filterFooter" :field="field" />
@ -402,7 +402,7 @@ export default {
] ]
}, },
overlayClass() { overlayClass() {
return [this.filterMenuyClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}]; return [this.filterMenuClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
}, },
showMenuButton() { showMenuButton() {
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true); return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);

29
src/components/slider/Slider.vue
View File

@ -87,27 +87,38 @@ export default {
updateModel(event, value) { updateModel(event, value) {
let newValue = value; let newValue = value;
let modelValue; let modelValue;
if (this.range) { if (this.range) {
modelValue = this.modelValue ? [...this.modelValue] : [];
if (this.handleIndex == 0) { if (this.handleIndex == 0) {
let maxValue = this.modelValue ? this.modelValue[1] : this.max;
if (newValue < this.min) if (newValue < this.min)
newValue = this.min; newValue = this.min;
else if (newValue >= this.modelValue[1]) else if (newValue >= maxValue)
newValue = this.modelValue[1]; newValue = maxValue;
modelValue[0] = Math.floor(newValue);
modelValue[1] = modelValue[1] || this.max;
} }
else { else {
let minValue = this.modelValue ? this.modelValue[0] : this.min;
if (newValue > this.max) if (newValue > this.max)
newValue = this.max; newValue = this.max;
else if (newValue <= this.modelValue[0]) else if (newValue <= minValue)
newValue = this.modelValue[0]; newValue = minValue;
modelValue[0] = modelValue[0] || this.min;
modelValue[1] = Math.floor(newValue);
} }
modelValue = [...this.modelValue];
modelValue[this.handleIndex] = Math.floor(newValue);
} }
else { else {
if (newValue < this.min) if (newValue < this.min)
newValue = this.min; newValue = this.min;
else if (newValue > this.max) else if (newValue > this.max)
newValue = this.max; newValue = this.max;
modelValue = Math.floor(newValue); modelValue = Math.floor(newValue);
} }
@ -283,16 +294,16 @@ export default {
return (this.modelValue - this.min) * 100 / (this.max - this.min); return (this.modelValue - this.min) * 100 / (this.max - this.min);
}, },
rangeStartPosition() { rangeStartPosition() {
if (this.modelValue) if (this.modelValue && this.modelValue[0])
return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min); return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min);
else else
return 0; return 0;
}, },
rangeEndPosition() { rangeEndPosition() {
if (this.modelValue) if (this.modelValue && this.modelValue[1])
return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min); return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min);
else else
return 0; return 100;
}, },
rangeStartHandleStyle() { rangeStartHandleStyle() {
if (this.horizontal) if (this.horizontal)

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

@ -108,8 +108,8 @@
<template #filter={filterModel}> <template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="p-d-flex p-ai-center p-jc-between p-px-2">
<span>{{filters1['activity'].value[0]}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filters1['activity'].value[1]}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
</template> </template>
</Column> </Column>
@ -285,7 +285,7 @@ export default {
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]}, 'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]}, 'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]}, 'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN}, 'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
'verified': {value: null, matchMode: FilterMatchMode.EQUALS} 'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
} }
} }