From 109938673e8c4e5a0ecec1217cd3db6b74e0c59a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:09:19 +0200
Subject: [PATCH] feat(gui-v2): add `EditModeInj` and replace string key
 injection

---
 packages/nc-gui-v2/components.d.ts            |   6 -
 .../nc-gui-v2/components/cell/Attachment.vue  | 166 +--------------
 .../nc-gui-v2/components/cell/Currency.vue    |  34 ++--
 packages/nc-gui-v2/components/cell/Email.vue  |   9 +-
 packages/nc-gui-v2/components/cell/Float.vue  |  13 +-
 .../nc-gui-v2/components/cell/Integer.vue     |  15 +-
 .../components/cell/JsonEditableCell.vue      |  13 +-
 .../nc-gui-v2/components/cell/MultiSelect.vue |  54 +----
 .../components/cell/SingleSelect.vue          |  35 +---
 packages/nc-gui-v2/components/cell/Text.vue   |  53 +++--
 .../nc-gui-v2/components/cell/TextArea.vue    |  31 ++-
 packages/nc-gui-v2/components/cell/Url.vue    |  18 +-
 .../nc-gui-v2/components/smartsheet/Cell.vue  | 191 +++---------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  78 +------
 packages/nc-gui-v2/context/index.ts           |   1 +
 15 files changed, 145 insertions(+), 572 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 793a7529e2..d0e6800cef 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
-    AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
@@ -20,7 +19,6 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
@@ -46,20 +44,16 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
-    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
-    ATableColumnGroup: typeof import('ant-design-vue/es')['TableColumnGroup']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
-    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
index 52180b6cbb..fa9f20e9d5 100644
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ b/packages/nc-gui-v2/components/cell/Attachment.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { inject, ref, useProject, watchEffect } from '#imports'
+import { inject, reactive, ref, useProject, watchEffect } from '#imports'
 import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/context'
