refactor(gui-v2): accept null prop value in cell component

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

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

@@ -3,7 +3,7 @@ import { computed, inject, ref, useVModel } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 const props = defineProps<Props>()

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

@@ -2,14 +2,13 @@
 import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 

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

@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)

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

@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -3,7 +3,7 @@ import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 interface Emits {

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

@@ -4,7 +4,7 @@ import { computed, inject } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string | Record<string, any>
+  modelValue: string | Record<string, any> | null
   isForm: boolean
 }
 

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

@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -8,7 +8,7 @@ import MdiThumbUpIcon from '~icons/mdi/thumb-up'
 import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
-  modelValue?: number
+  modelValue?: number | null
   readOnly?: boolean
 }
 

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

@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()

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

@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)

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

@@ -4,7 +4,7 @@ import { ColumnInj, EditModeInj } from '~/context'
 import { isValidURL } from '~/utils'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()

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

@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: number | string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: number
-}
-
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isYearInvalid = $ref(false)