primevue 3.44.0 → 3.45.0

package/treetable/treetable.esm.js

@@ -1,7 +1,7 @@
 import { FilterService } from 'primevue/api';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
-import { ObjectUtils, DomHandler } from 'primevue/utils';
+import { ObjectUtils, DomHandler, HelperSet } from 'primevue/utils';
 import BaseComponent from 'primevue/basecomponent';
 import TreeTableStyle from 'primevue/treetable/style';
 import { mergeProps, openBlock, createElementBlock, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, resolveComponent, resolveDirective, withDirectives, Fragment, normalizeClass, createElementVNode, renderList, renderSlot, createSlots, withCtx } from 'vue';
@@ -22,6 +22,10 @@ var script$5 = {
       type: null,
       "default": null
     },
+    dataKey: {
+      type: [String, Function],
+      "default": 'key'
+    },
     expandedKeys: {
       type: null,
       "default": null
@@ -36,7 +40,7 @@ var script$5 = {
     },
     metaKeySelection: {
       type: Boolean,
-      "default": true
+      "default": false
     },
     rows: {
       type: Number,
@@ -411,7 +415,7 @@ var script$3 = {
       });
     },
     onKeyDown: function onKeyDown(event) {
-      if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
+      if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
         this.$emit('column-click', {
           originalEvent: event,
           column: this.column
@@ -845,6 +849,10 @@ var script$1 = {
       type: null,
       "default": null
     },
+    dataKey: {
+      type: [String, Function],
+      "default": 'key'
+    },
     parentNode: {
       type: null,
       "default": null
@@ -917,6 +925,9 @@ var script$1 = {
     onTouchEnd: function onTouchEnd() {
       this.nodeTouched = true;
     },
+    nodeKey: function nodeKey(node) {
+      return ObjectUtils.resolveFieldData(node, this.dataKey);
+    },
     onKeyDown: function onKeyDown(event, item) {
       switch (event.code) {
         case 'ArrowDown':
@@ -938,8 +949,11 @@ var script$1 = {
           this.onEndKey(event);
           break;
         case 'Enter':
+        case 'NumpadEnter':
         case 'Space':
-          this.onEnterKey(event, item);
+          if (!DomHandler.isClickable(event.target)) {
+            this.onEnterKey(event, item);
+          }
           break;
         case 'Tab':
           this.onTabKey(event);
@@ -1050,10 +1064,10 @@ var script$1 = {
       });
     },
     propagateDown: function propagateDown(node, check, selectionKeys) {
-      if (check) selectionKeys[node.key] = {
+      if (check) selectionKeys[this.nodeKey(node)] = {
         checked: true,
         partialChecked: false
-      };else delete selectionKeys[node.key];
+      };else delete selectionKeys[this.nodeKey(node)];
       if (node.children && node.children.length) {
         var _iterator = _createForOfIteratorHelper$1(node.children),
           _step;
@@ -1079,7 +1093,7 @@ var script$1 = {
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var child = _step2.value;
-          if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
+          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);
@@ -1087,18 +1101,18 @@ var script$1 = {
         _iterator2.f();
       }
       if (check && checkedChildCount === this.node.children.length) {
-        _selectionKeys[this.node.key] = {
+        _selectionKeys[this.nodeKey(this.node)] = {
           checked: true,
           partialChecked: false
         };
       } else {
         if (!check) {
-          delete _selectionKeys[this.node.key];
+          delete _selectionKeys[this.nodeKey(this.node)];
         }
-        if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.node.key] = {
+        if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.nodeKey(this.node)] = {
           checked: false,
           partialChecked: true
-        };else _selectionKeys[this.node.key] = {
+        };else _selectionKeys[this.nodeKey(this.node)] = {
           checked: false,
           partialChecked: false
         };
@@ -1119,7 +1133,7 @@ var script$1 = {
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var child = _step3.value;
-          if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
+          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);
@@ -1127,18 +1141,18 @@ var script$1 = {
         _iterator3.f();
       }
       if (check && checkedChildCount === this.node.children.length) {
-        _selectionKeys[this.node.key] = {
+        _selectionKeys[this.nodeKey(this.node)] = {
           checked: true,
           partialChecked: false
         };
       } else {
         if (!check) {
-          delete _selectionKeys[this.node.key];
+          delete _selectionKeys[this.nodeKey(this.node)];
         }
-        if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.node.key] = {
+        if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.node.children.length) _selectionKeys[this.nodeKey(this.node)] = {
           checked: false,
           partialChecked: true
-        };else _selectionKeys[this.node.key] = {
+        };else _selectionKeys[this.nodeKey(this.node)] = {
           checked: false,
           partialChecked: false
         };
@@ -1166,19 +1180,19 @@ var script$1 = {
       return [this.node.styleClass, this.cx('row')];
     },
     expanded: function expanded() {
-      return this.expandedKeys && this.expandedKeys[this.node.key] === true;
+      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);
     },
     selected: function selected() {
-      return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
+      return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] === true : false;
     },
     checked: function checked() {
-      return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
+      return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].checked : false;
     },
     partialChecked: function partialChecked() {
-      return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
+      return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].partialChecked : false;
     },
     getAriaSelected: function getAriaSelected() {
       return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
@@ -1252,7 +1266,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0
   }, renderList($props.node.children, function (childNode) {
     return openBlock(), createBlock(_component_TreeTableRow, {
-      key: childNode.key,
+      key: $options.nodeKey(childNode),
+      dataKey: $props.dataKey,
       columns: $props.columns,
       node: childNode,
       parentNode: $props.node,
@@ -1272,7 +1287,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       onCheckboxChange: $options.onCheckboxChange,
       pt: _ctx.pt
-    }, null, 8, ["columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "pt"]);
+    }, null, 8, ["dataKey", "columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "pt"]);
   }), 128)) : createCommentVNode("", true)], 64);
 }
 
@@ -1295,10 +1310,11 @@ var script = {
   name: 'TreeTable',
   "extends": script$5,
   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'],
-  documentColumnResizeListener: null,
-  documentColumnResizeEndListener: null,
-  lastResizeHelperX: null,
-  resizeColumnElement: null,
+  provide: function provide() {
+    return {
+      $columns: this.d_columns
+    };
+  },
   data: function data() {
     return {
       d_expandedKeys: this.expandedKeys || {},
@@ -1307,9 +1323,16 @@ var script = {
       d_sortField: this.sortField,
       d_sortOrder: this.sortOrder,
       d_multiSortMeta: this.multiSortMeta ? _toConsumableArray(this.multiSortMeta) : [],
-      hasASelectedNode: false
+      hasASelectedNode: false,
+      d_columns: new HelperSet({
+        type: 'Column'
+      })
     };
   },
+  documentColumnResizeListener: null,
+  documentColumnResizeEndListener: null,
+  lastResizeHelperX: null,
+  resizeColumnElement: null,
   watch: {
     expandedKeys: function expandedKeys(newValue) {
       this.d_expandedKeys = newValue;
@@ -1340,6 +1363,9 @@ var script = {
       this.updateScrollWidth();
     }
   },
+  beforeUnmount: function beforeUnmount() {
+    this.d_columns.clear();
+  },
   methods: {
     columnProp: function columnProp(col, prop) {
       return ObjectUtils.getVNodeProp(col, prop);
@@ -1352,7 +1378,7 @@ var script = {
       };
     },
     onNodeToggle: function onNodeToggle(node) {
-      var key = node.key;
+      var key = this.nodeKey(node);
       if (this.d_expandedKeys[key]) {
         delete this.d_expandedKeys[key];
         this.$emit('node-collapse', node);
@@ -1370,9 +1396,13 @@ var script = {
         this.$emit('update:selectionKeys', _selectionKeys);
       }
     },
+    nodeKey: function nodeKey(node) {
+      return ObjectUtils.resolveFieldData(node, this.dataKey);
+    },
     handleSelectionWithMetaKey: function handleSelectionWithMetaKey(event) {
       var originalEvent = event.originalEvent;
       var node = event.node;
+      var nodeKey = this.nodeKey(node);
       var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
       var selected = this.isNodeSelected(node);
       var _selectionKeys;
@@ -1381,7 +1411,7 @@ var script = {
           _selectionKeys = {};
         } else {
           _selectionKeys = _objectSpread$1({}, this.selectionKeys);
-          delete _selectionKeys[node.key];
+          delete _selectionKeys[nodeKey];
         }
         this.$emit('node-unselect', node);
       } else {
@@ -1390,13 +1420,14 @@ var script = {
         } else if (this.isMultipleSelectionMode()) {
           _selectionKeys = !metaKey ? {} : this.selectionKeys ? _objectSpread$1({}, this.selectionKeys) : {};
         }
-        _selectionKeys[node.key] = true;
+        _selectionKeys[nodeKey] = true;
         this.$emit('node-select', node);
       }
       return _selectionKeys;
     },
     handleSelectionWithoutMetaKey: function handleSelectionWithoutMetaKey(event) {
       var node = event.node;
+      var nodeKey = this.nodeKey(node);
       var selected = this.isNodeSelected(node);
       var _selectionKeys;
       if (this.isSingleSelectionMode()) {
@@ -1405,17 +1436,17 @@ var script = {
           this.$emit('node-unselect', node);
         } else {
           _selectionKeys = {};
-          _selectionKeys[node.key] = true;
+          _selectionKeys[nodeKey] = true;
           this.$emit('node-select', node);
         }
       } else {
         if (selected) {
           _selectionKeys = _objectSpread$1({}, this.selectionKeys);
-          delete _selectionKeys[node.key];
+          delete _selectionKeys[nodeKey];
           this.$emit('node-unselect', node);
         } else {
           _selectionKeys = this.selectionKeys ? _objectSpread$1({}, this.selectionKeys) : {};
-          _selectionKeys[node.key] = true;
+          _selectionKeys[nodeKey] = true;
           this.$emit('node-select', node);
         }
       }
@@ -1658,7 +1689,7 @@ var script = {
       return matched;
     },
     isNodeSelected: function isNodeSelected(node) {
-      return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
+      return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)] === true : false;
     },
     isNodeLeaf: function isNodeLeaf(node) {
       return node.leaf === false ? false : !(node.children && node.children.length);
@@ -1798,7 +1829,7 @@ var script = {
       }
     },
     onColumnKeyDown: function onColumnKeyDown(event, col) {
-      if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
+      if ((event.code === 'Enter' || event.code === 'NumpadEnter') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
         this.onColumnHeaderClick(event, col);
       }
     },
@@ -1848,12 +1879,7 @@ var script = {
   },
   computed: {
     columns: function columns() {
-      var cols = [];
-      var children = this.$slots["default"]();
-      children.forEach(function (child) {
-        if (child.children && child.children instanceof Array) cols = [].concat(_toConsumableArray(cols), _toConsumableArray(child.children));else if (child.type.name === 'Column') cols.push(child);
-      });
-      return cols;
+      return this.d_columns.get(this);
     },
     processedData: function processedData() {
       if (this.lazy) {
@@ -1959,7 +1985,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     role: "table"
   }, _ctx.ptm('root'), {
     "data-pc-name": "treetable"
-  }), [_ctx.loading && _ctx.loadingMode === 'mask' ? (openBlock(), createElementBlock("div", mergeProps({
+  }), [renderSlot(_ctx.$slots, "default"), _ctx.loading && _ctx.loadingMode === 'mask' ? (openBlock(), createElementBlock("div", mergeProps({
     key: 0,
     "class": _ctx.cx('loadingWrapper')
   }, _ctx.ptm('loadingWrapper')), [createElementVNode("div", mergeProps({
@@ -2103,7 +2129,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0
   }, renderList($options.dataToRender, function (node, index) {
     return openBlock(), createBlock(_component_TTRow, {
-      key: node.key,
+      key: $options.nodeKey(node),
+      dataKey: _ctx.dataKey,
       columns: $options.columns,
       node: node,
       level: 0,
@@ -2120,7 +2147,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onNodeClick: $options.onNodeClick,
       onCheckboxChange: $options.onCheckboxChange,
       pt: _ctx.pt
-    }, null, 8, ["columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "loadingMode", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange", "pt"]);
+    }, null, 8, ["dataKey", "columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "loadingMode", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange", "pt"]);
   }), 128)) : (openBlock(), createElementBlock("tr", mergeProps({
     key: 1,
     "class": _ctx.cx('emptyMessage')