From 13b1cc4ab2227e77d2b1c7c56b60e599aeca9174 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Fri, 8 Sep 2023 18:42:29 +0530
Subject: [PATCH] feat: placeholder

---
 packages/nc-gui/components/cell/Currency.vue  | 10 +++++---
 .../nc-gui/components/cell/DatePicker.vue     | 15 ++++++++++-
 .../nc-gui/components/cell/DateTimePicker.vue | 15 ++++++++++-
 packages/nc-gui/components/cell/Decimal.vue   | 10 +++++---
 packages/nc-gui/components/cell/Duration.vue  | 12 ++++++---
 packages/nc-gui/components/cell/Email.vue     | 19 +++++++++++---
 packages/nc-gui/components/cell/Float.vue     |  8 +++---
 packages/nc-gui/components/cell/Integer.vue   |  8 +++---
 .../nc-gui/components/cell/MultiSelect.vue    |  4 +++
 packages/nc-gui/components/cell/Percent.vue   | 10 +++++---
 .../nc-gui/components/cell/PhoneNumber.vue    | 10 +++++---
 .../nc-gui/components/cell/SingleSelect.vue   |  4 +++
 packages/nc-gui/components/cell/Text.vue      |  8 +++---
 packages/nc-gui/components/cell/TextArea.vue  | 17 +++++++++++--
 .../nc-gui/components/cell/TimePicker.vue     | 25 +++++++++++++++++--
 packages/nc-gui/components/cell/Url.vue       |  9 ++++---
 .../nc-gui/components/cell/YearPicker.vue     | 14 ++++++++++-
 .../nc-gui/components/smartsheet/Cell.vue     | 24 +++++++++---------
 .../smartsheet/column/EditOrAdd.vue           |  2 +-
 19 files changed, 168 insertions(+), 56 deletions(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index fb44bcacbc..ae5eda0d8e 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, EditModeInj, IsExpandedFormOpenInj, computed, inject, parseProp, useVModel } from '#imports'
+import { ColumnInj, EditColumnInj, EditModeInj, IsExpandedFormOpenInj, computed, inject, parseProp, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
-  isFocus?: boolean
 }
 
 const props = defineProps<Props>()
