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

Expose more events for flexibility

pull/973/head
Cagatay Civici 2021-02-08 14:20:52 +03:00
parent 1ba1bb1a54
commit b84812339b
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,7 @@ import Dropdown from 'primevue/dropdown';
import Button from 'primevue/button'; import Button from 'primevue/button';
export default { export default {
emits: ['filter-change', 'filter-apply'], emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
props: { props: {
field: { field: {
type: String, type: String,
@ -163,11 +163,13 @@ export default {
_filters[this.field].matchMode = this.defaultMatchMode; _filters[this.field].matchMode = this.defaultMatchMode;
} }
this.$emit('filter-clear');
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
this.$emit('filter-apply'); this.$emit('filter-apply');
this.hide(); this.hide();
}, },
applyFilter() { applyFilter() {
this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]});
this.$emit('filter-apply'); this.$emit('filter-apply');
this.hide(); this.hide();
}, },
@ -230,6 +232,7 @@ export default {
onRowMatchModeChange(matchMode) { onRowMatchModeChange(matchMode) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].matchMode = matchMode; _filters[this.field].matchMode = matchMode;
this.$emit('matchmode-change', {field: this.field, matchMode: matchMode});
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
this.$emit('filter-apply'); this.$emit('filter-apply');
this.hide(); this.hide();
@ -269,14 +272,15 @@ export default {
_filters[this.field].operator = value; _filters[this.field].operator = value;
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
this.$emit('operator-change', {field: this.field, operator: value});
if (!this.showApplyButton) { if (!this.showApplyButton) {
this.$emit('filter-apply'); this.$emit('filter-apply');
} }
}, },
onMenuMatchModeChange(value, index) { onMenuMatchModeChange(value, index) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].constraints[index].matchMode = value; _filters[this.field].constraints[index].matchMode = value;
this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index});
if (!this.showApplyButton) { if (!this.showApplyButton) {
this.$emit('filter-apply'); this.$emit('filter-apply');
@ -284,7 +288,9 @@ export default {
}, },
addConstraint() { addConstraint() {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode}); let newConstraint = {value: null, matchMode: this.defaultMatchMode};
_filters[this.field].constraints.push(newConstraint);
this.$emit('constraint-add', {field: this.field, constraing: newConstraint});
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
if (!this.showApplyButton) { if (!this.showApplyButton) {
@ -293,7 +299,8 @@ export default {
}, },
removeConstraint(index) { removeConstraint(index) {
let _filters = {...this.filters}; let _filters = {...this.filters};
_filters[this.field].constraints.splice(index, 1); let removedConstraint = _filters[this.field].constraints.splice(index, 1);
this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint});
this.$emit('filter-change', _filters); this.$emit('filter-change', _filters);
if (!this.showApplyButton) { if (!this.showApplyButton) {

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

@ -82,7 +82,9 @@
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)" @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" /> @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change',$event)"
@constraint-add="$emit('constraint-add',$event)" @constraint-remove="$emit('constraint-remove',$event)" @apply-click="$emit('apply-click',$event)" />
</template> </template>
<template #body="slotProps"> <template #body="slotProps">
<DTTableBody :value="dataToRender" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection" <DTTableBody :value="dataToRender" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
@ -143,7 +145,8 @@ export default {
'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand', 'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'virtual-scroll', 'state-restore', 'state-save', 'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'virtual-scroll', 'state-restore', 'state-save',
'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'], 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
props: { props: {
value: { value: {
type: Array, type: Array,

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

@ -19,7 +19,8 @@
: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" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
:filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')" :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')" :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')" /> :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
</div> </div>
</th> </th>
</template> </template>
@ -32,7 +33,8 @@
: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" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
:filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')" :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')" :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')" /> :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" /> <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
</th> </th>
</template> </template>
@ -62,7 +64,8 @@ import ColumnFilter from './ColumnFilter';
export default { export default {
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop', emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply'], 'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
props: { props: {
columnGroup: { columnGroup: {
type: null, type: null,