+import { ColumnInj, EditModeInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib'
 import { isImage } from '~/utils'
 import MaterialPlusIcon from '~icons/mdi/plus'
@@ -20,7 +20,7 @@ const isPublicForm = inject<boolean>('isPublicForm', false)
 const isForm = inject<boolean>('isForm', false)
 const meta = inject(MetaInj)
 const column = inject(ColumnInj)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const localFilesState = reactive([])
 const attachments = ref([])
@@ -28,7 +28,9 @@ const uploading = ref(false)
 const fileInput = ref<HTMLInputElement>()
 
 const { $api } = useNuxtApp()
+
 const { project } = useProject()
+
 const toast = useToast()
 
 watchEffect(() => {
@@ -97,15 +99,12 @@ const onFileSelection = async (e: unknown) => {
   }
   uploading.value = false
   emit('update:modelValue', JSON.stringify([...attachments.value, ...newAttachments]))
-
-  // this.$emit('input', JSON.stringify(this.localState))
-  // this.$emit('update')
 }
 </script>
 
 <template>
-  <div class="main h-100">
-    <div class="d-flex align-center img-container">
+  <div class="h-full w-full">
+    <div class="flex items-center img-container">
       <div class="d-flex no-overflow">
         <div
           v-for="(item, i) in isPublicForm ? localFilesState : attachments"
@@ -156,13 +155,11 @@ const onFileSelection = async (e: unknown) => {
         <MaterialPlusIcon />
       </div>
 
-      <v-spacer />
-
       <MaterialArrowExpandIcon @click.stop="dialog = true" />
       <!--      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true"> mdi-arrow-expand </v-icon> -->
     </div>
 
-    <input ref="fileInput" type="file" multiple class="d-none" @change="onFileSelection" />
+    <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelection" />
   </div>
 </template>
 
@@ -188,151 +185,4 @@ const onFileSelection = async (e: unknown) => {
 .expand-icon:hover {
   background-color: var(--v-primary-lighten4);
 }
-
-/*.img-container {
-  margin: 0 -2px;
-}
-
-.no-overflow {
-  overflow: hidden;
-}
-
-.add {
-  transition: 0.2s background-color;
-  !*background-color: #666666ee;*!
-  border-radius: 4px;
-  height: 33px;
-  margin: 5px 2px;
-}
-
-.add:hover {
-  !*background-color: #66666699;*!
-}
-
-.thumbnail {
-  height: 99px;
-  width: 99px;
-  margin: 2px;
-  border-radius: 4px;
-}
-
-.thumbnail img {
-  !*max-height: 33px;*!
-  max-width: 99px;
-}
-
-.main {
-  min-height: 20px;
-  position: relative;
-  height: auto;
-}
-
-.expand-icon {
-  margin-left: 8px;
-  border-radius: 2px;
-  !*opacity: 0;*!
-  transition: 0.3s background-color;
-}
-
-.expand-icon:hover {
-  !*opacity: 1;*!
-  background-color: var(--v-primary-lighten4);
-}
-
-.modal-thumbnail img {
-  height: 50px;
-  max-width: 100%;
-  border-radius: 4px;
-}
-
-.modal-thumbnail {
-  position: relative;
-  margin: 10px 10px;
-}
-
-.remove-icon {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.modal-thumbnail-card {
-  .download-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
-    opacity: 0;
-    transition: 0.4s opacity;
-  }
-
-  &:hover .download-icon {
-    opacity: 1;
-  }
-}
-
-.image-overlay-container {
-  max-height: 100vh;
-  overflow-y: auto;
-  position: relative;
-}
-
-.image-overlay-container .close-icon {
-  position: fixed;
-  top: 15px;
-  right: 15px;
-}
-
-.overlay-thumbnail {
-  transition: 0.4s transform, 0.4s opacity;
-  opacity: 0.5;
-}
-
-.overlay-thumbnail.active {
-  transform: scale(1.4);
-  opacity: 1;
-}
-
-.overlay-thumbnail:hover {
-  opacity: 1;
-}
-
-.modal-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-}
-
-.modal-thumbnail-card {
-  transition: 0.4s transform;
-}
-
-.modal-thumbnail-card:hover {
-  transform: scale(1.05);
-}
-
-.drop-overlay {
-  z-index: 5;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 5px;
-  background: #aaaaaa44;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-
-.expand-icon {
-  opacity: 0;
-  transition: 0.4s opacity;
-}
-
-.main:hover .expand-icon {
-  opacity: 1;
-}*/
 </style>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 84db28f405..fe99200482 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { computed, inject, ref, useVModel } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
 
-const { modelValue: value } = defineProps<Props>()
+interface Props {
+  modelValue: number
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
-interface Props {
-  modelValue: number
-}
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emit)
 
 const currencyMeta = computed(() => {
   return {
@@ -29,22 +27,20 @@ const currencyMeta = computed(() => {
 })
 const currency = computed(() => {
   try {
-    return isNaN(value)
-      ? value
+    return isNaN(vModel.value)
+      ? vModel.value
       : new Intl.NumberFormat(currencyMeta?.value?.currency_locale || 'en-US', {
           style: 'currency',
           currency: currencyMeta?.value?.currency_code || 'USD',
-        }).format(value)
+        }).format(vModel.value)
   } catch (e) {
-    return value
+    return vModel.value
   }
 })
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else-if="value">{{ currency }}</span>
+  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index f743c5d3f5..aac35dbb60 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
+import { computed, inject, useVModel } from '#imports'
 import { isEmail } from '~/utils'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -14,13 +15,13 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const root = ref<HTMLInputElement>()
-
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
 const validEmail = computed(() => isEmail(vModel.value))
+
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 58355b5c20..ec4c49f699 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number
@@ -13,21 +14,17 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 54ea12127b..46d609ae55 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
+
 interface Props {
   modelValue: number
 }
@@ -11,15 +14,11 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
-
-const root = ref<HTMLInputElement>()
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 
 function onKeyDown(evt: KeyboardEvent) {
   return evt.key === '.' && evt.preventDefault()
@@ -29,7 +28,7 @@ function onKeyDown(evt: KeyboardEvent) {
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index 9f9e2e00e8..acf815fc54 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
-import { inject } from '#imports'
+import { computed, inject } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -11,7 +12,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel'])
 
-const editEnabled = inject('editEnabled')
+const editEnabled = inject(EditModeInj)
 
 let expand = $ref(false)
 
@@ -19,7 +20,7 @@ let isValid = $ref(true)
 
 let error = $ref()
 
-const localState = computed({
+const vModel = computed({
   get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
   set: (val) => {
     if (props.isForm) {
@@ -30,7 +31,7 @@ const localState = computed({
 
 function save() {
   expand = false
-  emits('update:modelValue', JSON.stringify(props.modelValue))
+  emits('update:modelValue', JSON.stringify(vModel.value))
 }
 
 function validate(n: boolean, e: any) {
@@ -69,14 +70,14 @@ export default {
     </div>
     <MonacoJsonObjectEditor
       v-if="expand"
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
       @validate="validate"
     />
     <MonacoJsonObjectEditor
       v-else
-      v-model="localState"
+      v-model="vModel"
       class="text-left caption"
       style="width: 300px; min-height: 200px; min-width: 100%"
       @validate="validate"
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index e66f11c5de..fffc9f347c 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
@@ -24,56 +24,6 @@ const localState = computed({
     emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
   },
 })
-
-/* import colors from '@/components/project/spreadsheet/helpers/colors'
-
-export default {
-  name: 'SetListCheckboxCell',
-  props: {
-    value: String,
-    column: Object,
-    values: Array,
-  },
-  data() {},
-  computed: {
-    colors() {
-      return this.$store.state.settings.darkTheme ? colors.dark : colors.light
-    },
-    localState: {
-      get() {
-        return (this.value && this.value.split(',')) || []
-      },
-      set(val) {
-        this.$emit('input', val.join(','))
-        this.$emit('update')
-      },
-    },
-    setValues() {
-      if (this.column && this.column.dtxp) {
-        return this.column.dtxp.split(',').map((v) => v.replace(/^'|'$/g, ''))
-      }
-      return this.values || []
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-    const event = document.createEvent('MouseEvents')
-    event.initMouseEvent('mousedown', true, true, window)
-    this.$el.dispatchEvent(event)
-  },
-} */
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 112e26f4b7..66570ef61c 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string
@@ -12,45 +12,18 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const localState = computed({
+const vModel = computed({
   get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
   set: (val) => emit('update:modelValue', val),
 })
 
 const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
-
-/* import colors from '@/mixins/colors'
-
-export default {
-  name: 'EnumListEditableCell',
-  mixins: [colors],
-
-  props: {
-    value: String,
-    column: Object,
-    isForm: Boolean,
-  },
-  computed: {
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-} */
 </script>
 
 <template>
-  <v-select v-model="localState" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
+  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
     <!--    v-on="parentListeners"
     <template #selection="{ item }">
       <div
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index 653842a105..d2acea4503 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,28 +1,57 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: any
+  modelValue: string
 }
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const root = ref<HTMLInputElement>()
+const vModel = useVModel(props, 'modelValue', emit)
 
-const vModel = useVModel(props, 'modelValue', emits)
-
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" />
   <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped></style>
+<style scoped>
+input,
+textarea {
+  width: 100%;
+  height: 100%;
+  color: var(--v-textColor-base);
+  outline: none;
+}
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index e02de3d753..b911cc5268 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, ref, useVModel } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue?: string
@@ -7,32 +8,26 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject<boolean>('editEnabled', false)
+const editEnabled = inject(EditModeInj, ref(false))
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(props, 'modelValue', emit)
 
-const onSetRef = (el: HTMLInputElement) => {
-  el.focus()
-}
+const focus = (el: HTMLTextAreaElement) => el.focus()
 </script>
 
 <template>
-  <textarea
-    v-if="editEnabled"
-    :ref="onSetRef"
-    v-model="vModel"
-    rows="4"
-    class="h-full w-full min-h-[60px] outline-none"
-    @keydown.alt.enter.stop
-    @keydown.shift.enter.stop
-  />
+  <textarea v-if="editEnabled" :ref="focus" v-model="vModel" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
   <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
-textarea:focus {
-  @apply ring-transparent;
+input,
+textarea {
+  width: 100%;
+  min-height: 60px;
+  height: 100%;
+  color: var(--v-textColor-base);
 }
 </style>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 760f93955a..3f39bd9988 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref } from '#imports'
-import { ColumnInj } from '~/context'
-import { isValidURL } from '~/utils/urlUtils'
+import { computed, inject, onMounted, ref } from '#imports'
+import { ColumnInj, EditModeInj } from '~/context'
+import { isValidURL } from '~/utils'
 
 interface Props {
   modelValue: string
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject(EditModeInj, ref(false))
 
 const vModel = computed({
   get: () => value,
@@ -26,21 +26,15 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const root = ref<HTMLInputElement>()
-
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>
 
-<style scoped></style>
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 44ff43c52f..c757921cde 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,30 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { computed, useColumn } from '#imports'
+import { useColumn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
-  editEnabled: boolean
 }
 
-const { column, modelValue: value, editEnabled } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', value: any): void
+}
 
-const emit = defineEmits(['update:modelValue'])
+const { column, ...rest } = defineProps<Props>()
 
-provide(ColumnInj, column)
+const emit = defineEmits<Emits>()
 
-provide(
-  'editEnabled',
-  computed(() => editEnabled),
-)
+provide(ColumnInj, column)
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(rest, 'modelValue', emit)
 
 const {
   isURL,
@@ -53,155 +48,27 @@ const {
 
 <template>
   <div class="nc-cell" @keydown.stop.left @keydown.stop.right @keydown.stop.up @keydown.stop.down>
-    <!--
-todo :
- JSONCell
--->
-
-    <!--    <RatingCell -->
-    <!--      v-if="isRating" -->
-    <!--      /> -->
-    <!--      v-model="localState"
-          :active="active"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-
-    <!--    <DurationCell -->
-    <!--      v-else-if="isDuration" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :active="active" -->
-    <!--      :is-form="isForm" -->
-    <!--      :column="column" -->
-    <!--      :is-locked="isLocked" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DatePickerCell -->
-    <!--      v-else-if="isDate" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <TimePickerCell -->
-    <!--      v-else-if="isTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @save="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <DateTimePickerCell -->
-    <!--      v-else-if="isDateTime" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      ignore-focus -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <EnumCell -->
-    <!--      v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <EnumListCell -->
-    <!--      v-else-if="isEnum" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :is-form="isForm"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      :column="column"&ndash;&gt; -->
-    <!-- &lt;!&ndash;      v-on="parentListeners"&ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <!--    <JsonEditableCell -->
-    <!--      v-else-if="isJSON" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--      @input="$emit('save')" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <SetListEditableCell -->
-    <!--      v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-    <!--    <SetListCell -->
-    <!--      v-else-if="isSet" -->
-    <!--      /> -->
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <!--    <UrlCell v-else-if="isURL" -->
-    <!--                     /> -->
-    <!-- &lt;!&ndash;                     v-model="localState" v-on="parentListeners" &ndash;&gt; -->
-    <!-- &lt;!&ndash;    />&ndash;&gt; -->
-
-    <CellTextArea v-if="isTextArea" v-model="localState" />
-    <!--      v-model="localState"
-          :is-form="isForm"
-          v-on="parentListeners"
-        /> -->
-    <CellCheckbox v-else-if="isBoolean" v-model="localState" />
-    <!-- &lt;!&ndash;      v-model="localState" -->
-    <!--      :column="column" -->
-    <!--      :is-form="isForm" -->
-    <!--      v-on="parentListeners" -->
-    <!--    />&ndash;&gt; -->
-
-    <CellAttachment v-else-if="isAttachment" v-model="localState" />
-    <CellSingleSelect v-else-if="isSingleSelect" v-model="localState" />
-    <CellMultiSelect v-else-if="isMultiSelect" v-model="localState" />
-    <CellDatePicker v-else-if="isDate" v-model="localState" />
-    <CellYearPicker v-else-if="isYear" v-model="localState" />
-    <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
-    <CellTimePicker v-else-if="isTime" v-model="localState" />
-    <CellRating v-else-if="isRating" v-model="localState" />
-    <!--      v-model="localState"
-          :active="active"
-          :db-alias="dbAlias"
-          :meta="meta"
-          :is-form="isForm"
-          :column="column"
-          :is-public-grid="isPublic && !isForm"
-          :is-public-form="isPublic && isForm"
-          :view-id="viewId"
-          :is-locked="isLocked"
-          v-on="$listeners"
-        /> -->
-    <CellDuration v-else-if="isDuration" v-model="localState" />
-    <CellEmail v-else-if="isEmail" v-model="localState" />
-    <CellUrl v-else-if="isURL" v-model="localState" />
-    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellCurrency v-else-if="isCurrency" v-model="localState" />
-    <CellDecimal v-else-if="isDecimal" v-model="localState" />
-    <CellInteger v-else-if="isInt" v-model="localState" />
-    <CellFloat v-else-if="isFloat" v-model="localState" />
-    <CellText v-else-if="isString" v-model="localState" />
-    <!-- v-on="parentListeners"
-        />
-    -->
-    <CellPercent v-else-if="isPercent" v-model="localState" />
-    <CellText v-else v-model="localState" />
-    <!--  v-on="$listeners"   <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
-
-    <!--    <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
+    <CellTextArea v-if="isTextArea" v-model="vModel" />
+    <CellCheckbox v-else-if="isBoolean" v-model="vModel" />
+    <CellAttachment v-else-if="isAttachment" v-model="vModel" />
+    <CellSingleSelect v-else-if="isSingleSelect" v-model="vModel" />
+    <CellMultiSelect v-else-if="isMultiSelect" v-model="vModel" />
+    <CellDatePicker v-else-if="isDate" v-model="vModel" />
+    <CellYearPicker v-else-if="isYear" v-model="vModel" />
+    <CellDateTimePicker v-else-if="isDateTime" v-model="vModel" />
+    <CellTimePicker v-else-if="isTime" v-model="vModel" />
+    <CellRating v-else-if="isRating" v-model="vModel" />
+    <CellDuration v-else-if="isDuration" v-model="vModel" />
+    <CellEmail v-else-if="isEmail" v-model="vModel" />
+    <CellUrl v-else-if="isURL" v-model="vModel" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellCurrency v-else-if="isCurrency" v-model="vModel" />
+    <CellDecimal v-else-if="isDecimal" v-model="vModel" />
+    <CellInteger v-else-if="isInt" v-model="vModel" />
+    <CellFloat v-else-if="isFloat" v-model="vModel" />
+    <CellText v-else-if="isString" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
+    <CellText v-else v-model="vModel" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index bae3fbbf1e..f3c8930496 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -12,6 +12,7 @@ import {
 import {
   ActiveViewInj,
   ChangePageInj,
+  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -44,6 +45,7 @@ provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
+provide(EditModeInj, editEnabled)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
@@ -142,68 +144,6 @@ if (meta) useProvideColumnCreateStore(meta)
               @click="selectCell(rowIndex, colIndex)"
               @dblclick="editEnabled = true"
             >
-              <!--          @contextmenu=" -->
-              <!--            showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj) -->
-              <!--          " -->
-              <!--        > -->
-              <!--          <virtual-cell -->
-              <!--            v-if="isVirtualCol(columnObj)" -->
-              <!--            :password="password" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :metas="metas" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :row="rowObj" -->
-              <!--            :nodes="nodes" -->
-              <!--            :meta="meta" -->
-              <!--            :api="api" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :is-new="rowMeta.new" -->
-              <!--            v-on="$listeners" -->
-              <!--            @updateCol=" -->
-              <!--              (...args) => -->
-              <!--                updateCol( -->
-              <!--                  ...args, -->
-              <!--                  columnObj.bt -->
-              <!--                    && meta.columns.find( -->
-              <!--                      (c) => c.column_name === columnObj.bt.column_name, -->
-              <!--                    ), -->
-              <!--                  col, -->
-              <!--                  row, -->
-              <!--                ) -->
-              <!--            " -->
-              <!--            @saveRow="onCellValueChange(col, row, columnObj, true)" -->
-              <!--          /> -->
-
-              <!--          <editable-cell -->
-              <!--            v-else-if=" -->
-              <!--              ((isPkAvail || rowMeta.new) -->
-              <!--                && !isView -->
-              <!--                && !isLocked -->
-              <!--                && !isPublicView -->
-              <!--                && editEnabled.col === col -->
-              <!--                && editEnabled.row === row) -->
-              <!--                || enableEditable(columnObj) -->
-              <!--            " -->
-              <!--            v-model="rowObj[columnObj.title]" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :active="selected.col === col && selected.row === row" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :is-locked="isLocked" -->
-              <!--            :is-public="isPublicView" -->
-              <!--            :view-id="viewId" -->
-              <!--            @save="editEnabled = {}; onCellValueChange(col, row, columnObj, true);" -->
-              <!--            @cancel="editEnabled = {}" -->
-              <!--            @update="onCellValueChange(col, row, columnObj, false)" -->
-              <!--            @blur="onCellValueChange(col, row, columnObj, true)" -->
-              <!--            @input="unsaved = true" -->
-              <!--            @navigateToNext="navigateToNext" -->
-              <!--            @navigateToPrev="navigateToPrev" -->
-              <!--          /> -->
-
               <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
 
               <SmartsheetCell
@@ -213,20 +153,6 @@ if (meta) useProvideColumnCreateStore(meta)
                 :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                 @update:model-value="updateRowProperty(row, columnObj.title)"
               />
-
-              <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->
-              <!-- :selected="selected.col === col && selected.row === row" -->
-              <!--        :is-locked="isLocked" -->
-              <!--            :column="columnObj" -->
-              <!--            :meta="meta" -->
-              <!--            :db-alias="nodes.dbAlias" -->
-              <!--            :value="rowObj[columnObj.title]" -->
-              <!--            :sql-ui="sqlUi" -->
-              <!--            @enableedit=" -->
-              <!--              makeSelected(col, row); -->
-              <!--              makeEditable(col, row, columnObj.ai, rowMeta); -->
-              <!--            " -->
-              <!--          /> -->
             </td>
           </tr>
         </tbody>
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d5213f89b0..809c3ee5cd 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -21,3 +21,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
 
 export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
+export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')