@@ -17,6 +16,8 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emit)
 
 const vModel = computed({
@@ -56,7 +57,7 @@ const currency = computed(() => {
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 const submitCurrency = () => {
   if (lastSaved.value !== vModel.value) {
@@ -77,7 +78,8 @@ onMounted(() => {
     :ref="focus"
     v-model="vModel"
     type="number"
-    class="w-full h-full border-none rounded-md outline-none"
+    class="w-full h-full text-sm border-none rounded-md outline-none"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="submitCurrency"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 73ffd88987..d66d9594bb 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -4,6 +4,7 @@ import {
   ActiveCellInj,
   CellClickHookInj,
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   ReadonlyInj,
   computed,
@@ -32,6 +33,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const isLockedMode = inject(IsLockedInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
@@ -79,7 +82,17 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid.value ? 'Invalid date' : ''))
+const placeholder = computed(() => {
+  if (isEditColumn.value && modelValue === null) {
+    return '(Optional) Select Default Date'
+  } else if (modelValue === null && showNull.value) {
+    return 'NULL'
+  } else if (isDateInvalid.value) {
+    return 'Invalid date'
+  } else {
+    return ''
+  }
+})
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 63353e1785..9a61bfeb02 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -5,6 +5,7 @@ import {
   ActiveCellInj,
   CellClickHookInj,
   ColumnInj,
+  EditColumnInj,
   ReadonlyInj,
   dateFormats,
   inject,
@@ -39,6 +40,8 @@ const editable = inject(EditModeInj, ref(false))
 
 const isLockedMode = inject(IsLockedInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 const isDateInvalid = ref(false)
@@ -132,7 +135,17 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isDateInvalid.value ? 'Invalid date' : ''))
+const placeholder = computed(() => {
+  if (isEditColumn.value && modelValue === null) {
+    return '(Optional) Select Default Date'
+  } else if (modelValue === null && showNull.value) {
+    return 'NULL'
+  } else if (isDateInvalid.value) {
+    return 'Invalid date'
+  } else {
+    return ''
+  }
+})
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 6f77c45f17..ecde0bae93 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
   // for sqlite, when we clear a cell or empty the cell, it returns ""
   // otherwise, it is null type
   modelValue?: number | null | string
-  isFocus?: boolean
 }
 
 interface Emits {
@@ -24,6 +23,8 @@ const editEnabled = inject(EditModeInj)
 
 const column = inject(ColumnInj, null)!
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const domRef = ref<HTMLElement>()
 
 const meta = computed(() => {
@@ -79,7 +80,7 @@ const onKeyDown = (e: any) => {
   }
 }
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 watch(isExpandedFormOpen, () => {
   if (!isExpandedFormOpen.value) {
@@ -93,9 +94,10 @@ watch(isExpandedFormOpen, () => {
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none !py-2 !px-1 border-none rounded-md w-full h-full text-sm"
+    class="outline-none !py-2 !px-1 border-none rounded-md w-full h-full !text-sm"
     type="number"
     :step="precision"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     style="letter-spacing: 0.06rem"
     @blur="editEnabled = false"
     @keydown.down.stop="onKeyDown"
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index ed7f49260e..7ebcb681f3 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -2,6 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import {
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   IsExpandedFormOpenInj,
   computed,
@@ -16,10 +17,9 @@ import {
 interface Props {
   modelValue: number | string | null | undefined
   showValidationError?: boolean
-  isFocus?: boolean
 }
 
-const { modelValue, showValidationError = true, isFocus } = defineProps<Props>()
+const { modelValue, showValidationError = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -35,9 +35,13 @@ const durationInMS = ref(0)
 
 const isEdited = ref(false)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
 
-const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
+const durationPlaceholder = computed(() =>
+  isEditColumn.value ? '(Optional) Enter default value' : durationOptions[durationType.value].title,
+)
 
 const localState = computed({
   get: () => convertMS2Duration(modelValue, durationType.value),
@@ -77,7 +81,7 @@ const submitDuration = () => {
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 55c323a18a..84a3142ca3 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -1,13 +1,21 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, IsSurveyFormInj, computed, inject, useI18n, validateEmail } from '#imports'
+import {
+  EditColumnInj,
+  EditModeInj,
+  IsExpandedFormOpenInj,
+  IsSurveyFormInj,
+  computed,
+  inject,
+  useI18n,
+  validateEmail,
+} from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
-  isFocus?: boolean
 }
 
-const { modelValue: value, isFocus } = defineProps<Props>()
+const { modelValue: value } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -26,6 +34,8 @@ const localState = ref(value)
 
 const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
@@ -40,7 +50,7 @@ const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
@@ -61,6 +71,7 @@ watch(
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm px-1 py-2"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 4ce8d50d6c..884a0904f1 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
   // for sqlite, when we clear a cell or empty the cell, it returns ""
   // otherwise, it is null type
   modelValue?: number | null | string
-  isFocus?: boolean
 }
 
 interface Emits {
@@ -22,6 +21,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const vModel = computed({
@@ -39,7 +40,7 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
@@ -50,6 +51,7 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (e
     class="outline-none px-1 border-none w-full h-full text-sm"
     type="number"
     step="0.1"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 89860e782e..0d348569d0 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
 
 interface Props {
   // when we set a number, then it is number type
   // for sqlite, when we clear a cell or empty the cell, it returns ""
   // otherwise, it is null type
   modelValue?: number | null | string
-  isFocus?: boolean
 }
 
 interface Emits {
@@ -22,6 +21,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const displayValue = computed(() => {
@@ -47,7 +48,7 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 function onKeyDown(e: any) {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
@@ -87,6 +88,7 @@ function onKeyDown(e: any) {
     class="outline-none py-2 px-1 border-none w-full h-full text-sm"
     type="number"
     style="letter-spacing: 0.06rem"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown="onKeyDown"
     @keydown.down.stop
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 69d7628c6b..a1e5985404 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -9,6 +9,7 @@ import {
   ActiveCellInj,
   CellClickHookInj,
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   IsKanbanInj,
   ReadonlyInj,
@@ -61,6 +62,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const selectedIds = ref<string[]>([])
@@ -384,6 +387,7 @@ const selectedOpts = computed(() => {
       v-model:value="vModel"
       mode="multiple"
       class="w-full overflow-hidden"
+      :placeholder="isEditColumn ? '(Optional) Select default value' : ''"
       :bordered="false"
       clear-icon
       show-search
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 45a2272b2b..ec6a442d11 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
-  isFocus?: boolean
 }
 
 const props = defineProps<Props>()
@@ -15,6 +14,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const _vModel = useVModel(props, 'modelValue', emits)
 
 const vModel = computed({
@@ -30,7 +31,7 @@ const vModel = computed({
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
@@ -38,9 +39,10 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (e
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full !border-none !outline-none focus:ring-0 text-base p-1"
+    class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
     :class="{ '!px-2': editEnabled }"
     type="number"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 982fd413f4..e0f4848e37 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
 import isMobilePhone from 'validator/lib/isMobilePhone'
-import { EditModeInj, IsExpandedFormOpenInj, IsSurveyFormInj, computed, inject } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsSurveyFormInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | null | number | undefined
-  isFocus?: boolean
 }
 
-const { modelValue: value, isFocus } = defineProps<Props>()
+const { modelValue: value } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -18,6 +17,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)!
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 // Used in the logic of when to display error since we are not storing the phone if it's not valid
@@ -39,7 +40,7 @@ const validEmail = computed(() => vModel.value && isMobilePhone(vModel.value))
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
@@ -60,6 +61,7 @@ watch(
     :ref="focus"
     v-model="vModel"
     class="w-full outline-none text-sm px-1 py-2"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index b1485c9bab..2a04203bc6 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -9,6 +9,7 @@ import {
   ActiveCellInj,
   CellClickHookInj,
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   IsFormInj,
   IsKanbanInj,
@@ -59,6 +60,8 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const { $api } = useNuxtApp()
@@ -300,6 +303,7 @@ const selectedOpt = computed(() => {
       v-model:value="vModel"
       class="w-full overflow-hidden"
       :class="{ 'caret-transparent': !hasEditRoles }"
+      :placeholder="isEditColumn ? '(Optional) Select default option' : ''"
       :allow-clear="!column.rqd && editAllowed"
       :bordered="false"
       :open="isOpen && editAllowed"
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 1d6bbc2b5d..69b9dab35f 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, inject, ref, useVModel } from '#imports'
+import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, inject, ref, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
-  isFocus?: boolean
 }
 
 const props = defineProps<Props>()
@@ -15,6 +14,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const readonly = inject(ReadonlyInj, ref(false))
@@ -23,7 +24,7 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
@@ -32,6 +33,7 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (e
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none p-2 bg-transparent"
+    :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 3e13033ec0..e43cc39bf8 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ActiveCellInj, EditModeInj, IsExpandedFormOpenInj, RowHeightInj, iconMap, inject, useVModel } from '#imports'
+
+import {
+  ActiveCellInj,
+  EditColumnInj,
+  EditModeInj,
+  IsExpandedFormOpenInj,
+  RowHeightInj,
+  iconMap,
+  inject,
+  useVModel,
+} from '#imports'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -13,6 +23,8 @@ const column = inject(ColumnInj)
 
 const editEnabled = inject(EditModeInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const { showNull } = useGlobal()
@@ -21,7 +33,7 @@ const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (el as HTMLTextAreaElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLTextAreaElement)?.focus()
 
 const height = computed(() => {
   if (!rowHeight.value) return 60
@@ -69,6 +81,7 @@ onClickOutside(inputWrapperRef, (e) => {
         :style="{
           minHeight: `${height}px`,
         }"
+        :placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
         @blur="editEnabled = false"
         @keydown.alt.enter.stop
         @keydown.shift.enter.stop
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index c3f99437d0..6d0be016ea 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  EditColumnInj,
+  ReadonlyInj,
+  inject,
+  onClickOutside,
+  useProject,
+  useSelectedCellKeyupListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -21,6 +30,8 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 const isTimeInvalid = ref(false)
@@ -76,7 +87,17 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isTimeInvalid.value ? 'Invalid time' : ''))
+const placeholder = computed(() => {
+  if (isEditColumn.value && modelValue === null) {
+    return '(Optional) Select Default time'
+  } else if (modelValue === null && showNull.value) {
+    return 'NULL'
+  } else if (isTimeInvalid.value) {
+    return 'Invalid time'
+  } else {
+    return ''
+  }
+})
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index c448032230..1f3db5942d 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -3,6 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import {
   CellUrlDisableOverlayInj,
   ColumnInj,
+  EditColumnInj,
   EditModeInj,
   IsExpandedFormOpenInj,
   IsSurveyFormInj,
@@ -19,10 +20,9 @@ import {
 
 interface Props {
   modelValue?: string | null
-  isFocus?: boolean
 }
 
-const { modelValue: value, isFocus } = defineProps<Props>()
+const { modelValue: value } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -34,6 +34,8 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 
 // Used in the logic of when to display error since we are not storing the url if it's not valid
@@ -68,7 +70,7 @@ const { cellUrlOptions } = useCellUrlConfig(url)
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
-const focus: VNodeRef = (el) => !isExpandedFormOpen.value && isFocus && (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,
@@ -89,6 +91,7 @@ watch(
       v-if="editEnabled"
       :ref="focus"
       v-model="vModel"
+      :placeholder="isEditColumn ? '(Optional) Enter default URL' : ''"
       class="outline-none text-sm w-full px-2 py-2 bg-transparent h-full"
       @blur="editEnabled = false"
       @keydown.down.stop
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index eb93f543d3..d81e9d4ecb 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -19,6 +19,8 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isEditColumn = inject(EditColumnInj, ref(false))
+
 const isYearInvalid = ref(false)
 
 const localState = computed({
@@ -62,7 +64,17 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (modelValue === null && showNull.value ? 'NULL' : isYearInvalid.value ? 'Invalid year' : ''))
+const placeholder = computed(() => {
+  if (isEditColumn.value && modelValue === null) {
+    return '(Optional) Select default year'
+  } else if (modelValue === null && showNull.value) {
+    return 'NULL'
+  } else if (isTimeInvalid.value) {
+    return 'Invalid year'
+  } else {
+    return ''
+  }
+})
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index a59b67eea8..7006c573f4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -210,7 +210,7 @@ onUnmounted(() => {
   >
     <template v-if="column">
       <template v-if="intersected">
-        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" />
         <LazyCellGeoData v-else-if="isGeoData(column)" v-model="vModel" />
         <LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" v-model="vModel" />
         <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />
@@ -236,18 +236,18 @@ onUnmounted(() => {
         />
         <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
         <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
-        <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" :is-focus="!isEditColumnMenu" @save="emit('save')" />
-        <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
-        <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" />
+        <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" />
+        <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" />
+        <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" />
+        <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" />
+        <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" @save="emit('save')" />
+        <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" />
+        <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" />
+        <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" />
+        <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" />
         <LazyCellJson v-else-if="isJSON(column)" v-model="vModel" />
-        <LazyCellText v-else v-model="vModel" :is-focus="!isEditColumnMenu" />
+        <LazyCellText v-else v-model="vModel" />
         <div
           v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
           class="nc-locked-overlay"
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 5b7a8149d1..be20171599 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -300,7 +300,7 @@ if (props.fromTableExplorer) {
           {{ `Accept only valid ${formState.uidt}` }}
         </span>
       </a-checkbox>
-      <div class="mt-3">
+      <div class="!my-3">
         <!--
         Default Value for JSON & LongText is not supported in MySQL 
          Default Value is Disabled for MSSQL -->