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

fix(structure): flatten editable grid controls

Browse Source
This commit is contained in:
t8y2 committed 2026-08-12 18:12:30 +08:00
1 parent 915c0f60a4
commit ab46f3fc72
2 files changed
+39 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/structure/TableStructureEditor.vue
+30 -6
View File
@@ -466,7 +466,7 @@ const structureDensityStyle = computed(() => {
"--structure-line-height": String(metric.lineHeight),
};
});
const structureControlClass = "h-[var(--structure-control-height)] min-w-0 rounded-[6px] px-[var(--structure-control-px)] py-0 text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25";
const structureControlClass = "structure-grid-control h-[var(--structure-control-height)] min-w-0 rounded-[6px] px-[var(--structure-control-px)] py-0 text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25";
const structureMonoControlClass = `${structureControlClass} font-mono`;
const structureToolbarButtonClass = "h-[var(--structure-control-height)] gap-1 px-[var(--structure-control-px)] text-[length:var(--structure-font-size)]";
const structureIconButtonClass = "h-[var(--structure-control-height)] w-[var(--structure-control-height)]";
@@ -2761,7 +2761,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
</div>
<TabsContent ref="columnsScrollerRef" v-if="tableMetadataCapabilities.columns" value="columns" class="m-0 min-h-0 flex-1 overflow-auto p-0" @scroll.passive="onStructureContentScroll('columns', $event)">
<table class="border-separate border-spacing-0 text-[length:var(--structure-font-size)] leading-[var(--structure-line-height)]" :style="{ minWidth: visibleColWidths.reduce((a, w) => a + w, 0) + 'px' }">
<table class="structure-edit-grid border-separate border-spacing-0 text-[length:var(--structure-font-size)] leading-[var(--structure-line-height)]" :style="{ minWidth: visibleColWidths.reduce((a, w) => a + w, 0) + 'px' }">
<thead class="sticky top-0 z-10 bg-background">
<tr>
<th
@@ -2849,7 +2849,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
<SelectTrigger
:aria-label="t('structureEditor.lengthUnit')"
:title="t('structureEditor.lengthUnit')"
class="h-[var(--structure-control-height)] w-16 shrink-0 rounded-[6px] px-[var(--structure-control-px)] font-mono text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25"
class="structure-grid-control h-[var(--structure-control-height)] w-16 shrink-0 rounded-[6px] px-[var(--structure-control-px)] font-mono text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25"
>
<SelectValue :placeholder="t('structureEditor.unitPlaceholder')" />
</SelectTrigger>
@@ -3029,7 +3029,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
}
"
>
<SelectTrigger class="h-[var(--structure-control-height)] w-28 rounded-[6px] px-[var(--structure-control-px)] text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25">
<SelectTrigger class="structure-grid-control h-[var(--structure-control-height)] w-28 rounded-[6px] px-[var(--structure-control-px)] text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -3140,7 +3140,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
<Loader2 class="h-4 w-4 animate-spin" />
{{ t("common.loading") }}
</div>
<table v-else class="border-separate border-spacing-0 text-[length:var(--structure-font-size)] leading-[var(--structure-line-height)]" :style="{ minWidth: indexColWidths.reduce((a, w) => a + w, 0) + 'px' }">
<table v-else class="structure-edit-grid border-separate border-spacing-0 text-[length:var(--structure-font-size)] leading-[var(--structure-line-height)]" :style="{ minWidth: indexColWidths.reduce((a, w) => a + w, 0) + 'px' }">
<thead class="sticky top-0 z-10 bg-background">
<tr>
<th
@@ -3189,7 +3189,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
</td>
<td :class="structureCellClass">
<Select v-if="indexTypeOptions.length > 0" :model-value="index.indexType || 'BTREE'" :disabled="!canEditIndexDraft(index)" @update:model-value="(v: any) => (index.indexType = String(v ?? ''))">
<SelectTrigger class="h-[var(--structure-control-height)] w-full rounded-[6px] px-[var(--structure-control-px)] font-mono text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25">
<SelectTrigger class="structure-grid-control h-[var(--structure-control-height)] w-full rounded-[6px] px-[var(--structure-control-px)] font-mono text-[length:var(--structure-font-size)] focus-visible:border-ring/50 focus-visible:ring-1 focus-visible:ring-ring/25">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -3420,6 +3420,30 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
</template>
<style scoped>
/* Editable values behave like grid cells, not a row of independent pill controls. */
.structure-edit-grid :deep(.structure-grid-control) {
border-color: transparent;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.structure-edit-grid > tbody > tr > td:hover {
background-color: color-mix(in oklab, var(--muted) 36%, transparent);
}
.structure-edit-grid > tbody > tr > td:focus-within {
background-color: color-mix(in oklab, var(--primary) 7%, transparent);
outline: 1px solid color-mix(in oklab, var(--primary) 55%, transparent);
outline-offset: -1px;
}
.structure-edit-grid > tbody > tr > td:focus-within :deep(.structure-grid-control) {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
/* --primary is rgb/oklch; use color-mix like DataGrid, not channel-based hsl wrappers. */
.structure-column-search-match > td:first-child {
box-shadow: inset 3px 0 0 color-mix(in oklab, var(--primary) 55%, transparent);