refactor(gui-v2): centeralise imports to #imports

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
-import { getMdiIcon } from '@/utils'
+import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
 
 interface Props {
   modelValue?: boolean | undefined | number

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj } from '~/context'
+import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -64,11 +64,12 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
+    :placeholder="isDateInvalid ? 'Invalid date' : !editEnabled ? 'Select date and time' : ''"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
     :open="editEnabled ? false : open"
+    :disabled="!editEnabled"
     @click="open = !open"
     @ok="open = !open"
   >

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import {EditModeInj, ReadonlyInj} from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | string

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

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, ref } from '#imports'
-import {ColumnInj, ReadonlyInj} from '~/context'
-import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
+import {
+  ColumnInj,
+  ReadonlyInj,
+  computed,
+  convertDurationToSeconds,
+  convertMS2Duration,
+  durationOptions,
+  inject,
+  ref,
+} from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -65,7 +72,7 @@ const submitDuration = () => {
 <template>
   <div class="duration-cell-wrapper">
     <input
-        v-if="editEnabled"
+      v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
       :placeholder="durationPlaceholder"

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
-import { isEmail } from '~/utils'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
   modelValue: string | null

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
-import { computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined

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

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -20,7 +19,7 @@ const column = inject(ColumnInj)
 // const isForm = inject<boolean>('isForm', false)
 
 // FIXME: use editEnabled to control the UI permission
-const editEnabled = inject(ReadonlyInj)
+// const editEnabled = inject(ReadonlyInj)
 
 const active = inject(ActiveCellInj, ref(false))
 

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
-import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
+import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
 
 interface Props {
   modelValue: number | string | null

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue?: number | null

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

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | undefined
@@ -17,7 +16,7 @@ const column = inject(ColumnInj)
 // const isForm = inject<boolean>('isForm', false)
 
 // FIXME: use editEnabled to control the UI permission
-const editEnabled = inject(ReadonlyInj)
+// const editEnabled = inject(ReadonlyInj)
 
 const active = inject(ActiveCellInj, ref(false))
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject } from '#imports'
 
 interface Props {
   modelValue: string | null

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | null

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 let isTimeInvalid = $ref(false)
 

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

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
-import { isValidURL } from '~/utils'
+import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -14,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = computed({
   get: () => value,

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 let isYearInvalid = $ref(false)