primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 89.5 kB
JavaScript
'use strict';
var api = require('primevue/api');
var BaseComponent = require('primevue/basecomponent');
var SpinnerIcon = require('primevue/icons/spinner');
var Paginator = require('primevue/paginator');
var utils = require('primevue/utils');
var vue = require('vue');
var SortAltIcon = require('primevue/icons/sortalt');
var SortAmountDownIcon = require('primevue/icons/sortamountdown');
var SortAmountUpAltIcon = require('primevue/icons/sortamountupalt');
var CheckIcon = require('primevue/icons/check');
var ChevronDownIcon = require('primevue/icons/chevrondown');
var ChevronRightIcon = require('primevue/icons/chevronright');
var MinusIcon = require('primevue/icons/minus');
var Ripple = require('primevue/ripple');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
var MinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(MinusIcon);
var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
var script$4 = {
name: 'FooterCell',
extends: BaseComponent__default["default"],
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);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
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", vue.mergeProps({
style: $options.containerStyle,
class: $options.containerClass,
role: "cell"
}, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('footerCell') }), [
($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)
], 16))
}
script$4.render = render$4;
var script$3 = {
name: 'HeaderCell',
extends: BaseComponent__default["default"],
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);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
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];
},
sortState() {
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 {
sorted,
sortOrder
};
},
sortableColumnIcon() {
const { sorted, sortOrder } = this.sortState;
if (!sorted) return SortAltIcon__default["default"];
else if (sorted && sortOrder > 0) return SortAmountUpAltIcon__default["default"];
else if (sorted && sortOrder < 0) return SortAmountDownIcon__default["default"];
return null;
},
ariaSort() {
if (this.columnProp('sortable')) {
const { sorted, sortOrder } = this.sortState;
if (sorted && sortOrder < 0) return 'descending';
else if (sorted && sortOrder > 0) return 'ascending';
else return 'none';
} else {
return null;
}
}
},
components: {
SortAltIcon: SortAltIcon__default["default"],
SortAmountUpAltIcon: SortAmountUpAltIcon__default["default"],
SortAmountDownIcon: SortAmountDownIcon__default["default"]
}
};
const _hoisted_1$2 = ["tabindex", "aria-sort"];
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
style: [$options.containerStyle],
class: $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"
}, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('headerCell') }), [
($props.resizableColumns && !$options.columnProp('frozen'))
? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 0,
class: "p-column-resizer",
onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
}, $options.getColumnPTOptions('columnResizer')), null, 16))
: 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", vue.mergeProps({
key: 2,
class: "p-column-title"
}, $options.getColumnPTOptions('headerTitle')), vue.toDisplayString($options.columnProp('header')), 17))
: vue.createCommentVNode("", true),
($options.columnProp('sortable'))
? (vue.openBlock(), vue.createElementBlock("span", vue.normalizeProps(vue.mergeProps({ key: 3 }, $options.getColumnPTOptions('sort'))), [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.sorticon) || $options.sortableColumnIcon), {
sorted: $options.sortState.sorted,
sortOrder: $options.sortState.sortOrder,
class: "p-sortable-column-icon"
}, null, 8, ["sorted", "sortOrder"]))
], 16))
: vue.createCommentVNode("", true),
($options.isMultiSorted())
? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 4,
class: "p-sortable-column-badge"
}, $options.getColumnPTOptions('sortBadge')), vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 17))
: vue.createCommentVNode("", true)
], 16, _hoisted_1$2))
}
script$3.render = render$3;
var script$2 = {
name: 'BodyCell',
extends: BaseComponent__default["default"],
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
},
templates: {
type: Object,
default: null
}
},
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);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnCheckboxPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.checkboxFocused,
partialChecked: this.partialChecked
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
},
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'
};
},
checkboxSelectionMode() {
return this.selectionMode === 'checkbox';
},
checkboxClass() {
return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
}
},
components: {
ChevronRightIcon: ChevronRightIcon__default["default"],
ChevronDownIcon: ChevronDownIcon__default["default"],
CheckIcon: CheckIcon__default["default"],
MinusIcon: MinusIcon__default["default"]
},
directives: {
ripple: Ripple__default["default"]
}
};
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_ripple = vue.resolveDirective("ripple");
return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
style: $options.containerStyle,
class: $options.containerClass,
role: "cell"
}, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
($options.columnProp('expander'))
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 0,
type: "button",
class: "p-treetable-toggler p-link",
onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
style: $options.togglerStyle,
tabindex: "-1"
}, $options.getColumnPTOptions('rowToggler')), [
($props.templates['togglericon'])
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['togglericon']), {
key: 0,
node: $props.node,
expanded: $props.expanded,
class: "p-tree-toggler-icon"
}, null, 8, ["node", "expanded"]))
: ($props.expanded)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
key: 1,
class: "p-tree-toggler-icon"
}, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
: (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
key: 2,
class: "p-tree-toggler-icon"
}, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
], 16)), [
[_directive_ripple]
])
: vue.createCommentVNode("", true),
($options.checkboxSelectionMode && $options.columnProp('expander'))
? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 1,
class: ['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': $data.checkboxFocused }],
onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleCheckbox && $options.toggleCheckbox(...args)))
}, $options.getColumnPTOptions('checkboxWrapper')), [
vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
vue.createElementVNode("input", vue.mergeProps({
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"
}, $options.getColumnPTOptions('hiddenInput')), null, 16)
], 16),
vue.createElementVNode("div", vue.mergeProps({
ref: "checkboxEl",
class: $options.checkboxClass
}, $options.getColumnCheckboxPTOptions('checkbox')), [
($props.templates['checkboxicon'])
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
key: 0,
checked: $props.checked,
partialChecked: $props.partialChecked,
class: "p-checkbox-icon"
}, null, 8, ["checked", "partialChecked"]))
: (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
key: 1,
class: "p-checkbox-icon"
}, $options.getColumnCheckboxPTOptions('checkboxIcon')), null, 16))
], 16)
], 16))
: 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", vue.normalizeProps(vue.mergeProps({ key: 3 }, $options.getColumnPTOptions('cellContent'))), vue.toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 17))
], 16))
}
script$2.render = render$2;
var script$1 = {
name: 'TreeTableRow',
extends: BaseComponent__default["default"],
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
},
templates: {
type: Object,
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", vue.mergeProps({
ref: "node",
class: $options.containerClass,
style: $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)))
}, _ctx.ptm('row')), [
(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,
templates: $props.templates,
onNodeToggle: _cache[0] || (_cache[0] = $event => (_ctx.$emit('node-toggle', $event))),
onCheckboxToggle: $options.toggleCheckbox,
pt: _ctx.pt
}, null, 8, ["column", "node", "level", "leaf", "indentation", "expanded", "selectionMode", "checked", "partialChecked", "templates", "onCheckboxToggle", "pt"]))
: vue.createCommentVNode("", true)
], 64))
}), 128))
], 16, _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,
templates: $props.templates,
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,
pt: _ctx.pt
}, null, 8, ["columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "pt"]))
}), 128))
: vue.createCommentVNode("", true)
], 64))
}
script$1.render = render$1;
var script = {
name: 'TreeTable',
extends: BaseComponent__default["default"],
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: undefined
},
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.colum