primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 87.3 kB
JavaScript
this.primevue = this.primevue || {};
this.primevue.treetable = (function (api, Paginator, utils, vue, Ripple) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
var script$4 = {
name: 'FooterCell',
props: {
column: {
type: Object,
default: null
}
},
data() {
return {
styleObject: {}
};
},
mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
}
},
computed: {
containerClass() {
return [
this.columnProp('footerClass'),
this.columnProp('class'),
{
'p-frozen-column': this.columnProp('frozen')
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('footerStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
}
}
};
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createElementBlock("td", {
style: vue.normalizeStyle($options.containerStyle),
class: vue.normalizeClass($options.containerClass)
}, [
($props.column.children && $props.column.children.footer)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
key: 0,
column: $props.column
}, null, 8, ["column"]))
: vue.createCommentVNode("", true),
vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)
], 6))
}
script$4.render = render$4;
var script$3 = {
name: 'HeaderCell',
emits: ['column-click', 'column-resizestart'],
props: {
column: {
type: Object,
default: null
},
resizableColumns: {
type: Boolean,
default: false
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
multiSortMeta: {
type: Array,
default: null
},
sortMode: {
type: String,
default: 'single'
}
},
data() {
return {
styleObject: {}
};
},
mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
let filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) {
let index = utils.DomHandler.index(this.$el);
filterRow.children[index].style.left = this.styleObject.left;
filterRow.children[index].style.right = this.styleObject.right;
}
}
},
onClick(event) {
this.$emit('column-click', { originalEvent: event, column: this.column });
},
onKeyDown(event) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && utils.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
this.$emit('column-click', { originalEvent: event, column: this.column });
event.preventDefault();
}
},
onResizeStart(event) {
this.$emit('column-resizestart', event);
},
getMultiSortMetaIndex() {
let index = -1;
for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i];
if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
index = i;
break;
}
}
return index;
},
isMultiSorted() {
return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
},
isColumnSorted() {
return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
}
},
computed: {
containerClass() {
return [
this.columnProp('headerClass'),
this.columnProp('class'),
{
'p-sortable-column': this.columnProp('sortable'),
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-frozen-column': this.columnProp('frozen')
}
];
},
containerStyle() {
let headerStyle = this.columnProp('headerStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
},
sortableColumnIcon() {
let sorted = false;
let sortOrder = null;
if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
sortOrder = sorted ? this.sortOrder : 0;
} else if (this.sortMode === 'multiple') {
let metaIndex = this.getMultiSortMetaIndex();
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
}
];
},
ariaSort() {
if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon;
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;
}
}
}
};
const _hoisted_1$3 = ["tabindex", "aria-sort"];
const _hoisted_2$2 = {
key: 2,
class: "p-column-title"
};
const _hoisted_3$1 = {
key: 4,
class: "p-sortable-column-badge"
};
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createElementBlock("th", {
style: vue.normalizeStyle([$options.containerStyle]),
class: vue.normalizeClass($options.containerClass),
onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
tabindex: $options.columnProp('sortable') ? '0' : null,
"aria-sort": $options.ariaSort,
role: "columnheader"
}, [
($props.resizableColumns && !$options.columnProp('frozen'))
? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: "p-column-resizer",
onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
}, null, 32))
: vue.createCommentVNode("", true),
($props.column.children && $props.column.children.header)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.header), {
key: 1,
column: $props.column
}, null, 8, ["column"]))
: vue.createCommentVNode("", true),
($options.columnProp('header'))
? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString($options.columnProp('header')), 1))
: vue.createCommentVNode("", true),
($options.columnProp('sortable'))
? (vue.openBlock(), vue.createElementBlock("span", {
key: 3,
class: vue.normalizeClass($options.sortableColumnIcon)
}, null, 2))
: vue.createCommentVNode("", true),
($options.isMultiSorted())
? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 1))
: vue.createCommentVNode("", true)
], 46, _hoisted_1$3))
}
script$3.render = render$3;
var script$2 = {
name: 'BodyCell',
emits: ['node-toggle', 'checkbox-toggle'],
props: {
node: {
type: Object,
default: null
},
column: {
type: Object,
default: null
},
level: {
type: Number,
default: 0
},
indentation: {
type: Number,
default: 1
},
leaf: {
type: Boolean,
default: false
},
expanded: {
type: Boolean,
default: false
},
selectionMode: {
type: String,
default: null
},
checked: {
type: Boolean,
default: false
},
partialChecked: {
type: Boolean,
default: false
}
},
data() {
return {
styleObject: {},
checkboxFocused: false
};
},
mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
toggle() {
this.$emit('node-toggle', this.node);
},
columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
},
resolveFieldData(rowData, field) {
return utils.ObjectUtils.resolveFieldData(rowData, field);
},
toggleCheckbox() {
this.$emit('checkbox-toggle');
},
onCheckboxFocus() {
this.checkboxFocused = true;
},
onCheckboxBlur() {
this.checkboxFocused = false;
}
},
computed: {
containerClass() {
return [
this.columnProp('bodyClass'),
this.columnProp('class'),
{
'p-frozen-column': this.columnProp('frozen')
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('bodyStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
},
togglerStyle() {
return {
marginLeft: this.level * this.indentation + 'rem',
visibility: this.leaf ? 'hidden' : 'visible'
};
},
togglerIcon() {
return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
},
checkboxSelectionMode() {
return this.selectionMode === 'checkbox';
},
checkboxClass() {
return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
},
checkboxIcon() {
return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
}
},
directives: {
ripple: Ripple__default["default"]
}
};
const _hoisted_1$2 = { class: "p-hidden-accessible" };
const _hoisted_2$1 = { key: 3 };
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_ripple = vue.resolveDirective("ripple");
return (vue.openBlock(), vue.createElementBlock("td", {
style: vue.normalizeStyle($options.containerStyle),
class: vue.normalizeClass($options.containerClass),
role: "cell"
}, [
($options.columnProp('expander'))
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
class: "p-treetable-toggler p-link",
onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
style: vue.normalizeStyle($options.togglerStyle),
tabindex: "-1"
}, [
vue.createElementVNode("i", {
class: vue.normalizeClass($options.togglerIcon)
}, null, 2)
], 4)), [
[_directive_ripple]
])
: vue.createCommentVNode("", true),
($options.checkboxSelectionMode && $options.columnProp('expander'))
? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': $data.checkboxFocused }]),
onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleCheckbox && $options.toggleCheckbox(...args)))
}, [
vue.createElementVNode("div", _hoisted_1$2, [
vue.createElementVNode("input", {
type: "checkbox",
onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onCheckboxFocus && $options.onCheckboxFocus(...args))),
onBlur: _cache[2] || (_cache[2] = (...args) => ($options.onCheckboxBlur && $options.onCheckboxBlur(...args))),
tabindex: "-1"
}, null, 32)
]),
vue.createElementVNode("div", {
ref: "checkboxEl",
class: vue.normalizeClass($options.checkboxClass)
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass($options.checkboxIcon)
}, null, 2)
], 2)
], 2))
: vue.createCommentVNode("", true),
($props.column.children && $props.column.children.body)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
key: 2,
node: $props.node,
column: $props.column
}, null, 8, ["node", "column"]))
: (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 1))
], 6))
}
script$2.render = render$2;
var script$1 = {
name: 'TreeTableRow',
emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
props: {
node: {
type: null,
default: null
},
parentNode: {
type: null,
default: null
},
columns: {
type: null,
default: null
},
expandedKeys: {
type: null,
default: null
},
selectionKeys: {
type: null,
default: null
},
selectionMode: {
type: String,
default: null
},
level: {
type: Number,
default: 0
},
indentation: {
type: Number,
default: 1
},
tabindex: {
type: Number,
default: -1
},
ariaSetSize: {
type: Number,
default: null
},
ariaPosInset: {
type: Number,
default: null
}
},
nodeTouched: false,
methods: {
columnProp(col, prop) {
return utils.ObjectUtils.getVNodeProp(col, prop);
},
toggle() {
this.$emit('node-toggle', this.node);
},
onClick(event) {
if (utils.DomHandler.isClickable(event.target) || utils.DomHandler.hasClass(event.target, 'p-treetable-toggler') || utils.DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
return;
}
this.setTabIndexForSelectionMode(event, this.nodeTouched);
this.$emit('node-click', {
originalEvent: event,
nodeTouched: this.nodeTouched,
node: this.node
});
this.nodeTouched = false;
},
onTouchEnd() {
this.nodeTouched = true;
},
onKeyDown(event, item) {
switch (event.code) {
case 'ArrowDown':
this.onArrowDownKey(event);
break;
case 'ArrowUp':
this.onArrowUpKey(event);
break;
case 'ArrowLeft':
this.onArrowLeftKey(event);
break;
case 'ArrowRight':
this.onArrowRightKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
case 'Enter':
case 'Space':
this.onEnterKey(event, item);
break;
case 'Tab':
this.onTabKey(event);
break;
}
},
onArrowDownKey(event) {
const nextElementSibling = event.currentTarget.nextElementSibling;
nextElementSibling && this.focusRowChange(event.currentTarget, nextElementSibling);
event.preventDefault();
},
onArrowUpKey(event) {
const previousElementSibling = event.currentTarget.previousElementSibling;
previousElementSibling && this.focusRowChange(event.currentTarget, previousElementSibling);
event.preventDefault();
},
onArrowRightKey(event) {
const ishiddenIcon = utils.DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
const togglerElement = utils.DomHandler.findSingle(this.$refs.node, '.p-treetable-toggler');
if (ishiddenIcon) return;
!this.expanded && togglerElement.click();
this.$nextTick(() => {
this.onArrowDownKey(event);
});
event.preventDefault();
},
onArrowLeftKey(event) {
if (this.level === 0 && !this.expanded) {
return;
}
const currentTarget = event.currentTarget;
const ishiddenIcon = utils.DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
const togglerElement = utils.DomHandler.findSingle(currentTarget, '.p-treetable-toggler');
if (this.expanded && !ishiddenIcon) {
togglerElement.click();
return;
}
const target = this.findBeforeClickableNode(currentTarget);
target && this.focusRowChange(currentTarget, target);
},
onHomeKey(event) {
const findFirstElement = utils.DomHandler.findSingle(event.currentTarget.parentElement, `tr[aria-level="${this.level + 1}"]`);
findFirstElement && utils.DomHandler.focus(findFirstElement);
event.preventDefault();
},
onEndKey(event) {
const nodes = utils.DomHandler.find(event.currentTarget.parentElement, `tr[aria-level="${this.level + 1}"]`);
const findFirstElement = nodes[nodes.length - 1];
utils.DomHandler.focus(findFirstElement);
event.preventDefault();
},
onEnterKey(event) {
event.preventDefault();
this.setTabIndexForSelectionMode(event, this.nodeTouched);
if (this.selectionMode === 'checkbox') {
this.toggleCheckbox();
return;
}
this.$emit('node-click', {
originalEvent: event,
nodeTouched: this.nodeTouched,
node: this.node
});
this.nodeTouched = false;
},
onTabKey() {
const rows = [...utils.DomHandler.find(this.$refs.node.parentElement, 'tr')];
const hasSelectedRow = rows.some((row) => utils.DomHandler.hasClass(row, 'p-highlight') || row.getAttribute('aria-checked') === 'true');
rows.forEach((row) => {
row.tabIndex = -1;
});
if (hasSelectedRow) {
const selectedNodes = rows.filter((node) => utils.DomHandler.hasClass(node, 'p-highlight') || node.getAttribute('aria-checked') === 'true');
selectedNodes[0].tabIndex = 0;
return;
}
rows[0].tabIndex = 0;
},
focusRowChange(firstFocusableRow, currentFocusedRow) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
utils.DomHandler.focus(currentFocusedRow);
},
findBeforeClickableNode(node) {
const prevNode = node.previousElementSibling;
if (prevNode) {
const prevNodeButton = prevNode.querySelector('button');
if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
return prevNode;
}
return this.findBeforeClickableNode(prevNode);
}
return null;
},
toggleCheckbox() {
let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
const _check = !this.checked;
this.propagateDown(this.node, _check, _selectionKeys);
this.$emit('checkbox-change', {
node: this.node,
check: _check,
selectionKeys: _selectionKeys
});
},
propagateDown(node, check, selectionKeys) {
if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
else delete selectionKeys[node.key];
if (node.children && node.children.length) {
for (let child of node.children) {
this.propagateDown(child, check, selectionKeys);
}
}
},
propagateUp(event) {
let check = event.check;
let _selectionKeys = { ...event.selectionKeys };
let checkedChildCount = 0;
let childPartialSelected = false;
for (let child of this.node.children) {
if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.node.key] = { checked: true, partialChecked: false };
} else {
if (!check) {
delete _selectionKeys[this.node.key];
}
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
}
this.$emit('checkbox-change', {
node: event.node,
check: event.check,
selectionKeys: _selectionKeys
});
},
onCheckboxChange(event) {
let check = event.check;
let _selectionKeys = { ...event.selectionKeys };
let checkedChildCount = 0;
let childPartialSelected = false;
for (let child of this.node.children) {
if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.node.key] = { checked: true, partialChecked: false };
} else {
if (!check) {
delete _selectionKeys[this.node.key];
}
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
}
this.$emit('checkbox-change', {
node: event.node,
check: event.check,
selectionKeys: _selectionKeys
});
},
setTabIndexForSelectionMode(event, nodeTouched) {
if (this.selectionMode !== null) {
const elements = [...utils.DomHandler.find(this.$refs.node.parentElement, 'tr')];
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
if (elements.every((element) => element.tabIndex === -1)) {
elements[0].tabIndex = 0;
}
}
}
},
computed: {
containerClass() {
return [
this.node.styleClass,
{
'p-highlight': this.selected
}
];
},
expanded() {
return this.expandedKeys && this.expandedKeys[this.node.key] === true;
},
leaf() {
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
},
selected() {
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
},
checked() {
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
},
partialChecked() {
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
},
getAriaSelected() {
return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
}
},
components: {
TTBodyCell: script$2
}
};
const _hoisted_1$1 = ["tabindex", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset", "aria-selected", "aria-checked"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_TTBodyCell = vue.resolveComponent("TTBodyCell");
const _component_TreeTableRow = vue.resolveComponent("TreeTableRow", true);
return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createElementVNode("tr", {
ref: "node",
class: vue.normalizeClass($options.containerClass),
style: vue.normalizeStyle($props.node.style),
tabindex: $props.tabindex,
role: "row",
"aria-expanded": $options.expanded,
"aria-level": $props.level + 1,
"aria-setsize": $props.ariaSetSize,
"aria-posinset": $props.ariaPosInset,
"aria-selected": $options.getAriaSelected,
"aria-checked": $options.checked || undefined,
onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
onTouchend: _cache[3] || (_cache[3] = (...args) => ($options.onTouchEnd && $options.onTouchEnd(...args)))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
}, [
(!$options.columnProp(col, 'hidden'))
? (vue.openBlock(), vue.createBlock(_component_TTBodyCell, {
key: 0,
column: col,
node: $props.node,
level: $props.level,
leaf: $options.leaf,
indentation: $props.indentation,
expanded: $options.expanded,
selectionMode: $props.selectionMode,
checked: $options.checked,
partialChecked: $options.partialChecked,
onNodeToggle: _cache[0] || (_cache[0] = $event => (_ctx.$emit('node-toggle', $event))),
onCheckboxToggle: $options.toggleCheckbox
}, null, 8, ["column", "node", "level", "leaf", "indentation", "expanded", "selectionMode", "checked", "partialChecked", "onCheckboxToggle"]))
: vue.createCommentVNode("", true)
], 64))
}), 128))
], 46, _hoisted_1$1),
($options.expanded && $props.node.children && $props.node.children.length)
? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($props.node.children, (childNode) => {
return (vue.openBlock(), vue.createBlock(_component_TreeTableRow, {
key: childNode.key,
columns: $props.columns,
node: childNode,
parentNode: $props.node,
level: $props.level + 1,
expandedKeys: $props.expandedKeys,
selectionMode: $props.selectionMode,
selectionKeys: $props.selectionKeys,
indentation: $props.indentation,
ariaPosInset: $props.node.children.indexOf(childNode) + 1,
ariaSetSize: $props.node.children.length,
onNodeToggle: _cache[4] || (_cache[4] = $event => (_ctx.$emit('node-toggle', $event))),
onNodeClick: _cache[5] || (_cache[5] = $event => (_ctx.$emit('node-click', $event))),
onCheckboxChange: $options.onCheckboxChange
}, null, 8, ["columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "onCheckboxChange"]))
}), 128))
: vue.createCommentVNode("", true)
], 64))
}
script$1.render = render$1;
var script = {
name: 'TreeTable',
emits: [
'node-expand',
'node-collapse',
'update:expandedKeys',
'update:selectionKeys',
'node-select',
'node-unselect',
'update:first',
'update:rows',
'page',
'update:sortField',
'update:sortOrder',
'update:multiSortMeta',
'sort',
'filter',
'column-resize-end'
],
props: {
value: {
type: null,
default: null
},
expandedKeys: {
type: null,
default: null
},
selectionKeys: {
type: null,
default: null
},
selectionMode: {
type: String,
default: null
},
metaKeySelection: {
type: Boolean,
default: true
},
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: 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: 'pi pi-spinner'
},
rowHover: {
type: Boolean,
default: false
},
autoLayout: {
type: Boolean,
default: false
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
defaultSortOrder: {
type: Number,
default: 1
},
multiSortMeta: {
type: Array,
default: null
},
sortMode: {
type: String,
default: 'single'
},
removableSort: {
type: Boolean,
default: false
},
filters: {
type: Object,
default: null
},
filterMode: {
type: String,
default: 'lenient'
},
filterLocale: {
type: String,
default: undefined
},
resizableColumns: {
type: Boolean,
default: false
},
columnResizeMode: {
type: String,
default: 'fit'
},
indentation: {
type: Number,
default: 1
},
showGridlines: {
type: Boolean,
default: false
},
scrollable: {
type: Boolean,
default: false
},
scrollDirection: {
type: String,
default: 'vertical'
},
scrollHeight: {
type: String,
default: null
},
responsiveLayout: {
type: String,
default: null
},
tableProps: {
type: Object,
default: null
}
},
documentColumnResizeListener: null,
documentColumnResizeEndListener: null,
lastResizeHelperX: null,
resizeColumnElement: null,
data() {
return {
d_expandedKeys: this.expandedKeys || {},
d_first: this.first,
d_rows: this.rows,
d_sortField: this.sortField,
d_sortOrder: this.sortOrder,
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
hasASelectedNode: false
};
},
watch: {
expandedKeys(newValue) {
this.d_expandedKeys = newValue;
},
first(newValue) {
this.d_first = newValue;
},
rows(newValue) {
this.d_rows = newValue;
},
sortField(newValue) {
this.d_sortField = newValue;
},
sortOrder(newValue) {
this.d_sortOrder = newValue;
},
multiSortMeta(newValue) {
this.d_multiSortMeta = newValue;
}
},
mounted() {
if (this.scrollable && this.scrollDirection !== 'vertical') {
this.updateScrollWidth();
}
},
updated() {
if (this.scrollable && this.scrollDirection !== 'vertical') {
this.updateScrollWidth();
}
},
methods: {
columnProp(col, prop) {
return utils.ObjectUtils.getVNodeProp(col, prop);
},
onNodeToggle(node) {
const key = node.key;
if (this.d_expandedKeys[key]) {
delete this.d_expandedKeys[key];
this.$emit('node-collapse', node);
} else {
this.d_expandedKeys[key] = true;
this.$emit('node-expand', node);
}
this.d_expandedKeys = { ...this.d_expandedKeys };
this.$emit('update:expandedKeys', this.d_expandedKeys);
},
onNodeClick(event) {
if (this.rowSelectionMode && event.node.selectable !== false) {
const metaSelection = event.nodeTouched ? false : this.metaKeySelection;
const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event);
this.$emit('update:selectionKeys', _selectionKeys);
}
},
handleSelectionWithMetaKey(event) {
const originalEvent = event.originalEvent;
const node = event.node;
const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
const selected = this.isNodeSelected(node);
let _selectionKeys;
if (selected && metaKey) {
if (this.isSingleSelectionMode()) {
_selectionKeys = {};
} else {
_selectionKeys = { ...this.selectionKeys };
delete _selectionKeys[node.key];
}
this.$emit('node-unselect', node);
} else {
if (this.isSingleSelectionMode()) {
_selectionKeys = {};
} else if (this.isMultipleSelectionMode()) {
_selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
}
_selectionKeys[node.key] = true;
this.$emit('node-select', node);
}
return _selectionKeys;
},
handleSelectionWithoutMetaKey(event) {
const node = event.node;
const selected = this.isNodeSelected(node);
let _selectionKeys;
if (this.isSingleSelectionMode()) {
if (selected) {
_selectionKeys = {};
this.$emit('node-unselect', node);
} else {
_selectionKeys = {};
_selectionKeys[node.key] = true;
this.$emit('node-select', node);
}
} else {
if (selected) {
_selectionKeys = { ...this.selectionKeys };
delete _selectionKeys[node.key];
this.$emit('node-unselect', node);
} else {
_selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
_selectionKeys[node.key] = true;
this.$emit('node-select', node);
}
}
return _selectionKeys;
},
onCheckboxChange(event) {
this.$emit('update:selectionKeys', event.selectionKeys);
if (event.check) this.$emit('node-select', event.node);
else this.$emit('node-unselect', event.node);
},
isSingleSelectionMode() {
return this.selectionMode === 'single';
},
isMultipleSelectionMode() {
return this.selectionMode === 'multiple';
},
onPage(event) {
this.d_first = event.first;
this.d_rows = event.rows;
let pageEvent = this.createLazyLoadEvent(event);
pageEvent.pageCount = event.pageCount;
pageEvent.page = event.page;
this.$emit('update:first', this.d_first);
this.$emit('update:rows', this.d_rows);
this.$emit('page', pageEvent);
},
resetPage() {
this.d_first = 0;
this.$emit('update:first', this.d_first);
},
getFilterColumnHeaderClass(column) {
return [
'p-filter-column',
this.columnProp(column, 'filterHeaderClass'),
{
'p-frozen-column': this.columnProp(column, 'frozen')
}
];
},
onColumnHeaderClick(e) {
let event = e.originalEvent;
let column = e.column;
if (this.columnProp(column, 'sortable')) {
const targetNode = event.target;
const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if (
utils.DomHandler.hasClass(targetNode, 'p-sortable-column') ||
utils.DomHandler.hasClass(targetNode, 'p-column-title') ||
utils.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
utils.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
) {
utils.DomHandler.clearSelection();
if (this.sortMode === 'single') {
if (this.d_sortField === columnField) {
if (this.removableSort && this.d_sortOrder * -1 === this.defaultSortOrder) {
this.d_sortOrder = null;
this.d_sortField = null;
} else {
this.d_sortOrder = this.d_sortOrder * -1;
}
} else {
this.d_sortOrder = this.defaultSortOrder;
this.d_sortField = columnField;
}
this.$emit('update:sortField', this.d_sortField);
this.$emit('update:sortOrder', this.d_sortOrder);
this.resetPage();
} else if (this.sortMode === 'multiple') {
let metaKey = event.metaKey || event.ctrlKey;
if (!metaKey) {
this.d_multiSor