accessibleprimevue
Version:
Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+
1,380 lines (1,368 loc) • 272 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, HelperSet, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import BaseComponent from 'primevue/basecomponent';
import DataTableStyle from 'primevue/datatable/style';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { mergeProps, resolveComponent, openBlock, createBlock, withCtx, resolveDynamicComponent, normalizeClass, createCommentVNode, resolveDirective, createElementBlock, toDisplayString, Fragment, withDirectives, createTextVNode, createElementVNode, withModifiers, renderList, normalizeProps, guardReactiveProps, createVNode, Transition, withKeys, 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 Checkbox from 'primevue/checkbox';
import RadioButton from 'primevue/radiobutton';
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 script$c = {
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
},
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: Function,
"default": null
},
rowStyle: {
type: Function,
"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
},
highlightOnSelect: {
type: Boolean,
"default": false
},
size: {
type: String,
"default": null
},
tableStyle: {
type: null,
"default": null
},
tableClass: {
type: [String, Object],
"default": null
},
tableProps: {
type: Object,
"default": null
},
filterInputProps: {
type: null,
"default": null
}
},
style: DataTableStyle,
provide: function provide() {
return {
$parentInstance: this
};
}
};
var script$b = {
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
}
},
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,
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:
},
onChange: function onChange(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
}
}
},
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,
Checkbox: Checkbox
}
};
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
var _component_CheckIcon = resolveComponent("CheckIcon");
var _component_Checkbox = resolveComponent("Checkbox");
return openBlock(), createBlock(_component_Checkbox, {
modelValue: $props.checked,
binary: true,
disabled: _ctx.$attrs.disabled,
"aria-label": $options.checkboxAriaLabel,
onChange: $options.onChange,
unstyled: _ctx.unstyled,
pt: $options.getColumnPT('rowCheckbox')
}, {
icon: withCtx(function (slotProps) {
return [$props.rowCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
key: 0,
checked: slotProps.checked,
"class": normalizeClass(slotProps["class"])
}, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && slotProps.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
key: 1,
"class": slotProps["class"]
}, $options.getColumnPT('rowCheckbox.icon')), null, 16, ["class"])) : createCommentVNode("", true)];
}),
_: 1
}, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
}
script$b.render = render$b;
var script$a = {
name: 'RowRadioButton',
hostName: 'DataTable',
"extends": BaseComponent,
emits: ['change'],
props: {
value: null,
checked: null,
name: null,
column: null,
index: {
type: Number,
"default": null
}
},
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,
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:
},
onChange: function onChange(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
}
}
},
components: {
RadioButton: RadioButton
}
};
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
var _component_RadioButton = resolveComponent("RadioButton");
return openBlock(), createBlock(_component_RadioButton, {
modelValue: $props.checked,
binary: true,
disabled: _ctx.$attrs.disabled,
name: $props.name,
onChange: $options.onChange,
unstyled: _ctx.unstyled,
pt: $options.getColumnPT('rowRadiobutton')
}, null, 8, ["modelValue", "disabled", "name", "onChange", "unstyled", "pt"]);
}
script$a.render = render$a;
var script$9 = {
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: {
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 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':
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) {
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 === null || cell === void 0 ? void 0 : cell.previousElementSibling;
if (!prevCell) {
var previousRow = cell === null || cell === void 0 ? void 0 : cell.parentElement.previousElementSibling;
if (previousRow) {
prevCell = previousRow.lastElementChild;
} else return null;
} else {
if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;else return this.findPreviousEditableColumn(prevCell);
}
},
findNextEditableColumn: function findNextEditableColumn(cell) {
var nextCell = cell === null || cell === void 0 ? void 0 : cell.nextElementSibling;
if (!nextCell) {
var nextRow = cell === null || cell === void 0 ? void 0 : cell.parentElement.nextElementSibling;
if (nextRow) {
nextCell = nextRow.firstElementChild;
} else return null;
} else {
if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;else return this.findNextEditableColumn(nextCell);
}
},
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 = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
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$a,
DTCheckbox: script$b,
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon,
BarsIcon: BarsIcon,
PencilIcon: PencilIcon,
CheckIcon: CheckIcon,
TimesIcon: TimesIcon
},
directives: {
ripple: Ripple
}
};
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$4 = ["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 = 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$a(_objectSpread$a({}, $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,
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' ? (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,
rowTogglerCallback: $options.toggleRow
}, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback", "rowTogglerCallback"])) : $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
}, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected", "column", "index", "unstyled", "pt"])) : createCommentVNode("", true)], 64)) : $options.columnProp('rowReorder') ? (openBlock(), createElementBlock(Fragment, {
key: 5
}, [$props.column.children && $props.column.children.rowreordericon ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowreordericon), {
key: 0,
"class": normalizeClass(_ctx.cx('rowReorderIcon'))
}, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (openBlock(), createElementBlock("i", mergeProps({
key: 1,
"class": [_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')]
}, $options.getColumnPT('rowReorderIcon')), null, 16)) : (openBlock(), createBlock(_component_BarsIcon, mergeProps({
key: 2,
"class": _ctx.cx('rowReorderIcon')
}, $options.getColumnPT('rowReorderIcon')), null, 16, ["class"]))], 64)) : $options.columnProp('expander') ? withDirectives((openBlock(), createElementBlock("button", 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 ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowtogglericon), {
key: 0,
"class": normalizeClass(_ctx.cx('rowTogglerIcon')),
rowExpanded: $props.isRowExpanded
}, null, 8, ["class", "rowExpanded"])) : (openBlock(), createElementBlock(Fragment, {
key: 1
}, [$props.isRowExpanded && $props.expandedRowIcon ? (openBlock(), createElementBlock("span", {
key: 0,
"class": normalizeClass([_ctx.cx('rowTogglerIcon'), $props.expandedRowIcon])
}, null, 2)) : $props.isRowExpanded && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
key: 1,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"])) : !$props.isRowExpanded && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", {
key: 2,
"class": normalizeClass([_ctx.cx('rowTogglerIcon'), $props.collapsedRowIcon])
}, null, 2)) : !$props.isRowExpanded && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
key: 3,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16, _hoisted_2$2)), [[_directive_ripple]]) : $props.editMode === 'row' && $options.columnProp('rowEditor') ? (openBlock(), createElementBlock(Fragment, {
key: 7
}, [!$data.d_editing ? withDirectives((openBlock(), createElementBlock("button", 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"
}), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditoriniticon || 'PencilIcon'), mergeProps({
"class": _ctx.cx('rowEditorInitIcon')
}, $options.getColumnPT('rowEditorInitIcon')), null, 16, ["class"]))], 16, _hoisted_3$2)), [[_directive_ripple]]) : createCommentVNode("", true), $data.d_editing ? withDirectives((openBlock(), createElementBlock("button", 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"
}), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditorsaveicon || 'CheckIcon'), mergeProps({
"class": _ctx.cx('rowEditorSaveIcon')
}, $options.getColumnPT('rowEditorSaveIcon')), null, 16, ["class"]))], 16, _hoisted_4$1)), [[_directive_ripple]]) : createCommentVNode("", true), $data.d_editing ? withDirectives((openBlock(), createElementBlock("button", 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"
}), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditorcancelicon || 'TimesIcon'), mergeProps({
"class": _ctx.cx('rowEditorCancelIcon')
}, $options.getColumnPT('rowEditorCancelIcon')), null, 16, ["class"]))], 16, _hoisted_5$1)), [[_directive_ripple]]) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, {
key: 8
}, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$4));
}
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 _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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": BaseComponent,
emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle', 'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
props: {
rowData: {
type: Object,
"default": null
},
index: {
type: Number,
"default": 0
},
value: {
type: Array,
"default": null
},
columns: {
type: null,
"default": null
},
frozenRow: {
type: Boolean,
"default": false
},
empty: {
type: Boolean,
"default": false
},
rowGroupMode: {
type: String,
"default": null
},
groupRowsBy: {
type: [Array, String, Function],
"default": null
},
expandableRowGroups: {
type: Boolean,
"default": false
},
expandedRowGroups: {
type: Array,
"default": null
},
first: {
type: Number,
"default": 0
},
dataKey: {
type: [String, Function],
"default": null
},
expandedRowIcon: {
type: String,
"default": null
},
collapsedRowIcon: {
type: String,
"default": null
},
expandedRows: {
type: [Array, Object],
"default": null
},
selection: {
type: [Array, Object],
"default": null
},
selectionKeys: {
type: null,
"default": null
},
selectionMode: {
type: String,
"default": null
},
contextMenu: {
type: Boolean,
"default": false
},
contextMenuSelection: {
type: Object,
"default": null
},
rowClass: {
type: null,
"default": null
},
rowStyle: {
type: null,
"default": null
},
rowGroupHeaderStyle: {
type: null,
"default": null
},
editMode: {
type: String,
"default": null
},
compareSelectionBy: {
type: String,
"default": 'deepEquals'
},
editingRows: {
type: Array,
"default": null
},
editingRowKeys: {
type: null,
"default": null
},
editingMeta: {
type: Object,
"default": null
},
templates: {
type: null,
"default": null
},
scrollable: {
type: Boolean,
"default": false
},
responsiveLayout: {
type: String,
"default": 'stack'
},
virtualScrollerContentProps: {
type: Object,
"default": null
},
isVirtualScrollerDisabled: {
type: Boolean,
"default": false
},
expandedRowId: {
type: String,
"default": null
},
nameAttributeSelector: {
type: String,
"default": null
}
},
data: function data() {
return {
d_rowExpanded: false
};
},
watch: {
expandedRows: {
deep: true,
immediate: true,
handler: function handler(newValue) {
var _this = this;
this.d_rowExpanded = this.dataKey ? (newValue === null || newValue === void 0 ? void 0 : newValue[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)]) !== undefined : newValue === null || newValue === void 0 ? void 0 : newValue.some(function (d) {
return _this.equals(_this.rowData, d);
});
}
}
},
methods: {
columnProp: function columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
//@todo - update this method
getColumnPT: function getColumnPT(key) {
var columnMetaData = {
parent: {
instance: this,
props: this.$props,
state: this.$data
}
};
return mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.columnProp({}, 'pt'), key, columnMetaData));
},
//@todo - update this method
getBodyRowPTOptions: function getBodyRowPTOptions(key) {
var _this$$parentInstance;
var datatable = (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$parentInstance;
return this.ptm(key, {
context: {
index: this.rowIndex,
selectable: (datatable === null || datatable === void 0 ? void 0 : datatable.rowHover) || (datatable === null || datatable === void 0 ? void 0 : datatable.selectionMode),
selected: this.isSelected,
stripedRows: (datatable === null || datatable === void 0 ? void 0 : datatable.stripedRows) || false
}
});
},
shouldRenderBodyCell: function shouldRenderBodyCell(column) {
var isHidden = this.columnProp(column, 'hidden');
if (this.rowGroupMode && !isHidden) {
var field = this.columnProp(column, 'field');
if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== field;
} else if (this.rowGroupMode === 'rowspan') {
if (this.isGrouped(column)) {
var prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) {
var currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field);
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
} else {
return true;
}
}
} else {
return !isHidden;
}
},
calculateRowGroupSize: function calculateRowGroupSize(column) {
if (this.isGrouped(column)) {
var index = this.rowIndex;
var field = this.columnProp(column, 'field');
var currentRowFieldData = ObjectUtils.resolveFieldData(this.value[index], field);
var nextRowFieldData = currentRowFieldData;
var groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
var nextRowData = this.value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field);
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
} else {
return null;
}
},
isGrouped: function isGrouped(column) {
var field = this.columnProp(column, 'field');
if (this.groupRowsBy && field) {
if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(field) > -1;else return this.groupRowsBy === field;
} else {
return false;
}
},
findIndexInSelection: function findIndexInSelection(data) {
return this.findIndex(data, this.selection);
},
findIndex: function findIndex(data, collection) {
var index = -1;
if (collection && collection.length) {
for (var i = 0; i < collection.length; i++) {
if (this.equals(data, collection[i])) {
index = i;
break;