mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.1 KiB
82 lines
2.1 KiB
<script setup lang="ts"> |
|
interface Props { |
|
modelValue: any |
|
column?: any |
|
} |
|
|
|
const props = defineProps<Props>() |
|
|
|
const column = toRef(props, 'column') |
|
|
|
const isGrid = inject(IsGridInj, ref(false)) |
|
|
|
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false)) |
|
|
|
const isNumericField = computed(() => { |
|
return isNumericFieldType(column.value, null) |
|
}) |
|
|
|
provide(ReadonlyInj, ref(true)) |
|
provide(EditModeInj, ref(false)) |
|
|
|
provide(ColumnInj, column) |
|
</script> |
|
|
|
<template> |
|
<div |
|
class="nc-cell w-full h-full relative" |
|
:class="{ |
|
'nc-grid-numeric-cell-right': isGrid && isNumericField && !isExpandedFormOpen && !isRating(column), |
|
}" |
|
> |
|
<LazyCellCheckbox v-if="isBoolean(column)" :model-value="modelValue" /> |
|
<LazyCellCurrency v-else-if="isCurrency(column)" :model-value="modelValue" /> |
|
<LazyCellDecimal v-else-if="isDecimal(column)" :model-value="modelValue" /> |
|
<LazyCellPercent v-else-if="isPercent(column)" :model-value="modelValue" /> |
|
<LazyCellRating v-else-if="isRating(column)" :model-value="modelValue" /> |
|
<LazyCellDatePicker v-else-if="isDate(column, '')" :model-value="modelValue" /> |
|
<LazyCellDateTimePicker v-else-if="isDateTime(column, '')" :model-value="modelValue" /> |
|
<LazyCellTimePicker v-else-if="isTime(column, '')" :model-value="modelValue" /> |
|
<LazyCellEmail v-else-if="isEmail(column)" :model-value="modelValue" /> |
|
<LazyCellUrl v-else-if="isURL(column)" :model-value="modelValue" /> |
|
<LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" :model-value="modelValue" /> |
|
<LazyCellText v-else :model-value="modelValue" /> |
|
</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 text-gray-600; |
|
font-weight: 500; |
|
|
|
:deep(.nc-cell-field) { |
|
@apply !text-sm; |
|
font-weight: 500; |
|
} |
|
|
|
&.nc-display-value-cell { |
|
@apply !text-brand-500 !font-semibold; |
|
|
|
:deep(.nc-cell-field) { |
|
@apply !font-semibold; |
|
} |
|
} |
|
|
|
:deep(.nc-cell-field) { |
|
@apply px-0; |
|
} |
|
} |
|
</style>
|
|
|