fix(gui-v2): on blur event reset editable value

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/cell/Currency.vue

@@ -37,10 +37,18 @@ const currency = computed(() => {
     return vModel.value
   }
 })
+
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="w-full h-full border-none outline-none"
+    @blur="editEnabled = false"
+  />
   <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>

packages/nc-gui-v2/components/cell/Decimal.vue

@@ -31,6 +31,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>

packages/nc-gui-v2/components/cell/Email.vue

@@ -25,7 +25,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
   <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>

packages/nc-gui-v2/components/cell/Float.vue

@@ -29,6 +29,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>

packages/nc-gui-v2/components/cell/Integer.vue

@@ -32,6 +32,7 @@ function onKeyDown(evt: KeyboardEvent) {
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
+    @blur="editEnabled = false"
     @keydown="onKeyDown"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>

packages/nc-gui-v2/components/cell/Url.vue

@@ -30,7 +30,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>