primevue 4.0.7 → 4.1.0

package/treetable/TreeTableRow.vue

@@ -14,8 +14,10 @@
         @click="onClick"
         @keydown="onKeyDown"
         @touchend="onTouchEnd"
+        @contextmenu="onRowRightClick"
         v-bind="ptm('row', ptmOptions)"
         :data-p-selected="selected"
+        :data-p-selected-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
     >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
             <TTBodyCell
@@ -51,12 +53,15 @@
             :expandedKeys="expandedKeys"
             :selectionMode="selectionMode"
             :selectionKeys="selectionKeys"
+            :contextMenu="contextMenu"
+            :contextMenuSelection="contextMenuSelection"
             :indentation="indentation"
             :ariaPosInset="node.children.indexOf(childNode) + 1"
             :ariaSetSize="node.children.length"
             :templates="templates"
             @node-toggle="$emit('node-toggle', $event)"
             @node-click="$emit('node-click', $event)"
+            @row-rightclick="$emit('row-rightclick', $event)"
             @checkbox-change="onCheckboxChange"
             :unstyled="unstyled"
             :pt="pt"
@@ -66,7 +71,7 @@
 
 <script>
 import { find, findSingle, focus, getAttribute, isClickable } from '@primeuix/utils/dom';
-import { resolveFieldData } from '@primeuix/utils/object';
+import { equals, resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import { getVNodeProp } from '@primevue/core/utils';
 import BodyCell from './BodyCell.vue';
@@ -75,7 +80,7 @@ export default {
     name: 'TreeTableRow',
     hostName: 'TreeTable',
     extends: BaseComponent,
-    emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
+    emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange', 'row-rightclick', 'rowRightclick'],
     props: {
         node: {
             type: null,
@@ -132,6 +137,14 @@ export default {
         templates: {
             type: Object,
             default: null
+        },
+        contextMenu: {
+            type: Boolean,
+            default: false
+        },
+        contextMenuSelection: {
+            type: Object,
+            default: null
         }
     },
     nodeTouched: false,
@@ -156,6 +169,12 @@ export default {
             });
             this.nodeTouched = false;
         },
+        onRowRightClick(event) {
+            this.$emit('row-rightclick', {
+                originalEvent: event,
+                node: this.node
+            });
+        },
         onTouchEnd() {
             this.nodeTouched = true;
         },
@@ -426,6 +445,13 @@ export default {
         selected() {
             return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] === true : false;
         },
+        isSelectedWithContextMenu() {
+            if (this.node && this.contextMenuSelection) {
+                return equals(this.node, this.contextMenuSelection, this.dataKey);
+            }
+
+            return false;
+        },
         checked() {
             return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].checked : false;
         },

package/treetable/index.d.ts

@@ -173,6 +173,21 @@ export interface TreeTableFilterEvent extends TreeTableSortEvent {
     filteredValue: any;
 }
 
+/**
+ * Custom row context menu event.
+ * @see {@link TreeTableEmitsOptions['row-contextmenu']}
+ */
+export interface TreeTableRowContextMenuEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Selected row data.
+     */
+    node: TreeNode;
+}
+
 /**
  * Custom sort metadata.
  */
