fix(grid): center transpose cell text

This commit is contained in:
t8y2
2026-06-01 15:22:24 +08:00
parent 9f029dea01
commit fa86b530d6
2 changed files with 10 additions and 4 deletions
@@ -5130,7 +5130,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
:style="{ height: '30px', width: `${transposeTotalWidth}px` }"
>
<div
class="sticky left-0 z-10 shrink-0 border-r border-border bg-background px-3 py-1.5 font-medium truncate"
class="sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-background px-3 py-0 font-medium truncate"
:style="{ width: `${transposePinnedWidth}px` }"
:title="item.column"
>
@@ -5140,7 +5140,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
<div
v-for="cell in item.values"
:key="`${item.id}:${cell.recordIndex}`"
class="relative shrink-0 border-r border-border/70 px-2 py-1.5 font-mono truncate"
class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 font-mono truncate"
:class="{
'text-muted-foreground italic': cell.isNull,
'cell-selected':
@@ -5192,6 +5192,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
v-if="temporalEditorKindForColumn(cell.valueIndex)"
v-model="editValue"
:kind="temporalEditorKindForColumn(cell.valueIndex)!"
cell-layout="transpose"
@cancel="cancelEdit"
@commit="commitGridEdit"
/>
@@ -5201,7 +5202,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2 py-0 text-xs leading-[26px] outline-none z-10"
class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-1.5 py-0 text-xs leading-[26px] outline-none z-10"
@blur="commitEdit"
@click.stop
@keydown.stop="onEditKeydown"
@@ -11,10 +11,12 @@ const props = withDefaults(
kind: TemporalCellEditorKind;
modelValue: string;
variant?: "cell" | "inline";
cellLayout?: "grid" | "transpose";
commitOnClose?: boolean;
}>(),
{
variant: "cell",
cellLayout: "grid",
commitOnClose: true,
},
);
@@ -35,7 +37,10 @@ const displayValue = computed(() => props.modelValue || "NULL");
const triggerClass = computed(() =>
props.variant === "inline"
? "cell-edit-input flex h-9 w-full items-center gap-2 rounded border bg-background px-2 text-left text-xs outline-none hover:border-primary/60 focus:border-primary"
: "cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background px-2.5 py-0 text-left text-xs outline-none",
: [
"cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background py-0 text-left text-xs outline-none",
props.cellLayout === "transpose" ? "px-1.5" : "px-2.5",
],
);
const dateParts = computed(() => {
const text = formatTemporalInputValue(props.modelValue, "date");