多维表格
 
 
 
 
 
 

364 lines
8.7 KiB

<script setup lang="ts">
import dayjs from 'dayjs'
import { isDateMonthFormat, isSystemColumn } from 'nocodb-sdk'
interface Props {
modelValue?: string | null
isPk?: boolean
showCurrentDateOption?: boolean | 'disabled'
}
const { modelValue, isPk } = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'currentDate'])
const { t } = useI18n()
const { showNull, isMobileMode } = useGlobal()
const columnMeta = inject(ColumnInj, null)!
const readOnly = inject(ReadonlyInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false))
const isGrid = inject(IsGridInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
const isDateInvalid = ref(false)
const datePickerRef = ref<HTMLInputElement>()
const dateFormat = computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
const picker = computed(() => (isDateMonthFormat(dateFormat.value) ? 'month' : ''))
const isClearedInputMode = ref<boolean>(false)
const open = ref<boolean>(false)
const tempDate = ref<dayjs.Dayjs | undefined>()
const localState = computed({
get() {
if (!modelValue || isClearedInputMode.value) {
return undefined
}
if (!dayjs(modelValue).isValid()) {
isDateInvalid.value = true
return undefined
}
const format = picker.value === 'month' ? dateFormat : 'YYYY-MM-DD'
const value = dayjs(/^\d+$/.test(modelValue) ? +modelValue : modelValue, format)
return value
},
set(val?: dayjs.Dayjs) {
isClearedInputMode.value = false
if (!val) {
emit('update:modelValue', null)
return
}
if (picker.value === 'month') {
// reset day to 1st
val = dayjs(val).date(1)
}
if (val.isValid()) {
emit('update:modelValue', val?.format('YYYY-MM-DD'))
}
open.value = false
},
})
watchEffect(() => {
if (localState.value) {
tempDate.value = localState.value
}
})
const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
onClickOutside(datePickerRef, (e) => {
if ((e.target as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`)) return
datePickerRef.value?.blur?.()
open.value = false
})
const onBlur = (e) => {
if (
(e?.relatedTarget as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`) ||
(e?.target as HTMLElement)?.closest(`.${randomClass}, .nc-${randomClass}`)
) {
return
}
open.value = false
}
const onFocus = () => {
open.value = true
}
watch(
open,
(next) => {
if (next) {
editable.value = true
datePickerRef.value?.focus?.()
onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, (e) => {
if ((e?.target as HTMLElement)?.closest(`.nc-${randomClass}`)) {
return
}
open.value = false
})
} else {
isClearedInputMode.value = false
}
},
{ flush: 'post' },
)
watch(editable, (nextValue) => {
if (isGrid.value && nextValue && !open.value) {
open.value = true
}
})
const placeholder = computed(() => {
if (
((isForm.value || isExpandedForm.value) && !isDateInvalid.value) ||
(isGrid.value && !showNull.value && !isDateInvalid.value && !isSystemColumn(columnMeta.value) && active.value) ||
isEditColumn.value
) {
return dateFormat.value
} else if (modelValue === null && showNull.value) {
return t('general.null').toUpperCase()
} else if (isDateInvalid.value) {
return t('msg.invalidDate')
} else {
return ''
}
})
const isOpen = computed(() => {
if (readOnly.value) return false
return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
})
const cellClickHook = inject(CellClickHookInj, null)
const cellClickHandler = () => {
if (readOnly.value || open.value) return
open.value = active.value || editable.value
}
onMounted(() => {
cellClickHook?.on(cellClickHandler)
})
onUnmounted(() => {
cellClickHook?.on(cellClickHandler)
})
const clickHandler = () => {
if (cellClickHook) {
return
}
cellClickHandler()
}
const handleKeydown = (e: KeyboardEvent, _open?: boolean) => {
if (e.key !== 'Enter' && e.key !== 'Tab') {
e.stopPropagation()
}
switch (e.key) {
case 'Enter':
e.preventDefault()
if (isSurveyForm.value) {
e.stopPropagation()
}
localState.value = tempDate.value
open.value = !_open
if (!open.value) {
editable.value = false
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
datePickerRef.value?.blur?.()
}
}
return
case 'Escape':
if (_open) {
open.value = false
editable.value = false
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
datePickerRef.value?.blur?.()
}
} else {
editable.value = false
datePickerRef.value?.blur?.()
}
return
case 'Tab':
open.value = false
if (isGrid.value) {
editable.value = false
datePickerRef.value?.blur?.()
}
return
default:
if (!_open && /^[0-9a-z]$/i.test(e.key)) {
open.value = true
}
}
}
useEventListener(document, 'keydown', (e: KeyboardEvent) => {
// To prevent event listener on non active cell
if (!active.value) return
if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
return
}
if (e.metaKey || e.ctrlKey) {
if (e.key === ';') {
if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
localState.value = dayjs(new Date())
e.preventDefault()
}
} else return
}
if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
isClearedInputMode.value = true
datePickerRef.value.focus()
editable.value = true
open.value = true
}
})
const handleUpdateValue = (e: Event) => {
const targetValue = (e.target as HTMLInputElement).value
if (!targetValue) {
tempDate.value = undefined
return
}
const value = dayjs(targetValue, dateFormat.value)
if (value.isValid()) {
tempDate.value = value
}
}
function handleSelectDate(value?: dayjs.Dayjs) {
tempDate.value = value
localState.value = value
open.value = false
}
const currentDate = ($event) => {
emit('currentDate', $event)
open.value = false
}
</script>
<template>
<NcDropdown
:visible="isOpen"
:auto-close="false"
:trigger="['click']"
class="nc-cell-field"
:class="[`nc-${randomClass}`, { 'nc-null': modelValue === null && showNull }]"
:overlay-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''} !min-w-[260px]`"
>
<div
v-bind="$attrs"
:title="localState?.format(dateFormat)"
class="nc-date-picker h-full flex items-center justify-between ant-picker-input relative"
>
<input
ref="datePickerRef"
type="text"
:value="localState?.format(dateFormat) ?? ''"
:placeholder="placeholder"
class="nc-date-input border-none outline-none !text-current bg-transparent !focus:(border-none outline-none ring-transparent)"
:readonly="readOnly || !!isMobileMode"
@blur="onBlur"
@focus="onFocus"
@keydown="handleKeydown($event, open)"
@mouseup.stop
@mousedown.stop
@click="clickHandler"
@input="handleUpdateValue"
/>
<GeneralIcon
v-if="localState && !readOnly"
icon="closeCircle"
class="nc-clear-date-icon nc-action-icon absolute right-0 top-[50%] transform -translate-y-1/2 invisible cursor-pointer"
@click.stop="handleSelectDate()"
/>
</div>
<template #overlay>
<div class="w-[256px]">
<NcDatePicker
v-if="picker === 'month'"
v-model:page-date="tempDate"
v-model:selected-date="localState"
:is-open="isOpen"
type="month"
size="medium"
:show-current-date-option="showCurrentDateOption"
@current-date="currentDate"
/>
<NcDatePicker
v-else
v-model:page-date="tempDate"
:is-open="isOpen"
:selected-date="localState"
type="date"
size="medium"
:show-current-date-option="showCurrentDateOption"
@update:selected-date="handleSelectDate"
@current-date="currentDate"
/>
</div>
</template>
</NcDropdown>
<div v-if="!editable && isGrid" class="absolute inset-0 z-90 cursor-pointer"></div>
</template>
<style scoped>
.nc-cell-field {
&:hover .nc-clear-date-icon {
@apply visible;
}
}
</style>