fix(nc-gui): canvas cell timezone issue and editable cell ui changes

This commit is contained in:
Ramesh Mane
2025-04-22 14:15:57 +00:00
parent d566cf7df9
commit 24db9cb4e3
10 changed files with 50 additions and 33 deletions

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import dayjs from 'dayjs'
import { dateFormats, isSystemColumn, timeFormats } from 'nocodb-sdk'
import { getTimeZones } from '@vvo/tzdb'
import { timeFormatsObj } from './utils'
interface Props {
@@ -487,14 +486,13 @@ const minimizeMaxWidth = computed(() => {
>
<div
:title="localState?.format(dateTimeFormat)"
class="nc-date-picker ant-picker-input flex items-center relative gap-2"
class="nc-date-picker ant-picker-input flex items-center relative gap-2 !truncate !w-auto"
:class="{
'max-w-[calc(100%_-_70px)] flex-none': minimizeMaxWidth,
'flex-1': !minimizeMaxWidth,
'max-w-[calc(100%_-_70px)]': minimizeMaxWidth,
}"
>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="flex rounded-md box-border w-[60%] max-w-[110px]"
:class="{
'py-0': isForm,
'py-0.5': !isForm && !isColDisabled,
@@ -507,7 +505,7 @@ const minimizeMaxWidth = computed(() => {
ref="datePickerRef"
:value="localState?.format(dateFormat) ?? ''"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.date"
class="nc-date-input w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-date-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(true)"
@blur="onBlur($event, true)"
@@ -522,7 +520,7 @@ const minimizeMaxWidth = computed(() => {
</template>
</div>
<div
class="nc-flex-1 rounded-md box-border nc-truncate"
class="rounded-md box-border nc-truncate"
:class="[
`${timeCellMaxWidth}`,
{
@@ -538,7 +536,7 @@ const minimizeMaxWidth = computed(() => {
ref="timePickerRef"
:value="cellValue"
:placeholder="typeof placeholder === 'string' ? placeholder : placeholder?.time"
class="nc-time-input w-full min-w-0 !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
class="nc-time-input w-full !truncate border-transparent outline-none !text-current !bg-transparent !focus:(border-none ring-transparent)"
:readonly="isColDisabled"
@focus="onFocus(false)"
@blur="onBlur($event, false)"
@@ -591,7 +589,7 @@ const minimizeMaxWidth = computed(() => {
<div
v-if="timeZoneDisplay"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right"
class="nc-timezone-field text-nc-content-gray-muted whitespace-nowrap text-tiny transition-all duration-300 text-right flex-1"
:class="{
'nc-flex-1': minimizeMaxWidth,
}"