refactor(gui-v2): convert to reactive

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { toRef } from 'vue'
+import { Ref, toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -28,9 +28,9 @@ import DecimalIcon from '~icons/mdi/decimal'
 const props = defineProps<{ columnMeta?: ColumnType }>()
 
 const columnMeta = toRef(props, 'columnMeta')
-const column = inject(ColumnInj, ref(columnMeta))
+const column = inject(ColumnInj, columnMeta)
 
-const additionalColMeta = useColumn(column.value as ColumnType)
+const additionalColMeta = useColumn(column as Ref<ColumnType>)
 
 const icon = computed(() => {
   if (column?.value?.pk) {

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

@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column?.value)
+} = useColumn(column)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {

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

@@ -1,16 +1,17 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
+import { Ref } from 'vue'
 
-export function useColumn(column: ColumnType) {
+export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = (column && column.uidt) as UITypes
-  const abstractType = isVirtualCol(column)
+  const uiDatatype: UITypes = (column?.value?.uidt) as UITypes
+  const abstractType = isVirtualCol(column?.value)
     ? null
-    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column)
+    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value)
 
-  const dataTypeLow = column && column.dt && column.dt.toLowerCase()
+  const dataTypeLow = column?.value?.dt?.toLowerCase()
   const isBoolean = abstractType === 'boolean'
   const isString = abstractType === 'string'
   const isTextArea = uiDatatype === UITypes.LongText

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

@@ -91,7 +91,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onUidtOrIdTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
       formState.value = {
@@ -134,7 +134,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onDataTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       formState.value.rqd = false
       if (formState.value.uidt !== UITypes.ID) {