UNPKG

primevue

Version:

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

1,258 lines (1,247 loc) 292 kB
import ArrowDown from '@primeicons/vue/arrow-down'; import ArrowUp from '@primeicons/vue/arrow-up'; import Spinner from '@primeicons/vue/spinner'; import { cn } from '@primeuix/utils'; import { getNextElementSibling, getOuterWidth, getPreviousElementSibling, getAttribute, getFirstFocusableElement, invokeElementMethod, getOuterHeight, isTouchDevice, addStyle, absolutePosition, focus, getIndex, setAttribute, find, removeClass, getOffset, addClass, getHiddenElementOuterWidth, getHiddenElementOuterHeight, isRTL, exportCSV, findSingle, clearSelection, isClickable } from '@primeuix/utils/dom'; import { resolveFieldData, isNotEmpty, equals, isEmpty, reorderArray, findIndexInList, localeComparator, sort } from '@primeuix/utils/object'; import { FilterOperator, FilterMatchMode, FilterService } from '@primevue/core/api'; import { getVNodeProp, HelperSet, ConnectedOverlayScrollHandler } from '@primevue/core/utils'; import Paginator from 'primevue/paginator'; import VirtualScroller from 'primevue/virtualscroller'; import BaseComponent from '@primevue/core/basecomponent'; import DataTableStyle from 'primevue/datatable/style'; import ChevronDown from '@primeicons/vue/chevron-down'; import ChevronRight from '@primeicons/vue/chevron-right'; import { mergeProps, resolveComponent, openBlock, createBlock, withCtx, resolveDynamicComponent, normalizeClass, createCommentVNode, resolveDirective, createElementBlock, Fragment, withDirectives, withModifiers, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createElementVNode, renderList, createVNode, Transition, withKeys, renderSlot, createSlots } from 'vue'; import Bars from '@primeicons/vue/bars'; import Check from '@primeicons/vue/check'; import Pencil from '@primeicons/vue/pencil'; import Times from '@primeicons/vue/times'; import Button from 'primevue/button'; import OverlayEventBus from 'primevue/overlayeventbus'; import Ripple from 'primevue/ripple'; import Checkbox from 'primevue/checkbox'; import RadioButton from 'primevue/radiobutton'; import Filter from '@primeicons/vue/filter'; import FilterFill from '@primeicons/vue/filter-fill'; import FilterSlash from '@primeicons/vue/filter-slash'; import Plus from '@primeicons/vue/plus'; import Trash from '@primeicons/vue/trash'; import { ZIndex } from '@primeuix/utils/zindex'; import FocusTrap from 'primevue/focustrap'; import Portal from 'primevue/portal'; import Select from 'primevue/select'; import SortAlt from '@primeicons/vue/sort-alt'; import SortAmountDown from '@primeicons/vue/sort-amount-down'; import SortAmountUpAlt from '@primeicons/vue/sort-amount-up-alt'; import Badge from 'primevue/badge'; var script$d = { 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 }, breakpoint: { type: String, "default": '960px' }, showHeaders: { type: Boolean, "default": true }, 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 }, filterButtonProps: { type: Object, "default": function _default() { return { filter: { severity: 'secondary', text: true, rounded: true, iconOnly: true }, inline: { clear: { severity: 'secondary', text: true, rounded: true, iconOnly: true } }, popover: { addRule: { severity: 'info', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small', iconOnly: true }, apply: { size: 'small' }, clear: { outlined: true, size: 'small' } } }; } }, editButtonProps: { type: Object, "default": function _default() { return { init: { severity: 'secondary', text: true, rounded: true, iconOnly: true }, save: { severity: 'secondary', text: true, rounded: true, iconOnly: true }, cancel: { severity: 'secondary', text: true, rounded: true, iconOnly: true } }; } } }, style: DataTableStyle, provide: function provide() { return { $pcDataTable: this, $parentInstance: this }; } }; var script$c = { 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: { Check: Check, Checkbox: Checkbox } }; function render$c(_ctx, _cache, $props, $setup, $data, $options) { var _component_Check = resolveComponent("Check"); 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('pcRowCheckbox') }, { 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_Check, mergeProps({ key: 1, "class": slotProps["class"] }, $options.getColumnPT('pcRowCheckbox.icon')), null, 16, ["class"])) : createCommentVNode("", true)]; }), _: 1 }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]); } script$c.render = render$c; var script$b = { 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$b(_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('pcRowRadiobutton') }, null, 8, ["modelValue", "disabled", "name", "onChange", "unstyled", "pt"]); } script$b.render = render$b; function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = false, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = true, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), true), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); } function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); } function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } var script$a = { 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'], inject: { $pcDataTable: { "default": undefined } }, 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 }, 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 }, editButtonProps: { type: Object, "default": null } }, documentEditListener: null, selfClick: false, overlayEventListener: null, editCompleteTimeout: 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 = 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 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$1() { return 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) { _this2.selfClick = _this2.$el && (_this2.$el.contains(event.target) || event.target.closest('[data-pc-section="overlay"]') || event.target.closest('[data-pc-section="panel"]')); if (_this2.editCompleteTimeout) { clearTimeout(_this2.editCompleteTimeout); } if (!_this2.selfClick) { _this2.editCompleteTimeout = setTimeout(function () { _this2.completeEdit(event, 'outside'); }, 1); } }; document.addEventListener('mousedown', this.documentEditListener); } }, unbindDocumentEditListener: function unbindDocumentEditListener() { if (this.documentEditListener) { document.removeEventListener('mousedown', this.documentEditListener); this.documentEditListener = null; this.selfClick = false; if (this.editCompleteTimeout) { clearTimeout(this.editCompleteTimeout); this.editCompleteTimeout = null; } } }, 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()) { 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) { _this3.selfClick = _this3.$el && _this3.$el.contains(e.target); }; 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 _this4 = this; return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() { var currentCell, targetCell; return _regenerator().w(function (_context) { while (1) switch (_context.n) { case 0: currentCell = _this4.findCell(event.target); targetCell = _this4.findPreviousEditableColumn(currentCell); if (!targetCell) { _context.n = 2; break; } _context.n = 1; return _this4.$nextTick(); case 1: invokeElementMethod(targetCell, 'click'); event.preventDefault(); case 2: return _context.a(2); } }, _callee); }))(); }, moveToNextCell: function moveToNextCell(event) { var _this5 = this; return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() { var currentCell, targetCell; return _regenerator().w(function (_context2) { while (1) switch (_context2.n) { case 0: currentCell = _this5.findCell(event.target); targetCell = _this5.findNextEditableColumn(currentCell); if (!targetCell) { _context2.n = 2; break; } _context2.n = 1; return _this5.$nextTick(); case 1: invokeElementMethod(targetCell, 'click'); event.preventDefault(); case 2: return _context2.a(2); } }, _callee2); }))(); }, findCell: function findCell(element) { if (element) { var cell = element; while (cell && !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 (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 (getAttribute(nextCell, 'data-p-editable-column')) return nextCell;else return this.findNextEditableColumn(nextCell); } else { return null; } }, 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 pos = 0; var next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; } else { var _pos = 0; var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { _pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = _pos + '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() { var _this$column$children, _this$$pcDataTable; return ((_this$column$children = this.column.children) === null || _this$column$children === void 0 ? void 0 : _this$column$children.loading) && (this.getVirtualScrollerProp('loading') || ((_this$$pcDataTable = this.$pcDataTable) === null || _this$$pcDataTable === void 0 ? void 0 : _this$$pcDataTable.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$b, DTCheckbox: script$c, Button: Button, ChevronDown: ChevronDown, ChevronRight: ChevronRight, Bars: Bars, Pencil: Pencil, Check: Check, Times: Times }, directives: { ripple: Ripple } }; function _typeof$b(o) { "@babel/helpers - typeof"; return _typeof$b = "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$b(o); } function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$b(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _defineProperty$b(e, r, t) { return (r = _toPropertyKey$b(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; } function _toPropertyKey$b(t) { var i = _toPrimitive$b(t, "string"); return "symbol" == _typeof$b(i) ? i : i + ""; } function _toPrimitive$b(t, r) { if ("object" != _typeof$b(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$b(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } var _hoisted_1$9 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"]; var _hoisted_2$3 = ["aria-expanded", "aria-controls", "aria-label"]; function render$a(_ctx, _cache, $props, $setup, $data, $options) { var _component_DTRadioButton = resolveComponent("DTRadioButton"); var _component_DTCheckbox = resolveComponent("DTCheckbox"); var _component_Bars = resolveComponent("Bars"); var _component_ChevronDown = resolveComponent("ChevronDown"); var _component_ChevronRight = resolveComponent("ChevronRight"); var _component_Button = resolveComponent("Button"); var _directive_ripple = resolveDirective("ripple"); return $options.loading ? (openBlock(), createElementBlock("td", mergeProps({ key: 0, style: $options.containerStyle, "class": $options.containerClass, role: "cell" }, _objectSpread$b(_objectSpread$b({}, $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[3] || (_cache[3] = function () { return $options.onClick && $options.onClick.apply($options, arguments); }), onKeydown: _cache[4] || (_cache[4] = function () { return $options.onKeyDown && $options.onKeyDown.apply($options, arguments); }), role: "cell" }, _objectSpread$b(_objectSpread$b({}, $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.column.children && $props.column.children.body && !$data.d_editing ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), { key: 0, 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: 1, 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: 2, 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: 3 }, [$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: 4 }, [$props.column.children && $props.column.children.rowreordericon ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowreordericon), mergeProps({ key: 0, "class": _ctx.cx('reorderableRowHandle') }, $options.getColumnPT('reorderableRowHandle')), null, 16, ["class"])) : $options.columnProp('rowReorderIcon') ? (openBlock(), createElementBlock("i", mergeProps({ key: 1, "class": [_ctx.cx('reorderableRowHandle'), $options.columnProp('rowReorderIcon')] }, $options.getColumnPT('reorderableRowHandle')), null, 16)) : (openBlock(), createBlock(_component_Bars, mergeProps({ key: 2, "class": _ctx.cx('reorderableRowHandle') }, $options.getColumnPT('reorderableRowHandle')), null, 16, ["class"]))], 64)) : $options.columnProp('expander') ? withDirectives((openBlock(), createElementBlock("button", mergeProps({ key: 5, "class": _ctx.cx('rowToggleButton'), type: "button", "aria-expanded": $props.isRowExpanded, "aria-controls": $props.ariaControls, "aria-label": $options.expandButtonAriaLabel, onClick: _cache[2] || (_cache[2] = withModifiers(function () { return $options.toggleRow && $options.toggleRow.apply($options, arguments); }, ["stop"])), "data-p-selected": "selected" }, $options.getColumnPT('rowToggleButton'), { "data-pc-group-section": "rowactionbutton" }), [$props.column.children && $props.column.children.rowtoggleicon ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowtoggleicon), { key: 0, "class": normalizeClass(_ctx.cx('rowToggleIcon')), 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('rowToggleIcon'), $props.expandedRowIcon]) }, null, 2)) : $props.isRowExpanded && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDown, mergeProps({ key: 1, "class": _ctx.cx('rowToggleIcon') }, $options.getColumnPT('rowToggleIcon')), null, 16, ["class"])) : !$props.isRowExpanded && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", { key: 2, "class": normalizeClass([_ctx.cx('rowToggleIcon'), $props.collapsedRowIcon]) }, null, 2)) : !$props.isRowExpanded && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRight, mergeProps({ key: 3, "class": _ctx.cx('rowToggleIcon') }, $options.getColumnPT('rowToggleIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16, _hoisted_2$3)), [[_directive_ripple]]) : $props.editMode === 'row' && $options.columnProp('rowEditor') ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [!$data.d_editing ? (openBlock(), createBlock(_component_Button, mergeProps({ key: 0, "class": _ctx.cx('pcRowEditorInit'), "aria-label": $options.initButtonAriaLabel, unstyled: _ctx.unstyled, onClick: $options.onRowEditInit }, $props.editButtonProps.init, { pt: $options.getColumnPT('pcRowEditorInit'), "data-pc-group-section": "rowactionbutton" }), { "default": withCtx(function () { return [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditoriniticon || 'Pencil'), normalizeProps(guardReactiveProps($options.getColumnPT('pcRowEditorInit')['icon'])), null, 16))]; }), _: 1 }, 16, ["class", "aria-label", "unstyled", "onClick", "pt"])) : createCommentVNode("", true), $data.d_editing ? (openBlock(), createBlock(_component_Button, mergeProps({ key: 1, "class": _ctx.cx('pcRowEditorSave'), "aria-label": $options.saveButtonAriaLabel, unstyled: _ctx.unstyled, onClick: $options.onRowEditSave }, $props.editButtonProps.save, { pt: $options.getColumnPT('pcRowEditorSave'), "data-pc-group-section": "rowactionbutton" }), { "default": withCtx(function () { return [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditorsaveicon || 'Check'), normalizeProps(guardReactiveProps($options.getColumnPT('pcRowEditorSave')['icon'])), null, 16))]; }), _: 1 }, 16, ["class", "aria-label", "unstyled", "onClick", "pt"])) : createCommentVNode("", true), $data.d_editing ? (openBlock(), createBlock(_component_Button, mergeProps({ key: 2, "class": _ctx.cx('pcRowEditorCancel'), "aria-label": $options.cancelButtonAriaLabel, unstyled: _ctx.unstyled, onClick: $options.onRowEditCancel }, $props.editButtonProps.cancel, { pt: $options.getColumnPT('pcRowEditorCancel'), "data-pc-group-section": "rowactionbutton" }), { "default": withCtx(function () { return [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.roweditorcancelicon || 'Times'), normalizeProps(guardReactiveProps($options.getColumnPT('pcRowEditorCancel')['icon'])), null, 16))]; }), _: 1 }, 16, ["class", "aria-label", "unstyled", "onClick", "pt"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 7 }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$9)); } script$a.render = render$a; 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 _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; } function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0; } } function _arrayLikeToArray$2(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } 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), true).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(e, r, t) { return (r = _toPropertyKey$a(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; } function _toPropertyKey$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : 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); if ("object" != _typeof$a(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } var script$9 = { name: 'BodyRow', hostName: 'DataTable', "extends": BaseComponent, emits: ['rowgroup-toggle', 'row-click', 'row-dblc