feat(VDataTable): forward arbitrary row events (#15617)

FBuervenich · KaelWD · web-flow · commit 243efcc34fe8 · 2023-06-08T01:40:21.000+10:00
closes #13332 Co-authored-by: Kael <kaelwd@gmail.com>
diff --git a/packages/api-generator/src/locale/en/v-data-table.json b/packages/api-generator/src/locale/en/v-data-table.json
@@ -63,8 +63,7 @@
   },
   "events": {
     "click:row": "Emits when a table row is clicked. This event provides 3 arguments: the first is the item data that was clicked, the second is the other related data provided by the `item` slot, and the third is the native click event. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.",
-    "contextmenu:row": "Emits when a table row is right-clicked. The item for the row is included. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.",
-    "dblclick:row": "Emits when a table row is double-clicked. The item for the row is included. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.",
+    "<event>:row": "Pass through any native event listener to the table row elements. The first argument is the event object and the second is related data provided to the item slot. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.",
     "current-items": "Emits the items provided via the **items** prop, every time the internal **computedItems** is changed.",
     "page-count": "Emits when the **pageCount** property of the **pagination** prop is updated",
     "pagination": "Emits when something changed to the `pagination` which can be provided via the `pagination` prop",
diff --git a/packages/api-generator/src/maps/v-data-table.js b/packages/api-generator/src/maps/v-data-table.js
@@ -34,14 +34,9 @@ const DataTableEvents = [
     value: `any, ${dataString}, MouseEvent`,
   },
   {
-    name: 'contextmenu:row',
+    name: '<event>:row',
     source: 'v-data-table',
-    value: `MouseEvent, ${dataString}`,
-  },
-  {
-    name: 'dblclick:row',
-    source: 'v-data-table',
-    value: `MouseEvent, ${dataString}`,
+    value: `${dataString}, Event`,
   },
 ].concat(DataIteratorEvents)
 
diff --git a/packages/vuetify/src/components/VCalendar/mixins/calendar-base.ts b/packages/vuetify/src/components/VCalendar/mixins/calendar-base.ts
@@ -3,7 +3,7 @@
 import mixins from '../../../util/mixins'
 import Colorable from '../../../mixins/colorable'
 import Localable from '../../../mixins/localable'
-import Mouse from './mouse'
+import Mouse from '../../../mixins/mouse'
 import Themeable from '../../../mixins/themeable'
 import Times from './times'
 
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -31,6 +31,7 @@ import MobileRow from './MobileRow'
 
 // Mixins
 import Loadable from '../../mixins/loadable'
+import Mouse from '../../mixins/mouse'
 
 // Directives
 import ripple from '../../directives/ripple'
@@ -74,6 +75,7 @@ function searchTableItems (
 export default mixins(
   VDataIterator,
   Loadable,
+  Mouse,
 ).extend({
   name: 'v-data-table',
 
@@ -241,11 +243,10 @@ export default mixins(
           },
         },
         on: {
-          // TODO: for click, the first argument should be the event, and the second argument should be data,
+          ...this.getDefaultMouseEventHandlers(':row', () => data, true),
+          // TODO: the first argument should be the event, and the second argument should be data,
           // but this is a breaking change so it's for v3
           click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
-          contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
-          dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
         },
       }
     },
diff --git a/packages/vuetify/src/mixins/mouse/__tests__/mouse.spec.ts b/packages/vuetify/src/mixins/mouse/__tests__/mouse.spec.ts
@@ -1,11 +1,11 @@
-import Mouse from '../mouse'
+import Mouse from '../index'
 
 import {
   mount,
   Wrapper,
   MountOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../../util/mixins'
+import { ExtractVue } from '../../../util/mixins'
 
 const Mock = Mouse.extend({
   render: h => h('div'),
diff --git a/packages/vuetify/src/mixins/mouse/index.ts b/packages/vuetify/src/mixins/mouse/index.ts
@@ -23,7 +23,7 @@ export default Vue.extend({
   name: 'mouse',
 
   methods: {
-    getDefaultMouseEventHandlers (suffix: string, getEvent: MouseHandler): MouseEventsMap {
+    getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
       const listeners = Object.keys(this.$listeners)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {
@@ -34,9 +34,9 @@ export default Vue.extend({
       return this.getMouseEventHandlers({
         ...listeners,
         ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false },
-      }, getEvent)
+      }, getData, eventFirst)
     },
-    getMouseEventHandlers (events: MouseEvents, getEvent: MouseHandler): MouseEventsMap {
+    getMouseEventHandlers (events: MouseEvents, getData: MouseHandler, eventFirst = false): MouseEventsMap {
       const on: MouseEventsMap = {}
 
       for (const event in events) {
@@ -85,7 +85,13 @@ export default Vue.extend({
               }
             }
 
-            this.$emit(event, getEvent(e), e)
+            // TODO: VCalendar emits the calendar event as the first argument,
+            // but it really should be the native event instead so modifiers can be used
+            if (eventFirst) {
+              this.$emit(event, e, getData(e))
+            } else {
+              this.$emit(event, getData(e), e)
+            }
           }
 
           return eventOptions.result
