Browse Source

feat: placeholder

pull/6323/head
DarkPhoenix2704 1 year ago
parent
commit
13b1cc4ab2
  1. 10
      packages/nc-gui/components/cell/Currency.vue
  2. 15
      packages/nc-gui/components/cell/DatePicker.vue
  3. 15
      packages/nc-gui/components/cell/DateTimePicker.vue
  4. 10
      packages/nc-gui/components/cell/Decimal.vue
  5. 12
      packages/nc-gui/components/cell/Duration.vue
  6. 19
      packages/nc-gui/components/cell/Email.vue
  7. 8
      packages/nc-gui/components/cell/Float.vue
  8. 8
      packages/nc-gui/components/cell/Integer.vue
  9. 4
      packages/nc-gui/components/cell/MultiSelect.vue
  10. 10
      packages/nc-gui/components/cell/Percent.vue
  11. 10
      packages/nc-gui/components/cell/PhoneNumber.vue
  12. 4
      packages/nc-gui/components/cell/SingleSelect.vue
  13. 8
      packages/nc-gui/components/cell/Text.vue
  14. 17
      packages/nc-gui/components/cell/TextArea.vue
  15. 25
      packages/nc-gui/components/cell/TimePicker.vue
  16. 9
      packages/nc-gui/components/cell/Url.vue
  17. 14
      packages/nc-gui/components/cell/YearPicker.vue
  18. 24
      packages/nc-gui/components/smartsheet/Cell.vue
  19. 2
      packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

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

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' 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 { interface Props {
modelValue: number | null | undefined modelValue: number | null | undefined
isFocus?: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -17,6 +16,8 @@ const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)! const editEnabled = inject(EditModeInj)!
const isEditColumn = inject(EditColumnInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emit) const _vModel = useVModel(props, 'modelValue', emit)
const vModel = computed({ const vModel = computed({
@ -56,7 +57,7 @@ const currency = computed(() => {
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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 = () => { const submitCurrency = () => {
if (lastSaved.value !== vModel.value) { if (lastSaved.value !== vModel.value) {
@ -77,7 +78,8 @@ onMounted(() => {
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
type="number" 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" @blur="submitCurrency"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

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

@ -4,6 +4,7 @@ import {
ActiveCellInj, ActiveCellInj,
CellClickHookInj, CellClickHookInj,
ColumnInj, ColumnInj,
EditColumnInj,
EditModeInj, EditModeInj,
ReadonlyInj, ReadonlyInj,
computed, computed,
@ -32,6 +33,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
const isLockedMode = inject(IsLockedInj, ref(false)) const isLockedMode = inject(IsLockedInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false)) const editable = inject(EditModeInj, ref(false))
@ -79,7 +82,17 @@ watch(
{ flush: 'post' }, { 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) => { useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {

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

@ -5,6 +5,7 @@ import {
ActiveCellInj, ActiveCellInj,
CellClickHookInj, CellClickHookInj,
ColumnInj, ColumnInj,
EditColumnInj,
ReadonlyInj, ReadonlyInj,
dateFormats, dateFormats,
inject, inject,
@ -39,6 +40,8 @@ const editable = inject(EditModeInj, ref(false))
const isLockedMode = inject(IsLockedInj, ref(false)) const isLockedMode = inject(IsLockedInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
const isDateInvalid = ref(false) const isDateInvalid = ref(false)
@ -132,7 +135,17 @@ watch(
{ flush: 'post' }, { 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) => { useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {

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

@ -1,13 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports' import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
// for sqlite, when we clear a cell or empty the cell, it returns "" // for sqlite, when we clear a cell or empty the cell, it returns ""
// otherwise, it is null type // otherwise, it is null type
modelValue?: number | null | string modelValue?: number | null | string
isFocus?: boolean
} }
interface Emits { interface Emits {
@ -24,6 +23,8 @@ const editEnabled = inject(EditModeInj)
const column = inject(ColumnInj, null)! const column = inject(ColumnInj, null)!
const isEditColumn = inject(EditColumnInj, ref(false))
const domRef = ref<HTMLElement>() const domRef = ref<HTMLElement>()
const meta = computed(() => { 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, () => { watch(isExpandedFormOpen, () => {
if (!isExpandedFormOpen.value) { if (!isExpandedFormOpen.value) {
@ -93,9 +94,10 @@ watch(isExpandedFormOpen, () => {
v-if="editEnabled" v-if="editEnabled"
:ref="focus" :ref="focus"
v-model="vModel" 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" type="number"
:step="precision" :step="precision"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
style="letter-spacing: 0.06rem" style="letter-spacing: 0.06rem"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop="onKeyDown" @keydown.down.stop="onKeyDown"

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

@ -2,6 +2,7 @@
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { import {
ColumnInj, ColumnInj,
EditColumnInj,
EditModeInj, EditModeInj,
IsExpandedFormOpenInj, IsExpandedFormOpenInj,
computed, computed,
@ -16,10 +17,9 @@ import {
interface Props { interface Props {
modelValue: number | string | null | undefined modelValue: number | string | null | undefined
showValidationError?: boolean showValidationError?: boolean
isFocus?: boolean
} }
const { modelValue, showValidationError = true, isFocus } = defineProps<Props>() const { modelValue, showValidationError = true } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -35,9 +35,13 @@ const durationInMS = ref(0)
const isEdited = ref(false) const isEdited = ref(false)
const isEditColumn = inject(EditColumnInj, ref(false))
const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0) 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({ const localState = computed({
get: () => convertMS2Duration(modelValue, durationType.value), get: () => convertMS2Duration(modelValue, durationType.value),
@ -77,7 +81,7 @@ const submitDuration = () => {
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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> </script>
<template> <template>

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

@ -1,13 +1,21 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' 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 { interface Props {
modelValue: string | null | undefined modelValue: string | null | undefined
isFocus?: boolean
} }
const { modelValue: value, isFocus } = defineProps<Props>() const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -26,6 +34,8 @@ const localState = ref(value)
const isSurveyForm = inject(IsSurveyFormInj, ref(false)) const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const vModel = computed({ const vModel = computed({
get: () => value, get: () => value,
set: (val) => { set: (val) => {
@ -40,7 +50,7 @@ const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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( watch(
() => editEnabled.value, () => editEnabled.value,
@ -61,6 +71,7 @@ watch(
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
class="w-full outline-none text-sm px-1 py-2" class="w-full outline-none text-sm px-1 py-2"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

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

@ -1,13 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports' import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
// for sqlite, when we clear a cell or empty the cell, it returns "" // for sqlite, when we clear a cell or empty the cell, it returns ""
// otherwise, it is null type // otherwise, it is null type
modelValue?: number | null | string modelValue?: number | null | string
isFocus?: boolean
} }
interface Emits { interface Emits {
@ -22,6 +21,8 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)
const isEditColumn = inject(EditColumnInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emits) const _vModel = useVModel(props, 'modelValue', emits)
const vModel = computed({ const vModel = computed({
@ -39,7 +40,7 @@ const vModel = computed({
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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> </script>
<template> <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" class="outline-none px-1 border-none w-full h-full text-sm"
type="number" type="number"
step="0.1" step="0.1"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

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

@ -1,13 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports' import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
// when we set a number, then it is number type // when we set a number, then it is number type
// for sqlite, when we clear a cell or empty the cell, it returns "" // for sqlite, when we clear a cell or empty the cell, it returns ""
// otherwise, it is null type // otherwise, it is null type
modelValue?: number | null | string modelValue?: number | null | string
isFocus?: boolean
} }
interface Emits { interface Emits {
@ -22,6 +21,8 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)
const isEditColumn = inject(EditColumnInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emits) const _vModel = useVModel(props, 'modelValue', emits)
const displayValue = computed(() => { const displayValue = computed(() => {
@ -47,7 +48,7 @@ const vModel = computed({
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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) { function onKeyDown(e: any) {
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey 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" class="outline-none py-2 px-1 border-none w-full h-full text-sm"
type="number" type="number"
style="letter-spacing: 0.06rem" style="letter-spacing: 0.06rem"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown="onKeyDown" @keydown="onKeyDown"
@keydown.down.stop @keydown.down.stop

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

@ -9,6 +9,7 @@ import {
ActiveCellInj, ActiveCellInj,
CellClickHookInj, CellClickHookInj,
ColumnInj, ColumnInj,
EditColumnInj,
EditModeInj, EditModeInj,
IsKanbanInj, IsKanbanInj,
ReadonlyInj, ReadonlyInj,
@ -61,6 +62,8 @@ const isPublic = inject(IsPublicInj, ref(false))
const isForm = inject(IsFormInj, ref(false)) const isForm = inject(IsFormInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const rowHeight = inject(RowHeightInj, ref(undefined)) const rowHeight = inject(RowHeightInj, ref(undefined))
const selectedIds = ref<string[]>([]) const selectedIds = ref<string[]>([])
@ -384,6 +387,7 @@ const selectedOpts = computed(() => {
v-model:value="vModel" v-model:value="vModel"
mode="multiple" mode="multiple"
class="w-full overflow-hidden" class="w-full overflow-hidden"
:placeholder="isEditColumn ? '(Optional) Select default value' : ''"
:bordered="false" :bordered="false"
clear-icon clear-icon
show-search show-search

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

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports' import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, inject, useVModel } from '#imports'
interface Props { interface Props {
modelValue?: number | string | null modelValue?: number | string | null
isFocus?: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -15,6 +14,8 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)
const isEditColumn = inject(EditColumnInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emits) const _vModel = useVModel(props, 'modelValue', emits)
const vModel = computed({ const vModel = computed({
@ -30,7 +31,7 @@ const vModel = computed({
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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> </script>
<template> <template>
@ -38,9 +39,10 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (e
v-if="editEnabled" v-if="editEnabled"
:ref="focus" :ref="focus"
v-model="vModel" 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 }" :class="{ '!px-2': editEnabled }"
type="number" type="number"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

10
packages/nc-gui/components/cell/PhoneNumber.vue

@ -1,14 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import isMobilePhone from 'validator/lib/isMobilePhone' 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 { interface Props {
modelValue: string | null | number | undefined modelValue: string | null | number | undefined
isFocus?: boolean
} }
const { modelValue: value, isFocus } = defineProps<Props>() const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -18,6 +17,8 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj)! const editEnabled = inject(EditModeInj)!
const isEditColumn = inject(EditColumnInj, ref(false))
const column = inject(ColumnInj)! 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 // 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 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( watch(
() => editEnabled.value, () => editEnabled.value,
@ -60,6 +61,7 @@ watch(
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
class="w-full outline-none text-sm px-1 py-2" class="w-full outline-none text-sm px-1 py-2"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

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

@ -9,6 +9,7 @@ import {
ActiveCellInj, ActiveCellInj,
CellClickHookInj, CellClickHookInj,
ColumnInj, ColumnInj,
EditColumnInj,
EditModeInj, EditModeInj,
IsFormInj, IsFormInj,
IsKanbanInj, IsKanbanInj,
@ -59,6 +60,8 @@ const isKanban = inject(IsKanbanInj, ref(false))
const isPublic = inject(IsPublicInj, ref(false)) const isPublic = inject(IsPublicInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const isForm = inject(IsFormInj, ref(false)) const isForm = inject(IsFormInj, ref(false))
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -300,6 +303,7 @@ const selectedOpt = computed(() => {
v-model:value="vModel" v-model:value="vModel"
class="w-full overflow-hidden" class="w-full overflow-hidden"
:class="{ 'caret-transparent': !hasEditRoles }" :class="{ 'caret-transparent': !hasEditRoles }"
:placeholder="isEditColumn ? '(Optional) Select default option' : ''"
:allow-clear="!column.rqd && editAllowed" :allow-clear="!column.rqd && editAllowed"
:bordered="false" :bordered="false"
:open="isOpen && editAllowed" :open="isOpen && editAllowed"

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

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' 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 { interface Props {
modelValue?: string | null modelValue?: string | null
isFocus?: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -15,6 +14,8 @@ const { showNull } = useGlobal()
const editEnabled = inject(EditModeInj, ref(false)) const editEnabled = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const rowHeight = inject(RowHeightInj, ref(undefined)) const rowHeight = inject(RowHeightInj, ref(undefined))
const readonly = inject(ReadonlyInj, ref(false)) const readonly = inject(ReadonlyInj, ref(false))
@ -23,7 +24,7 @@ const vModel = useVModel(props, 'modelValue', emits)
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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> </script>
<template> <template>
@ -32,6 +33,7 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && props.isFocus && (e
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
class="h-full w-full outline-none p-2 bg-transparent" class="h-full w-full outline-none p-2 bg-transparent"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop
@keydown.left.stop @keydown.left.stop

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

@ -1,6 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' 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<{ const props = defineProps<{
modelValue?: string | number modelValue?: string | number
@ -13,6 +23,8 @@ const column = inject(ColumnInj)
const editEnabled = inject(EditModeInj, ref(false)) const editEnabled = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const rowHeight = inject(RowHeightInj, ref(undefined)) const rowHeight = inject(RowHeightInj, ref(undefined))
const { showNull } = useGlobal() const { showNull } = useGlobal()
@ -21,7 +33,7 @@ const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! 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(() => { const height = computed(() => {
if (!rowHeight.value) return 60 if (!rowHeight.value) return 60
@ -69,6 +81,7 @@ onClickOutside(inputWrapperRef, (e) => {
:style="{ :style="{
minHeight: `${height}px`, minHeight: `${height}px`,
}" }"
:placeholder="isEditColumn ? '(Optional) Enter default value' : ''"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.alt.enter.stop @keydown.alt.enter.stop
@keydown.shift.enter.stop @keydown.shift.enter.stop

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

@ -1,6 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import dayjs from 'dayjs' 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 { interface Props {
modelValue?: string | null | undefined modelValue?: string | null | undefined
@ -21,6 +30,8 @@ const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false)) const editable = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const column = inject(ColumnInj)! const column = inject(ColumnInj)!
const isTimeInvalid = ref(false) const isTimeInvalid = ref(false)
@ -76,7 +87,17 @@ watch(
{ flush: 'post' }, { 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) => { useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {

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

@ -3,6 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
import { import {
CellUrlDisableOverlayInj, CellUrlDisableOverlayInj,
ColumnInj, ColumnInj,
EditColumnInj,
EditModeInj, EditModeInj,
IsExpandedFormOpenInj, IsExpandedFormOpenInj,
IsSurveyFormInj, IsSurveyFormInj,
@ -19,10 +20,9 @@ import {
interface Props { interface Props {
modelValue?: string | null modelValue?: string | null
isFocus?: boolean
} }
const { modelValue: value, isFocus } = defineProps<Props>() const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -34,6 +34,8 @@ const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)! const editEnabled = inject(EditModeInj)!
const isEditColumn = inject(EditColumnInj, ref(false))
const disableOverlay = inject(CellUrlDisableOverlayInj, 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 // 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 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( watch(
() => editEnabled.value, () => editEnabled.value,
@ -89,6 +91,7 @@ watch(
v-if="editEnabled" v-if="editEnabled"
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
:placeholder="isEditColumn ? '(Optional) Enter default URL' : ''"
class="outline-none text-sm w-full px-2 py-2 bg-transparent h-full" class="outline-none text-sm w-full px-2 py-2 bg-transparent h-full"
@blur="editEnabled = false" @blur="editEnabled = false"
@keydown.down.stop @keydown.down.stop

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

@ -19,6 +19,8 @@ const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false)) const editable = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const isYearInvalid = ref(false) const isYearInvalid = ref(false)
const localState = computed({ const localState = computed({
@ -62,7 +64,17 @@ watch(
{ flush: 'post' }, { 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) => { useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {

24
packages/nc-gui/components/smartsheet/Cell.vue

@ -210,7 +210,7 @@ onUnmounted(() => {
> >
<template v-if="column"> <template v-if="column">
<template v-if="intersected"> <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" /> <LazyCellGeoData v-else-if="isGeoData(column)" v-model="vModel" />
<LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" 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" /> <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)" /> <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
<LazyCellRating v-else-if="isRating(column)" v-model="vModel" /> <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
<LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" />
<LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" />
<LazyCellUrl v-else-if="isURL(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" />
<LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" />
<LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" />
<LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" :is-focus="!isEditColumnMenu" @save="emit('save')" /> <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" @save="emit('save')" />
<LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" />
<LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" />
<LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" />
<LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" :is-focus="!isEditColumnMenu" /> <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" />
<LazyCellJson v-else-if="isJSON(column)" 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 <div
v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)" v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
class="nc-locked-overlay" class="nc-locked-overlay"

2
packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@ -300,7 +300,7 @@ if (props.fromTableExplorer) {
{{ `Accept only valid ${formState.uidt}` }} {{ `Accept only valid ${formState.uidt}` }}
</span> </span>
</a-checkbox> </a-checkbox>
<div class="mt-3"> <div class="!my-3">
<!-- <!--
Default Value for JSON & LongText is not supported in MySQL Default Value for JSON & LongText is not supported in MySQL
Default Value is Disabled for MSSQL --> Default Value is Disabled for MSSQL -->

Loading…
Cancel
Save