From 370031159bf9cf8106b974520dff244d738d62f1 Mon Sep 17 00:00:00 2001
From: Norman F <nf@pocket-rocket.io>
Date: Mon, 30 Sep 2024 17:01:04 +0200
Subject: [PATCH] feat(Table): Add contextmenu handling

---
 .../examples/TableExampleContextmenu.vue      | 67 +++++++++++++++++++
 docs/content/2.components/table.md            | 16 +++++
 src/runtime/components/data/Table.vue         | 12 +++-
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/content/examples/TableExampleContextmenu.vue

diff --git a/docs/components/content/examples/TableExampleContextmenu.vue b/docs/components/content/examples/TableExampleContextmenu.vue
new file mode 100644
index 0000000000..8a2da62e14
--- /dev/null
+++ b/docs/components/content/examples/TableExampleContextmenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}]
+
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+const contextMenuRow = ref()
+
+function contextmenu (event: MouseEvent, row: any) {
+  // Prevent the default context menu
+  event.preventDefault()
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top: event.clientY,
+    left: event.clientX
+  })
+
+  contextMenuRow.value = row
+}
+
+</script>
+
+<template>
+  <div>
+    <UTable :rows="people" @contextmenu.stop="contextmenu" />
+
+    <UContextMenu
+      :virtual-element="virtualElement"
+      :model-value="!!contextMenuRow"
+      @update:model-value="contextMenuRow = null"
+    >
+      <div class="p-4">
+        {{ contextMenuRow.id }} - {{ contextMenuRow.name }}
+      </div>
+    </UContextMenu>
+  </div>
+</template>
diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index e2991ca84a..2bbfd8ea2b 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -285,6 +285,22 @@ componentProps:
 ---
 ::
 
+### Contextmenu
+
+Use the `contextmenu` listener on your Table to make the rows righ-clickable. The function will receive the original event as the first argument and the row as the second argument.
+
+You can use this to open a [ContextMenu](/components/context-menu) for that row.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-contextmenu'
+componentProps:
+  class: 'flex-1 flex-col overflow-hidden'
+---
+::
+
 ### Searchable
 
 You can easily use the [Input](/components/input) component to filter the rows.
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 24457f32c6..7e3d12c995 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -71,7 +71,7 @@
 
         <template v-else>
           <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
               <td v-if="modelValue" :class="ui.checkbox.padding">
                 <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.capture.stop="() => onSelect(row)" />
               </td>
@@ -325,6 +325,15 @@ export default defineComponent({
       $attrs.onSelect(row)
     }
 
+    function onContextmenu (event, row) {
+      if (!$attrs.onContextmenu) {
+        return
+      }
+
+      // @ts-ignore
+      $attrs.onContextmenu(event, row)
+    }
+
     function selectAllRows () {
       // Create a new array to ensure reactivity
       const newSelected = [...selected.value]
@@ -400,6 +409,7 @@ export default defineComponent({
       isSelected,
       onSort,
       onSelect,
+      onContextmenu,
       onChange,
       getRowData,
       toggleOpened,