feat: placeholder

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

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) {

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) {

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"

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>

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

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

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

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

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

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

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"

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

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

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) {

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

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) {

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"

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 -->