Merge pull request #2930 from nocodb/fix/gui-v2-cell-follow-ups

fix(gui-v2): cell follow ups

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

@@ -2,40 +2,31 @@
 import { computed } from '#imports'
 import { isEmail } from '~/utils'
 
-const { modelValue: value } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
-
-const editEnabled = inject<boolean>('editEnabled')
-
 interface Props {
   modelValue: string
 }
 
+interface Emits {
+  (event: 'update:modelValue', model: string): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
 const root = ref<HTMLInputElement>()
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
 
-const validEmail = computed(() => isEmail(value))
+const editEnabled = inject<boolean>('editEnabled')
-</script>
 
-<script lang="ts">
+const vModel = useVModel(props, 'modelValue', emits)
-export default {
+
-  name: 'EmailCell',
+const validEmail = computed(() => isEmail(vModel.value))
-}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
-  <a
+  <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
-    v-else-if="validEmail"
+    {{ vModel }}
-    class="caption py-2 text-primary underline hover:opacity-75"
-    :href="`mailto:${value}`"
-    target="_blank"
-  >
-    {{ value }}
   </a>
-  <span v-else>{{ value }}</span>
+  <span v-else>{{ vModel }}</span>
 </template>

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

@@ -8,11 +8,14 @@ interface Props {
 }
 
 const { modelValue: value } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
+
 const column = inject(ColumnInj)
+
 const editEnabled = inject<boolean>('editEnabled')
 
-const localState = computed({
+const vModel = computed({
   get: () => value,
   set: (val) => {
     if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
@@ -24,19 +27,16 @@ const localState = computed({
 const isValid = computed(() => value && isValidURL(value))
 
 const root = ref<HTMLInputElement>()
+
 onMounted(() => {
   root.value?.focus()
 })
 </script>
 
 <template>
-  <span v-if="editEnabled">
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
-    <input ref="root" v-model="localState" />
+  <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
-  </span>
-  <span v-else>
-    <a v-if="isValid" class="caption py-2 text-primary underline hover:opacity-75" :href="value" target="_blank">{{ value }}</a>
   <span v-else>{{ value }}</span>
-  </span>
 </template>
 
 <style scoped></style>

packages/nc-gui-v2/components/virtual-cell/Formula.vue

@@ -35,7 +35,7 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
     <div class="pa-2" @dblclick="showEditFormulaWarningMessage">
       <div v-if="urls" v-html="urls" />
       <div v-else>{{ result }}</div>
-      <div v-if="showEditFormulaWarning" class="text-left mt-2 text-[#e65100]">
+      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
       </div>