accessibleprimevue
Version:
Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+
1,194 lines (1,180 loc) • 100 kB
JavaScript
'use strict';
var api = require('primevue/api');
var SpinnerIcon = require('primevue/icons/spinner');
var Paginator = require('primevue/paginator');
var utils = require('primevue/utils');
var BaseComponent = require('primevue/basecomponent');
var TreeTableStyle = require('primevue/treetable/style');
var vue = require('vue');
var SortAltIcon = require('primevue/icons/sortalt');
var SortAmountDownIcon = require('primevue/icons/sortamountdown');
var SortAmountUpAltIcon = require('primevue/icons/sortamountupalt');
var Checkbox = require('primevue/checkbox');
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 SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
var TreeTableStyle__default = /*#__PURE__*/_interopDefaultLegacy(TreeTableStyle);
var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
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$5 = {
name: 'BaseTreeTable',
"extends": BaseComponent__default["default"],
props: {
value: {
type: null,
"default": null
},
dataKey: {
type: [String, Function],
"default": 'key'
},
expandedKeys: {
type: null,
"default": null
},
selectionKeys: {
type: null,
"default": null
},
selectionMode: {
type: String,
"default": null
},
metaKeySelection: {
type: Boolean,
"default": false
},
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
},
loadingMode: {
type: String,
"default": 'mask'
},
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
}
},
style: TreeTableStyle__default["default"],
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: {
instance: this,
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 = utils.DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = utils.DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
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(o) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$5(o); }
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty$5(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive$5(t, "string"); return "symbol" == _typeof$5(i) ? i : String(i); }
function _toPrimitive$5(t, r) { if ("object" != _typeof$5(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$5(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _hoisted_1$4 = ["data-p-frozen-column"];
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')), {
"data-p-frozen-column": $options.columnProp('frozen')
}), [$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, _hoisted_1$4);
}
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: {
instance: this,
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 = utils.DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = utils.DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
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 === 'NumpadEnter' || 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(o) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$4(o); }
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive$4(t, "string"); return "symbol" == _typeof$4(i) ? i : String(i); }
function _toPrimitive$4(t, r) { if ("object" != _typeof$4(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$4(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _hoisted_1$3 = ["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,
"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$3);
}
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
},
loadingMode: {
type: String,
"default": 'mask'
}
},
data: function data() {
return {
styleObject: {}
};
},
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: {
instance: this,
props: this.$props,
state: this.$data
},
context: {
index: this.index,
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: {
instance: this,
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
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 = utils.DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
var left = 0;
var prev = utils.DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
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');
}
},
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: {
Checkbox: Checkbox__default["default"],
ChevronRightIcon: ChevronRightIcon__default["default"],
ChevronDownIcon: ChevronDownIcon__default["default"],
CheckIcon: CheckIcon__default["default"],
MinusIcon: MinusIcon__default["default"],
SpinnerIcon: SpinnerIcon__default["default"]
},
directives: {
ripple: Ripple__default["default"]
}
};
function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$3(o); }
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive$3(t, "string"); return "symbol" == _typeof$3(i) ? i : String(i); }
function _toPrimitive$3(t, r) { if ("object" != _typeof$3(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$3(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _hoisted_1$2 = ["data-p-frozen-column"];
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
var _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
var _component_Checkbox = vue.resolveComponent("Checkbox");
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')), {
"data-p-frozen-column": $options.columnProp('frozen')
}), [$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'), {
"data-pc-group-section": "rowactionbutton"
}), [$props.node.loading && $props.loadingMode === 'icon' ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 0
}, [$props.templates['nodetogglericon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['nodetogglericon']), {
key: 0,
"class": vue.normalizeClass(_ctx.cx('nodetogglericon'))
}, null, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
key: 1,
spin: "",
"class": _ctx.cx('nodetogglericon')
}, _ctx.ptm('nodetogglericon')), null, 16, ["class"]))], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: 1
}, [$props.column.children && $props.column.children.rowtogglericon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.rowtogglericon), {
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"]))], 64))], 16)), [[_directive_ripple]]) : vue.createCommentVNode("", true), $options.checkboxSelectionMode && $options.columnProp('expander') ? (vue.openBlock(), vue.createBlock(_component_Checkbox, {
key: 1,
modelValue: $props.checked,
binary: true,
"class": vue.normalizeClass(_ctx.cx('rowCheckbox')),
onChange: $options.toggleCheckbox,
tabindex: -1,
unstyled: _ctx.unstyled,
pt: $options.getColumnCheckboxPT('rowCheckbox'),
"data-p-highlight": $props.checked,
"data-p-checked": $props.checked,
"data-p-partialchecked": $props.partialChecked
}, {
icon: vue.withCtx(function (slotProps) {
return [$props.templates['checkboxicon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
key: 0,
checked: slotProps.checked,
partialChecked: $props.partialChecked,
"class": vue.normalizeClass(slotProps["class"])
}, null, 8, ["checked", "partialChecked", "class"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
key: 1,
"class": slotProps["class"]
}, $options.getColumnCheckboxPT('rowCheckbox.icon')), null, 16, ["class"]))];
}),
_: 1
}, 8, ["modelValue", "class", "onChange", "unstyled", "pt", "data-p-highlight", "data-p-checked", "data-p-partialchecked"])) : 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, _hoisted_1$2);
}
script$2.render = render$2;
function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : String(i); }
function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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
},
dataKey: {
type: [String, Function],
"default": 'key'
},
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
},
loadingMode: {
type: String,
"default": 'mask'
},
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;
}
this.setTabIndexForSelectionMode(event, this.nodeTouched);
this.$emit('node-click', {
originalEvent: event,
nodeTouched: this.nodeTouched,
node: this.node
});
this.nodeTouched = false;
},
onTouchEnd: function onTouchEnd() {
this.nodeTouched = true;
},
nodeKey: function nodeKey(node) {
return utils.ObjectUtils.resolveFieldData(node, this.dataKey);
},
onKeyDown: function 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 'NumpadEnter':
case 'Space':
if (!utils.DomHandler.isClickable(event.target)) {
this.onEnterKey(event, item);
}
break;
case 'Tab':
this.onTabKey(event);
break;
}
},
onArrowDownKey: function onArrowDownKey(event) {
var nextElementSibling = event.currentTarget.nextElementSibling;
nextElementSibling && this.focusRowChange(event.currentTarget, nextElementSibling);
event.preventDefault();
},
onArrowUpKey: function onArrowUpKey(event) {
var previousElementSibling = event.currentTarget.previousElementSibling;
previousElementSibling && this.focusRowChange(event.currentTarget, previousElementSibling);
event.preventDefault();
},
onArrowRightKey: function onArrowRightKey(event) {
var _this = this;
var ishiddenIcon = utils.DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
var togglerElement = utils.DomHandler.findSingle(this.$refs.node, '[data-pc-section="rowtoggler"]');
if (ishiddenIcon) return;
!this.expanded && togglerElement.click();
this.$nextTick(function () {
_this.onArrowDownKey(event);
});
event.preventDefault();
},
onArrowLeftKey: function onArrowLeftKey(event) {
if (this.level === 0 && !this.expanded) {
return;
}
var currentTarget = event.currentTarget;
var ishiddenIcon = utils.DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
var togglerElement = utils.DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
if (this.expanded && !ishiddenIcon) {
togglerElement.click();
return;
}
var target = this.findBeforeClickableNode(currentTarget);
target && this.focusRowChange(currentTarget, target);
},
onHomeKey: function onHomeKey(event) {
var findFirstElement = utils.DomHandler.findSingle(event.currentTarget.parentElement, "tr[aria-level=\"".concat(this.level + 1, "\"]"));
findFirstElement && utils.DomHandler.focus(findFirstElement);
event.preventDefault();
},
onEndKey: function onEndKey(event) {
var nodes = utils.DomHandler.find(event.currentTarget.parentElement, "tr[aria-level=\"".concat(this.level + 1, "\"]"));
var findFirstElement = nodes[nodes.length - 1];
utils.DomHandler.focus(findFirstElement);
event.preventDefault();
},
onEnterKey: function 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: function onTabKey() {
var rows = _toConsumableArray$1(utils.DomHandler.find(this.$refs.node.parentElement, 'tr'));
var hasSelectedRow = rows.some(function (row) {
return utils.DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true';
});
rows.forEach(function (row) {
row.tabIndex = -1;
});
if (hasSelectedRow) {
var selectedNodes = rows.filter(function (node) {
return utils.DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true';
});
selectedNodes[0].tabIndex = 0;
return;
}
rows[0].tabIndex = 0;
},
focusRowChange: function focusRowChange(firstFocusableRow, currentFocusedRow) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
utils.DomHandler.focus(currentFocusedRow);
},
findBeforeClickableNode: function findBeforeClickableNode(node) {
var prevNode = node.previousElementSibling;
if (prevNode) {
var prevNodeButton = prevNode.querySelector('button');
if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
return prevNode;
}
return this.findBeforeClickableNode(prevNode);
}
return null;
},
toggleCheckbox: function toggleCheckbox() {
var _selectionKeys = this.selectionKeys ? _objectSpread$2({}, this.selectionKeys) : {};
var _check = !this.checked;
this.propagateDown(this.node, _check, _selectionKeys);
this.$emit('checkbox-change', {
node: this.node,
check: _check,
selectionKeys: _selectionKeys
});
},
propagateDown: function propagateDown(node, check, selectionKeys) {
if (check) selectionKeys[this.nodeKey(node)] = {
checked: true,
partialChecked: false
};else delete selectionKeys[this.nodeKey(node)];
if (node.children && node.children.length) {
var _iterator = _createForOfIteratorHelper$1(node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
this.propagateDown(child, check, selectionKeys);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
},
propagateUp: function propagateUp(event) {
var check = event.check;
var _selectionKeys = _objectSpread$2({}, event.selectionKeys);
var checkedChildCount = 0;
var childPartialSelected = false;
var _iterator2 = _createForOfIteratorHelper$1(this.node.children),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var child = _step2.value;
if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].checked) checkedChildCount++;else if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].partialChecked) childPartialSelected = true;
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.nodeKey(this.node)] = {
checked: true,
partialChecked: false
};
} else {
if (!check) {
delete _selectionKeys[this.nodeKey(this.node)];
}
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.nodeKey(this.node)] = {
checked: false,
partialChecked: true
};else _selectionKeys[this.nodeKey(this.node)] = {
checked: false,
partialChecked: false
};
}
this.$emit('checkbox-change', {
node: event.node,
check: event.check,
selectionKeys: _selectionKeys
});
},
onCheckboxChange: function onCheckboxChange(event) {
var check = event.check;
var _selectionKeys = _objectSpread$2({}, event.selectionKeys);
var checkedChildCount = 0;
var childPartialSelected = false;
var _iterator3 = _createForOfIteratorHelper$1(this.node.children),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var child = _step3.value;
if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].checked) checkedChildCount++;else if (_selectionKeys[this.nodeKey(child)] && _selectionKeys[this.nodeKey(child)].partialChecked) childPartialSelected = true;
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
if (check && checkedChildCount === this.node.children.length) {
_selectionKeys[this.nodeKey(this.node)] = {
checked: true,
partialChecked: false
};
} else {
if (!check) {
delete _selectionKeys[this.nodeKey(this.node)];
}
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.nodeKey(this.node)] = {
checked: false,
partialChecked: true
};else _selectionKeys[this.nodeKey(this.node)] = {
checked: false,
partialChecked: false
};
}
this.$emit('checkbox-change', {
node: event.node,
check: event.check,
selectionKeys: _selectionKeys
});
},
setTabIndexForSelectionMode: function setTabIndexForSelectionMode(event, nodeTouched) {
if (this.selectionMode !== null) {
var elements = _toConsumableArray$1(utils.DomHandler.find(this.$refs.node.parentElement, 'tr'));
event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
if (elements.every(function (element) {
return element.tabIndex === -1;
})) {
elements[0].tabIndex = 0;
}
}
}
},
computed: {
containerClass: function containerClass() {
return [this.node.styleClass, this.cx('row')];
},
expanded: function expanded() {
return this.expandedKeys && this.expandedKeys[this.nodeKey(this.node)] === true;
},
leaf: function leaf() {
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
},
sel