feat(table): Add row-unhovered event (#1874)

gaaf · tmorehouse · commit a87cad14cd1e · 2018-10-23T23:41:30.000-03:00
* feat(table): Add row-unhovered event

Some users might want to know not only when the mouse is hovering a row,
but also when the mouse leaves the row.

For example for dynamically showing (and hiding) some row content based
on mouse hovering.

* Make function name match event
diff --git a/src/components/table/package.json b/src/components/table/package.json
@@ -77,6 +77,24 @@
                     }
                 ]
             },
+            {
+                "event": "row-unhovered",
+                "description": "Emitted when a row is unhovered.",
+                "args": [
+                    {
+                        "arg": "item",
+                        "description": "Item data of the row being unhovered."
+                    },
+                    {
+                        "arg": "index",
+                        "description": "Index of the row being unhovered."
+                    },
+                    {
+                        "arg": "event",
+                        "description": "Native event object."
+                    }
+                ]
+            },
             {
                 "event": "head-clicked",
                 "description": "Emitted when a header or footer cell is clicked.",
diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -274,6 +274,9 @@ export default {
               },
               mouseenter: evt => {
                 this.rowHovered(evt, item, rowIndex)
+              },
+              mouseleave: evt => {
+                this.rowUnhovered(evt, item, rowIndex)
               }
             }
           },
@@ -946,6 +949,13 @@ export default {
       }
       this.$emit('row-hovered', item, index, e)
     },
+    rowUnhovered (e, item, index) {
+      if (this.stopIfBusy(e)) {
+        // If table is busy (via provider) then don't propagate
+        return
+      }
+      this.$emit('row-unhovered', item, index, e)
+    },
     rowContextmenu (e, item, index) {
       if (this.stopIfBusy(e)) {
         // If table is busy (via provider) then don't propagate
