github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: placeholder

pull/6323/head
DarkPhoenix2704 1 year ago
parent
74a83cf39c
commit
13b1cc4ab2
19 changed files with 168 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

15
packages/nc-gui/components/cell/DatePicker.vue
Unescape View File

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

15
packages/nc-gui/components/cell/DateTimePicker.vue
Unescape View File

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

10
packages/nc-gui/components/cell/Decimal.vue
Unescape View File

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

12
packages/nc-gui/components/cell/Duration.vue
Unescape View File

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

19
packages/nc-gui/components/cell/Email.vue
Unescape View File

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

8
packages/nc-gui/components/cell/Float.vue
Unescape View File

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

8
packages/nc-gui/components/cell/Integer.vue
Unescape View File

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

4
packages/nc-gui/components/cell/MultiSelect.vue
Unescape View File

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

10
packages/nc-gui/components/cell/Percent.vue
Unescape View File

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

10
packages/nc-gui/components/cell/PhoneNumber.vue
Unescape View File

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

4
packages/nc-gui/components/cell/SingleSelect.vue
Unescape View File

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

8
packages/nc-gui/components/cell/Text.vue
Unescape View File

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

17
packages/nc-gui/components/cell/TextArea.vue
Unescape View File

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

25
packages/nc-gui/components/cell/TimePicker.vue
Unescape View File

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

9
packages/nc-gui/components/cell/Url.vue
Unescape View File

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

14
packages/nc-gui/components/cell/YearPicker.vue
Unescape View File

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

24
packages/nc-gui/components/smartsheet/Cell.vue
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save