@@ -420,6 +435,15 @@ export interface TreeTableProps {
      * @defaultValue false
      */
     metaKeySelection?: boolean | undefined;
+    /**
+     * Enables context menu integration.
+     * @defaultValue false
+     */
+    contextMenu?: boolean | undefined;
+    /**
+     * Selected row instance with the ContextMenu.
+     */
+    contextMenuSelection?: any | any[] | undefined;
     /**
      * Number of rows to display per page.
      */
@@ -730,6 +754,11 @@ export interface TreeTableEmitsOptions {
      * @param {TreeSelectionKeys} value - New selection keys.
      */
     'update:selectionKeys'(event: TreeTableSelectionKeys): void;
+    /**
+     * Emitted when the contextMenuSelection changes.
+     * @param {*} value - New value.
+     */
+    'update:contextMenuSelection'(value: any[] | any | undefined): void;
     /**
      * Emitted when the first changes.
      * @param {number} value - New value.
@@ -795,6 +824,11 @@ export interface TreeTableEmitsOptions {
      * @param {Event} event - Browser event.
      */
     'column-resize-end'(event: Event): void;
+    /**
+     * Callback to invoke when a row is selected with a ContextMenu.
+     * @param {TreeTableRowContextMenuEvent} event - Custom row context menu event.
+     */
+    'row-contextmenu'(event: TreeTableRowContextMenuEvent): void;
 }
 
 export declare type TreeTableEmits = EmitFn<TreeTableEmitsOptions>;

package/treetable/index.mjs

@@ -1,7 +1,7 @@
-import { FilterService } from '@primevue/core/api';
-import { getVNodeProp, HelperSet, UniqueComponentId } from '@primevue/core/utils';
 import { getNextElementSibling, getOuterWidth, getPreviousElementSibling, getIndex, getAttribute, isClickable, findSingle, focus, find, clearSelection, getOffset, addStyle, setAttribute } from '@primeuix/utils/dom';
-import { resolveFieldData, localeComparator, sort } from '@primeuix/utils/object';
+import { resolveFieldData, equals, localeComparator, sort } from '@primeuix/utils/object';
+import { FilterService } from '@primevue/core/api';
+import { getVNodeProp, HelperSet } from '@primevue/core/utils';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import BaseComponent from '@primevue/core/basecomponent';
@@ -46,6 +46,14 @@ var script$5 = {
       type: Boolean,
       "default": false
     },
+    contextMenu: {
+      type: Boolean,
+      "default": false
+    },
+    contextMenuSelection: {
+      type: Object,
+      "default": null
+    },
     rows: {
       type: Number,
       "default": 0
@@ -846,7 +854,7 @@ var script$1 = {
   name: 'TreeTableRow',
   hostName: 'TreeTable',
   "extends": BaseComponent,
-  emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
+  emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange', 'row-rightclick', 'rowRightclick'],
   props: {
     node: {
       type: null,
@@ -903,6 +911,14 @@ var script$1 = {
     templates: {
       type: Object,
       "default": null
+    },
+    contextMenu: {
+      type: Boolean,
+      "default": false
+    },
+    contextMenuSelection: {
+      type: Object,
+      "default": null
     }
   },
   nodeTouched: false,
@@ -925,6 +941,12 @@ var script$1 = {
       });
       this.nodeTouched = false;
     },
+    onRowRightClick: function onRowRightClick(event) {
+      this.$emit('row-rightclick', {
+        originalEvent: event,
+        node: this.node
+      });
+    },
     onTouchEnd: function onTouchEnd() {
       this.nodeTouched = true;
     },
@@ -1191,6 +1213,12 @@ var script$1 = {
     selected: function selected() {
       return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] === true : false;
     },
+    isSelectedWithContextMenu: function isSelectedWithContextMenu() {
+      if (this.node && this.contextMenuSelection) {
+        return equals(this.node, this.contextMenuSelection, this.dataKey);
+      }
+      return false;
+    },
     checked: function checked() {
       return this.selectionKeys ? this.selectionKeys[this.nodeKey(this.node)] && this.selectionKeys[this.nodeKey(this.node)].checked : false;
     },
@@ -1215,7 +1243,7 @@ var script$1 = {
   }
 };
 
-var _hoisted_1$1 = ["tabindex", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset", "aria-selected", "aria-checked", "data-p-selected"];
+var _hoisted_1$1 = ["tabindex", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset", "aria-selected", "aria-checked", "data-p-selected", "data-p-selected-contextmenu"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_TTBodyCell = resolveComponent("TTBodyCell");
   var _component_TreeTableRow = resolveComponent("TreeTableRow", true);
@@ -1239,9 +1267,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     onTouchend: _cache[3] || (_cache[3] = function () {
       return $options.onTouchEnd && $options.onTouchEnd.apply($options, arguments);
+    }),
+    onContextmenu: _cache[4] || (_cache[4] = function () {
+      return $options.onRowRightClick && $options.onRowRightClick.apply($options, arguments);
     })
   }, _ctx.ptm('row', $options.ptmOptions), {
-    "data-p-selected": $options.selected
+    "data-p-selected": $options.selected,
+    "data-p-selected-contextmenu": $props.contextMenuSelection && $options.isSelectedWithContextMenu
   }), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
     return openBlock(), createElementBlock(Fragment, {
       key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -1279,20 +1311,25 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       expandedKeys: $props.expandedKeys,
       selectionMode: $props.selectionMode,
       selectionKeys: $props.selectionKeys,
+      contextMenu: $props.contextMenu,
+      contextMenuSelection: $props.contextMenuSelection,
       indentation: $props.indentation,
       ariaPosInset: $props.node.children.indexOf(childNode) + 1,
       ariaSetSize: $props.node.children.length,
       templates: $props.templates,
-      onNodeToggle: _cache[4] || (_cache[4] = function ($event) {
+      onNodeToggle: _cache[5] || (_cache[5] = function ($event) {
         return _ctx.$emit('node-toggle', $event);
       }),
-      onNodeClick: _cache[5] || (_cache[5] = function ($event) {
+      onNodeClick: _cache[6] || (_cache[6] = function ($event) {
         return _ctx.$emit('node-click', $event);
       }),
+      onRowRightclick: _cache[7] || (_cache[7] = function ($event) {
+        return _ctx.$emit('row-rightclick', $event);
+      }),
       onCheckboxChange: $options.onCheckboxChange,
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["dataKey", "columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "unstyled", "pt"]);
+    }, null, 8, ["dataKey", "columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "contextMenu", "contextMenuSelection", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "unstyled", "pt"]);
   }), 128)) : createCommentVNode("", true)], 64);
 }
 
@@ -1315,7 +1352,7 @@ var script = {
   name: 'TreeTable',
   "extends": script$5,
   inheritAttrs: false,
-  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'],
+  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', 'update:contextMenuSelection', 'row-contextmenu'],
   provide: function provide() {
     return {
       $columns: this.d_columns
@@ -1359,9 +1396,6 @@ var script = {
       this.d_multiSortMeta = newValue;
     }
   },
-  mounted: function mounted() {
-    this.$el.setAttribute(this.attributeSelector, '');
-  },
   beforeUnmount: function beforeUnmount() {
     this.destroyStyleElement();
     this.d_columns.clear();
@@ -1456,6 +1490,14 @@ var script = {
       this.$emit('update:selectionKeys', event.selectionKeys);
       if (event.check) this.$emit('node-select', event.node);else this.$emit('node-unselect', event.node);
     },
+    onRowRightClick: function onRowRightClick(event) {
+      if (this.contextMenu) {
+        clearSelection();
+        event.originalEvent.target.focus();
+      }
+      this.$emit('update:contextMenuSelection', event.node);
+      this.$emit('row-contextmenu', event);
+    },
     isSingleSelectionMode: function isSingleSelectionMode() {
       return this.selectionMode === 'single';
     },
@@ -1777,7 +1819,7 @@ var script = {
       this.destroyStyleElement();
       this.createStyleElement();
       var innerHTML = '';
-      var selector = "[data-pc-name=\"treetable\"][".concat(this.attributeSelector, "] > [data-pc-section=\"tablecontainer\"] > table[data-pc-section=\"table\"]");
+      var selector = "[data-pc-name=\"treetable\"][".concat(this.$attrSelector, "] > [data-pc-section=\"tablecontainer\"] > table[data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
@@ -1951,9 +1993,6 @@ var script = {
         var data = this.processedData;
         return data ? data.length : 0;
       }
-    },
-    attributeSelector: function attributeSelector() {
-      return UniqueComponentId();
     }
   },
   components: {
@@ -2147,13 +2186,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ariaPosInset: index + 1,
       tabindex: $options.setTabindex(node, index),
       loadingMode: _ctx.loadingMode,
+      contextMenu: _ctx.contextMenu,
+      contextMenuSelection: _ctx.contextMenuSelection,
       templates: _ctx.$slots,
       onNodeToggle: $options.onNodeToggle,
       onNodeClick: $options.onNodeClick,
       onCheckboxChange: $options.onCheckboxChange,
+      onRowRightclick: _cache[3] || (_cache[3] = function ($event) {
+        return $options.onRowRightClick($event);
+      }),
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["dataKey", "columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "loadingMode", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange", "unstyled", "pt"]);
+    }, null, 8, ["dataKey", "columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "loadingMode", "contextMenu", "contextMenuSelection", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange", "unstyled", "pt"]);
   }), 128)) : (openBlock(), createElementBlock("tr", mergeProps({
     key: 1,
     "class": _ctx.cx('emptyMessage')
@@ -2188,7 +2232,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": normalizeClass(_ctx.cx('pcPaginator', {
       position: 'bottom'
     })),
-    onPage: _cache[3] || (_cache[3] = function ($event) {
+    onPage: _cache[4] || (_cache[4] = function ($event) {
       return $options.onPage($event);
     }),
     alwaysShow: _ctx.alwaysShowPaginator,