primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
1,201 lines (1,188 loc) • 303 kB
JavaScript
this.primevue = this.primevue || {};
this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, BaseComponent, DataTableStyle, ChevronDownIcon, ChevronRightIcon, vue, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var ArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownIcon);
var ArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpIcon);
var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScroller);
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
var DataTableStyle__default = /*#__PURE__*/_interopDefaultLegacy(DataTableStyle);
var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
var PencilIcon__default = /*#__PURE__*/_interopDefaultLegacy(PencilIcon);
var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
var FilterSlashIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterSlashIcon);
var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
var TrashIcon__default = /*#__PURE__*/_interopDefaultLegacy(TrashIcon);
var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
var script$c = {
name: 'BaseDataTable',
"extends": BaseComponent__default["default"],
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
},
nullSortOrder: {
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": false
},
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, Object],
"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
}
},
style: DataTableStyle__default["default"],
provide: function provide() {
return {
$parentInstance: this
};
}
};
var script$b = {
name: 'RowCheckbox',
hostName: 'DataTable',
"extends": BaseComponent__default["default"],
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: {
instance: this,
props: this.$props,
state: this.$data
},
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
return vue.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
});
utils.DomHandler.focus(this.$refs.input);
}
event.preventDefault();
event.stopPropagation();
},
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__default["default"]
}
};
var _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
var _component_CheckIcon = vue.resolveComponent("CheckIcon");
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
"class": _ctx.cx('checkboxWrapper'),
onClick: _cache[3] || (_cache[3] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
})
}, $options.getColumnPT('checkboxWrapper')), [vue.createElementVNode("div", vue.mergeProps({
"class": "p-hidden-accessible"
}, $options.getColumnPT('hiddenInputWrapper'), {
"data-p-hidden-accessible": true
}), [vue.createElementVNode("input", vue.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), vue.createElementVNode("div", vue.mergeProps({
ref: "box",
"class": _ctx.cx('checkbox')
}, $options.getColumnPT('checkbox')), [$props.rowCheckboxIconTemplate ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
key: 0,
checked: $props.checked,
"class": vue.normalizeClass(_ctx.cx('checkboxIcon'))
}, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && !!$props.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
key: 1,
"class": _ctx.cx('checkboxIcon')
}, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 16)], 16);
}
script$b.render = render$b;
var script$a = {
name: 'RowRadioButton',
hostName: 'DataTable',
"extends": BaseComponent__default["default"],
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: {
instance: this,
props: this.$props,
state: this.$data
},
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
return vue.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
});
utils.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$a(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
"class": _ctx.cx('radiobuttonWrapper'),
onClick: _cache[3] || (_cache[3] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
})
}, $options.getColumnPT('radiobuttonWrapper')), [vue.createElementVNode("div", vue.mergeProps({
"class": "p-hidden-accessible"
}, $options.getColumnPT('hiddenInputWrapper'), {
"data-p-hidden-accessible": true
}), [vue.createElementVNode("input", vue.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] = vue.withKeys(vue.withModifiers(function () {
return $options.onClick && $options.onClick.apply($options, arguments);
}, ["prevent"]), ["space"]))
}, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$6)], 16), vue.createElementVNode("div", vue.mergeProps({
ref: "box",
"class": _ctx.cx('radiobutton')
}, $options.getColumnPT('radiobutton')), [vue.createElementVNode("div", vue.mergeProps({
"class": _ctx.cx('radiobuttonIcon')
}, $options.getColumnPT('radiobuttonIcon')), null, 16)], 16)], 16);
}
script$a.render = render$a;
var script$9 = {
name: 'BodyCell',
hostName: 'DataTable',
"extends": BaseComponent__default["default"],
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 = utils.DomHandler.getFirstFocusableElement(_this.$el);
focusableEl && focusableEl.focus();
}, 1);
}
},
beforeUnmount: function beforeUnmount() {
if (this.overlayEventListener) {
OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
}
},
methods: {
columnProp: function columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPT: function getColumnPT(key) {
var _this$$parentInstance, _this$$parentInstance2;
var columnMetaData = {
props: this.column.props,
parent: {
instance: this,
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 vue.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 utils.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__default["default"].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__default["default"].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':
case 'NumpadEnter':
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) {
utils.DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
moveToNextCell: function moveToNextCell(event) {
var currentCell = this.findCell(event.target);
var targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
utils.DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
findCell: function findCell(element) {
if (element) {
var cell = element;
while (cell && !utils.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 (utils.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 (utils.DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;else return this.findNextEditableColumn(nextCell);
} else {
return null;
}
},
isEditingCellValid: function isEditingCellValid() {
return utils.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 = utils.DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = utils.DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = utils.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$a,
DTCheckbox: script$b,
ChevronDownIcon: ChevronDownIcon__default["default"],
ChevronRightIcon: ChevronRightIcon__default["default"],
BarsIcon: BarsIcon__default["default"],
PencilIcon: PencilIcon__default["default"],
CheckIcon: CheckIcon__default["default"],
TimesIcon: TimesIcon__default["default"]
},
directives: {
ripple: Ripple__default["default"]
}
};
function _typeof$a(o) { "@babel/helpers - typeof"; return _typeof$a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$a(o); }
function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$a(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty$a(obj, key, value) { key = _toPropertyKey$a(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$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : String(i); }
function _toPrimitive$a(t, r) { if ("object" != _typeof$a(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$a(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _hoisted_1$5 = ["colspan", "rowspan", "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$9(_ctx, _cache, $props, $setup, $data, $options) {
var _component_DTRadioButton = vue.resolveComponent("DTRadioButton");
var _component_DTCheckbox = vue.resolveComponent("DTCheckbox");
var _component_BarsIcon = vue.resolveComponent("BarsIcon");
var _component_ChevronDownIcon = vue.resolveComponent("ChevronDownIcon");
var _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
var _directive_ripple = vue.resolveDirective("ripple");
return $options.loading ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 0,
style: $options.containerStyle,
"class": $options.containerClass,
role: "cell"
}, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.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)) : (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 1,
style: $options.containerStyle,
"class": $options.containerClass,
colspan: $options.columnProp('colspan'),
rowspan: $options.columnProp('rowspan'),
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$a(_objectSpread$a({}, $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' ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 0,
"class": _ctx.cx('columnTitle')
}, $options.getColumnPT('columnTitle')), vue.toDisplayString($options.columnProp('header')), 17)) : vue.createCommentVNode("", true), $props.column.children && $props.column.children.body && !$data.d_editing ? (vue.openBlock(), vue.createBlock(vue.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 ? (vue.openBlock(), vue.createBlock(vue.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 ? (vue.openBlock(), vue.createBlock(vue.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') ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 4
}, [$options.columnProp('selectionMode') === 'single' ? (vue.openBlock(), vue.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' ? (vue.openBlock(), vue.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
}, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected", "column", "index", "unstyled", "pt"])) : vue.createCommentVNode("", true)], 64)) : $options.columnProp('rowReorder') ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 5
}, [$props.column.children && $props.column.children.rowreordericon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowreordericon), {
key: 0,
"class": vue.normalizeClass(_ctx.cx('rowReorderIcon'))
}, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
key: 1,
"class": [_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')]
}, $options.getColumnPT('rowReorderIcon')), null, 16)) : (vue.openBlock(), vue.createBlock(_component_BarsIcon, vue.mergeProps({
key: 2,
"class": _ctx.cx('rowReorderIcon')
}, $options.getColumnPT('rowReorderIcon')), null, 16, ["class"]))], 64)) : $options.columnProp('expander') ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 6,
"class": _ctx.cx('rowToggler'),
type: "button",
"aria-expanded": $props.isRowExpanded,
"aria-controls": $props.ariaControls,
"aria-label": $options.expandButtonAriaLabel,
onClick: _cache[2] || (_cache[2] = function () {
return $options.toggleRow && $options.toggleRow.apply($options, arguments);
})
}, $options.getColumnPT('rowToggler'), {
"data-pc-group-section": "rowactionbutton"
}), [$props.column.children && $props.column.children.rowtogglericon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowtogglericon), {
key: 0,
"class": vue.normalizeClass(_ctx.cx('rowTogglerIcon')),
rowExpanded: $props.isRowExpanded
}, null, 8, ["class", "rowExpanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 1
}, [$props.isRowExpanded && $props.expandedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
"class": vue.normalizeClass([_ctx.cx('rowTogglerIcon'), $props.expandedRowIcon])
}, null, 2)) : $props.isRowExpanded && !$props.expandedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
key: 1,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"])) : !$props.isRowExpanded && $props.collapsedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
"class": vue.normalizeClass([_ctx.cx('rowTogglerIcon'), $props.collapsedRowIcon])
}, null, 2)) : !$props.isRowExpanded && !$props.collapsedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
key: 3,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16, _hoisted_2$2)), [[_directive_ripple]]) : $props.editMode === 'row' && $options.columnProp('rowEditor') ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 7
}, [!$data.d_editing ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 0,
"class": _ctx.cx('rowEditorInitButton'),
type: "button",
"aria-label": $options.initButtonAriaLabel,
onClick: _cache[3] || (_cache[3] = function () {
return $options.onRowEditInit && $options.onRowEditInit.apply($options, arguments);
})
}, $options.getColumnPT('rowEditorInitButton'), {
"data-pc-group-section": "rowactionbutton"
}), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.roweditoriniticon || 'PencilIcon'), vue.mergeProps({
"class": _ctx.cx('rowEditorInitIcon')
}, $options.getColumnPT('rowEditorInitIcon')), null, 16, ["class"]))], 16, _hoisted_3$2)), [[_directive_ripple]]) : vue.createCommentVNode("", true), $data.d_editing ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 1,
"class": _ctx.cx('rowEditorSaveButton'),
type: "button",
"aria-label": $options.saveButtonAriaLabel,
onClick: _cache[4] || (_cache[4] = function () {
return $options.onRowEditSave && $options.onRowEditSave.apply($options, arguments);
})
}, $options.getColumnPT('rowEditorSaveButton'), {
"data-pc-group-section": "rowactionbutton"
}), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.roweditorsaveicon || 'CheckIcon'), vue.mergeProps({
"class": _ctx.cx('rowEditorSaveIcon')
}, $options.getColumnPT('rowEditorSaveIcon')), null, 16, ["class"]))], 16, _hoisted_4$1)), [[_directive_ripple]]) : vue.createCommentVNode("", true), $data.d_editing ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 2,
"class": _ctx.cx('rowEditorCancelButton'),
type: "button",
"aria-label": $options.cancelButtonAriaLabel,
onClick: _cache[5] || (_cache[5] = function () {
return $options.onRowEditCancel && $options.onRowEditCancel.apply($options, arguments);
})
}, $options.getColumnPT('rowEditorCancelButton'), {
"data-pc-group-section": "rowactionbutton"
}), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.roweditorcancelicon || 'TimesIcon'), vue.mergeProps({
"class": _ctx.cx('rowEditorCancelIcon')
}, $options.getColumnPT('rowEditorCancelIcon')), null, 16, ["class"]))], 16, _hoisted_5$1)), [[_directive_ripple]]) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 8
}, [vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$5));
}
script$9.render = render$9;
function _typeof$9(o) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$9(o); }
function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive$9(t, "string"); return "symbol" == _typeof$9(i) ? i : String(i); }
function _toPrimitive$9(t, r) { if ("object" != _typeof$9(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$9(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var script$8 = {
name: 'BodyRow',
hostName: 'DataTable',
"extends": Base