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

DataTable edit & filter button props updated

pull/5677/head
tugcekucukoglu 2024-04-29 12:55:47 +03:00
parent 142524f06e
commit fb387de29e
8 changed files with 319 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/lib/datatable/BaseDataTable.vue
View File

@ -278,10 +278,26 @@ export default {
type: Object,
default() {
return {
filter: { severity: 'secondary', text: true, rounded: true },
inline: {
clear: { severity: 'secondary', text: true, rounded: true }
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
}
};
}
},
editButtonProps: {
type: Object,
default() {
return {
init: { severity: 'secondary', text: true, rounded: true },
save: { severity: 'secondary', text: true, rounded: true },
cancel: { severity: 'secondary', text: true, rounded: true }
};
}
}

66
components/lib/datatable/BodyCell.vue
View File

@ -83,15 +83,45 @@
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')" data-pc-group-section="rowactionbutton">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
</button>
<Button
v-if="!d_editing"
:class="cx('rowEditorInitButton')"
:aria-label="initButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditInit"
v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="[cx('rowEditorInitIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorInitIcon')" />
</template>
</Button>
<Button
v-if="d_editing"
:class="cx('rowEditorSaveButton')"
:aria-label="saveButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditSave"
v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="[cx('rowEditorSaveIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorSaveIcon')" />
</template>
</Button>
<Button
v-if="d_editing"
:class="cx('rowEditorCancelButton')"
:aria-label="cancelButtonAriaLabel"
:unstyled="unstyled"
@click="onRowEditCancel"
v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }"
data-pc-group-section="rowactionbutton"
>
<template #icon="slotProps">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="[cx('rowEditorCancelIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorCancelIcon')" />
</template>
</Button>
</template>
<template v-else>{{ resolveFieldData() }}</template>
</td>
@ -99,6 +129,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import BarsIcon from 'primevue/icons/bars';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
@ -181,6 +212,10 @@ export default {
collapsedRowIcon: {
type: String,
default: null
},
editButtonProps: {
type: Object,
default: null
}
},
documentEditListener: null,
@ -532,12 +567,13 @@ export default {
components: {
DTRadioButton: RowRadioButton,
DTCheckbox: RowCheckbox,
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon,
BarsIcon: BarsIcon,
PencilIcon: PencilIcon,
CheckIcon: CheckIcon,
TimesIcon: TimesIcon
Button,
ChevronDownIcon,
ChevronRightIcon,
BarsIcon,
PencilIcon,
CheckIcon,
TimesIcon
},
directives: {
ripple: Ripple

5
components/lib/datatable/BodyRow.vue
View File

@ -59,6 +59,7 @@
:isRowExpanded="d_rowExpanded"
:expandedRowIcon="expandedRowIcon"
:collapsedRowIcon="collapsedRowIcon"
:editButtonProps="editButtonProps"
@radio-change="onRadioChange"
@checkbox-change="onCheckboxChange"
@row-toggle="onRowToggle"
@ -253,6 +254,10 @@ export default {
type: String,
default: 'stack'
},
editButtonProps: {
type: Object,
default: null
},
virtualScrollerContentProps: {
type: Object,
default: null

80
components/lib/datatable/ColumnFilter.vue
View File

@ -3,24 +3,34 @@
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
<button
<Button
v-if="showMenuButton"
ref="icon"
type="button"
:aria-label="filterMenuButtonAriaLabel"
aria-haspopup="true"
:aria-expanded="overlayVisible"
:aria-controls="overlayId"
:class="cx('filterMenuButton')"
:unstyled="unstyled"
@click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)"
v-bind="getColumnPT('filterMenuButton', ptmFilterMenuParams)"
v-bind="{ ...getColumnPT('filterMenuButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
>
<component :is="filterIconTemplate || 'FilterIcon'" v-bind="getColumnPT('filterMenuIcon')" />
</button>
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams)">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
</button>
<template #icon="slotProps">
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
</template>
</Button>
<Button
v-if="showClearButton && display === 'row' && hasRowFilter()"
:class="cx('headerFilterClearButton')"
:unstyled="unstyled"
@click="clearFilter()"
v-bind="{ ...getColumnPT('headerFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
>
<template #icon="slotProps">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
</template>
</Button>
<Portal>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
<div
@ -59,7 +69,7 @@
</template>
<template v-else>
<div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPT('filterOperator')">
<CFSelect
<Select
:options="operatorOptions"
:modelValue="operator"
:aria-label="filterOperatorAriaLabel"
@ -69,11 +79,11 @@
@update:modelValue="onOperatorChange($event)"
:unstyled="unstyled"
:pt="getColumnPT('filterOperatorDropdown')"
></CFSelect>
></Select>
</div>
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
<CFSelect
<Select
v-if="isShowMatchModes"
:options="matchModes"
:modelValue="fieldConstraint.matchMode"
@ -84,65 +94,65 @@
@update:modelValue="onMenuMatchModeChange($event, i)"
:unstyled="unstyled"
:pt="getColumnPT('filterMatchModeDropdown')"
></CFSelect>
></Select>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
<div v-bind="getColumnPT('filterRemove')">
<CFButton
<Button
v-if="showRemoveIcon"
type="button"
:class="cx('filterRemoveButton')"
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
v-bind="filterButtonProps.removeRule"
v-bind="filterButtonProps.popover.removeRule"
:pt="getColumnPT('filterRemoveButton')"
>
<template #icon="iconProps">
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
</template>
</CFButton>
</Button>
</div>
</div>
</div>
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
<CFButton
<Button
type="button"
:label="addRuleButtonLabel"
iconPos="left"
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
v-bind="filterButtonProps.addRule"
v-bind="filterButtonProps.popover.addRule"
:pt="getColumnPT('filterAddRuleButton')"
>
<template #icon="iconProps">
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
</template>
</CFButton>
</Button>
</div>
<div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
<CFButton
<Button
v-if="!filterClearTemplate && showClearButton"
type="button"
:class="cx('filterClearButton')"
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
v-bind="filterButtonProps.clear"
v-bind="filterButtonProps.popover.clear"
:pt="getColumnPT('filterClearButton')"
></CFButton>
></Button>
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
<template v-if="showApplyButton">
<CFButton
<Button
v-if="!filterApplyTemplate"
type="button"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
v-bind="filterButtonProps.apply"
v-bind="filterButtonProps.popover.apply"
:pt="getColumnPT('filterApplyButton')"
></CFButton>
></Button>
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
</template>
</div>
@ -518,7 +528,7 @@ export default {
hide() {
this.overlayVisible = false;
DomHandler.focus(this.$refs.icon);
DomHandler.focus(this.$refs.icon.$el);
},
onContentClick(event) {
this.selfClick = true;
@ -538,7 +548,7 @@ export default {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
DomHandler.absolutePosition(this.overlay, this.$refs.icon);
DomHandler.absolutePosition(this.overlay, this.$refs.icon.$el);
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
@ -575,7 +585,7 @@ export default {
return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
},
isTargetClicked(target) {
return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
return this.$refs.icon && (this.$refs.icon.$el.isSameNode(target) || this.$refs.icon.$el.contains(target));
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -599,7 +609,7 @@ export default {
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.icon, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.icon.$el, () => {
if (this.overlayVisible) {
this.hide();
}
@ -711,13 +721,13 @@ export default {
}
},
components: {
CFSelect: Select,
CFButton: Button,
Portal: Portal,
FilterSlashIcon: FilterSlashIcon,
FilterIcon: FilterIcon,
TrashIcon: TrashIcon,
PlusIcon: PlusIcon
Select,
Button,
Portal,
FilterSlashIcon,
FilterIcon,
TrashIcon,
PlusIcon
},
directives: {
focustrap: FocusTrap

65
components/lib/datatable/DataTable.d.ts vendored
View File

@ -161,9 +161,19 @@ export interface DataTableExportCSVOptions {
}
/**
* Custom datatable filter button props options.
* Custom datatable filter inline button props options.
*/
export interface DataTableFilterButtonPropsOptions {
export interface DataTableFilterButtonInlinePropsOptions {
/**
* Apply button props
*/
clear: ButtonProps | undefined;
}
/**
* Custom datatable filter popover button props options.
*/
export interface DataTableFilterButtonPopoverPropsOptions {
/**
* Add rule button props
*/
@ -182,6 +192,42 @@ export interface DataTableFilterButtonPropsOptions {
clear: ButtonProps | undefined;
}
/**
* Custom datatable filter buttons' props options.
*/
export interface DataTableFilterButtonPropsOptions {
/**
* Filter button props
*/
filter: ButtonProps | undefined;
/**
* Inline filter buttons' options
*/
inline: DataTableFilterButtonInlinePropsOptions | undefined;
/**
* Popover filter buttons' options
*/
popover: DataTableFilterButtonPopoverPropsOptions | undefined;
}
/**
* Custom datatable edit buttons' props options.
*/
export interface DataTableEditButtonPropsOptions {
/**
* Init button props
*/
init: ButtonProps | undefined;
/**
* Save button props
*/
save: ButtonProps | undefined;
/**
* Cancel button props
*/
cancel: ButtonProps | undefined;
}
/**
* Custom sort event.
* @see {@link DataTableEmits.sort}
@ -1156,13 +1202,28 @@ export interface DataTableProps {
/**
* Used to pass all filter button property object
* @defaultValue {
filter: { severity: 'secondary', text: true, rounded: true },
inline: {
clear: { severity: 'secondary', text: true, rounded: true }
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
}
}
*/
filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
/**
* Used to pass all edit button property object
* @defaultValue {
init: { severity: 'secondary', text: true, rounded: true },
save: { severity: 'secondary', text: true, rounded: true },
cancel: { severity: 'secondary', text: true, rounded: true }
}
*/
editButtonProps?: DataTableEditButtonPropsOptions | undefined;
/**
* It generates scoped CSS variables using design tokens for the component.
*/

24
components/lib/datatable/DataTable.vue
View File

@ -131,6 +131,7 @@
:editingRowKeys="d_editingRowKeys"
:templates="$slots"
:responsiveLayout="responsiveLayout"
:editButtonProps="rowEditButtonProps"
:isVirtualScrollerDisabled="true"
@rowgroup-toggle="toggleRowGroup"
@row-click="onRowClick($event)"
@ -187,6 +188,7 @@
:editingRowKeys="d_editingRowKeys"
:templates="$slots"
:responsiveLayout="responsiveLayout"
:editButtonProps="rowEditButtonProps"
:virtualScrollerContentProps="slotProps"
:isVirtualScrollerDisabled="virtualScrollerDisabled"
@rowgroup-toggle="toggleRowGroup"
@ -2072,13 +2074,29 @@ export default {
},
headerFilterButtonProps() {
return {
...{
filter: { severity: 'secondary', text: true, rounded: true },
...this.filterButtonProps,
inline: {
clear: { severity: 'secondary', text: true, rounded: true },
...this.filterButtonProps.inline
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' },
clear: { outlined: true, size: 'small' }
clear: { outlined: true, size: 'small' },
...this.filterButtonProps.popover
}
};
},
...this.filterButtonProps
rowEditButtonProps() {
return {
...{
init: { severity: 'secondary', text: true, rounded: true },
save: { severity: 'secondary', text: true, rounded: true },
cancel: { severity: 'secondary', text: true, rounded: true }
},
...this.editButtonProps
};
},
virtualScrollerDisabled() {

5
components/lib/datatable/TableBody.vue
View File

@ -31,6 +31,7 @@
:editingRows="editingRows"
:editingRowKeys="editingRowKeys"
:templates="templates"
:editButtonProps="editButtonProps"
:responsiveLayout="responsiveLayout"
:virtualScrollerContentProps="virtualScrollerContentProps"
:isVirtualScrollerDisabled="isVirtualScrollerDisabled"
@ -211,6 +212,10 @@ export default {
type: Boolean,
default: false
},
editButtonProps: {
type: Object,
default: null
},
responsiveLayout: {
type: String,
default: 'stack'

121
doc/common/apidoc/index.json
View File

@ -16185,7 +16185,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<CalendarPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of DatePicker instead."
},
{
"name": "card",
@ -16234,7 +16236,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<ChipsPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of InputChips instead."
},
{
"name": "colorpicker",
@ -16339,7 +16343,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<DropdownPassThroughOptions<any>>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Select instead."
},
{
"name": "dynamicdialog",
@ -16423,7 +16429,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<InputSwitchPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of ToggleSwitch instead."
},
{
"name": "inputtext",
@ -16500,7 +16508,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<OverlayPanelPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Popover instead."
},
{
"name": "paginator",
@ -16598,7 +16608,9 @@
"optional": true,
"readonly": false,
"type": "DefaultPassThrough<SidebarPassThroughOptions>",
"default": ""
"default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Drawer instead."
},
{
"name": "skeleton",
@ -19652,8 +19664,23 @@
],
"methods": []
},
"DataTableFilterButtonPropsOptions": {
"description": "Custom datatable filter button props options.",
"DataTableFilterButtonInlinePropsOptions": {
"description": "Custom datatable filter inline button props options.",
"relatedProp": "",
"props": [
{
"name": "clear",
"optional": false,
"readonly": false,
"type": "undefined | ButtonProps",
"default": "",
"description": "Apply button props"
}
],
"methods": []
},
"DataTableFilterButtonPopoverPropsOptions": {
"description": "Custom datatable filter popover button props options.",
"relatedProp": "",
"props": [
{
@ -19691,6 +19718,68 @@
],
"methods": []
},
"DataTableFilterButtonPropsOptions": {
"description": "Custom datatable filter buttons' props options.",
"relatedProp": "",
"props": [
{
"name": "filter",
"optional": false,
"readonly": false,
"type": "undefined | ButtonProps",
"default": "",
"description": "Filter button props"
},
{
"name": "inline",
"optional": false,
"readonly": false,
"type": "undefined | DataTableFilterButtonInlinePropsOptions",
"default": "",
"description": "Inline filter buttons' options"
},
{
"name": "popover",
"optional": false,
"readonly": false,
"type": "undefined | DataTableFilterButtonPopoverPropsOptions",
"default": "",
"description": "Popover filter buttons' options"
}
],
"methods": []
},
"DataTableEditButtonPropsOptions": {
"description": "Custom datatable edit buttons' props options.",
"relatedProp": "",
"props": [
{
"name": "init",
"optional": false,
"readonly": false,
"type": "undefined | ButtonProps",
"default": "",
"description": "Init button props"
},
{
"name": "save",
"optional": false,
"readonly": false,
"type": "undefined | ButtonProps",
"default": "",
"description": "Save button props"
},
{
"name": "cancel",
"optional": false,
"readonly": false,
"type": "undefined | ButtonProps",
"default": "",
"description": "Cancel button props"
}
],
"methods": []
},
"DataTableSortEvent": {
"description": "Custom sort event.",
"relatedProp": "DataTableEmits.sort",
@ -21681,6 +21770,14 @@
"default": "",
"description": "Used to pass all filter button property object"
},
{
"name": "editButtonProps",
"optional": true,
"readonly": false,
"type": "DataTableEditButtonPropsOptions",
"default": "",
"description": "Used to pass all edit button property object"
},
{
"name": "dt",
"optional": true,
@ -59271,14 +59368,6 @@
"default": "false",
"description": "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
},
{
"name": "orientation",
"optional": true,
"readonly": false,
"type": "\"horizontal\" | \"vertical\"",
"default": "horizontal",
"description": "Specifies the layout of the component, valid values are 'horizontal' and 'vertical'."
},
{
"name": "scrollable",
"optional": true,