From dcfc6891fd7b609c8545c358fe75029884666bad Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 6 May 2020 23:03:50 +0530
Subject: [PATCH] fix: Use css to toggle row remove icon

---
 src/components/Controls/TableRow.vue | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/Controls/TableRow.vue b/src/components/Controls/TableRow.vue
index 38ae499f..dafa4e1b 100644
--- a/src/components/Controls/TableRow.vue
+++ b/src/components/Controls/TableRow.vue
@@ -1,21 +1,14 @@
 <template>
-  <Row
-    :ratio="ratio"
-    class="border-b px-2 w-full "
-    :class="{ 'bg-brand-100': hovering }"
-    @mouseover="hovering = true"
-    @mouseleave="hovering = false"
-    @click="hovering = false"
-  >
+  <Row :ratio="ratio" class="w-full px-2 border-b hover:bg-brand-100 group">
     <div class="flex items-center pl-2 text-gray-600">
-      <span v-if="hovering">
+      <span class="hidden group-hover:inline-block">
         <feather-icon
           name="x"
           class="w-4 h-4 -ml-1 cursor-pointer"
           @click="$emit('remove')"
         />
       </span>
-      <span v-else>
+      <span class="group-hover:hidden">
         {{ row.idx + 1 }}
       </span>
     </div>