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

View File

@ -278,10 +278,26 @@ export default {
type: Object, type: Object,
default() { default() {
return { return {
filter: { severity: 'secondary', text: true, rounded: true },
inline: {
clear: { severity: 'secondary', text: true, rounded: true }
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' }, addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' }, apply: { size: 'small' },
clear: { outlined: true, 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 }
}; };
} }
} }

View File

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

View File

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

View File

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

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 * Add rule button props
*/ */
@ -182,6 +192,42 @@ export interface DataTableFilterButtonPropsOptions {
clear: ButtonProps | undefined; 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. * Custom sort event.
* @see {@link DataTableEmits.sort} * @see {@link DataTableEmits.sort}
@ -1156,13 +1202,28 @@ export interface DataTableProps {
/** /**
* Used to pass all filter button property object * Used to pass all filter button property object
* @defaultValue { * @defaultValue {
filter: { severity: 'secondary', text: true, rounded: true },
inline: {
clear: { severity: 'secondary', text: true, rounded: true }
},
popover: {
addRule: { severity: 'info', text: true, size: 'small' }, addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { size: 'small' }, apply: { size: 'small' },
clear: { outlined: true, size: 'small' } clear: { outlined: true, size: 'small' }
} }
}
*/ */
filterButtonProps?: DataTableFilterButtonPropsOptions | undefined; 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. * It generates scoped CSS variables using design tokens for the component.
*/ */

View File

@ -131,6 +131,7 @@
:editingRowKeys="d_editingRowKeys" :editingRowKeys="d_editingRowKeys"
:templates="$slots" :templates="$slots"
:responsiveLayout="responsiveLayout" :responsiveLayout="responsiveLayout"
:editButtonProps="rowEditButtonProps"
:isVirtualScrollerDisabled="true" :isVirtualScrollerDisabled="true"
@rowgroup-toggle="toggleRowGroup" @rowgroup-toggle="toggleRowGroup"
@row-click="onRowClick($event)" @row-click="onRowClick($event)"
@ -187,6 +188,7 @@
:editingRowKeys="d_editingRowKeys" :editingRowKeys="d_editingRowKeys"
:templates="$slots" :templates="$slots"
:responsiveLayout="responsiveLayout" :responsiveLayout="responsiveLayout"
:editButtonProps="rowEditButtonProps"
:virtualScrollerContentProps="slotProps" :virtualScrollerContentProps="slotProps"
:isVirtualScrollerDisabled="virtualScrollerDisabled" :isVirtualScrollerDisabled="virtualScrollerDisabled"
@rowgroup-toggle="toggleRowGroup" @rowgroup-toggle="toggleRowGroup"
@ -2072,13 +2074,29 @@ export default {
}, },
headerFilterButtonProps() { headerFilterButtonProps() {
return { 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' }, addRule: { severity: 'info', text: true, size: 'small' },
removeRule: { severity: 'danger', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' },
apply: { 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() { virtualScrollerDisabled() {

View File

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

View File

@ -16185,7 +16185,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<CalendarPassThroughOptions>", "type": "DefaultPassThrough<CalendarPassThroughOptions>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of DatePicker instead."
}, },
{ {
"name": "card", "name": "card",
@ -16234,7 +16236,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<ChipsPassThroughOptions>", "type": "DefaultPassThrough<ChipsPassThroughOptions>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of InputChips instead."
}, },
{ {
"name": "colorpicker", "name": "colorpicker",
@ -16339,7 +16343,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<DropdownPassThroughOptions<any>>", "type": "DefaultPassThrough<DropdownPassThroughOptions<any>>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Select instead."
}, },
{ {
"name": "dynamicdialog", "name": "dynamicdialog",
@ -16423,7 +16429,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<InputSwitchPassThroughOptions>", "type": "DefaultPassThrough<InputSwitchPassThroughOptions>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of ToggleSwitch instead."
}, },
{ {
"name": "inputtext", "name": "inputtext",
@ -16500,7 +16508,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<OverlayPanelPassThroughOptions>", "type": "DefaultPassThrough<OverlayPanelPassThroughOptions>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Popover instead."
}, },
{ {
"name": "paginator", "name": "paginator",
@ -16598,7 +16608,9 @@
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "DefaultPassThrough<SidebarPassThroughOptions>", "type": "DefaultPassThrough<SidebarPassThroughOptions>",
"default": "" "default": "",
"description": "",
"deprecated": "since v4. Use the new structure of Drawer instead."
}, },
{ {
"name": "skeleton", "name": "skeleton",
@ -19652,8 +19664,23 @@
], ],
"methods": [] "methods": []
}, },
"DataTableFilterButtonPropsOptions": { "DataTableFilterButtonInlinePropsOptions": {
"description": "Custom datatable filter button props options.", "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": "", "relatedProp": "",
"props": [ "props": [
{ {
@ -19691,6 +19718,68 @@
], ],
"methods": [] "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": { "DataTableSortEvent": {
"description": "Custom sort event.", "description": "Custom sort event.",
"relatedProp": "DataTableEmits.sort", "relatedProp": "DataTableEmits.sort",
@ -21681,6 +21770,14 @@
"default": "", "default": "",
"description": "Used to pass all filter button property object" "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", "name": "dt",
"optional": true, "optional": true,
@ -59271,14 +59368,6 @@
"default": "false", "default": "false",
"description": "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css." "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", "name": "scrollable",
"optional": true, "optional": true,