chore(gui-v2): update email float and url component types

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>

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>

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>