Merge branch 'v4' of https://github.com/primefaces/primevue into v4
commit
b409cf5e2f
|
@ -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 }
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
table: { style: 'min-width: 50rem' },
|
table: { style: 'min-width: 50rem' },
|
||||||
column: {
|
column: {
|
||||||
bodycell: ({ state }) => ({
|
bodycell: ({ state }) => ({
|
||||||
style: state['d_editing'] && 'padding-top: 0.6rem; padding-bottom: 0.6rem'
|
style: state['d_editing'] && 'padding-top: 0.75rem; padding-bottom: 0.75rem'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
|
@ -79,7 +79,7 @@ export default {
|
||||||
table: { style: 'min-width: 50rem' },
|
table: { style: 'min-width: 50rem' },
|
||||||
column: {
|
column: {
|
||||||
bodycell: ({ state }) => ({
|
bodycell: ({ state }) => ({
|
||||||
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
|
style: state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
|
@ -125,7 +125,7 @@ export default {
|
||||||
table: { style: 'min-width: 50rem' },
|
table: { style: 'min-width: 50rem' },
|
||||||
column: {
|
column: {
|
||||||
bodycell: ({ state }) => ({
|
bodycell: ({ state }) => ({
|
||||||
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
|
style: state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
|
@ -219,7 +219,7 @@ export default {
|
||||||
table: { style: 'min-width: 50rem' },
|
table: { style: 'min-width: 50rem' },
|
||||||
column: {
|
column: {
|
||||||
bodycell: ({ state }) => ({
|
bodycell: ({ state }) => ({
|
||||||
style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
|
style: state['d_editing']&&'padding-top: 0.75rem; padding-bottom: 0.75rem'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
|
|
Loading…
Reference in New Issue