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

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

@ -38,7 +38,7 @@
</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"></CFButton>
<CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel" v-if="showApplyButton"></CFButton>
</div>
</template>
<component :is="filterFooter" :field="field" />
@ -345,7 +345,7 @@ export default {
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
this.overlayVisible = false;
}
this.selfClick = false;
@ -402,7 +402,7 @@ export default {
]
},
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() {
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) {
let newValue = value;
let modelValue;
if (this.range) {
modelValue = this.modelValue ? [...this.modelValue] : [];
if (this.handleIndex == 0) {
let maxValue = this.modelValue ? this.modelValue[1] : this.max;
if (newValue < this.min)
newValue = this.min;
else if (newValue >= this.modelValue[1])
newValue = this.modelValue[1];
else if (newValue >= maxValue)
newValue = maxValue;
modelValue[0] = Math.floor(newValue);
modelValue[1] = modelValue[1] || this.max;
}
else {
let minValue = this.modelValue ? this.modelValue[0] : this.min;
if (newValue > this.max)
newValue = this.max;
else if (newValue <= this.modelValue[0])
newValue = this.modelValue[0];
else if (newValue <= minValue)
newValue = minValue;
modelValue[0] = modelValue[0] || this.min;
modelValue[1] = Math.floor(newValue);
}
modelValue = [...this.modelValue];
modelValue[this.handleIndex] = Math.floor(newValue);
}
else {
if (newValue < this.min)
newValue = this.min;
else if (newValue > this.max)
newValue = this.max;
modelValue = Math.floor(newValue);
}
@ -283,16 +294,16 @@ export default {
return (this.modelValue - this.min) * 100 / (this.max - this.min);
},
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);
else
return 0;
},
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);
else
return 0;
return 100;
},
rangeStartHandleStyle() {
if (this.horizontal)

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

@ -108,8 +108,8 @@
<template #filter={filterModel}>
<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">
<span>{{filters1['activity'].value[0]}}</span>
<span>{{filters1['activity'].value[1]}}</span>
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div>
</template>
</Column>
@ -285,7 +285,7 @@ export default {
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
'balance': {operator: FilterOperator.AND, 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}
}
}