github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-06 00:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): improve column selection and transpose highlights

Browse Source
This commit is contained in:
t8y2 committed 2026-05-28 20:09:35 +08:00
1 parent 5032b9434f
commit f41601e4dc
5 files changed
+154 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+57 -12
View File
@@ -2934,13 +2934,13 @@ async function onGridKeydown(event: KeyboardEvent) {
return;
}
if (clipboardShortcut(event, "x")) {
if (!props.editable || !hasCellSelection.value) return;
if (!props.editable || !selectedRange.value) return;
event.preventDefault();
cutSelection();
return;
}
if (clipboardShortcut(event, "v")) {
if (!props.editable || !hasCellSelection.value) return;
if (!props.editable || !selectedRange.value) return;
event.preventDefault();
await pasteClipboardIntoSelection();
}
@@ -3155,6 +3155,23 @@ function selectTransposeRecord(rowIndex: number, event?: MouseEvent) {
gridRef.value?.focus({ preventScroll: true });
}
function transposeRecordIsSelected(rowIndex: number): boolean {
const item = displayItems.value[rowIndex];
return !!item && isRowSelected(item.id);
}
function transposeRecordUsesSelectionVisual(rowIndex: number): boolean {
return hasRowSelection.value && transposeRecordIsSelected(rowIndex);
}
function transposeRecordUsesActiveHighlight(rowIndex: number): boolean {
return transposeRowIndex.value === rowIndex;
}
function transposeRecordUsesFramedHeader(rowIndex: number): boolean {
return hasRowSelection.value && transposeRecordIsSelected(rowIndex) && !hasCellSelection.value;
}
function moveTransposeRecordSelection(delta: number): boolean {
if (!isTransposeMode.value || displayItems.value.length === 0) return false;
const current = transposeRowIndex.value ?? 0;
@@ -4329,11 +4346,16 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
v-for="recordIndex in visibleTransposeRecordIndexes"
:key="`transpose-head-${recordIndex}`"
class="shrink-0 border-r border-border px-2 py-1.5 text-center tabular-nums relative"
:class="
recordIndex === transposeRowIndex
? 'bg-primary/15 text-primary font-semibold'
: 'bg-[rgb(239_239_239)] dark:bg-muted'
"
:class="{
'transpose-record-header-selected text-primary font-semibold':
transposeRecordUsesFramedHeader(recordIndex),
'transpose-record-header-active text-primary':
transposeRecordUsesActiveHighlight(recordIndex) &&
!transposeRecordUsesFramedHeader(recordIndex),
'bg-[rgb(239_239_239)] dark:bg-muted':
!transposeRecordUsesActiveHighlight(recordIndex) &&
!transposeRecordUsesFramedHeader(recordIndex),
}"
:style="{ width: `${transposeRecordWidth}px` }"
@click="selectTransposeRecord(recordIndex, $event)"
@contextmenu="selectTransposeRecord(recordIndex, $event)"
@@ -4372,12 +4394,26 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
'cell-selected-dirty':
transposeCellIsSelected(cell.recordIndex, cell.valueIndex) &&
displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'bg-primary/10': cell.recordIndex === transposeRowIndex,
'row-cell-selected':
transposeRecordUsesSelectionVisual(cell.recordIndex) &&
!transposeCellIsSelected(cell.recordIndex, cell.valueIndex) &&
!displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'row-cell-selected-dirty':
transposeRecordUsesSelectionVisual(cell.recordIndex) &&
!transposeCellIsSelected(cell.recordIndex, cell.valueIndex) &&
displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'bg-primary/15':
transposeRecordUsesActiveHighlight(cell.recordIndex) &&
!transposeRecordUsesSelectionVisual(cell.recordIndex) &&
!displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex] &&
!transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
'bg-yellow-500/10 cell-dirty': displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'cursor-text hover:bg-accent/50': canEditCellItem(
displayItems[cell.recordIndex],
cell.valueIndex,
),
'cursor-text': canEditCellItem(displayItems[cell.recordIndex], cell.valueIndex),
'hover:bg-accent/50':
canEditCellItem(displayItems[cell.recordIndex], cell.valueIndex) &&
!transposeRecordUsesSelectionVisual(cell.recordIndex) &&
!transposeRecordUsesActiveHighlight(cell.recordIndex) &&
!transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
}"
:style="{ width: `${transposeRecordWidth}px` }"
:title="cell.display"
@@ -5751,6 +5787,15 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent);
}
.transpose-record-header-selected {
background-color: color-mix(in oklab, var(--primary) 25%, var(--background));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent);
}
.transpose-record-header-active {
background-color: color-mix(in oklab, var(--primary) 25%, var(--background));
}
.cell-selected-dirty {
background-color: color-mix(in oklab, oklch(0.8 0.15 85) 30%, color-mix(in oklab, var(--primary) 18%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent);