feat(table): add table row middle click (auxclicked) event (#2425)

src/components/table/README.md

@@ -1510,6 +1510,17 @@ functionality is non critical or can be provided via other means:
 - `row-contextmenu`
 - `row-hovered`
 - `row-unhovered`
+- `row-middle-clicked`
+
+Also, `row-middle-clicked` event is not supported in all browsers (i.e. IE, Safari and most mobile browsers).
+When listening for `row-middle-clicked` events originating on elements that do not support input or navigation, 
+you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button. 
+On Windows this is usually autoscroll, and on macOS and Linux this is usually clipboard paste. 
+This can be done by preventing the default behaviour of the `mousedown` or `pointerdown` event.
+
+Additionally, you may need to avoid opening a system context menu after a right click. 
+Due to timing differences between operating systems, this too is not a preventable default behaviour 
+of `row-middle-clicked`. Instead, this can be done by preventing the default behaviour of the `contextmenu` event.
 
 
 ## Complete Example

src/components/table/package.json

@@ -41,6 +41,24 @@
                     }
                 ]
             },
+            {
+                "event": "row-middle-clicked",
+                "description": "Emitted when a row is middle clicked.",
+                "args": [
+                    {
+                        "arg": "item",
+                        "description": "Item data of the row being middle clicked."
+                    },
+                    {
+                        "arg": "index",
+                        "description": "Index of the row being middle clicked."
+                    },
+                    {
+                        "arg": "event",
+                        "description": "Native event object."
+                    }
+                ]
+            },
             {
                 "event": "row-contextmenu",
                 "description": "Emitted when a row is right clicked.",

src/components/table/table.js

@@ -953,6 +953,13 @@ export default {
       }
       this.$emit('row-clicked', item, index, e)
     },
+    middleMouseRowClicked (e, item, index) {
+      if (this.stopIfBusy(e)) {
+        // If table is busy (via provider) then don't propagate
+        return
+      }
+      this.$emit('row-middle-clicked', item, index, e)
+    },
     rowDblClicked (e, item, index) {
       if (this.stopIfBusy(e)) {
         // If table is busy (via provider) then don't propagate
@@ -1343,6 +1350,11 @@ export default {
               },
               on: {
                 // TODO: only instatiate handlers if we have registered listeners
+                auxclick: evt => {
+                  if (evt.which === 2) {
+                    this.middleMouseRowClicked(evt, item, rowIndex)
+                  }
+                },
                 click: evt => { this.rowClicked(evt, item, rowIndex) },
                 keydown: evt => {
                   const keyCode = evt.keyCode

src/components/table/table.spec.js

@@ -425,6 +425,25 @@ describe('table', async () => {
     }
   })
 
+  it('each data row should emit a row-middle-clicked event when middle clicked', async () => {
+    const { app: { $refs } } = window
+    const vm = $refs.table_paginated
+
+    const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
+    expect(tbody).toBeDefined()
+    if (tbody) {
+      const trs = [...tbody.children]
+      expect(trs.length).toBe(vm.perPage)
+      trs.forEach((tr, idx) => {
+        const spy = jest.fn()
+        vm.$on('row-middle-clicked', spy)
+        tr.dispatchEvent(new MouseEvent('auxclick', { 'button': 1, 'which': 2 }))
+        vm.$off('row-middle-clicked', spy)
+        expect(spy).toHaveBeenCalled()
+      })
+    }
+  })
+
   it('each header th should emit a head-clicked event when clicked', async () => {
     const { app: { $refs } } = window
     const vm = $refs.table_paginated