From 6da3e6422a6eda8da5311e9b6f1ae058ac4aad59 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 8 Aug 2022 19:58:54 +0200
Subject: [PATCH] chore(gui-v2): update email float and url component types

---
 packages/nc-gui-v2/components/cell/Email.vue | 9 +++++----
 packages/nc-gui-v2/components/cell/Float.vue | 3 ++-
 packages/nc-gui-v2/components/cell/Url.vue   | 7 ++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index ab10f0aebb..aeaf37fa1f 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, useVModel } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { computed, inject, ref, useVModel } from '#imports'
 import { isEmail } from '~/utils'
 import { EditModeInj } from '~/context'
 
@@ -19,13 +20,13 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const validEmail = computed(() => isEmail(vModel.value))
+const validEmail = computed(() => vModel.value && isEmail(vModel.value))
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" 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>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index ff836dcad5..12db66e6a6 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VNodeRef } from '@vue/runtime-core'
 import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
@@ -18,7 +19,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 1bfcdb39df..64cf7f17de 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import type { VNodeRef } from '@vue/runtime-core'
+import { computed, inject, ref } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 import { isValidURL } from '~/utils'
 
@@ -18,7 +19,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!column?.value?.meta?.validate || isValidURL(val)) {
+    if (!column?.value?.meta?.validate || (val && isValidURL(val))) {
       emit('update:modelValue', val)
     }
   },
@@ -26,7 +27,7 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const focus = (el: HTMLInputElement) => el?.focus()
+const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>