mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 07:16:40 +00:00
126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { UITypes } from 'nocodb-sdk'
|
|
import { defaultOffscreen2DContext } from './grid/canvas/utils/canvas'
|
|
|
|
interface Props {
|
|
column?: any
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { column } = toRefs(props)
|
|
|
|
const cellValue = inject(CellValueInj)
|
|
|
|
const isGrid = inject(IsGridInj, ref(false))
|
|
|
|
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
|
|
|
|
const wapperRef = ref<HTMLDivElement>()
|
|
|
|
const currentCellRef = inject(CurrentCellInj, ref())
|
|
|
|
const { width } = useElementSize(wapperRef)
|
|
|
|
const { showNull } = useGlobal()
|
|
|
|
const isNumericField = computed(() => {
|
|
return isNumericFieldType(column.value, null)
|
|
})
|
|
|
|
const showAsLongText = computed(() => {
|
|
if (!width.value || !isTextArea(column.value)) return false
|
|
|
|
defaultOffscreen2DContext.font = '500 13px Inter'
|
|
|
|
return (
|
|
isTextArea(column.value) &&
|
|
(currentCellRef.value?.getBoundingClientRect()?.width || width.value) - 24 <=
|
|
defaultOffscreen2DContext.measureText(cellValue.value ?? '').width
|
|
)
|
|
})
|
|
|
|
const referencedColumnUidt = computed(() => {
|
|
return column.value.colOptions?.parsed_tree?.referencedColumn?.uidt
|
|
})
|
|
|
|
provide(ReadonlyInj, ref(true))
|
|
provide(EditModeInj, ref(false))
|
|
|
|
provide(ColumnInj, column)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="wapperRef"
|
|
class="nc-cell-formula-wrapper nc-cell w-full relative nc-cell-field"
|
|
:class="{
|
|
'nc-grid-numeric-cell-right': isGrid && isNumericField && !isExpandedFormOpen && !isRating(column),
|
|
}"
|
|
>
|
|
<template v-if="showNull && (ncIsNull(cellValue) || ncIsUndefined(cellValue))">
|
|
<CellText model-value="NULL" />
|
|
</template>
|
|
<CellCheckbox v-else-if="isBoolean(column)" :model-value="cellValue" />
|
|
<CellCurrency v-else-if="isCurrency(column)" :model-value="cellValue" />
|
|
<CellDecimal v-else-if="isDecimal(column)" :model-value="cellValue" />
|
|
<div v-else-if="isPercent(column)" class="flex" :class="{ 'h-[30px] min-h-[30px]': parseProp(column.meta)?.is_progress }">
|
|
<CellPercentReadonly :model-value="cellValue" />
|
|
</div>
|
|
<CellRating v-else-if="isRating(column)" :model-value="cellValue" />
|
|
<CellDateReadonly v-else-if="isDate(column, '')" :model-value="cellValue" />
|
|
<CellDateTimeReadonly v-else-if="isDateTime(column, '')" :model-value="cellValue" />
|
|
<CellTime v-else-if="isTime(column, '')" :model-value="cellValue" />
|
|
<CellEmail v-else-if="isEmail(column)" :model-value="cellValue" />
|
|
<CellUrl v-else-if="isURL(column)" :model-value="cellValue" />
|
|
<CellPhoneNumber v-else-if="isPhoneNumber(column)" :model-value="cellValue" />
|
|
<LazyCellTextArea v-else-if="isTextArea(column) && showAsLongText" :model-value="cellValue" />
|
|
<LazyCellAttachment v-else-if="[UITypes.Attachment].includes(referencedColumnUidt)" :model-value="cellValue" />
|
|
<LazyCellUserReadonly v-else-if="[UITypes.User].includes(referencedColumnUidt)" :model-value="cellValue" />
|
|
<CellText v-else :model-value="cellValue" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.nc-grid-numeric-cell-left {
|
|
text-align: left;
|
|
:deep(input) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
.nc-grid-numeric-cell-right {
|
|
text-align: right;
|
|
:deep(input) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.nc-cell {
|
|
@apply text-sm;
|
|
font-weight: 500;
|
|
|
|
:deep(.nc-cell-field) {
|
|
@apply !text-sm;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&.nc-display-value-cell {
|
|
@apply !text-nc-content-brand !font-semibold;
|
|
|
|
:deep(.nc-cell-field) {
|
|
@apply !font-semibold;
|
|
}
|
|
}
|
|
|
|
:deep(.nc-cell-field) {
|
|
@apply px-0;
|
|
}
|
|
}
|
|
|
|
.nc-cell-formula-wrapper {
|
|
&:has(.long-text-wrapper) {
|
|
@apply !px-0;
|
|
}
|
|
}
|
|
</style>
|