primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 114 kB
JavaScript
this.primevue = this.primevue || {};
this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, BaseComponent, usestyle, vue, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
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 styles = "\n.p-treetable {\n position: relative;\n}\n\n.p-treetable table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n}\n\n.p-treetable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n}\n\n.p-treetable-responsive-scroll > .p-treetable-wrapper {\n overflow-x: auto;\n}\n\n.p-treetable-responsive-scroll > .p-treetable-wrapper > table,\n.p-treetable-auto-layout > .p-treetable-wrapper > table {\n table-layout: auto;\n}\n\n.p-treetable-hoverable-rows .p-treetable-tbody > tr {\n cursor: pointer;\n}\n\n.p-treetable-toggler {\n cursor: pointer;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n overflow: hidden;\n position: relative;\n}\n\n.p-treetable-toggler + .p-checkbox {\n vertical-align: middle;\n}\n\n.p-treetable-toggler + .p-checkbox + span {\n vertical-align: middle;\n}\n\n/* Resizable */\n.p-treetable-resizable > .p-treetable-wrapper {\n overflow-x: auto;\n}\n\n.p-treetable-resizable .p-treetable-thead > tr > th,\n.p-treetable-resizable .p-treetable-tfoot > tr > td,\n.p-treetable-resizable .p-treetable-tbody > tr > td {\n overflow: hidden;\n}\n\n.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {\n background-clip: padding-box;\n position: relative;\n}\n\n.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n display: none;\n}\n\n.p-treetable .p-column-resizer {\n display: block;\n position: absolute !important;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n}\n\n.p-treetable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n}\n\n.p-treetable .p-treetable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n}\n\n/* Scrollable */\n.p-treetable-scrollable .p-treetable-wrapper {\n position: relative;\n overflow: auto;\n}\n\n.p-treetable-scrollable .p-treetable-table {\n display: block;\n}\n\n.p-treetable-scrollable .p-treetable-thead,\n.p-treetable-scrollable .p-treetable-tbody,\n.p-treetable-scrollable .p-treetable-tfoot {\n display: block;\n}\n\n.p-treetable-scrollable .p-treetable-thead > tr,\n.p-treetable-scrollable .p-treetable-tbody > tr,\n.p-treetable-scrollable .p-treetable-tfoot > tr {\n display: flex;\n flex-wrap: nowrap;\n width: 100%;\n}\n\n.p-treetable-scrollable .p-treetable-thead > tr > th,\n.p-treetable-scrollable .p-treetable-tbody > tr > td,\n.p-treetable-scrollable .p-treetable-tfoot > tr > td {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n}\n\n.p-treetable-scrollable .p-treetable-thead {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.p-treetable-scrollable .p-treetable-tfoot {\n position: sticky;\n bottom: 0;\n z-index: 1;\n}\n\n.p-treetable-scrollable .p-frozen-column {\n position: sticky;\n background: inherit;\n}\n\n.p-treetable-scrollable th.p-frozen-column {\n z-index: 1;\n}\n\n.p-treetable-scrollable-both .p-treetable-thead > tr > th,\n.p-treetable-scrollable-both .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {\n flex: 0 0 auto;\n}\n\n.p-treetable-flex-scrollable {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.p-treetable-flex-scrollable .p-treetable-wrapper {\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n}\n";
var classes = {
root: function root(_ref) {
var instance = _ref.instance,
props = _ref.props;
return ['p-treetable p-component', {
'p-treetable-hoverable-rows': props.rowHover || instance.rowSelectionMode,
'p-treetable-auto-layout': props.autoLayout,
'p-treetable-resizable': props.resizableColumns,
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-treetable-gridlines': props.showGridlines,
'p-treetable-scrollable': props.scrollable,
'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-treetable-sm': props.size === 'small',
'p-treetable-lg': props.size === 'large'
}];
},
loadingWrapper: 'p-treetable-loading',
loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header',
paginator: function paginator(_ref2) {
var instance = _ref2.instance;
return instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : '';
},
wrapper: 'p-treetable-wrapper',
thead: 'p-treetable-thead',
//headercell
headerCell: function headerCell(_ref3) {
var instance = _ref3.instance,
props = _ref3.props,
column = _ref3.column;
return column && instance.hasColumnFilter() ? ['p-filter-column', {
'p-frozen-column': instance.columnProp(column, 'frozen')
}] : [{
'p-sortable-column': instance.columnProp('sortable'),
'p-resizable-column': props.resizableColumns,
'p-highlight': instance.isColumnSorted(),
'p-frozen-column': instance.columnProp('frozen')
}];
},
columnResizer: 'p-column-resizer',
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
tbody: 'p-treetable-tbody',
//ttrow
row: function row(_ref4) {
var instance = _ref4.instance;
return [{
'p-highlight': instance.selected
}];
},
//bodycell
bodyCell: function bodyCell(_ref5) {
var instance = _ref5.instance;
return [{
'p-frozen-column': instance.columnProp('frozen')
}];
},
rowToggler: 'p-treetable-toggler p-link',
rowTogglerIcon: 'p-tree-toggler-icon',
checkboxWrapper: function checkboxWrapper(_ref6) {
var instance = _ref6.instance;
return ['p-checkbox p-treetable-checkbox p-component', {
'p-checkbox-focused': instance.checkboxFocused
}];
},
checkbox: function checkbox(_ref7) {
var instance = _ref7.instance;
return ['p-checkbox-box', {
'p-highlight': instance.checked,
'p-focus': instance.checkboxFocused,
'p-indeterminate': instance.partialChecked
}];
},
checkboxicon: 'p-checkbox-icon',
//treetable
emptyMessage: 'p-treetable-emptymessage',
tfoot: 'p-treetable-tfoot',
//footercell
footerCell: function footerCell(_ref8) {
var instance = _ref8.instance;
return [{
'p-frozen-column': instance.columnProp('frozen')
}];
},
//treetable
footer: 'p-treetable-footer',
resizeHelper: 'p-column-resizer-helper p-highlight'
};
var _useStyle = usestyle.useStyle(styles, {
name: 'treetable',
manual: true
}),
loadStyle = _useStyle.load;
var script$5 = {
name: 'BaseTreeTable',
"extends": BaseComponent__default["default"],
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
},
size: {
type: String,
"default": null
},
tableProps: {
type: Object,
"default": null
}
},
css: {
classes: classes,
loadStyle: loadStyle
},
provide: function provide() {
return {
$parentInstance: this
};
}
};
var script$4 = {
name: 'FooterCell',
hostName: 'TreeTable',
"extends": BaseComponent__default["default"],
props: {
column: {
type: Object,
"default": null
},
index: {
type: Number,
"default": null
}
},
data: function data() {
return {
styleObject: {}
};
},
mounted: function mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated: function updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
columnProp: function columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPT: function getColumnPT(key) {
var _this$$parentInstance;
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
frozen: this.columnProp('frozen'),
size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size
}
};
return vue.mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
updateStickyPosition: function updateStickyPosition() {
if (this.columnProp('frozen')) {
var align = this.columnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
}
},
computed: {
containerClass: function containerClass() {
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
},
containerStyle: function containerStyle() {
var bodyStyle = this.columnProp('footerStyle');
var columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
}
}
};
function _typeof$5(obj) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$5(obj); }
function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$5(obj, key, value) { key = _toPropertyKey$5(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$5(arg) { var key = _toPrimitive$5(arg, "string"); return _typeof$5(key) === "symbol" ? key : String(key); }
function _toPrimitive$5(input, hint) { if (_typeof$5(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$5(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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"
}, _objectSpread$5(_objectSpread$5({}, $options.getColumnPT('root')), $options.getColumnPT('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',
hostName: 'TreeTable',
"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'
},
index: {
type: Number,
"default": null
}
},
data: function data() {
return {
styleObject: {}
};
},
mounted: function mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated: function updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
columnProp: function columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPT: function getColumnPT(key) {
var _this$$parentInstance;
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
sorted: this.isColumnSorted(),
frozen: this.$parentInstance.scrollable && this.columnProp('frozen'),
resizable: this.resizableColumns,
scrollable: this.$parentInstance.scrollable,
scrollDirection: this.$parentInstance.scrollDirection,
showGridlines: this.$parentInstance.showGridlines,
size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size
}
};
return vue.mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
updateStickyPosition: function updateStickyPosition() {
if (this.columnProp('frozen')) {
var align = this.columnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
var filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) {
var index = utils.DomHandler.index(this.$el);
filterRow.children[index].style.left = this.styleObject.left;
filterRow.children[index].style.right = this.styleObject.right;
}
}
},
onClick: function onClick(event) {
this.$emit('column-click', {
originalEvent: event,
column: this.column
});
},
onKeyDown: function onKeyDown(event) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && utils.DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
this.$emit('column-click', {
originalEvent: event,
column: this.column
});
event.preventDefault();
}
},
onResizeStart: function onResizeStart(event) {
this.$emit('column-resizestart', event);
},
getMultiSortMetaIndex: function getMultiSortMetaIndex() {
var index = -1;
for (var i = 0; i < this.multiSortMeta.length; i++) {
var meta = this.multiSortMeta[i];
if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
index = i;
break;
}
}
return index;
},
isMultiSorted: function isMultiSorted() {
return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
},
isColumnSorted: function isColumnSorted() {
return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
}
},
computed: {
containerClass: function containerClass() {
return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];
},
containerStyle: function containerStyle() {
var headerStyle = this.columnProp('headerStyle');
var columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
},
sortState: function sortState() {
var sorted = false;
var 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') {
var metaIndex = this.getMultiSortMetaIndex();
if (metaIndex > -1) {
sorted = true;
sortOrder = this.multiSortMeta[metaIndex].order;
}
}
return {
sorted: sorted,
sortOrder: sortOrder
};
},
sortableColumnIcon: function sortableColumnIcon() {
var _this$sortState = this.sortState,
sorted = _this$sortState.sorted,
sortOrder = _this$sortState.sortOrder;
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: function ariaSort() {
if (this.columnProp('sortable')) {
var _this$sortState2 = this.sortState,
sorted = _this$sortState2.sorted,
sortOrder = _this$sortState2.sortOrder;
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"]
}
};
function _typeof$4(obj) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$4(obj); }
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$4(obj, key, value) { key = _toPropertyKey$4(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$4(arg) { var key = _toPrimitive$4(arg, "string"); return _typeof$4(key) === "symbol" ? key : String(key); }
function _toPrimitive$4(input, hint) { if (_typeof$4(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$4(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var _hoisted_1$2 = ["tabindex", "aria-sort", "data-p-sortable-column", "data-p-resizable-column", "data-p-highlight", "data-p-frozen-column"];
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
"class": $options.containerClass,
style: [$options.containerStyle],
onClick: _cache[1] || (_cache[1] = function () {
return $options.onClick && $options.onClick.apply($options, arguments);
}),
onKeydown: _cache[2] || (_cache[2] = function () {
return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
}),
tabindex: $options.columnProp('sortable') ? '0' : null,
"aria-sort": $options.ariaSort,
role: "columnheader"
}, _objectSpread$4(_objectSpread$4({}, $options.getColumnPT('root')), $options.getColumnPT('headerCell')), {
"data-p-sortable-column": $options.columnProp('sortable'),
"data-p-resizable-column": $props.resizableColumns,
"data-p-highlight": $options.isColumnSorted(),
"data-p-frozen-column": $options.columnProp('frozen')
}), [$props.resizableColumns && !$options.columnProp('frozen') ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 0,
"class": _ctx.cx('columnResizer'),
onMousedown: _cache[0] || (_cache[0] = function () {
return $options.onResizeStart && $options.onResizeStart.apply($options, arguments);
})
}, $options.getColumnPT('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": _ctx.cx('headerTitle')
}, $options.getColumnPT('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.getColumnPT('sort'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.sorticon || $options.sortableColumnIcon), vue.mergeProps({
sorted: $options.sortState.sorted,
sortOrder: $options.sortState.sortOrder,
"data-pc-section": "sorticon",
"class": _ctx.cx('sortIcon')
}, $options.getColumnPT('sortIcon')), null, 16, ["sorted", "sortOrder", "class"]))], 16)) : vue.createCommentVNode("", true), $options.isMultiSorted() ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 4,
"class": _ctx.cx('sortBadge')
}, $options.getColumnPT('sortBadge')), vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 17)) : vue.createCommentVNode("", true)], 16, _hoisted_1$2);
}
script$3.render = render$3;
var script$2 = {
name: 'BodyCell',
hostName: 'TreeTable',
"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
},
index: {
type: Number,
"default": null
}
},
data: function data() {
return {
styleObject: {},
checkboxFocused: false
};
},
mounted: function mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated: function updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
toggle: function toggle() {
this.$emit('node-toggle', this.node);
},
columnProp: function columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPT: function getColumnPT(key) {
var _this$$parentInstance;
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index,
focused: this.checkboxFocused,
selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
selected: this.$parent.selected,
frozen: this.columnProp('frozen'),
scrollable: this.$parentInstance.scrollable,
scrollDirection: this.$parentInstance.scrollDirection,
showGridlines: this.$parentInstance.showGridlines,
size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size
}
};
return vue.mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
getColumnProp: function getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
},
getColumnCheckboxPT: function getColumnCheckboxPT(key) {
var columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.checkboxFocused,
partialChecked: this.partialChecked
}
};
return vue.mergeProps(this.ptm("column.".concat(key), {
column: columnMetaData
}), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
},
updateStickyPosition: function updateStickyPosition() {
if (this.columnProp('frozen')) {
var align = this.columnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
},
resolveFieldData: function resolveFieldData(rowData, field) {
return utils.ObjectUtils.resolveFieldData(rowData, field);
},
toggleCheckbox: function toggleCheckbox() {
this.$emit('checkbox-toggle');
},
onCheckboxFocus: function onCheckboxFocus() {
this.checkboxFocused = true;
},
onCheckboxBlur: function onCheckboxBlur() {
this.checkboxFocused = false;
}
},
computed: {
containerClass: function containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
},
containerStyle: function containerStyle() {
var bodyStyle = this.columnProp('bodyStyle');
var columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
},
togglerStyle: function togglerStyle() {
return {
marginLeft: this.level * this.indentation + 'rem',
visibility: this.leaf ? 'hidden' : 'visible'
};
},
checkboxSelectionMode: function checkboxSelectionMode() {
return this.selectionMode === 'checkbox';
}
},
components: {
ChevronRightIcon: ChevronRightIcon__default["default"],
ChevronDownIcon: ChevronDownIcon__default["default"],
CheckIcon: CheckIcon__default["default"],
MinusIcon: MinusIcon__default["default"]
},
directives: {
ripple: Ripple__default["default"]
}
};
function _typeof$3(obj) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$3(obj); }
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$3(obj, key, value) { key = _toPropertyKey$3(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$3(arg) { var key = _toPrimitive$3(arg, "string"); return _typeof$3(key) === "symbol" ? key : String(key); }
function _toPrimitive$3(input, hint) { if (_typeof$3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
var _directive_ripple = vue.resolveDirective("ripple");
return vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
style: $options.containerStyle,
"class": $options.containerClass,
role: "cell"
}, _objectSpread$3(_objectSpread$3({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$options.columnProp('expander') ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 0,
type: "button",
"class": _ctx.cx('rowToggler'),
onClick: _cache[0] || (_cache[0] = function () {
return $options.toggle && $options.toggle.apply($options, arguments);
}),
style: $options.togglerStyle,
tabindex: "-1"
}, $options.getColumnPT('rowToggler')), [$props.templates['togglericon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['togglericon']), {
key: 0,
node: $props.node,
expanded: $props.expanded,
"class": vue.normalizeClass(_ctx.cx('rowTogglerIcon'))
}, null, 8, ["node", "expanded", "class"])) : $props.expanded ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
key: 1,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
key: 2,
"class": _ctx.cx('rowTogglerIcon')
}, $options.getColumnPT('rowTogglerIcon')), null, 16, ["class"]))], 16)), [[_directive_ripple]]) : vue.createCommentVNode("", true), $options.checkboxSelectionMode && $options.columnProp('expander') ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 1,
"class": _ctx.cx('checkboxWrapper'),
onClick: _cache[3] || (_cache[3] = function () {
return $options.toggleCheckbox && $options.toggleCheckbox.apply($options, arguments);
})
}, $options.getColumnCheckboxPT('checkboxWrapper')), [vue.createElementVNode("div", vue.mergeProps({
"class": "p-hidden-accessible"
}, $options.getColumnPT('hiddenInputWrapper'), {
"data-p-hidden-accessible": true
}), [vue.createElementVNode("input", vue.mergeProps({
type: "checkbox",
onFocus: _cache[1] || (_cache[1] = function () {
return $options.onCheckboxFocus && $options.onCheckboxFocus.apply($options, arguments);
}),
onBlur: _cache[2] || (_cache[2] = function () {
return $options.onCheckboxBlur && $options.onCheckboxBlur.apply($options, arguments);
}),
tabindex: "-1"
}, $options.getColumnPT('hiddenInput')), null, 16)], 16), vue.createElementVNode("div", vue.mergeProps({
ref: "checkboxEl",
"class": _ctx.cx('checkbox')
}, $options.getColumnCheckboxPT('checkbox')), [$props.templates['checkboxicon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
key: 0,
checked: $props.checked,
partialChecked: $props.partialChecked,
"class": vue.normalizeClass(_ctx.cx('checkboxicon'))
}, null, 8, ["checked", "partialChecked", "class"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
key: 1,
"class": _ctx.cx('checkboxicon')
}, $options.getColumnCheckboxPT('checkboxIcon')), null, 16, ["class"]))], 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.getColumnPT('bodyCellContent'))), vue.toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 17))], 16);
}
script$2.render = render$2;
function _typeof$2(obj) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$2(obj); }
function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$2(obj, key, value) { key = _toPropertyKey$2(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$2(arg) { var key = _toPrimitive$2(arg, "string"); return _typeof$2(key) === "symbol" ? key : String(key); }
function _toPrimitive$2(input, hint) { if (_typeof$2(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$2(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toConsumableArray$1(arr) { return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1(); }
function _nonIterableSpread$1() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var script$1 = {
name: 'TreeTableRow',
hostName: 'TreeTable',
"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: function columnProp(col, prop) {
return utils.ObjectUtils.getVNodeProp(col, prop);
},
toggle: function toggle() {
this.$emit('node-toggle', this.node);
},
onClick: function onClick(event) {
if (utils.DomHandler.isClickable(event.target) || utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtoggler' || utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtogglericon' || event.target.tagName === 'path') {
return;