fix(nc-gui): remove injection usage in callback

# What's changed?

* update EditOrAdd form style
* remove injection use on callbacks
    * fixes errors thrown while changing column type
* use `unref`

packages/nc-gui/components/smartsheet-column/EditOrAdd.vue

@@ -97,11 +97,11 @@ onMounted(() => {
 
 <template>
   <div
-    class="w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border"
+    class="w-[400px] bg-gray-50 shadow p-4 overflow-auto border"
     :class="{ '!w-[600px]': formState.uidt === UITypes.Formula }"
     @click.stop
   >
-    <a-form v-if="formState" v-model="formState" name="column-create-or-edit" layout="vertical">
+    <a-form v-if="formState" v-model="formState" no-style name="column-create-or-edit" layout="vertical">
       <div class="flex flex-col gap-2">
         <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
           <a-input ref="antInput" v-model:value="formState.title" class="nc-column-name-input" @input="onAlter(8)" />
@@ -138,6 +138,7 @@ onMounted(() => {
           v-model:value="formState"
         />
       </div>
+
       <div
         v-if="!isVirtualCol(formState.uidt)"
         class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex items-center gap-1 justify-end"
@@ -147,18 +148,22 @@ onMounted(() => {
         <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
       </div>
 
-      <div class="overflow-hidden" :class="advancedOptions ? 'h-min mb-2' : 'h-0'">
+      <Transition name="layout" mode="out-in">
-        <a-checkbox
+        <div v-if="advancedOptions" class="overflow-hidden">
-          v-if="formState.meta && columnToValidate.includes(formState.uidt)"
+          <a-checkbox
-          v-model:checked="formState.meta.validate"
+            v-if="formState.meta && columnToValidate.includes(formState.uidt)"
-          class="ml-1 mb-1"
+            v-model:checked="formState.meta.validate"
-        >
+            class="ml-1 mb-1"
-          <span class="text-[10px] text-gray-600">
+          >
-            {{ `Accept only valid ${formState.uidt}` }}
+            <span class="text-[10px] text-gray-600">
-          </span>
+              {{ `Accept only valid ${formState.uidt}` }}
-        </a-checkbox>
+            </span>
-        <SmartsheetColumnAdvancedOptions v-model:value="formState" />
+          </a-checkbox>
-      </div>
+
+          <SmartsheetColumnAdvancedOptions v-model:value="formState" />
+        </div>
+      </Transition>
+
       <a-form-item>
         <div class="flex justify-end gap-1 mt-4">
           <a-button html-type="button" @click="emit('cancel')">

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -82,8 +82,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
     const onUidtOrIdTypeChange = () => {
-      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
-
       const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
       formState.value = {
         ...formState.value,
@@ -111,14 +109,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
         }
       }
 
-      if (isCurrency.value) {
+      if (column.value?.uidt === UITypes.Currency) {
-        if (column.value?.uidt === UITypes.Currency) {
+        formState.value.dtxp = column.value.dtxp
-          formState.value.dtxp = column.value.dtxp
+        formState.value.dtxs = column.value.dtxs
-          formState.value.dtxs = column.value.dtxs
+      } else {
-        } else {
+        formState.value.dtxp = 19
-          formState.value.dtxp = 19
+        formState.value.dtxs = 2
-          formState.value.dtxs = 2
-        }
       }
 
       formState.value.altered = formState.value.altered || 2
@@ -167,7 +163,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const addOrUpdate = async (onSuccess: () => void) => {
       try {
-        console.log(formState, validators)
         if (!(await validate())) return
       } catch (e) {
         console.log(e)

packages/nc-gui/composables/useSmartsheetRowStore.ts

@@ -117,9 +117,9 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         NOCO,
         project.value?.id as string,
         meta.value?.title as string,
-        extractPkFromRow(ref(row).value?.row, meta.value?.columns as ColumnType[]),
+        extractPkFromRow(unref(row)?.row, meta.value?.columns as ColumnType[]),
       )
-      Object.assign(ref(row).value, {
+      Object.assign(unref(row), {
         row: record,
         oldRow: { ...record },
         rowMeta: {},