Merge pull request #3140 from nocodb/refactor/gui-v2-corrections

refactor(gui-v2): use edit and readonly injection keys properly

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -19,7 +20,7 @@ const column = inject(ColumnInj)
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const checkboxMeta = $computed(() => {
   return {

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

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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj } from '#imports'
+import { ColumnInj } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -12,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const columnMeta = inject(ColumnInj, null)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 let isDateInvalid = $ref(false)
 

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

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

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, inject, useVModel } from '#imports'
+import { inject, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null | string | undefined
@@ -14,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

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

@@ -1,14 +1,6 @@
 <script setup lang="ts">
-import {
+import { ColumnInj, computed, convertDurationToSeconds, convertMS2Duration, durationOptions, inject, ref } from '#imports'
-  ColumnInj,
+import { EditModeInj } from '~/context'
-  ReadonlyInj,
-  computed,
-  convertDurationToSeconds,
-  convertMS2Duration,
-  durationOptions,
-  inject,
-  ref,
-} from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
@@ -20,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const showWarningMessage = ref(false)
 

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
+import { computed, inject, isEmail, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -14,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, inject, useVModel } from '#imports'
+import { inject, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null | undefined
@@ -14,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, inject, useVModel } from '#imports'
+import { inject, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null | undefined
@@ -14,7 +15,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

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

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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | string | null | undefined
@@ -9,7 +10,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const column = inject(ColumnInj)
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
+import { ColumnInj, computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -11,7 +12,7 @@ const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const ratingMeta = computed(() => {
   return {

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

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

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, inject } from '#imports'
+import { inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -10,7 +11,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ReadonlyInj, computed, inject } from '#imports'
+import { computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -10,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const vModel = computed({
   get: () => modelValue ?? '',

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 '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 let isTimeInvalid = $ref(false)
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
+import { ColumnInj, computed, inject, isValidURL } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | null | undefined
@@ -12,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 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 '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | string | null | undefined
@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 let isYearInvalid = $ref(false)
 

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { ActiveCellInj, CellValueInj, ColumnInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, EditModeInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
@@ -18,7 +18,7 @@ const row = inject(RowInj)
 
 const active = inject(ActiveCellInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const listItemsDlg = ref(false)
 

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,7 +17,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const listItemsDlg = ref(false)
 

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReadonlyInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -17,7 +17,7 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const listItemsDlg = ref(false)
 

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useLTARStoreOrThrow } from '#imports'
-import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
+import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
   value?: string | number | boolean
@@ -13,7 +13,7 @@ const emit = defineEmits(['unlink'])
 
 const { relatedTableMeta } = useLTARStoreOrThrow()
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const active = inject(ActiveCellInj, ref(false))
 

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -2,7 +2,7 @@
 import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
-import { ColumnInj, IsFormInj, ReadonlyInj } from '~/context'
+import { ColumnInj, EditModeInj, IsFormInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
@@ -13,7 +13,7 @@ const isForm = inject(IsFormInj, ref(false))
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject(ReadonlyInj)
+const editEnabled = inject(EditModeInj)
 
 const {
   childrenList,