running-tools

commit 5dfc32e6eb3e37c941a6d2b6976588361dfd9d1f
parent 31633310b07de3b22b973e2db91c17c407c92031
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sat, 28 Aug 2021 19:11:55 -0700

Implement v-blur directive

Diffstat:
M
src/components/TimeTable.vue
 | 
16
+++++++++++-----
A
src/directives/blur.js
 | 
5
+++++

2 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/src/components/TimeTable.vue b/src/components/TimeTable.vue
@@ -8,7 +8,7 @@
           <th>Time</th>
 
           <th>
-            <button class="icon" title="Edit Targets" @click="inEditMode=true">
+            <button class="icon" title="Edit Targets" @click="inEditMode=true" v-blur>
               <img alt="" src="@/assets/edit.svg">
             </button>
           </th>
@@ -46,10 +46,10 @@
           <th>Edit Targets</th>
 
           <th>
-            <button class="icon" title="Reset Targets" @click="resetTargets">
+            <button class="icon" title="Reset Targets" @click="resetTargets" v-blur>
               <img alt="" src="@/assets/rotate-ccw.svg">
             </button>
-            <button class="icon" title="Close" @click="inEditMode=false">
+            <button class="icon" title="Close" @click="inEditMode=false" v-blur>
               <img alt="" src="@/assets/x.svg">
             </button>
           </th>
@@ -69,7 +69,7 @@
           </td>
 
           <td>
-            <button class="icon" title="Remove Target" @click="targets.splice(index, 1)">
+            <button class="icon" title="Remove Target" @click="targets.splice(index, 1)" v-blur>
               <img alt="" src="@/assets/trash-2.svg">
             </button>
           </td>
@@ -89,7 +89,7 @@
         <tr>
           <td colspan="2">
             <button class="icon" title="Add Target" @click="targets.push({distanceValue: 1,
-              distanceUnit: 'miles'})">
+              distanceUnit: 'miles'})" v-blur>
               <img alt="" src="@/assets/plus-circle.svg">
             </button>
           </td>
@@ -105,6 +105,8 @@ import storage from '@/utils/localStorage';
 
 import DecimalInput from '@/components/DecimalInput.vue';
 
+import blur from '@/directives/blur';
+
 export default {
   name: 'TimeTable',
 
@@ -112,6 +114,10 @@ export default {
     DecimalInput,
   },
 
+  directives: {
+    blur,
+  },
+
   props: {
     /**
      * The method that generates the time table rows
diff --git a/src/directives/blur.js b/src/directives/blur.js
@@ -0,0 +1,5 @@
+export default {
+  inserted(el, binding) {
+    el.addEventListener(binding.value ? binding.value : 'click', () => el.blur());
+  },
+};