primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 277 kB
JavaScript
import { FilterOperator, FilterService, FilterMatchMode } from 'primevue/api';
import ArrowDownIcon from 'primevue/icons/arrowdown';
import ArrowUpIcon from 'primevue/icons/arrowup';
import SpinnerIcon from 'primevue/icons/spinner';
import Paginator from 'primevue/paginator';
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { mergeProps, resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, withKeys, withModifiers, resolveDirective, toDisplayString, Fragment, withDirectives, createTextVNode, renderList, normalizeProps, guardReactiveProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
import BarsIcon from 'primevue/icons/bars';
import CheckIcon from 'primevue/icons/check';
import PencilIcon from 'primevue/icons/pencil';
import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus';
import Ripple from 'primevue/ripple';
import Button from 'primevue/button';
import Dropdown from 'primevue/dropdown';
import FocusTrap from 'primevue/focustrap';
import FilterIcon from 'primevue/icons/filter';
import FilterSlashIcon from 'primevue/icons/filterslash';
import PlusIcon from 'primevue/icons/plus';
import TrashIcon from 'primevue/icons/trash';
import Portal from 'primevue/portal';
import SortAltIcon from 'primevue/icons/sortalt';
import SortAmountDownIcon from 'primevue/icons/sortamountdown';
import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
var styles = "\n.p-datatable {\n position: relative;\n}\n\n.p-datatable-table {\n border-spacing: 0px;\n width: 100%;\n}\n\n.p-datatable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n}\n\n.p-datatable .p-sortable-column .p-column-title,\n.p-datatable .p-sortable-column .p-sortable-column-icon,\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n vertical-align: middle;\n}\n\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-datatable-hoverable-rows .p-selectable-row {\n cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable > .p-datatable-wrapper {\n position: relative;\n}\n\n.p-datatable-scrollable-table > .p-datatable-thead {\n top: 0;\n z-index: 1;\n}\n\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n position: sticky;\n z-index: 1;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tfoot {\n bottom: 0;\n z-index: 1;\n}\n\n.p-datatable-scrollable .p-frozen-column {\n position: sticky;\n background: inherit;\n}\n\n.p-datatable-scrollable th.p-frozen-column {\n z-index: 1;\n}\n\n.p-datatable-flex-scrollable {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.p-datatable-flex-scrollable > .p-datatable-wrapper {\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n position: sticky;\n z-index: 1;\n}\n\n/* Resizable */\n.p-datatable-resizable-table > .p-datatable-thead > tr > th,\n.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n.p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n overflow: hidden;\n white-space: nowrap;\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n background-clip: padding-box;\n position: relative;\n}\n\n.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n display: none;\n}\n\n.p-datatable .p-column-resizer {\n display: block;\n position: absolute !important;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n}\n\n.p-datatable .p-column-header-content {\n display: flex;\n align-items: center;\n}\n\n.p-datatable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n}\n\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n/* Reorder */\n.p-datatable-reorder-indicator-up,\n.p-datatable-reorder-indicator-down {\n position: absolute;\n display: none;\n}\n\n.p-reorderable-column,\n.p-datatable-reorderablerow-handle {\n cursor: move;\n}\n\n/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.p-column-filter-menu {\n display: inline-flex;\n margin-left: auto;\n}\n\n.p-column-filter-row .p-column-filter-element {\n flex: 1 1 auto;\n width: 1%;\n}\n\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n}\n\n.p-column-filter-row-items {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.p-column-filter-row-item {\n cursor: pointer;\n}\n\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n justify-content: center;\n}\n\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n flex-grow: 0;\n}\n\n.p-column-filter-buttonbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n width: auto;\n}\n\n/* Responsive */\n.p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n display: none;\n}\n\n/* VirtualScroller */\n.p-datatable-virtualscroller-spacer {\n display: flex;\n}\n\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n transform: none !important;\n min-height: 0;\n position: sticky;\n top: 0;\n left: 0;\n}\n";
var inlineStyles = {
wrapper: {
overflow: 'auto'
},
thead: {
position: 'sticky'
},
tfoot: {
position: 'sticky'
}
};
var classes = {
root: function root(_ref) {
var instance = _ref.instance,
props = _ref.props;
return ['p-datatable p-component', {
'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': instance.headerColumnGroup != null,
'p-datatable-grouped-footer': instance.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
}];
},
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header',
paginator: function paginator(_ref2) {
var instance = _ref2.instance;
return instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : '';
},
wrapper: 'p-datatable-wrapper',
table: function table(_ref3) {
var props = _ref3.props;
return ['p-datatable-table', {
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
}];
},
//tablehead
thead: 'p-datatable-thead',
// headercell
headerCell: function headerCell(_ref4) {
var instance = _ref4.instance,
props = _ref4.props,
column = _ref4.column;
return column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field')) ? ['p-filter-column', {
'p-frozen-column': instance.columnProp(column, 'frozen')
}] : [{
'p-sortable-column': instance.columnProp('sortable'),
'p-resizable-column': instance.resizableColumns,
'p-highlight': instance.isColumnSorted(),
'p-filter-column': props.filterColumn,
'p-frozen-column': instance.columnProp('frozen'),
'p-reorderable-column': props.reorderableColumns
}];
},
columnResizer: 'p-column-resizer',
headerContent: 'p-column-header-content',
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
//headercheckbox
headerCheckboxWrapper: function headerCheckboxWrapper(_ref5) {
var instance = _ref5.instance;
return ['p-checkbox p-component', {
'p-checkbox-focused': instance.focused,
'p-disabled': instance.disabled
}];
},
headerCheckbox: function headerCheckbox(_ref6) {
var instance = _ref6.instance;
return ['p-checkbox-box p-component', {
'p-highlight': instance.checked,
'p-disabled': instance.disabled,
'p-focus': instance.focused
}];
},
headerCheckboxIcon: 'p-checkbox-icon',
// columnfilter
columnFilter: function columnFilter(_ref7) {
var props = _ref7.props;
return ['p-column-filter p-fluid', {
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
}];
},
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: function filterMenuButton(_ref8) {
var instance = _ref8.instance;
return ['p-column-filter-menu-button p-link', {
'p-column-filter-menu-button-open': instance.overlayVisible,
'p-column-filter-menu-button-active': instance.hasFilter()
}];
},
headerFilterClearButton: function headerFilterClearButton(_ref9) {
var instance = _ref9.instance;
return ['p-column-filter-clear-button p-link', {
'p-hidden-space': !instance.hasRowFilter()
}];
},
filterOverlay: function filterOverlay(_ref10) {
var instance = _ref10.instance,
props = _ref10.props;
return [{
'p-column-filter-overlay p-component p-fluid': true,
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}];
},
filterRowItems: 'p-column-filter-row-items',
filterRowItem: function filterRowItem(_ref11) {
var instance = _ref11.instance,
matchMode = _ref11.matchMode;
return ['p-column-filter-row-item', {
'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
}];
},
filterSeparator: 'p-column-filter-separator',
filterOperator: 'p-column-filter-operator',
filterOperatorDropdown: 'p-column-filter-operator-dropdown',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
filterAddRule: 'p-column-filter-add-rule',
filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
filterButtonbar: 'p-column-filter-buttonbar',
filterClearButton: 'p-button-outlined p-button-sm',
filterApplyButton: 'p-button-sm',
//tablebody
tbody: function tbody(_ref12) {
var props = _ref12.props;
return props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody';
},
rowgroupHeader: 'p-rowgroup-header',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupTogglerIcon: 'p-row-toggler-icon',
row: function row(_ref13) {
var instance = _ref13.instance,
props = _ref13.props,
rowData = _ref13.rowData;
var rowStyleClass = [];
if (props.selectionMode) {
rowStyleClass.push('p-selectable-row');
}
if (props.selection) {
rowStyleClass.push({
'p-highlight': instance.isSelected(rowData)
});
}
if (props.contextMenuSelection) {
rowStyleClass.push({
'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
});
}
return rowStyleClass;
},
rowExpansion: 'p-datatable-row-expansion',
rowgroupFooter: 'p-rowgroup-footer',
emptyMessage: 'p-datatable-emptymessage',
//bodycell
bodyCell: function bodyCell(_ref14) {
var instance = _ref14.instance;
return [{
'p-selection-column': instance.columnProp('selectionMode') != null,
'p-editable-column': instance.isEditable(),
'p-cell-editing': instance.d_editing,
'p-frozen-column': instance.columnProp('frozen')
}];
},
columnTitle: 'p-column-title',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowToggler: 'p-row-toggler p-link',
rowTogglerIcon: 'p-row-toggler-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
//rowcheckbox
checkboxWrapper: function checkboxWrapper(_ref15) {
var instance = _ref15.instance;
return ['p-checkbox p-component', {
'p-checkbox-focused': instance.focused
}];
},
checkbox: function checkbox(_ref16) {
var instance = _ref16.instance;
return ['p-checkbox-box p-component', {
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}];
},
checkboxIcon: 'p-checkbox-icon',
//rowradiobutton
radiobuttonWrapper: function radiobuttonWrapper(_ref17) {
var instance = _ref17.instance;
return ['p-radiobutton p-component', {
'p-radiobutton-focused': instance.focused
}];
},
radiobutton: function radiobutton(_ref18) {
var instance = _ref18.instance;
return ['p-radiobutton-box p-component', {
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}];
},
radiobuttonIcon: 'p-radiobutton-icon',
//tablefooter
tfoot: 'p-datatable-tfoot',
//footercell
footerCell: function footerCell(_ref19) {
var instance = _ref19.instance;
return [{
'p-frozen-column': instance.columnProp('frozen')
}];
},
//datatable
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
footer: 'p-datatable-footer',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
};
var _useStyle = useStyle(styles, {
name: 'datatable',
manual: true
}),
loadStyle = _useStyle.load;
var script$b = {
name: 'BaseDataTable',
"extends": BaseComponent,
props: {
value: {
type: Array,
"default": null
},
dataKey: {
type: [String, Function],
"default": null
},
rows: {
type: Number,
"default": 0
},
first: {
type: Number,
"default": 0
},
totalRecords: {
type: Number,
"default": 0
},
paginator: {
type: Boolean,
"default": false
},
paginatorPosition: {
type: String,
"default": 'bottom'
},
alwaysShowPaginator: {
type: Boolean,
"default": true
},
paginatorTemplate: {
type: [Object, String],
"default": 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
},
pageLinkSize: {
type: Number,
"default": 5
},
rowsPerPageOptions: {
type: Array,
"default": null
},
currentPageReportTemplate: {
type: String,
"default": '({currentPage} of {totalPages})'
},
lazy: {
type: Boolean,
"default": false
},
loading: {
type: Boolean,
"default": false
},
loadingIcon: {
type: String,
"default": undefined
},
sortField: {
type: [String, Function],
"default": null
},
sortOrder: {
type: Number,
"default": null
},
defaultSortOrder: {
type: Number,
"default": 1
},
multiSortMeta: {
type: Array,
"default": null
},
sortMode: {
type: String,
"default": 'single'
},
removableSort: {
type: Boolean,
"default": false
},
filters: {
type: Object,
"default": null
},
filterDisplay: {
type: String,
"default": null
},
globalFilterFields: {
type: Array,
"default": null
},
filterLocale: {
type: String,
"default": undefined
},
selection: {
type: [Array, Object],
"default": null
},
selectionMode: {
type: String,
"default": null
},
compareSelectionBy: {
type: String,
"default": 'deepEquals'
},
metaKeySelection: {
type: Boolean,
"default": true
},
contextMenu: {
type: Boolean,
"default": false
},
contextMenuSelection: {
type: Object,
"default": null
},
selectAll: {
type: Boolean,
"default": null
},
rowHover: {
type: Boolean,
"default": false
},
csvSeparator: {
type: String,
"default": ','
},
exportFilename: {
type: String,
"default": 'download'
},
exportFunction: {
type: Function,
"default": null
},
resizableColumns: {
type: Boolean,
"default": false
},
columnResizeMode: {
type: String,
"default": 'fit'
},
reorderableColumns: {
type: Boolean,
"default": false
},
expandedRows: {
type: Array,
"default": null
},
expandedRowIcon: {
type: String,
"default": undefined
},
collapsedRowIcon: {
type: String,
"default": undefined
},
rowGroupMode: {
type: String,
"default": null
},
groupRowsBy: {
type: [Array, String, Function],
"default": null
},
expandableRowGroups: {
type: Boolean,
"default": false
},
expandedRowGroups: {
type: Array,
"default": null
},
stateStorage: {
type: String,
"default": 'session'
},
stateKey: {
type: String,
"default": null
},
editMode: {
type: String,
"default": null
},
editingRows: {
type: Array,
"default": null
},
rowClass: {
type: null,
"default": null
},
rowStyle: {
type: null,
"default": null
},
scrollable: {
type: Boolean,
"default": false
},
virtualScrollerOptions: {
type: Object,
"default": null
},
scrollHeight: {
type: String,
"default": null
},
frozenValue: {
type: Array,
"default": null
},
responsiveLayout: {
type: String,
"default": 'scroll'
},
breakpoint: {
type: String,
"default": '960px'
},
showGridlines: {
type: Boolean,
"default": false
},
stripedRows: {
type: Boolean,
"default": false
},
size: {
type: String,
"default": null
},
tableStyle: {
type: null,
"default": null
},
tableClass: {
type: String,
"default": null
},
tableProps: {
type: null,
"default": null
},
filterInputProps: {
type: null,
"default": null
}
},
css: {
classes: classes,
inlineStyles: inlineStyles,
loadStyle: loadStyle
},
provide: function provide() {
return {
$parentInstance: this
};
}
};
var script$a = {
name: 'RowCheckbox',
hostName: 'DataTable',
"extends": BaseComponent,
emits: ['change'],
props: {
value: null,
checked: null,
column: null,
rowCheckboxIconTemplate: {
type: Function,
"default": null
},
index: {
type: Number,
"default": null
}
},
data: function data() {
return {
focused: false
};
},
methods: {
getColumnPT: function getColumnPT(key) {
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
return mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick: function onClick(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
DomHandler.focus(this.$refs.input);
}
event.preventDefault();
},
onFocus: function onFocus() {
this.focused = true;
},
onBlur: function onBlur() {
this.focused = false;
},
onKeydown: function onKeydown(event) {
switch (event.code) {
case 'Space':
{
this.onClick(event);
break;
}
}
}
},
computed: {
checkboxAriaLabel: function checkboxAriaLabel() {
return this.$primevue.config.locale.aria ? this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow : undefined;
}
},
components: {
CheckIcon: CheckIcon
}
};
var _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
var _component_CheckIcon = resolveComponent("CheckIcon");
return openBlock(), createElementBlock("div", mergeProps({
"class": _ctx.cx('checkboxWrapper'),
onClick: _cache[3] || (_cache[3] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
})
}, $options.getColumnPT('checkboxWrapper')), [createElementVNode("div", mergeProps({
"class": "p-hidden-accessible"
}, $options.getColumnPT('hiddenInputWrapper'), {
"data-p-hidden-accessible": true
}), [createElementVNode("input", mergeProps({
ref: "input",
type: "checkbox",
checked: $props.checked,
disabled: _ctx.$attrs.disabled,
tabindex: _ctx.$attrs.disabled ? null : '0',
"aria-label": $options.checkboxAriaLabel,
onFocus: _cache[0] || (_cache[0] = function ($event) {
return $options.onFocus($event);
}),
onBlur: _cache[1] || (_cache[1] = function ($event) {
return $options.onBlur($event);
}),
onKeydown: _cache[2] || (_cache[2] = function () {
return $options.onKeydown && $options.onKeydown.apply($options, arguments);
})
}, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$7)], 16), createElementVNode("div", mergeProps({
ref: "box",
"class": _ctx.cx('checkbox')
}, $options.getColumnPT('checkbox')), [$props.rowCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
key: 0,
checked: $props.checked,
"class": normalizeClass(_ctx.cx('checkboxIcon'))
}, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && !!$props.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
key: 1,
"class": _ctx.cx('checkboxIcon')
}, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 16)], 16);
}
script$a.render = render$a;
var script$9 = {
name: 'RowRadioButton',
hostName: 'DataTable',
"extends": BaseComponent,
inheritAttrs: false,
emits: ['change'],
props: {
value: null,
checked: null,
name: null,
column: null,
index: {
type: Number,
"default": null
}
},
data: function data() {
return {
focused: false
};
},
methods: {
getColumnPT: function getColumnPT(key) {
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
return mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick: function onClick(event) {
if (!this.disabled) {
if (!this.checked) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
DomHandler.focus(this.$refs.input);
}
}
},
onFocus: function onFocus() {
this.focused = true;
},
onBlur: function onBlur() {
this.focused = false;
}
}
};
var _hoisted_1$6 = ["checked", "disabled", "name"];
function render$9(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", mergeProps({
"class": _ctx.cx('radiobuttonWrapper'),
onClick: _cache[3] || (_cache[3] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
})
}, $options.getColumnPT('radiobuttonWrapper')), [createElementVNode("div", mergeProps({
"class": "p-hidden-accessible"
}, $options.getColumnPT('hiddenInputWrapper'), {
"data-p-hidden-accessible": true
}), [createElementVNode("input", mergeProps({
ref: "input",
type: "radio",
checked: $props.checked,
disabled: _ctx.$attrs.disabled,
name: $props.name,
tabindex: "0",
onFocus: _cache[0] || (_cache[0] = function ($event) {
return $options.onFocus($event);
}),
onBlur: _cache[1] || (_cache[1] = function ($event) {
return $options.onBlur($event);
}),
onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(function () {
return $options.onClick && $options.onClick.apply($options, arguments);
}, ["prevent"]), ["space"]))
}, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$6)], 16), createElementVNode("div", mergeProps({
ref: "box",
"class": _ctx.cx('radiobutton')
}, $options.getColumnPT('radiobutton')), [createElementVNode("div", mergeProps({
"class": _ctx.cx('radiobuttonIcon')
}, $options.getColumnPT('radiobuttonIcon')), null, 16)], 16)], 16);
}
script$9.render = render$9;
var script$8 = {
name: 'BodyCell',
hostName: 'DataTable',
"extends": BaseComponent,
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
props: {
rowData: {
type: Object,
"default": null
},
column: {
type: Object,
"default": null
},
frozenRow: {
type: Boolean,
"default": false
},
rowIndex: {
type: Number,
"default": null
},
index: {
type: Number,
"default": null
},
isRowExpanded: {
type: Boolean,
"default": false
},
selected: {
type: Boolean,
"default": false
},
editing: {
type: Boolean,
"default": false
},
editingMeta: {
type: Object,
"default": null
},
editMode: {
type: String,
"default": null
},
responsiveLayout: {
type: String,
"default": 'stack'
},
virtualScrollerContentProps: {
type: Object,
"default": null
},
ariaControls: {
type: String,
"default": null
},
name: {
type: String,
"default": null
},
expandedRowIcon: {
type: String,
"default": null
},
collapsedRowIcon: {
type: String,
"default": null
}
},
documentEditListener: null,
selfClick: false,
overlayEventListener: null,
data: function data() {
return {
d_editing: this.editing,
styleObject: {}
};
},
watch: {
editing: function editing(newValue) {
this.d_editing = newValue;
},
'$data.d_editing': function $dataD_editing(newValue) {
this.$emit('editing-meta-change', {
data: this.rowData,
field: this.field || "field_".concat(this.index),
index: this.rowIndex,
editing: newValue
});
}
},
mounted: function mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated: function updated() {
var _this = this;
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
if (this.d_editing && (this.editMode === 'cell' || this.editMode === 'row' && this.columnProp('rowEditor'))) {
setTimeout(function () {
var focusableEl = DomHandler.getFirstFocusableElement(_this.$el);
focusableEl && focusableEl.focus();
}, 1);
}
},
beforeUnmount: function beforeUnmount() {
if (this.overlayEventListener) {
OverlayEventBus.off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
}
},
methods: {
columnProp: function columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPT: function getColumnPT(key) {
var _this$$parentInstance, _this$$parentInstance2;
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
showGridlines: (_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.showGridlines
}
};
return mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
resolveFieldData: function resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field);
},
toggleRow: function toggleRow(event) {
this.$emit('row-toggle', {
originalEvent: event,
data: this.rowData
});
},
toggleRowWithRadio: function toggleRowWithRadio(event, index) {
this.$emit('radio-change', {
originalEvent: event.originalEvent,
index: index,
data: event.data
});
},
toggleRowWithCheckbox: function toggleRowWithCheckbox(event, index) {
this.$emit('checkbox-change', {
originalEvent: event.originalEvent,
index: index,
data: event.data
});
},
isEditable: function isEditable() {
return this.column.children && this.column.children.editor != null;
},
bindDocumentEditListener: function bindDocumentEditListener() {
var _this2 = this;
if (!this.documentEditListener) {
this.documentEditListener = function (event) {
if (!_this2.selfClick) {
_this2.completeEdit(event, 'outside');
}
_this2.selfClick = false;
};
document.addEventListener('click', this.documentEditListener);
}
},
unbindDocumentEditListener: function unbindDocumentEditListener() {
if (this.documentEditListener) {
document.removeEventListener('click', this.documentEditListener);
this.documentEditListener = null;
this.selfClick = false;
}
},
switchCellToViewMode: function switchCellToViewMode() {
this.d_editing = false;
this.unbindDocumentEditListener();
OverlayEventBus.off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
},
onClick: function onClick(event) {
var _this3 = this;
if (this.editMode === 'cell' && this.isEditable()) {
this.selfClick = true;
if (!this.d_editing) {
this.d_editing = true;
this.bindDocumentEditListener();
this.$emit('cell-edit-init', {
originalEvent: event,
data: this.rowData,
field: this.field,
index: this.rowIndex
});
this.overlayEventListener = function (e) {
if (_this3.$el && _this3.$el.contains(e.target)) {
_this3.selfClick = true;
}
};
OverlayEventBus.on('overlay-click', this.overlayEventListener);
}
}
},
completeEdit: function completeEdit(event, type) {
var completeEvent = {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
value: this.rowData[this.field],
newValue: this.editingRowData[this.field],
field: this.field,
index: this.rowIndex,
type: type,
defaultPrevented: false,
preventDefault: function preventDefault() {
this.defaultPrevented = true;
}
};
this.$emit('cell-edit-complete', completeEvent);
if (!completeEvent.defaultPrevented) {
this.switchCellToViewMode();
}
},
onKeyDown: function onKeyDown(event) {
if (this.editMode === 'cell') {
switch (event.code) {
case 'Enter':
this.completeEdit(event, 'enter');
break;
case 'Escape':
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {
originalEvent: event,
data: this.rowData,
field: this.field,
index: this.rowIndex
});
break;
case 'Tab':
this.completeEdit(event, 'tab');
if (event.shiftKey) this.moveToPreviousCell(event);else this.moveToNextCell(event);
break;
}
}
},
moveToPreviousCell: function moveToPreviousCell(event) {
var currentCell = this.findCell(event.target);
var targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
moveToNextCell: function moveToNextCell(event) {
var currentCell = this.findCell(event.target);
var targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
findCell: function findCell(element) {
if (element) {
var cell = element;
while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
cell = cell.parentElement;
}
return cell;
} else {
return null;
}
},
findPreviousEditableColumn: function findPreviousEditableColumn(cell) {
var prevCell = cell.previousElementSibling;
if (!prevCell) {
var previousRow = cell.parentElement.previousElementSibling;
if (previousRow) {
prevCell = previousRow.lastElementChild;
}
}
if (prevCell) {
if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;else return this.findPreviousEditableColumn(prevCell);
} else {
return null;
}
},
findNextEditableColumn: function findNextEditableColumn(cell) {
var nextCell = cell.nextElementSibling;
if (!nextCell) {
var nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
nextCell = nextRow.firstElementChild;
}
}
if (nextCell) {
if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;else return this.findNextEditableColumn(nextCell);
} else {
return null;
}
},
isEditingCellValid: function isEditingCellValid() {
return DomHandler.find(this.$el, '.p-invalid').length === 0;
},
onRowEditInit: function onRowEditInit(event) {
this.$emit('row-edit-init', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
},
onRowEditSave: function onRowEditSave(event) {
this.$emit('row-edit-save', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
},
onRowEditCancel: function onRowEditCancel(event) {
this.$emit('row-edit-cancel', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
},
editorInitCallback: function editorInitCallback(event) {
this.$emit('row-edit-init', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
},
editorSaveCallback: function editorSaveCallback(event) {
if (this.editMode === 'row') {
this.$emit('row-edit-save', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
} else {
this.completeEdit(event, 'enter');
}
},
editorCancelCallback: function editorCancelCallback(event) {
if (this.editMode === 'row') {
this.$emit('row-edit-cancel', {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.field,
index: this.rowIndex
});
} else {
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {
originalEvent: event,
data: this.rowData,
field: this.field,
index: this.rowIndex
});
}
},
updateStickyPosition: function updateStickyPosition() {
if (this.columnProp('frozen')) {
var align = this.columnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
},
getVirtualScrollerProp: function getVirtualScrollerProp(option) {
return this.virtualScrollerContentProps ? this.virtualScrollerContentProps[option] : null;
}
},
computed: {
editingRowData: function editingRowData() {
return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
},
field: function field() {
return this.columnProp('field');
},
containerClass: function containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
},
containerStyle: function containerStyle() {
var bodyStyle = this.columnProp('bodyStyle');
var columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
},
loading: function loading() {
return this.getVirtualScrollerProp('loading');
},
loadingOptions: function loadingOptions() {
var getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');
return getLoaderOptions && getLoaderOptions(this.rowIndex, {
cellIndex: this.index,
cellFirst: this.index === 0,
cellLast: this.index === this.getVirtualScrollerProp('columns').length - 1,
cellEven: this.index % 2 === 0,
cellOdd: this.index % 2 !== 0,
column: this.column,
field: this.field
});
},
expandButtonAriaLabel: function expandButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.isRowExpanded ? this.$primevue.config.locale.aria.expandRow : this.$primevue.config.locale.aria.collapseRow : undefined;
},
initButtonAriaLabel: function initButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.editRow : undefined;
},
saveButtonAriaLabel: function saveButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.saveEdit : undefined;
},
cancelButtonAriaLabel: function cancelButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.cancelEdit : undefined;
}
},
components: {
DTRadioButton: script$9,
DTCheckbox: script$a,
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon,
BarsIcon: BarsIcon,
PencilIcon: PencilIcon,
CheckIcon: CheckIcon,
TimesIcon: TimesIcon
},
directives: {
ripple: Ripple
}
};
function _typeof$9(obj) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$9(obj); }
function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$9(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$9(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$9(arg) { var key = _toPrimitive$9(arg, "string"); return _typeof$9(key) === "symbol" ? key : String(key); }
function _toPrimitive$9(input, hint) { if (_typeof$9(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$9(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var _hoisted_1$5 = ["data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
var _hoisted_2$2 = ["aria-expanded", "aria-controls", "aria-label"];
var _hoisted_3$2 = ["aria-label"];
var _hoisted_4$1 = ["aria-label"];
var _hoisted_5$1 = ["aria-label"];
function render$8(_ctx, _cache, $props, $setup, $data, $options) {
var _component_DTRadioButton = resolveComponent("DTRadioButton");
var _component_DTCheckbox = resolveComponent("DTCheckbox");
var _component_BarsIcon = resolveComponent("BarsIcon");
var _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
var _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
var _directive_ripple = resolveDirective("ripple");
return $options.loading ? (openBlock(), createElementBlock("td", mergeProps({
key: 0,
style: $options.containerStyle,
"class": $options.containerClass,
role: "cell"
}, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
data: $props.rowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
loadingOptions: $options.loadingOptions
}, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))], 16)) : (openBlock(), createElementBlock("td", mergeProps({
key: 1,
style: $options.containerStyle,
"class": $options.containerClass,
onClick: _cache[6] || (_cache[6] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
}),
onKeydown: _cache[7] || (_cache[7] = function () {
return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
}),
role: "cell"
}, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
"data-p-selection-column": $options.columnProp('selectionMode') != null,
"data-p-editable-column": $options.isEditable(),
"data-p-cell-editing": $data.d_editing,
"data-p-frozen-column": $options.columnProp('frozen')
}), [$props.responsiveLayout === 'stack' ? (openBlock(), createElementBlock("span", mergeProps({
key: 0,
"class": _ctx.cx('columnTitle')
}, $options.getColumnPT('columnTitle')), toDisplayString($options.columnProp('header')), 17)) : createCommentVNode("", true), $props.column.children && $props.column.children.body && !$data.d_editing ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
key: 1,
data: $props.rowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
editorInitCallback: $options.editorInitCallback
}, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback"])) : $props.column.children && $props.column.children.editor && $data.d_editing ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.editor), {
key: 2,
data: $options.editingRowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
editorSaveCallback: $options.editorSaveCallback,
editorCancelCallback: $options.editorCancelCallback
}, null, 8, ["data", "column", "field", "index", "frozenRow", "editorSaveCallback", "editorCancelCallback"])) : $props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
key: 3,
data: $options.editingRowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow
}, null, 8, ["data", "column", "field", "index", "frozenRow"])) : $options.columnProp('selectionMode') ? (openBlock(), createElementBlock(Fragment, {
key: 4
}, [$options.columnProp('selectionMode') === 'single' ? (openBlock(), createBlock(_component_DTRadioButton, {
key: 0,
value: $props.rowData,
name: $props.name,
checked: $props.selected,
onChange: _cache[0] || (_cache[0] = function ($event) {
return $options.toggleRowWithRadio($event, $props.rowIndex);
}),
column: $props.column,
index: $props.index,
unstyled: _ctx.unstyled,
pt: _ctx.pt
}, null, 8, ["value", "name", "checked", "column", "index", "unstyled", "pt"])) : $options.columnProp('selectionMode') === 'multiple' ? (openBlock(), createBlock(_component_DTCheckbox, {
key: 1,
value: $props.rowData,
checked: $props.selected,
rowCheckboxIconTemplate: $props.column.children && $props.column.children.rowcheckboxicon,
"aria-selected": $props.selected ? true : undefined,
onChange: _cache[1] || (_cache[1] = function ($event) {
return $options.toggleRowWithCheckbox($event, $props.rowIndex);
}),
column: $props.column,
index: $props.index,
unstyled: _ctx.unstyled,
pt: _ctx.pt