xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(grid): match unused header area background

This commit is contained in:
t8y2 2026-07-13 19:12:39 +08:00
parent 117b1731f7
commit 852364db12
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/desktop/src/components/grid/DataGrid.vue
View File

@ -11510,14 +11510,17 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
}
}
.data-grid-header-shell,
.data-grid-header-shell {
/* Keep unused horizontal space continuous with the result background;
only real column headers should use the header fill. */
background-color: var(--background);
}
.data-grid-header-cell {
background-color: rgb(239, 239, 239);
}
[data-grid-root].data-grid--dark .data-grid-header-shell,
[data-grid-root].data-grid--dark .data-grid-header-cell,
:global(.dark) [data-grid-root] .data-grid-header-shell,
:global(.dark) [data-grid-root] .data-grid-header-cell {
background-color: rgb(32, 32, 34) !important;
}

15
packages/app-tests/dataGridHeaderBackground.test.ts vendored Normal file
View File

@ -0,0 +1,15 @@
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import { test } from "vitest";
import { parse } from "vue/compiler-sfc";
test("unused header width keeps the result background", () => {
const source = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
const { descriptor } = parse(source, { filename: "DataGrid.vue" });
const style = descriptor.styles.map((block) => block.content).join("\n");
assert.match(style, /\.data-grid-header-shell\s*\{[^}]*background-color:\s*var\(--background\)/s);
assert.match(style, /\.data-grid-header-cell\s*\{[^}]*background-color:\s*rgb\(239, 239, 239\)/s);
assert.doesNotMatch(style, /\.data-grid-header-shell\s*,\s*\.data-grid-header-cell/);
assert.doesNotMatch(style, /data-grid--dark\s+\.data-grid-header-shell/);
});