primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)
1,325 lines (1,266 loc) • 176 kB
JavaScript
import { DomHandler, ObjectUtils, FilterUtils } from 'primevue/utils';
import Paginator from 'primevue/paginator';
import { openBlock, createBlock, Fragment, renderList, resolveDynamicComponent, createCommentVNode, resolveComponent, createVNode, renderSlot, withKeys, withModifiers, toDisplayString, resolveDirective, withDirectives, createTextVNode, createSlots, withCtx } from 'vue';
import Ripple from 'primevue/ripple';
var script = {
props: {
columns: {
type: null,
default: null
},
rows: {
type: null,
default: null
}
}
};
const _hoisted_1 = { class: "p-datatable-tbody" };
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("tbody", _hoisted_1, [
(openBlock(true), createBlock(Fragment, null, renderList($props.rows, (n) => {
return (openBlock(), createBlock("tr", { key: n }, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock("td", {
key: col.props.columnKey||col.props.field||i
}, [
(col.children && col.children.loading)
? (openBlock(), createBlock(resolveDynamicComponent(col.children.loading), {
key: 0,
column: col,
index: i
}, null, 8, ["column", "index"]))
: createCommentVNode("", true)
]))
}), 128))
]))
}), 128))
]))
}
script.render = render;
var script$1 = {
emits: ['virtual-scroll'],
props: {
frozen: {
type: Boolean,
default: false
},
frozenWidth: {
type: String,
default: null
},
columns: {
type: null,
default: null
},
headerColumnGroup: {
type: null,
default: null
},
footerColumnGroup: {
type: null,
default: null
},
scrollHeight: {
type: String,
default: null
},
virtualScroll: {
type: Boolean,
default: false
},
virtualRowHeight: {
type: Number,
default: null
},
rows: {
type: Number,
default: null,
},
totalRecords: {
type: Number,
default: 0
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array,String],
default: null
}
},
virtualScrollCallback: null,
mounted() {
if (!this.frozen)
this.alignScrollBar();
else
this.$refs.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
if (this.virtualScroll) {
this.$refs.virtualScroller.style.height = this.totalRecords * this.virtualRowHeight + 'px';
}
},
updated() {
if (this.virtualScrollCallback) {
this.virtualScrollCallback();
this.virtualScrollCallback = null;
}
},
watch: {
totalRecords(newValue) {
if (this.virtualScroll) {
this.$refs.virtualScroller.style.height = newValue * this.virtualRowHeight + 'px';
}
}
},
methods: {
columnProp(col, prop) {
return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
},
onHeaderScroll() {
this.$refs.scrollHeader.scrollLeft = 0;
},
onBodyScroll() {
let frozenView = this.$el.previousElementSibling;
let frozenScrollBody;
if (frozenView) {
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-datatable-scrollable-body');
}
if (frozenScrollBody) {
frozenScrollBody.scrollTop = this.$refs.scrollBody.scrollTop;
}
this.$refs.scrollHeaderBox.style.marginLeft = -1 * this.$refs.scrollBody.scrollLeft + 'px';
if (this.$refs.scrollFooterBox) {
this.$refs.scrollFooterBox.style.marginLeft = -1 * this.$refs.scrollBody.scrollLeft + 'px';
}
if (this.virtualScroll) {
let viewport = DomHandler.getClientHeight(this.$refs.scrollBody);
let tableHeight = DomHandler.getOuterHeight(this.$refs.scrollTable);
let pageHeight = this.virtualRowHeight * this.rows;
let virtualTableHeight = DomHandler.getOuterHeight(this.$refs.virtualScroller);
let pageCount = (virtualTableHeight / pageHeight)||1;
let scrollBodyTop = this.$refs.scrollTable.style.top||'0';
if(this.$refs.scrollBody.scrollTop + viewport > parseFloat(scrollBodyTop) + tableHeight || this.$refs.scrollBody.scrollTop < parseFloat(scrollBodyTop)) {
if (this.$refs.loadingTable) {
this.$refs.loadingTable.style.display = 'table';
this.$refs.loadingTable.style.top = this.$refs.scrollBody.scrollTop + 'px';
}
let page = Math.floor((this.$refs.scrollBody.scrollTop * pageCount) / (this.$refs.scrollBody.scrollHeight)) + 1;
this.$emit('virtual-scroll', {
page: page
});
this.virtualScrollCallback = () => {
if (this.$refs.loadingTable) {
this.$refs.loadingTable.style.display = 'none';
}
this.$refs.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
};
}
}
},
alignScrollBar() {
let scrollBarWidth = DomHandler.calculateScrollbarWidth();
this.$refs.scrollHeaderBox.style.paddingRight = scrollBarWidth + 'px';
if (this.$refs.scrollFooterBox) {
this.$refs.scrollFooterBox.style.paddingRight = scrollBarWidth + 'px';
}
},
shouldRenderCol(column) {
if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== this.columnProp(column, 'field');
}
return true;
}
},
computed: {
containerClass() {
return ['p-datatable-scrollable-view', {'p-datatable-frozen-view': this.frozen, 'p-datatable-unfrozen-view': !this.frozen && this.frozenWidth}];
},
containerStyle() {
if (this.frozenWidth) {
if (this.frozen) {
return {
width: this.frozenWidth
};
}
else {
return {
width: 'calc(100% - ' + this.frozenWidth + ')',
left: this.frozenWidth
}
}
}
else {
return null;
}
},
bodyTableClass() {
return ['p-datatable-scrollable-body-table', {'p-datatable-virtual-table': this.virtualScroll}];
},
bodyTableStyle() {
return this.virtualScroll ? {top: '0'} : null;
},
bodyStyle() {
return {
maxHeight: this.scrollHeight !== 'flex' ? this.scrollHeight: null,
overflowY: !this.frozen && this.scrollHeight ? 'scroll': null
}
}
},
components: {
'DTTableLoadingBody': script
}
};
const _hoisted_1$1 = {
class: "p-datatable-scrollable-header-box",
ref: "scrollHeaderBox"
};
const _hoisted_2 = { class: "p-datatable-scrollable-header-table" };
const _hoisted_3 = {
key: 0,
ref: "loadingTable",
style: {top:'0', display: 'none'},
class: "p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table"
};
const _hoisted_4 = {
class: "p-datatable-virtual-scroller",
ref: "virtualScroller"
};
const _hoisted_5 = {
class: "p-datatable-scrollable-footer",
ref: "scrollFooter"
};
const _hoisted_6 = {
class: "p-datatable-scrollable-footer-box",
ref: "scrollFooterBox"
};
const _hoisted_7 = { class: "p-datatable-scrollable-footer-table" };
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DTTableLoadingBody = resolveComponent("DTTableLoadingBody");
return (openBlock(), createBlock("div", {
class: $options.containerClass,
style: $options.containerStyle
}, [
createVNode("div", {
class: "p-datatable-scrollable-header",
ref: "scrollHeader",
onScroll: _cache[1] || (_cache[1] = (...args) => ($options.onHeaderScroll && $options.onHeaderScroll(...args)))
}, [
createVNode("div", _hoisted_1$1, [
createVNode("table", _hoisted_2, [
createVNode("colgroup", null, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock(Fragment, null, [
($options.shouldRenderCol(col))
? (openBlock(), createBlock("col", {
key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i,
style: $options.columnProp(col,'headerStyle'),
class: $options.columnProp(col,'headerClass')
}, null, 6))
: createCommentVNode("", true)
], 64))
}), 256))
]),
renderSlot(_ctx.$slots, "header", {
columns: $props.columns,
columnGroup: $props.headerColumnGroup
}),
renderSlot(_ctx.$slots, "frozenbody", { columns: $props.columns })
])
], 512)
], 544),
createVNode("div", {
class: "p-datatable-scrollable-body",
ref: "scrollBody",
onScroll: _cache[2] || (_cache[2] = (...args) => ($options.onBodyScroll && $options.onBodyScroll(...args))),
style: $options.bodyStyle
}, [
createVNode("table", {
ref: "scrollTable",
class: $options.bodyTableClass,
style: $options.bodyTableStyle
}, [
createVNode("colgroup", null, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock(Fragment, null, [
($options.shouldRenderCol(col))
? (openBlock(), createBlock("col", {
key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i,
style: $options.columnProp(col,'bodyStyle'),
class: $options.columnProp(col,'bodyClass')
}, null, 6))
: createCommentVNode("", true)
], 64))
}), 256))
]),
renderSlot(_ctx.$slots, "body", { columns: $props.columns })
], 6),
($props.virtualScroll)
? (openBlock(), createBlock("table", _hoisted_3, [
createVNode("colgroup", null, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock("col", {
key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i,
style: $options.columnProp(col,'bodyStyle'),
class: $options.columnProp(col,'bodyClass')
}, null, 6))
}), 128))
]),
createVNode(_component_DTTableLoadingBody, {
columns: $props.columns,
rows: $props.rows
}, null, 8, ["columns", "rows"])
], 512))
: createCommentVNode("", true),
createVNode("div", _hoisted_4, null, 512)
], 36),
createVNode("div", _hoisted_5, [
createVNode("div", _hoisted_6, [
createVNode("table", _hoisted_7, [
createVNode("colgroup", null, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock(Fragment, null, [
($options.shouldRenderCol(col))
? (openBlock(), createBlock("col", {
key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i,
style: $options.columnProp(col,'footerStyle'),
class: $options.columnProp(col,'footerClass')
}, null, 6))
: createCommentVNode("", true)
], 64))
}), 256))
]),
renderSlot(_ctx.$slots, "footer", {
columns: $props.columns,
columnGroup: $props.footerColumnGroup
})
])
], 512)
], 512)
], 6))
}
script$1.render = render$1;
var script$2 = {
inheritAttrs: false,
emits: ['change'],
props: {
checked: null
},
data() {
return {
focused: false
};
},
methods: {
onClick(event) {
if (!this.$attrs.disabled) {
this.focused = true;
this.$emit('change', event);
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
}
};
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: "p-checkbox p-component",
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
}, [
createVNode("div", {
ref: "box",
class: ['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
role: "checkbox",
"aria-checked": $props.checked,
tabindex: _ctx.$attrs.disabled ? null : '0',
onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
}, [
createVNode("span", {
class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
}, null, 2)
], 42, ["aria-checked", "tabindex"])
], 32))
}
script$2.render = render$2;
var script$3 = {
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'column-click'],
props: {
columnGroup: {
type: null,
default: null
},
columns: {
type: null,
default: null
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array,String],
default: null
},
resizableColumns: {
type: Boolean,
default: false
},
allRowsSelected: {
type: Boolean,
default: false
},
empty: {
type: Boolean,
default: false
},
sortMode: {
type: String,
default: 'single'
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
multiSortMeta: {
type: Array,
default: null
}
},
methods: {
columnProp(col, prop) {
return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
},
isMultiSorted(column) {
return this.columnProp(column, 'sortable') && this.getMultiSortMetaIndex(column) > -1
},
isColumnSorted(column) {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'))) : this.isMultiSorted(column);
},
getColumnHeaderClass(column) {
return [this.columnProp(column, 'headerClass'),
{'p-sortable-column': this.columnProp(column, 'sortable')},
{'p-resizable-column': this.resizableColumns},
{'p-highlight': this.isColumnSorted(column)}
];
},
getFilterColumnHeaderClass(column) {
return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
},
getSortableColumnIcon(column) {
let sorted = false;
let sortOrder = null;
if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'));
sortOrder = sorted ? this.sortOrder: 0;
}
else if (this.sortMode === 'multiple') {
let metaIndex = this.getMultiSortMetaIndex(column);
if (metaIndex > -1) {
sorted = true;
sortOrder = this.multiSortMeta[metaIndex].order;
}
}
return [
'p-sortable-column-icon pi pi-fw', {
'pi-sort-alt': !sorted,
'pi-sort-amount-up-alt': sorted && sortOrder > 0,
'pi-sort-amount-down': sorted && sortOrder < 0
}
];
},
getMultiSortMetaIndex(column) {
let index = -1;
for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i];
if (meta.field === this.columnProp(column, 'field') || meta.field === this.columnProp(column, 'sortField')) {
index = i;
break;
}
}
return index;
},
onColumnHeaderClick(event, col) {
this.$emit('column-click', {originalEvent: event, column: col});
},
onColumnHeaderMouseDown(event, col) {
this.$emit('column-mousedown', {originalEvent: event, column: col});
},
onColumnHeaderDragStart(event) {
this.$emit('column-dragstart', event);
},
onColumnHeaderDragOver(event) {
this.$emit('column-dragover', event);
},
onColumnHeaderDragLeave(event) {
this.$emit('column-dragleave', event);
},
onColumnHeaderDrop(event) {
this.$emit('column-drop', event);
},
onColumnResizeStart(event) {
this.$emit('column-resizestart', event);
},
onHeaderCheckboxChange(event) {
this.$emit('checkbox-change', event);
},
onColumnKeyDown(event, col) {
if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
this.$emit('column-click', {originalEvent: event, column: col});
}
},
getAriaSort(column) {
if (this.columnProp(column, 'sortable')) {
const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-amount-down'])
return 'descending';
else if (sortIcon[1]['pi-sort-amount-up-alt'])
return 'ascending';
else
return 'none';
}
else {
return null;
}
},
hasColumnFilter() {
if (this.columns) {
for (let col of this.columns) {
if (col.children && col.children.filter) {
return true;
}
}
}
return false;
}
},
components: {
'DTHeaderCheckbox': script$2
}
};
const _hoisted_1$2 = { class: "p-datatable-thead" };
const _hoisted_2$1 = {
key: 2,
class: "p-column-title"
};
const _hoisted_3$1 = {
key: 4,
class: "p-sortable-column-badge"
};
const _hoisted_4$1 = { key: 0 };
const _hoisted_5$1 = {
key: 1,
class: "p-column-title"
};
const _hoisted_6$1 = {
key: 3,
class: "p-sortable-column-badge"
};
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
return (openBlock(), createBlock("thead", _hoisted_1$2, [
(!$props.columnGroup)
? (openBlock(), createBlock(Fragment, { key: 0 }, [
createVNode("tr", null, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock(Fragment, null, [
($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field')))
? (openBlock(), createBlock("th", {
tabindex: $options.columnProp(col, 'sortable') ? '0' : null,
onKeydown: $event => ($options.onColumnKeyDown($event, col)),
key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i,
style: $options.columnProp(col, 'headerStyle'),
class: $options.getColumnHeaderClass(col),
onClick: $event => ($options.onColumnHeaderClick($event, col)),
onMousedown: $event => ($options.onColumnHeaderMouseDown($event, col)),
onDragstart: _cache[3] || (_cache[3] = $event => ($options.onColumnHeaderDragStart($event))),
onDragover: _cache[4] || (_cache[4] = $event => ($options.onColumnHeaderDragOver($event))),
onDragleave: _cache[5] || (_cache[5] = $event => ($options.onColumnHeaderDragLeave($event))),
onDrop: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDrop($event))),
colspan: $options.columnProp(col, 'colspan'),
rowspan: $options.columnProp(col, 'rowspan'),
"aria-sort": $options.getAriaSort(col)
}, [
($props.resizableColumns)
? (openBlock(), createBlock("span", {
key: 0,
class: "p-column-resizer",
onMousedown: _cache[1] || (_cache[1] = $event => ($options.onColumnResizeStart($event)))
}, null, 32))
: createCommentVNode("", true),
(col.children && col.children.header)
? (openBlock(), createBlock(resolveDynamicComponent(col.children.header), {
key: 1,
column: col
}, null, 8, ["column"]))
: createCommentVNode("", true),
($options.columnProp(col, 'header'))
? (openBlock(), createBlock("span", _hoisted_2$1, toDisplayString($options.columnProp(col, 'header')), 1))
: createCommentVNode("", true),
($options.columnProp(col, 'sortable'))
? (openBlock(), createBlock("span", {
key: 3,
class: $options.getSortableColumnIcon(col)
}, null, 2))
: createCommentVNode("", true),
($options.isMultiSorted(col))
? (openBlock(), createBlock("span", _hoisted_3$1, toDisplayString($options.getMultiSortMetaIndex(col) + 1), 1))
: createCommentVNode("", true),
($options.columnProp(col, 'selectionMode') ==='multiple' && !$options.hasColumnFilter())
? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
key: 5,
checked: $props.allRowsSelected,
onChange: _cache[2] || (_cache[2] = $event => ($options.onHeaderCheckboxChange($event))),
disabled: $props.empty
}, null, 8, ["checked", "disabled"]))
: createCommentVNode("", true)
], 46, ["tabindex", "onKeydown", "onClick", "onMousedown", "colspan", "rowspan", "aria-sort"]))
: createCommentVNode("", true)
], 64))
}), 256))
]),
($options.hasColumnFilter())
? (openBlock(), createBlock("tr", _hoisted_4$1, [
(openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
return (openBlock(), createBlock(Fragment, null, [
($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field')))
? (openBlock(), createBlock("th", {
key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i,
class: $options.getFilterColumnHeaderClass(col),
style: $options.columnProp(col, 'filterHeaderStyle')
}, [
(col.children && col.children.filter)
? (openBlock(), createBlock(resolveDynamicComponent(col.children.filter), {
key: 0,
column: col
}, null, 8, ["column"]))
: createCommentVNode("", true),
($options.columnProp(col, 'selectionMode')==='multiple')
? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
key: 1,
checked: $props.allRowsSelected,
onChange: _cache[7] || (_cache[7] = $event => ($options.onHeaderCheckboxChange($event))),
disabled: $props.empty
}, null, 8, ["checked", "disabled"]))
: createCommentVNode("", true)
], 6))
: createCommentVNode("", true)
], 64))
}), 256))
]))
: createCommentVNode("", true)
], 64))
: (openBlock(true), createBlock(Fragment, { key: 1 }, renderList($props.columnGroup.children.default(), (row, i) => {
return (openBlock(), createBlock("tr", { key: i }, [
(openBlock(true), createBlock(Fragment, null, renderList(row.children.default(), (col, i) => {
return (openBlock(), createBlock("th", {
key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i,
style: $options.columnProp(col, 'headerStyle'),
class: $options.getColumnHeaderClass(col),
tabindex: $options.columnProp(col, 'sortable') ? '0' : null,
onClick: $event => ($options.onColumnHeaderClick($event, col)),
onKeydown: $event => ($options.onColumnKeyDown($event, col)),
onDragstart: _cache[9] || (_cache[9] = $event => ($options.onColumnHeaderDragStart($event))),
onDragover: _cache[10] || (_cache[10] = $event => ($options.onColumnHeaderDragOver($event))),
onDragleave: _cache[11] || (_cache[11] = $event => ($options.onColumnHeaderDragLeave($event))),
onDrop: _cache[12] || (_cache[12] = $event => ($options.onColumnHeaderDrop($event))),
colspan: $options.columnProp(col, 'colspan'),
rowspan: $options.columnProp(col, 'rowspan'),
"aria-sort": $options.getAriaSort(col)
}, [
(col.children && col.children.header)
? (openBlock(), createBlock(resolveDynamicComponent(col.children.header), {
key: 0,
column: col
}, null, 8, ["column"]))
: createCommentVNode("", true),
($options.columnProp(col, 'header'))
? (openBlock(), createBlock("span", _hoisted_5$1, toDisplayString($options.columnProp(col, 'header')), 1))
: createCommentVNode("", true),
($options.columnProp(col, 'sortable'))
? (openBlock(), createBlock("span", {
key: 2,
class: $options.getSortableColumnIcon(col)
}, null, 2))
: createCommentVNode("", true),
($options.isMultiSorted(col))
? (openBlock(), createBlock("span", _hoisted_6$1, toDisplayString($options.getMultiSortMetaIndex(col) + 1), 1))
: createCommentVNode("", true),
(col.children && col.children.filter)
? (openBlock(), createBlock(resolveDynamicComponent(col.children.filter), {
key: 4,
column: col
}, null, 8, ["column"]))
: createCommentVNode("", true),
($options.columnProp(col, 'selectionMode') ==='multiple')
? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
key: 5,
checked: $props.allRowsSelected,
onChange: _cache[8] || (_cache[8] = $event => ($options.onHeaderCheckboxChange($event))),
disabled: $props.empty
}, null, 8, ["checked", "disabled"]))
: createCommentVNode("", true)
], 46, ["tabindex", "onClick", "onKeydown", "colspan", "rowspan", "aria-sort"]))
}), 128))
]))
}), 128))
]))
}
script$3.render = render$3;
var script$4 = {
inheritAttrs: false,
emits: ['change'],
props: {
value: null,
checked: null
},
data() {
return {
focused: false
};
},
methods: {
onClick(event) {
if (!this.disabled) {
if (!this.checked) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
}
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
}
};
const _hoisted_1$3 = /*#__PURE__*/createVNode("div", { class: "p-radiobutton-icon" }, null, -1);
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: "p-radiobutton p-component",
onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
tabindex: "0",
onFocus: _cache[2] || (_cache[2] = $event => ($options.onFocus($event))),
onBlur: _cache[3] || (_cache[3] = $event => ($options.onBlur($event)))
}, [
createVNode("div", {
ref: "box",
class: ['p-radiobutton-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
role: "radio",
"aria-checked": $props.checked
}, [
_hoisted_1$3
], 10, ["aria-checked"])
], 32))
}
script$4.render = render$4;
var script$5 = {
inheritAttrs: false,
emits: ['change'],
props: {
value: null,
checked: null
},
data() {
return {
focused: false
};
},
methods: {
onClick(event) {
if (!this.$attrs.disabled) {
this.focused = true;
this.$emit('change', {
originalEvent: event,
data: this.value
});
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
}
};
function render$5(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", {
class: "p-checkbox p-component",
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
}, [
createVNode("div", {
ref: "box",
class: ['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
role: "checkbox",
"aria-checked": $props.checked,
tabindex: _ctx.$attrs.disabled ? null : '0',
onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
}, [
createVNode("span", {
class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
}, null, 2)
], 42, ["aria-checked", "tabindex"])
], 32))
}
script$5.render = render$5;
var script$6 = {
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'],
props: {
rowData: {
type: Object,
default: null
},
column: {
type: Object,
default: null
},
index: {
type: Number,
default: null
},
rowTogglerIcon: {
type: Array,
default: null
},
selected: {
type: Boolean,
default: false
},
editing: {
type: Boolean,
default: false
},
editMode: {
type: String,
default: null
}
},
documentEditListener: null,
selfClick: false,
data() {
return {
d_editing: this.editing
}
},
watch: {
editing(newValue) {
this.d_editing = newValue;
}
},
mounted() {
this.children = this.$children;
},
updated() {
let query = this.editMode === 'row' ? '[autofocus]' : 'input';
let focusable = DomHandler.findSingle(this.$el, query);
if (focusable && document.activeElement != focusable) {
focusable.focus();
}
},
methods: {
columnProp(prop) {
return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
},
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
},
toggleRow(event) {
this.$emit('row-toggle', {
originalEvent: event,
data: this.rowData
});
},
toggleRowWithRadio(event) {
this.$emit('radio-change', event);
},
toggleRowWithCheckbox(event) {
this.$emit('checkbox-change', event);
},
isEditable() {
return this.column.children && this.column.children.editor != null;
},
bindDocumentEditListener() {
if (!this.documentEditListener) {
this.documentEditListener = (event) => {
if (this.isOutsideClicked()) {
this.completeEdit(event, 'outside');
}
this.selfClick = false;
};
document.addEventListener('click', this.documentEditListener);
}
},
unbindDocumentEditListener() {
if (this.documentEditListener) {
document.removeEventListener('click', this.documentEditListener);
this.documentEditListener = null;
this.selfClick = false;
}
},
switchCellToViewMode() {
this.d_editing = false;
this.unbindDocumentEditListener();
},
isOutsideClicked() {
return !this.selfClick;
},
onClick(event) {
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.columnProp('field'), index: this.index});
}
}
},
completeEdit(event, type) {
let completeEvent = {
originalEvent: event,
data: this.rowData,
field: this.columnProp('field'),
index: this.index,
type: type,
defaultPrevented: false,
preventDefault: function() {
this.defaultPrevented = true;
}
};
this.$emit('cell-edit-complete', completeEvent);
if (!completeEvent.defaultPrevented) {
this.switchCellToViewMode();
}
},
onKeyDown(event) {
if (this.editMode === 'cell') {
switch (event.which) {
case 13:
this.completeEdit(event, 'enter');
break;
case 27:
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
break;
case 9:
this.completeEdit(event, 'tab');
if (event.shiftKey)
this.moveToPreviousCell(event);
else
this.moveToNextCell(event);
break;
}
}
},
moveToPreviousCell(event) {
let currentCell = this.findCell(event.target);
let targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
moveToNextCell(event) {
let currentCell = this.findCell(event.target);
let targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
findCell(element) {
if (element) {
let cell = element;
while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
cell = cell.parentElement;
}
return cell;
}
else {
return null;
}
},
findPreviousEditableColumn(cell) {
let prevCell = cell.previousElementSibling;
if (!prevCell) {
let previousRow = cell.parentElement.previousElementSibling;
if (previousRow) {
prevCell = previousRow.lastElementChild;
}
}
if (prevCell) {
if (DomHandler.hasClass(prevCell, 'p-editable-column'))
return prevCell;
else
return this.findPreviousEditableColumn(prevCell);
}
else {
return null;
}
},
findNextEditableColumn(cell) {
let nextCell = cell.nextElementSibling;
if (!nextCell) {
let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
nextCell = nextRow.firstElementChild;
}
}
if (nextCell) {
if (DomHandler.hasClass(nextCell, 'p-editable-column'))
return nextCell;
else
return this.findNextEditableColumn(nextCell);
}
else {
return null;
}
},
isEditingCellValid() {
return (DomHandler.find(this.$el, '.p-invalid').length === 0);
},
onRowEditInit(event) {
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
},
onRowEditSave(event) {
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
},
onRowEditCancel(event) {
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
}
},
computed: {
containerClass() {
return [this.columnProp('bodyClass'), {
'p-selection-column': this.columnProp('selectionMode') != null,
'p-editable-column': this.isEditable(),
'p-cell-editing': this.d_editing
}];
}
},
components: {
'DTRadioButton': script$4,
'DTCheckbox': script$5
},
directives: {
'ripple': Ripple
}
};
const _hoisted_1$4 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
const _hoisted_2$2 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
const _hoisted_3$2 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
function render$6(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DTRadioButton = resolveComponent("DTRadioButton");
const _component_DTCheckbox = resolveComponent("DTCheckbox");
const _directive_ripple = resolveDirective("ripple");
return (openBlock(), createBlock("td", {
style: $options.columnProp('bodyStyle'),
class: $options.containerClass,
onClick: _cache[5] || (_cache[5] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
}, [
($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,
index: $props.index
}, null, 8, ["data", "column", "index"]))
: ($props.column.children && $props.column.children.editor && $data.d_editing)
? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.editor), {
key: 1,
data: $props.rowData,
column: $props.column,
index: $props.index
}, null, 8, ["data", "column", "index"]))
: ($options.columnProp('selectionMode'))
? (openBlock(), createBlock(Fragment, { key: 2 }, [
($props.column.props.selectionMode === 'single')
? (openBlock(), createBlock(_component_DTRadioButton, {
key: 0,
value: $props.rowData,
checked: $props.selected,
onChange: $options.toggleRowWithRadio
}, null, 8, ["value", "checked", "onChange"]))
: ($props.column.props.selectionMode ==='multiple')
? (openBlock(), createBlock(_component_DTCheckbox, {
key: 1,
value: $props.rowData,
checked: $props.selected,
onChange: $options.toggleRowWithCheckbox
}, null, 8, ["value", "checked", "onChange"]))
: createCommentVNode("", true)
], 64))
: ($options.columnProp('rowReorder'))
? (openBlock(), createBlock("i", {
key: 3,
class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
}, null, 2))
: ($options.columnProp('expander'))
? withDirectives((openBlock(), createBlock("button", {
key: 4,
class: "p-row-toggler p-link",
onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
type: "button"
}, [
createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
], 512)), [
[_directive_ripple]
])
: ($props.editMode === 'row' && $options.columnProp('rowEditor'))
? (openBlock(), createBlock(Fragment, { key: 5 }, [
(!$data.d_editing)
? withDirectives((openBlock(), createBlock("button", {
key: 0,
class: "p-row-editor-init p-link",
onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
type: "button"
}, [
_hoisted_1$4
], 512)), [
[_directive_ripple]
])
: createCommentVNode("", true),
($data.d_editing)
? withDirectives((openBlock(), createBlock("button", {
key: 1,
class: "p-row-editor-save p-link",
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
type: "button"
}, [
_hoisted_2$2
], 512)), [
[_directive_ripple]
])
: createCommentVNode("", true),
($data.d_editing)
? withDirectives((openBlock(), createBlock("button", {
key: 2,
class: "p-row-editor-cancel p-link",
onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
type: "button"
}, [
_hoisted_3$2
], 512)), [
[_directive_ripple]
])
: createCommentVNode("", true)
], 64))
: (openBlock(), createBlock(Fragment, { key: 6 }, [
createTextVNode(toDisplayString($options.resolveFieldData()), 1)
], 64))
], 38))
}
script$6.render = render$6;
var script$7 = {
emits: ['rowgroup-toggle', 'row-click', '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'],
props: {
value: {
type: Array,
default: null
},
columns: {
type: null,
default: null
},
empty: {
type: Boolean,
default: false
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array,String],
default: null
},
expandableRowGroups: {
type: Boolean,
default: false
},
expandedRowGroups: {
type: Array,
default: null
},
dataKey: {
type: String,
default: null
},
expandedRowIcon: {
type: String,
default: null
},
collapsedRowIcon: {
type: String,
default: null
},
expandedRows: {
type: Array,
default: null
},
expandedRowKeys: {
type: null,
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
},
editMode: {
type: String,
default: null
},
compareSelectionBy: {
type: String,
default: 'deepEquals'
},
editingRows: {
type: Array,
default: null
},
editingRowKeys: {
type: null,
default: null
},
loading: {
type: Boolean