Merge pull request #2925 from nocodb/refactor/gui-v2-added-phonenumber

vue3: Added phone number cell

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Text from './Text.vue'
+
+interface Props {
+  modelValue: any
+}
+
+interface Emits {
+  (event: 'update:modelValue', model: string): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+</script>
+
+<template>
+  <Text v-model="vModel" />
+</template>
+
+<style scoped></style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj } from '~/context'
+import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
@@ -52,6 +53,8 @@ const icon = computed(() => {
     return AttachmentIcon
   } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
     return NumericIcon
+  } else if (additionalColMeta.isPhoneNumber) {
+    return FilePhoneIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon

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

@@ -46,6 +46,7 @@ const {
   isSingleSelect,
   isMultiSelect,
   isPercent,
+  isPhoneNumber,
 } = useColumn(column)
 </script>
 
@@ -183,6 +184,7 @@ todo :
     <CellDuration v-else-if="isDuration" v-model="localState" />
     <CellEmail v-else-if="isEmail" v-model="localState" />
     <CellUrl v-else-if="isURL" v-model="localState" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
     <!-- v-on="parentListeners"
         />
     -->

packages/nc-gui-v2/composables/useColumn.ts

@@ -30,6 +30,7 @@ export function useColumn(column: ColumnType) {
   const isAttachment = uiDatatype === 'Attachment'
   const isRating = uiDatatype === UITypes.Rating
   const isCurrency = uiDatatype === 'Currency'
+  const isPhoneNumber = uiDatatype === 'PhoneNumber'
   const isDuration = uiDatatype === UITypes.Duration
   const isPercent = uiDatatype === UITypes.Percent
   const isAutoSaved = [
@@ -74,5 +75,6 @@ export function useColumn(column: ColumnType) {
     isSingleSelect,
     isMultiSelect,
     isPercent,
+    isPhoneNumber,
   }
 }