Merge pull request #2888 from nocodb/feat/gui-v2-email-cell

feat(gui-v2): Email Cell

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

@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-
 import { isEmail } from '~/utils/validation'
 
+const { modelValue: value } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const editEnabled = inject<boolean>('editEnabled')
+
 interface Props {
   modelValue: string
 }
 
-const { modelValue } = defineProps<Props>()
+const root = ref<HTMLInputElement>()
+const localState = computed({
+  get: () => value,
+  set: (val) => emit('update:modelValue', val),
+})
 
-const validEmail = computed(() => isEmail(modelValue))
+const validEmail = computed(() => isEmail(value))
 </script>
 
 <script lang="ts">
@@ -19,6 +28,14 @@ export default {
 </script>
 
 <template>
-  <a v-if="validEmail" :href="`mailto:${modelValue}`" target="_blank">{{ modelValue }}</a>
-  <span v-else>{{ modelValue }}</span>
+  <input v-if="editEnabled" ref="root" v-model="localState" />
+  <a
+    v-else-if="validEmail"
+    class="caption py-2 text-primary underline hover:opacity-75"
+    :href="`mailto:${value}`"
+    target="_blank"
+  >
+    {{ value }}
+  </a>
+  <span v-else>{{ value }}</span>
 </template>

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -16,6 +16,7 @@ import RatingIcon from '~icons/mdi/star'
 import GenericIcon from '~icons/mdi/square-rounded'
 import AttachmentIcon from '~icons/mdi/image-multiple-outline'
 import URLIcon from '~icons/mdi/link'
+import EmailIcon from '~icons/mdi/email'
 
 const column = inject(ColumnInj)
 
@@ -38,6 +39,8 @@ const icon = computed(() => {
     return BooleanIcon
   } else if (additionalColMeta.isTextArea) {
     return TextAreaIcon
+  } else if (additionalColMeta.isEmail) {
+    return EmailIcon
   } else if (additionalColMeta.isRating) {
     return RatingIcon
   } else if (additionalColMeta.isAttachment) {

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -52,7 +52,6 @@ const {
 todo :
  JSONCell
  Currency
- Email
 -->
 
     <!--    <RatingCell -->
@@ -193,6 +192,7 @@ todo :
           v-on="$listeners"
         /> -->
     <CellDuration v-else-if="isDuration" v-model="localState" />
+    <CellEmail v-else-if="isEmail" v-model="localState" />
     <CellUrl v-else-if="isURL" v-model="localState" />
     <!-- v-on="parentListeners"
         />