From 18c8a3396b2afd8f9d402e2d8a78ef01f959859c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Olejniczak?= <blind.x6@gmail.com>
Date: Fri, 17 Mar 2023 21:14:09 +0100
Subject: [PATCH] Add handling remove word from List view

---
 src/components/WordListing.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/WordListing.vue b/src/components/WordListing.vue
index 70954ab..47a0ccf 100644
--- a/src/components/WordListing.vue
+++ b/src/components/WordListing.vue
@@ -5,7 +5,7 @@ import { useWordStore } from '@/stores/word'
 
 defineProps<{ words: Word[] }>()
 
-const wordStore = useWordStore()
+const store = useWordStore()
 
 let itemsPerPage = ref(100)
 const headers = [
@@ -27,10 +27,6 @@ function getProgressColor(proficiency: number) {
   else if (proficiency >= 25) return 'amber'
   else return 'grey-lighten-2'
 }
-
-function removeWord(wordId: number) {
-  wordStore.deleteWord(wordId)
-}
 </script>
 
 <template>
@@ -56,7 +52,7 @@ function removeWord(wordId: number) {
         class="action"
         size="small"
         icon="mdi-trash-can-outline"
-        @click="removeWord(item.raw.id)"
+        @click="store.deleteWord(item.raw.id)"
       />
     </template>
   </v-data-table>
@@ -71,7 +67,7 @@ function removeWord(wordId: number) {
 tr:hover {
   i.action {
     opacity: 1;
-    transition: all 0.6s ease 0.5s;
+    transition: opacity 0.6s ease 0.3s;
 
     &:hover {
       color: #ef5350;