@@ -9737,44 +7409,23 @@ const gridContextMenuItems = computed(() => {
-
-
-
+
(() => {
#
-
-
-
-
- {{ currentMatchIndex + 1 }}/{{ searchMatches.length }}
- 0
-
-
-
-
-
-
-
- {{ col.name }}
-
-
- {{ headerColumnType(col.name, col.actualColIdx) }}
-
-
- {{ headerColumnComment(col.name) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (() => {
min-width: 0;
}
-.data-grid-topbar-condition-label {
- display: inline-flex;
- flex-shrink: 0;
- max-width: 5rem;
- overflow: hidden;
- white-space: nowrap;
- font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.5rem;
- user-select: none;
- opacity: 1;
- transform: translateX(0);
- transition:
- max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- opacity 240ms ease 60ms,
- transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- color 240ms ease;
-}
-
-.data-grid-topbar-condition-label--where {
- color: rgb(37 99 235);
-}
-
-.data-grid-topbar-condition-label--order {
- color: rgb(234 88 12);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-label--where {
- color: rgb(96 165 250);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-label--order {
- color: rgb(251 146 60);
-}
-
-.data-grid-topbar-condition-label--compact {
- max-width: 0;
- opacity: 0;
- transform: translateX(-4px);
-}
-
-.data-grid-topbar-condition-input,
-.data-grid-topbar-condition-measure {
- font-family: var(--data-grid-condition-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
- font-size: 0.875rem;
- line-height: 1.5rem;
- font-variant-ligatures: none;
- font-feature-settings:
- "liga" 0,
- "calt" 0;
-}
-
-.data-grid-topbar-condition-input {
- width: 100%;
- max-width: 100%;
- box-sizing: border-box;
- padding: 0 0.125rem;
- overflow-x: auto;
- overflow-y: hidden;
- white-space: pre;
- border: 0;
- border-radius: 0;
- appearance: none;
- scrollbar-width: none;
-}
-
-[data-grid-root].data-grid--dark .data-grid-topbar-condition-input {
- color: rgb(244, 244, 245);
- background-color: transparent !important;
-}
-
-.data-grid-topbar-condition-input::-webkit-scrollbar {
- display: none;
-}
-
-.data-grid-topbar-condition-icon-control {
- align-self: center;
- margin-top: 0;
-}
-
-.data-grid-topbar-condition-floating-controls {
- top: var(--data-grid-condition-controls-top);
- will-change: transform;
-}
-
-.data-grid-topbar-condition-pane--expanded {
- --data-grid-condition-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
- position: fixed;
- z-index: 80;
- right: auto;
- bottom: auto;
- box-sizing: border-box;
- padding: 0.1875rem 0.5rem 0.1875rem 0.5rem;
- overflow: hidden;
- background: color-mix(in oklab, var(--background) 96%, var(--muted) 4%);
- box-shadow:
- inset 0 -1px 0 var(--border),
- 0 8px 16px rgb(15 23 42 / 8%);
- transition:
- height 150ms ease,
- box-shadow 150ms ease;
- --data-grid-expanded-scrollbar-offset: 8px;
- --data-grid-condition-controls-top: 0.125rem;
- --data-grid-condition-input-top: 0.125rem;
- --data-grid-condition-prefix-indent: 0px;
- --data-grid-condition-suffix-width: 0px;
-}
-
-[data-grid-root].data-grid--dark .data-grid-topbar-condition-pane--expanded {
- background: rgb(24, 24, 27) !important;
- color: rgb(244, 244, 245);
- box-shadow:
- inset 0 -1px 0 rgb(63, 63, 70),
- 0 8px 16px rgb(0 0 0 / 32%);
-}
-
-.data-grid-topbar-condition-input--expanded {
- top: var(--data-grid-condition-input-top);
- right: 0.5rem;
- bottom: 0.125rem;
- left: 0.5rem;
- height: auto;
- line-height: 1.5rem;
- margin-left: 0;
- width: calc(100% - 1rem + var(--data-grid-expanded-scrollbar-offset));
- max-width: none;
- margin-right: calc(-1 * var(--data-grid-expanded-scrollbar-offset));
- padding: 0 calc(var(--data-grid-condition-suffix-width) + 0.5rem) 0.0625rem 0.125rem;
- text-indent: var(--data-grid-condition-prefix-indent);
- overflow-x: hidden;
- overflow-y: auto;
- white-space: pre-wrap;
- overflow-wrap: anywhere;
- border: 0;
- border-radius: 0;
- background: transparent;
- scrollbar-width: thin;
-}
-
-.data-grid-topbar-condition-input--expanded::-webkit-scrollbar {
- display: initial;
- width: 8px;
-}
-
-.data-grid-topbar-condition-input::placeholder {
- color: transparent;
- transition: color 240ms ease;
-}
-
-.data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
- color: rgb(59 130 246 / 70%);
-}
-
-.data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
- color: rgb(249 115 22 / 70%);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-input--where.data-grid-topbar-condition-input--compact::placeholder {
- color: rgb(147 197 253 / 70%);
-}
-
-:global(.dark) [data-grid-root] .data-grid-topbar-condition-input--order.data-grid-topbar-condition-input--compact::placeholder {
- color: rgb(253 186 116 / 70%);
-}
-
-.data-grid-topbar-action-button {
- align-items: center;
- justify-content: center;
- max-width: 9rem;
- min-width: 1.25rem;
- gap: 0;
- line-height: 1;
- overflow: hidden;
- transition:
- max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- min-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- padding-inline var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- color 220ms ease,
- background-color 220ms ease,
- border-color 220ms ease;
-}
-
-.data-grid-topbar-action-button--compact {
- max-width: 1.25rem;
- min-width: 1.25rem;
- padding-inline: 0;
-}
-
-.data-grid-topbar-action-button--commit.data-grid-topbar-action-button--compact {
- overflow: visible;
-}
-
-.data-grid-topbar-action-icon {
- display: block;
- align-self: center;
- flex-shrink: 0;
- transition:
- margin-inline-end var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing);
-}
-
-.data-grid-topbar-action-button:not(.data-grid-topbar-action-button--compact) .data-grid-topbar-action-icon {
- margin-inline-end: 0.25rem;
-}
-
.data-grid-scroller,
.data-grid-header-row,
.data-grid-transpose-header,
@@ -11999,33 +8942,6 @@ const gridContextMenuItems = computed(() => {
font-size: var(--dbx-table-font-size, 13px);
}
-.data-grid-topbar-action-button--compact .data-grid-topbar-action-icon {
- margin-inline-end: 0;
- transform: scale(0.96);
-}
-
-.data-grid-topbar-action-label {
- display: inline-flex;
- align-items: center;
- height: 1rem;
- max-width: 8rem;
- overflow: hidden;
- white-space: nowrap;
- line-height: 1;
- opacity: 1;
- transform: translateX(0);
- transition:
- max-width var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing),
- opacity 240ms ease 60ms,
- transform var(--data-grid-topbar-transition-duration) var(--data-grid-topbar-transition-easing);
-}
-
-.data-grid-topbar-action-label--compact {
- max-width: 0;
- opacity: 0;
- transform: translateX(-4px);
-}
-
.data-grid-topbar-scroll {
scrollbar-width: none;
scrollbar-gutter: auto;
diff --git a/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue b/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue
new file mode 100644
index 0000000000..4af477d989
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridBulkEditDialog.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue b/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue
new file mode 100644
index 0000000000..7f2dd0f13b
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridCellDetailDialog.vue
@@ -0,0 +1,200 @@
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
new file mode 100644
index 0000000000..dba473921d
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
@@ -0,0 +1,185 @@
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridColumnHeader.vue b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
new file mode 100644
index 0000000000..5dbf51c9c7
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridConditionEditor.vue b/apps/desktop/src/components/grid/DataGridConditionEditor.vue
new file mode 100644
index 0000000000..bd42ccd045
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridConditionEditor.vue
@@ -0,0 +1,540 @@
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridToolbar.vue b/apps/desktop/src/components/grid/DataGridToolbar.vue
new file mode 100644
index 0000000000..28328aab82
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridToolbar.vue
@@ -0,0 +1,255 @@
+
+
+
+ = {}): DataGridCellDetail {
+ return {
+ rowNumber: 1,
+ rowId: 0,
+ colIndex: 0,
+ column: "payload",
+ type: "JSON",
+ comment: "",
+ value: '{"a":1}',
+ rawValue: '{"a":1}',
+ rawValuePreview: '{"a":1}',
+ displayValue: '{"a":1}',
+ displayValuePreview: '{"a":1}',
+ isValuePreviewTruncated: false,
+ imagePreviewUrl: null,
+ length: 7,
+ formattedJson: '{\n "a": 1\n}',
+ isEditable: true,
+ ...patch,
+ };
+}
+
+beforeEach(() => {
+ vi.clearAllMocks();
+});
+
+describe("DataGridSearchBar", () => {
+ it("focuses/selects the input and forwards keyboard and suggestion interactions", () => {
+ const keydown = vi.fn();
+ const acceptSuggestion = vi.fn();
+ const hoverSuggestion = vi.fn();
+ const close = vi.fn();
+ const mounted = mountComponent(DataGridSearchBar, {
+ open: true,
+ text: "pay",
+ suggestions: ["payload"],
+ suggestionIndex: 0,
+ matchCount: 2,
+ currentMatchIndex: 0,
+ hasDeferredSearchText: false,
+ onKeydown: keydown,
+ onAcceptSuggestion: acceptSuggestion,
+ onHoverSuggestion: hoverSuggestion,
+ onClose: close,
+ });
+ const input = findOne(mounted.root, (node) => node.type === "input");
+
+ mounted.exposed.value.focus(true);
+ expect(input.focused).toBe(true);
+ expect(input.selected).toBe(true);
+ dispatch(input, "keydown", { key: "Enter" });
+ expect(keydown).toHaveBeenCalledWith(expect.objectContaining({ key: "Enter" }));
+
+ const suggestion = findOne(mounted.root, (node) => hostText(node) === "payload" && !!node.props.onMousedown);
+ const mouseDown = dispatch(suggestion, "mousedown");
+ expect(mouseDown.defaultPrevented).toBe(true);
+ expect(acceptSuggestion).toHaveBeenCalledWith(0);
+ dispatch(suggestion, "mouseenter");
+ expect(hoverSuggestion).toHaveBeenCalledWith(0);
+
+ const closeButton = findOne(mounted.root, (node) => node.type === "button");
+ dispatch(closeButton, "click");
+ expect(close).toHaveBeenCalledOnce();
+ });
+});
+
+describe("DataGridPagination", () => {
+ it("enforces first/previous/next/last disabled boundaries", async () => {
+ const firstPage = vi.fn();
+ const previousPage = vi.fn();
+ const nextPage = vi.fn();
+ const lastPage = vi.fn();
+ const mounted = mountComponent(DataGridPagination, {
+ selectionSummary: null,
+ selectionSummarySumText: "",
+ loading: false,
+ infiniteScrollEnabled: false,
+ infiniteScrollAllLoaded: false,
+ pageSize: 100,
+ customPageSizeInput: "",
+ pageSizeMenuItems: [],
+ exportMenuItems: [],
+ currentPage: 1,
+ canGoNextPage: false,
+ canJumpLastPage: false,
+ onFirstPage: firstPage,
+ onPreviousPage: previousPage,
+ onNextPage: nextPage,
+ onLastPage: lastPage,
+ });
+ const navigation = findAll(mounted.root, (node) => node.props["data-stub"] === "Button" && node.props.class === "h-5 w-5 shrink-0");
+
+ expect(navigation.map((node) => node.props.disabled)).toEqual([true, true, true, true]);
+ navigation.forEach((node) => dispatch(node, "click"));
+ expect(firstPage).not.toHaveBeenCalled();
+ expect(previousPage).not.toHaveBeenCalled();
+ expect(nextPage).not.toHaveBeenCalled();
+ expect(lastPage).not.toHaveBeenCalled();
+
+ await mounted.setProps({ currentPage: 2, canGoNextPage: true, canJumpLastPage: true });
+ const enabledNavigation = findAll(mounted.root, (node) => node.props["data-stub"] === "Button" && node.props.class === "h-5 w-5 shrink-0");
+ expect(enabledNavigation.map((node) => node.props.disabled)).toEqual([false, false, false, false]);
+ enabledNavigation.forEach((node) => dispatch(node, "click"));
+ expect(firstPage).toHaveBeenCalledOnce();
+ expect(previousPage).toHaveBeenCalledOnce();
+ expect(nextPage).toHaveBeenCalledOnce();
+ expect(lastPage).toHaveBeenCalledOnce();
+ });
+});
+
+describe("DataGridColumnHeader", () => {
+ it("cancels resize-handle clicks without leaking header click events", () => {
+ const click = vi.fn();
+ const clickCapture = vi.fn();
+ const resizeStart = vi.fn();
+ const autoFit = vi.fn();
+ const mounted = mountComponent(DataGridColumnHeader, {
+ name: "id",
+ actualColumnIndex: 0,
+ visibleColumnIndex: 0,
+ dark: true,
+ copyColumnNameLabel: "copy",
+ columnNameLabel: "name",
+ columnTypeLabel: "type",
+ columnCommentLabel: "comment",
+ onClick: click,
+ onClickCapture: clickCapture,
+ onResizeStart: resizeStart,
+ onAutoFit: autoFit,
+ });
+ const handle = findOne(mounted.root, (node) => node.props["data-column-resize-handle"] === "");
+ const header = findOne(mounted.root, (node) => node.props["data-grid-column-index"] === 0);
+ expect(String(header.props.class)).toContain("data-grid-header-cell--dark");
+
+ const down = dispatch(handle, "mousedown");
+ expect(down.propagationStopped).toBe(true);
+ expect(resizeStart).toHaveBeenCalledOnce();
+ const handleClick = dispatch(handle, "click");
+ expect(handleClick.propagationStopped).toBe(true);
+ expect(handleClick.defaultPrevented).toBe(true);
+ expect(click).not.toHaveBeenCalled();
+ expect(clickCapture).not.toHaveBeenCalled();
+ dispatch(handle, "dblclick");
+ expect(autoFit).toHaveBeenCalledOnce();
+ });
+});
+
+describe("DataGridFilterBuilder", () => {
+ it("isolates text-entry keys while preserving popup navigation keys", () => {
+ const mounted = mountComponent(DataGridFilterBuilder, { rules: [{ id: "r1", columnName: "id", mode: "equals", rawValue: "", rawEndValue: "", conjunction: "AND" }], columns: ["id"], filteredColumns: ["id"], modeOptions: [{ value: "equals", labelKey: "equals" }], columnSearch: "" });
+ const searchInput = findOne(mounted.root, (node) => node.type === "input" && node.props.placeholder === "grid.filterBuilderSearchColumns");
+
+ expect(dispatch(searchInput, "keydown", { key: "a" }).propagationStopped).toBe(true);
+ expect(dispatch(searchInput, "keydown", { key: "Backspace" }).propagationStopped).toBe(true);
+ expect(dispatch(searchInput, "keydown", { key: "ArrowDown" }).propagationStopped).toBe(false);
+ expect(dispatch(searchInput, "keydown", { key: "Process", isComposing: true }).propagationStopped).toBe(true);
+ });
+});
+
+describe("cell detail surfaces", () => {
+ it("copies the presented value, emits edit, closes, and replaces the JSON result", async () => {
+ const copyText = vi.fn();
+ const edit = vi.fn();
+ const updateOpen = vi.fn();
+ const mounted = mountComponent(DataGridCellDetailDialog, { open: true, detail: detail(), typeColorClass: () => "", openImagePreview: vi.fn(), copyText, canDownloadBinaryValue: () => false, downloadBinaryValue: vi.fn(), onEdit: edit, "onUpdate:open": updateOpen });
+ await nextTick();
+ await nextTick();
+
+ const copyValue = findOne(mounted.root, (node) => node.props.title === "grid.copyValue");
+ dispatch(copyValue, "click");
+ expect(copyText).toHaveBeenCalledWith('{\n "a": 1\n}');
+ dispatch(
+ findOne(mounted.root, (node) => node.props.title === "grid.editValue"),
+ "click",
+ );
+ expect(edit).toHaveBeenCalledOnce();
+
+ await mounted.setProps({ detail: detail({ rawValue: '{"b":2}', formattedJson: '{\n "b": 2\n}' }) });
+ expect(mocks.editor.setValue).toHaveBeenCalledWith('{\n "b": 2\n}', "json");
+ await mounted.setProps({ detail: detail({ value: null, rawValue: "", formattedJson: "" }) });
+ expect(mocks.editor.destroy).toHaveBeenCalledOnce();
+
+ const dialog = findOne(mounted.root, (node) => node.props["data-stub"] === "Dialog");
+ dialog.props["onUpdate:open"](false);
+ expect(updateOpen).toHaveBeenCalledWith(false);
+ });
+
+ it("forwards panel edit/copy/cancel actions and exposes search", () => {
+ const startEdit = vi.fn();
+ const copyValue = vi.fn();
+ const cancel = vi.fn();
+ const mounted = mountComponent(DataGridCellDetailPanel, {
+ detail: detail({ formattedJson: "" }),
+ panelIsBottom: false,
+ metadataCollapsed: false,
+ valueFillsHeight: false,
+ editing: false,
+ sideJsonView: false,
+ showCompactJson: false,
+ canCompactJson: false,
+ typeColorClass: () => "",
+ canDownloadBinaryValue: () => false,
+ downloadBinaryValue: vi.fn(),
+ openImagePreview: vi.fn(),
+ canCopySqlCondition: () => true,
+ onStartEdit: startEdit,
+ onCopyValue: copyValue,
+ onCancel: cancel,
+ });
+
+ dispatch(
+ findOne(mounted.root, (node) => node.props.title === "grid.editValue"),
+ "click",
+ );
+ dispatch(
+ findOne(mounted.root, (node) => node.props.title === "grid.copyValue"),
+ "click",
+ );
+ dispatch(
+ findOne(mounted.root, (node) => node.type === "pre"),
+ "dblclick",
+ );
+ expect(startEdit).toHaveBeenCalledTimes(2);
+ expect(copyValue).toHaveBeenCalledOnce();
+ mocks.panelCancel();
+ expect(cancel).toHaveBeenCalledOnce();
+ mounted.exposed.value.openSearch();
+ expect(mocks.panelOpenSearch).toHaveBeenCalledOnce();
+ });
+});
diff --git a/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts b/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts
new file mode 100644
index 0000000000..31f83424ae
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/vueHostHarness.ts
@@ -0,0 +1,185 @@
+import { createRenderer, defineComponent, h, nextTick, reactive, ref, type Component } from "vue";
+
+export interface HostNode {
+ type: string;
+ props: Record;
+ children: Array;
+ parent: HostNode | null;
+ focused: boolean;
+ selected: boolean;
+ value?: unknown;
+ listeners: Map void>>;
+ focus(): void;
+ select(): void;
+ addEventListener(name: string, listener: (event: any) => void): void;
+ removeEventListener(name: string, listener: (event: any) => void): void;
+}
+
+function createHostNode(type: string): HostNode {
+ const node: HostNode = {
+ type,
+ props: {},
+ children: [],
+ parent: null,
+ focused: false,
+ selected: false,
+ listeners: new Map(),
+ focus() {
+ node.focused = true;
+ },
+ select() {
+ node.selected = true;
+ },
+ addEventListener(name, listener) {
+ const listeners = node.listeners.get(name) ?? [];
+ listeners.push(listener);
+ node.listeners.set(name, listeners);
+ },
+ removeEventListener(name, listener) {
+ node.listeners.set(
+ name,
+ (node.listeners.get(name) ?? []).filter((candidate) => candidate !== listener),
+ );
+ },
+ };
+ return node;
+}
+
+function insert(child: HostNode, parent: HostNode, anchor?: HostNode | null) {
+ child.parent = parent;
+ if (!anchor) {
+ parent.children.push(child);
+ return;
+ }
+ const index = parent.children.indexOf(anchor);
+ parent.children.splice(index < 0 ? parent.children.length : index, 0, child);
+}
+
+const renderer = createRenderer({
+ patchProp(node, key, _previous, next) {
+ if (next === null || next === undefined) delete node.props[key];
+ else node.props[key] = next;
+ if (key === "value") node.value = next;
+ },
+ insert,
+ remove(node) {
+ if (!node.parent) return;
+ const index = node.parent.children.indexOf(node);
+ if (index >= 0) node.parent.children.splice(index, 1);
+ node.parent = null;
+ },
+ createElement: createHostNode,
+ createText(text) {
+ const node = createHostNode("#text");
+ node.children = [text];
+ return node;
+ },
+ createComment(text) {
+ const node = createHostNode("#comment");
+ node.children = [text];
+ return node;
+ },
+ setText(node, text) {
+ node.children = [text];
+ },
+ setElementText(node, text) {
+ node.children = [text];
+ },
+ parentNode: (node) => node.parent,
+ nextSibling(node) {
+ if (!node.parent) return null;
+ const index = node.parent.children.indexOf(node);
+ return (node.parent.children[index + 1] as HostNode | undefined) ?? null;
+ },
+ setScopeId(node, id) {
+ node.props[id] = "";
+ },
+ cloneNode(node) {
+ return { ...node, props: { ...node.props }, children: [...node.children], parent: null, listeners: new Map(node.listeners) };
+ },
+ insertStaticContent(content, parent, anchor) {
+ const node = createHostNode("#static");
+ node.children = [content];
+ insert(node, parent, anchor);
+ return [node, node];
+ },
+});
+
+export function createPassthroughStub(name: string, tag = "div") {
+ return defineComponent({
+ name,
+ inheritAttrs: false,
+ setup(_props, { attrs, slots }) {
+ return () => h(tag, { ...attrs, "data-stub": name }, [slots.default?.(), slots.content?.()]);
+ },
+ });
+}
+
+export function mountComponent(component: Component, initialProps: Record) {
+ const props = reactive({ ...initialProps });
+ const componentRef = ref();
+ const root = createHostNode("root");
+ const wrapper = defineComponent({
+ setup() {
+ return () => h(component, { ...props, ref: componentRef });
+ },
+ });
+ const app = renderer.createApp(wrapper);
+ app.mount(root);
+ return {
+ root,
+ exposed: componentRef,
+ async setProps(patch: Record) {
+ Object.assign(props, patch);
+ await nextTick();
+ },
+ unmount() {
+ app.unmount();
+ },
+ };
+}
+
+export function findAll(node: HostNode, predicate: (node: HostNode) => boolean): HostNode[] {
+ const matches: HostNode[] = [];
+ if (predicate(node)) matches.push(node);
+ for (const child of node.children) {
+ if (typeof child !== "string") matches.push(...findAll(child, predicate));
+ }
+ return matches;
+}
+
+export function findOne(node: HostNode, predicate: (node: HostNode) => boolean): HostNode {
+ const match = findAll(node, predicate)[0];
+ if (!match) throw new Error("Expected host node was not rendered");
+ return match;
+}
+
+export function hostText(node: HostNode): string {
+ return node.children.map((child) => (typeof child === "string" ? child : hostText(child))).join("");
+}
+
+function eventPropName(name: string) {
+ return `on${name[0].toUpperCase()}${name.slice(1)}`;
+}
+
+export function dispatch(node: HostNode, name: string, overrides: Record = {}) {
+ const event = {
+ type: name,
+ target: node,
+ currentTarget: node,
+ defaultPrevented: false,
+ propagationStopped: false,
+ preventDefault() {
+ event.defaultPrevented = true;
+ },
+ stopPropagation() {
+ event.propagationStopped = true;
+ },
+ ...overrides,
+ };
+ if (node.props.disabled) return event;
+ for (const listener of node.listeners.get(name) ?? []) listener(event);
+ const handler = node.props[eventPropName(name)];
+ for (const callback of Array.isArray(handler) ? handler : handler ? [handler] : []) callback(event);
+ return event;
+}
diff --git a/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts
new file mode 100644
index 0000000000..8f1a7c5369
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridAsyncSurface.spec.ts
@@ -0,0 +1,31 @@
+import { effectScope, nextTick, ref } from "vue";
+import { describe, expect, it } from "vitest";
+import { useDataGridAsyncSurface } from "@/composables/useDataGridAsyncSurface";
+
+describe("useDataGridAsyncSurface", () => {
+ it("defers mounting until first open and keeps the surface mounted afterward", async () => {
+ const open = ref(false);
+ const scope = effectScope();
+ const mounted = scope.run(() => useDataGridAsyncSurface(open))!;
+
+ expect(mounted.value).toBe(false);
+
+ open.value = true;
+ await nextTick();
+ expect(mounted.value).toBe(true);
+
+ open.value = false;
+ await nextTick();
+ expect(mounted.value).toBe(true);
+
+ scope.stop();
+ });
+
+ it("mounts immediately when restored with an already-open surface", () => {
+ const scope = effectScope();
+ const mounted = scope.run(() => useDataGridAsyncSurface(ref(true)))!;
+
+ expect(mounted.value).toBe(true);
+ scope.stop();
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
new file mode 100644
index 0000000000..947136f6fd
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
@@ -0,0 +1,32 @@
+import { computed, nextTick } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useDataGridAutoRefresh } from "@/composables/useDataGridAutoRefresh";
+
+describe("useDataGridAutoRefresh", () => {
+ afterEach(() => vi.useRealTimers());
+
+ it("refreshes on the configured interval when enabled", async () => {
+ vi.useFakeTimers();
+ const refresh = vi.fn();
+ const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => true), refresh, initialIntervalSeconds: 5 });
+
+ autoRefresh.toggle();
+ vi.advanceTimersByTime(5000);
+ await nextTick();
+
+ expect(refresh).toHaveBeenCalledOnce();
+ autoRefresh.stop();
+ });
+
+ it("does not refresh while the operation is unavailable", () => {
+ vi.useFakeTimers();
+ const refresh = vi.fn();
+ const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => false), refresh, initialIntervalSeconds: 1 });
+
+ autoRefresh.toggle();
+ vi.advanceTimersByTime(1000);
+
+ expect(refresh).not.toHaveBeenCalled();
+ autoRefresh.stop();
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts
new file mode 100644
index 0000000000..bc74615fc2
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridCanvasRuntime.spec.ts
@@ -0,0 +1,160 @@
+import { effectScope } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import { useDataGridCanvasRuntime, type DataGridAnimationFrameDriver } from "@/composables/useDataGridCanvasRuntime";
+import { useDataGridScrollbars } from "@/composables/useDataGridScrollbars";
+
+function createFrameDriver() {
+ let nextId = 0;
+ const callbacks = new Map();
+ const driver: DataGridAnimationFrameDriver = {
+ request(callback) {
+ const id = nextId++;
+ callbacks.set(id, callback);
+ return id;
+ },
+ cancel(id) {
+ callbacks.delete(id);
+ },
+ };
+ return { driver, callbacks, run: (id: number) => callbacks.get(id)?.(0) };
+}
+
+function createObserver() {
+ const observe = vi.fn();
+ const disconnect = vi.fn();
+ return { observer: { observe, disconnect } as unknown as ResizeObserver, observe, disconnect };
+}
+
+describe("data grid visual runtimes", () => {
+ it("coalesces canvas frames and cancels all resources on dispose", () => {
+ const frames = createFrameDriver();
+ const resize = createObserver();
+ const draw = vi.fn();
+ const viewport = { children: [] } as unknown as Element;
+ const runtime = useDataGridCanvasRuntime({
+ draw,
+ syncViewport: vi.fn(),
+ getViewport: () => viewport,
+ refreshPixelRatio: vi.fn(),
+ frameDriver: frames.driver,
+ createResizeObserver: () => resize.observer,
+ });
+
+ runtime.observeViewport();
+ runtime.scheduleDraw();
+ runtime.scheduleDraw();
+ runtime.schedulePixelRatioRefresh();
+ expect(frames.callbacks.size).toBe(2);
+
+ runtime.dispose();
+ expect(frames.callbacks.size).toBe(0);
+ expect(resize.disconnect).toHaveBeenCalledOnce();
+ expect(draw).not.toHaveBeenCalled();
+ });
+
+ it("keeps a large scroll burst within one scheduled draw frame", () => {
+ const frames = createFrameDriver();
+ const draw = vi.fn();
+ const runtime = useDataGridCanvasRuntime({
+ draw,
+ syncViewport: vi.fn(),
+ getViewport: () => ({ children: [] }) as unknown as Element,
+ frameDriver: frames.driver,
+ });
+
+ for (let index = 0; index < 10_000; index++) runtime.scheduleDraw();
+
+ expect(frames.callbacks.size).toBe(1);
+ const frameId = [...frames.callbacks.keys()][0];
+ frames.run(frameId);
+ expect(draw).toHaveBeenCalledOnce();
+ runtime.dispose();
+ });
+
+ it("keeps the latest drag coordinate and disconnects observed scroll content", () => {
+ const frames = createFrameDriver();
+ const resize = createObserver();
+ const horizontalDrag = vi.fn();
+ const child = { children: [] } as unknown as Element;
+ const scroller = { children: [child] } as unknown as Element;
+ const runtime = useDataGridScrollbars({
+ update: vi.fn(),
+ getScroller: () => scroller,
+ applyHorizontalDrag: horizontalDrag,
+ applyVerticalDrag: vi.fn(),
+ frameDriver: frames.driver,
+ createResizeObserver: () => resize.observer,
+ });
+
+ runtime.observeScroller();
+ runtime.scheduleHorizontalDrag(10);
+ runtime.scheduleHorizontalDrag(25);
+ runtime.flushHorizontalDrag();
+
+ expect(horizontalDrag).toHaveBeenCalledWith(25);
+ expect(resize.observe).toHaveBeenCalledTimes(2);
+ runtime.dispose();
+ expect(resize.disconnect).toHaveBeenCalledOnce();
+ expect(frames.callbacks.size).toBe(0);
+ });
+
+ it("tears down pending canvas work when its Vue scope stops", () => {
+ const frames = createFrameDriver();
+ const resize = createObserver();
+ const draw = vi.fn();
+ const syncViewport = vi.fn();
+ const scope = effectScope();
+ const runtime = scope.run(() =>
+ useDataGridCanvasRuntime({
+ draw,
+ syncViewport,
+ getViewport: () => ({ children: [] }) as unknown as Element,
+ frameDriver: frames.driver,
+ createResizeObserver: () => resize.observer,
+ }),
+ )!;
+
+ runtime.observeViewport();
+ runtime.scheduleDraw();
+ const lateDraw = [...frames.callbacks.values()][0];
+ scope.stop();
+
+ expect(runtime.disposed).toBe(true);
+ expect(runtime.active).toBe(false);
+ expect(frames.callbacks.size).toBe(0);
+ expect(resize.disconnect).toHaveBeenCalledOnce();
+ lateDraw(0);
+ expect(draw).not.toHaveBeenCalled();
+ expect(syncViewport).toHaveBeenCalledOnce();
+ });
+
+ it("does not revive scroll work after disposal", () => {
+ const frames = createFrameDriver();
+ const resize = createObserver();
+ const update = vi.fn();
+ const verticalDrag = vi.fn();
+ const runtime = useDataGridScrollbars({
+ update,
+ getScroller: () => ({ children: [] }) as unknown as Element,
+ applyHorizontalDrag: vi.fn(),
+ applyVerticalDrag: verticalDrag,
+ frameDriver: frames.driver,
+ createResizeObserver: () => resize.observer,
+ });
+
+ runtime.observeScroller();
+ runtime.scheduleVerticalDrag(42);
+ const lateCallbacks = [...frames.callbacks.values()];
+ runtime.dispose();
+ runtime.resume();
+ runtime.scheduleUpdate();
+ runtime.flushVerticalDrag();
+ lateCallbacks.forEach((callback) => callback(0));
+
+ expect(runtime.disposed).toBe(true);
+ expect(runtime.active).toBe(false);
+ expect(frames.callbacks.size).toBe(0);
+ expect(update).not.toHaveBeenCalled();
+ expect(verticalDrag).not.toHaveBeenCalled();
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts
new file mode 100644
index 0000000000..fca3e9a34b
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridColumnLayout.spec.ts
@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+
+import { effectScope, ref } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { dataGridColumnOffsets, dataGridHorizontalColumnWindow, useDataGridColumnLayout, useDataGridColumnLayoutState } from "@/composables/useDataGridColumnLayout";
+
+describe("useDataGridColumnLayout", () => {
+ beforeEach(() => localStorage.clear());
+ it("builds cumulative offsets", () => {
+ expect(dataGridColumnOffsets([80, 120, 60])).toEqual([0, 80, 200, 260]);
+ });
+
+ it("windows columns while preserving spacer widths", () => {
+ const widths = [100, 100, 100, 100, 100];
+ const offsets = dataGridColumnOffsets(widths);
+ expect(dataGridHorizontalColumnWindow({ widths, offsets, columnCount: 5, scrollLeft: 250, viewportWidth: 100, rowNumberWidth: 40, bufferPx: 0 })).toEqual({ start: 2, end: 4, beforeWidth: 200, afterWidth: 100 });
+ });
+
+ it("returns an empty window without columns", () => {
+ expect(dataGridHorizontalColumnWindow({ widths: [], offsets: [0], columnCount: 0, scrollLeft: 0, viewportWidth: 0, rowNumberWidth: 40, bufferPx: 900 })).toEqual({
+ start: 0,
+ end: 0,
+ beforeWidth: 0,
+ afterWidth: 0,
+ });
+ });
+
+ it("owns visibility, null-column toggles, and persisted ordering", () => {
+ const scope = effectScope();
+ const state = scope.run(() =>
+ useDataGridColumnLayoutState({
+ columns: ref(["id", "name", "empty"]),
+ sourceColumns: ref(undefined),
+ commentByColumn: ref(new Map()),
+ displayableColumnIndexes: ref([0, 1, 2]),
+ allNullColumnIndexes: ref([2]),
+ columnOrderKeys: ref(["id\0\0", "name\0\0", "empty\0\0"]),
+ layoutScopeKey: ref("test-layout"),
+ tableScopeKey: ref(""),
+ }),
+ )!;
+
+ state.toggleColumnVisibility(1);
+ expect(state.visibleColumnIndexes.value).toEqual([0, 2]);
+ state.toggleAllNullColumns();
+ expect(state.visibleColumnIndexes.value).toEqual([0]);
+ state.showAllColumns();
+ expect(state.visibleColumnIndexes.value).toEqual([0, 1, 2]);
+ state.persistColumnOrder([1, 0, 2]);
+ expect(state.orderedDisplayableColumnIndexes.value).toEqual([1, 0, 2]);
+ scope.stop();
+ });
+
+ it("keeps a new resize active when the previous resize completion frame is pending", () => {
+ const frames = new Map();
+ let nextFrame = 1;
+ vi.stubGlobal(
+ "requestAnimationFrame",
+ vi.fn((callback: FrameRequestCallback) => {
+ const frame = nextFrame++;
+ frames.set(frame, callback);
+ return frame;
+ }),
+ );
+ vi.stubGlobal(
+ "cancelAnimationFrame",
+ vi.fn((frame: number) => frames.delete(frame)),
+ );
+
+ const scope = effectScope();
+ const layout = scope.run(() =>
+ useDataGridColumnLayout({
+ columnNames: ref(["id"]),
+ visibleColumnIndexes: ref([0]),
+ renderedColumnWidths: ref([100]),
+ scrollLeft: ref(0),
+ viewportWidth: ref(400),
+ rowNumberWidth: 40,
+ }),
+ )!;
+
+ layout.startColumnHeaderResize(0, new MouseEvent("mousedown"));
+ window.dispatchEvent(new MouseEvent("mouseup"));
+ expect(frames.size).toBe(1);
+
+ layout.startColumnHeaderResize(0, new MouseEvent("mousedown"));
+ expect(frames.size).toBe(0);
+ expect(layout.columnHeaderResizeActive.value).toBe(true);
+
+ scope.stop();
+ });
+
+ it("commits column drag order and removes global interaction state on disposal", () => {
+ vi.stubGlobal(
+ "requestAnimationFrame",
+ vi.fn((callback: FrameRequestCallback) => {
+ callback(0);
+ return 1;
+ }),
+ );
+ vi.stubGlobal("cancelAnimationFrame", vi.fn());
+
+ const first = document.createElement("div");
+ first.dataset.visibleColIndex = "0";
+ first.getBoundingClientRect = () => ({ left: 0, width: 100, right: 100, top: 0, bottom: 20, height: 20, x: 0, y: 0, toJSON: () => ({}) });
+ const second = document.createElement("div");
+ second.dataset.visibleColIndex = "1";
+ second.getBoundingClientRect = () => ({ left: 100, width: 100, right: 200, top: 0, bottom: 20, height: 20, x: 100, y: 0, toJSON: () => ({}) });
+ const header = document.createElement("div");
+ header.append(first, second);
+ const persist = vi.fn();
+
+ const scope = effectScope();
+ const layout = scope.run(() =>
+ useDataGridColumnLayout({
+ columnNames: ref(["id", "name"]),
+ visibleColumnIndexes: ref([0, 1]),
+ renderedColumnWidths: ref([100, 100]),
+ scrollLeft: ref(0),
+ viewportWidth: ref(400),
+ rowNumberWidth: 40,
+ headerRef: ref(header),
+ onPersistColumnOrder: persist,
+ }),
+ )!;
+
+ layout.startColumnHeaderDrag(0, new PointerEvent("pointerdown", { button: 0, clientX: 20, clientY: 10 }));
+ window.dispatchEvent(new PointerEvent("pointermove", { clientX: 180, clientY: 10 }));
+ expect(document.body.style.userSelect).toBe("none");
+ window.dispatchEvent(new PointerEvent("pointerup", { clientX: 180, clientY: 10 }));
+ expect(persist).toHaveBeenCalledWith([1, 0]);
+ expect(document.body.style.userSelect).toBe("");
+
+ layout.startColumnHeaderDrag(0, new PointerEvent("pointerdown", { button: 0, clientX: 20, clientY: 10 }));
+ window.dispatchEvent(new PointerEvent("pointermove", { clientX: 180, clientY: 10 }));
+ scope.stop();
+ expect(document.body.style.userSelect).toBe("");
+ window.dispatchEvent(new PointerEvent("pointerup", { clientX: 180, clientY: 10 }));
+ expect(persist).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
index a87f11a4e1..8e274b46ee 100644
--- a/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
+++ b/apps/desktop/src/composables/__tests__/useDataGridColumnResize.spec.ts
@@ -1,6 +1,6 @@
import { computed, nextTick, ref } from "vue";
-import { describe, expect, it, vi } from "vitest";
-import { DATA_GRID_COL_AUTO_FIT_MAX_WIDTH, DATA_GRID_COL_MAX_WIDTH, DATA_GRID_COL_MIN_WIDTH } from "@/lib/dataGrid/dataGridColumnWidth";
+import { describe, expect, it } from "vitest";
+import { DATA_GRID_COL_AUTO_FIT_MAX_WIDTH, DATA_GRID_COL_MIN_WIDTH } from "@/lib/dataGrid/dataGridColumnWidth";
import { DATA_GRID_ROW_NUM_WIDTH, resizeDataGridColumnWidth, useDataGridColumnResize } from "@/composables/useDataGridColumnResize";
function createResizeState(options: { columns: string[]; rows: Array>; columnIndexes?: number[]; density?: "compact" | "standard" | "comfortable"; compactColumnHeaderActions?: boolean }) {
diff --git a/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts
new file mode 100644
index 0000000000..699f8f91fc
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridConditionEditor.spec.ts
@@ -0,0 +1,137 @@
+import { effectScope, nextTick, ref } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useDataGridConditionEditor } from "@/composables/useDataGridConditionEditor";
+import { rememberDataGridConditionHistory } from "@/lib/dataGrid/dataGridConditionHistory";
+
+const storage = new Map();
+vi.stubGlobal("localStorage", {
+ getItem: (key: string) => storage.get(key) ?? null,
+ setItem: (key: string, value: string) => storage.set(key, value),
+ removeItem: (key: string) => storage.delete(key),
+ clear: () => storage.clear(),
+});
+
+function keyboardEvent(key: string) {
+ return { key, shiftKey: false, preventDefault: vi.fn() } as unknown as KeyboardEvent;
+}
+
+describe("useDataGridConditionEditor", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ vi.useRealTimers();
+ });
+
+ it("replaces the active token and supports clamped keyboard navigation", async () => {
+ const value = ref("status = cus");
+ const editor = useDataGridConditionEditor({
+ kind: "where",
+ value,
+ columns: ["customer_id", "customer_name"],
+ historyScope: {},
+ });
+
+ value.value = "status = cust";
+ await nextTick();
+ await vi.waitFor(() => expect(editor.suggestions.value.map((item) => item.value)).toEqual(["customer_id", "customer_name"]));
+ expect(editor.navigate(1)).toBe(true);
+ expect(editor.highlightedIndex.value).toBe(1);
+ expect(editor.navigate(1)).toBe(true);
+ expect(editor.highlightedIndex.value).toBe(1);
+ expect(editor.accept()).toBe(true);
+ expect(value.value).toBe("status = customer_name");
+ });
+
+ it("ignores stale asynchronous suggestion responses", async () => {
+ vi.useFakeTimers();
+ const value = ref("");
+ const resolvers = new Map void>();
+ const editor = useDataGridConditionEditor({
+ kind: "where",
+ value,
+ historyScope: {},
+ suggestionProvider: ({ token }) => new Promise((resolve) => resolvers.set(token, resolve)),
+ suggestionDebounceMs: 10,
+ });
+
+ value.value = "cus";
+ await nextTick();
+ vi.advanceTimersByTime(10);
+ await nextTick();
+ value.value = "ord";
+ await nextTick();
+ vi.advanceTimersByTime(10);
+ await nextTick();
+
+ resolvers.get("ord")?.(["order_id"]);
+ await Promise.resolve();
+ expect(editor.suggestions.value.map((item) => item.value)).toEqual(["order_id"]);
+ resolvers.get("cus")?.(["customer_id"]);
+ await Promise.resolve();
+ expect(editor.suggestions.value.map((item) => item.value)).toEqual(["order_id"]);
+ });
+
+ it("loads, filters, accepts, and deletes scoped history", () => {
+ const scope = { connectionId: "connection", database: "db", tableName: "users" };
+ rememberDataGridConditionHistory("where", scope, "status = 'active'");
+ rememberDataGridConditionHistory("where", scope, "customer_id > 10");
+ const value = ref("status");
+ const editor = useDataGridConditionEditor({ kind: "where", value, historyScope: scope });
+
+ editor.openHistory();
+ expect(editor.suggestions.value.map((item) => item.value)).toEqual(["status = 'active'"]);
+ expect(editor.accept(0)).toBe(true);
+ expect(value.value).toBe("status = 'active'");
+
+ editor.openHistory();
+ editor.deleteHistory("status = 'active'");
+ expect(editor.suggestions.value).toEqual([]);
+ expect(editor.historyOpen.value).toBe(true);
+ });
+
+ it("aborts pending suggestion work when its scope is disposed", async () => {
+ vi.useFakeTimers();
+ const value = ref("");
+ const aborted = vi.fn();
+ const scope = effectScope();
+ scope.run(() => {
+ useDataGridConditionEditor({
+ kind: "orderBy",
+ value,
+ historyScope: {},
+ suggestionDebounceMs: 10,
+ suggestionProvider: ({ signal }) => {
+ signal.addEventListener("abort", aborted);
+ return new Promise(() => {});
+ },
+ });
+ });
+
+ value.value = "created";
+ await nextTick();
+ vi.advanceTimersByTime(10);
+ scope.stop();
+ expect(aborted).toHaveBeenCalledOnce();
+ });
+
+ it("maps Enter, Tab, arrows, and Escape without applying stale selections", async () => {
+ const value = ref("");
+ const editor = useDataGridConditionEditor({ kind: "orderBy", value, columns: ["name"], historyScope: {} });
+ value.value = "na";
+ await nextTick();
+ await vi.waitFor(() => expect(editor.suggestions.value).toHaveLength(1));
+
+ const down = keyboardEvent("ArrowDown");
+ expect(editor.handleKeydown(down)).toBe("navigate");
+ expect(down.preventDefault).toHaveBeenCalledOnce();
+ const tab = keyboardEvent("Tab");
+ expect(editor.handleKeydown(tab)).toBe("accept");
+ expect(value.value).toBe("name");
+
+ const enter = keyboardEvent("Enter");
+ expect(editor.handleKeydown(enter)).toBe("apply");
+ editor.openHistory();
+ const escape = keyboardEvent("Escape");
+ expect(editor.handleKeydown(escape)).toBe("dismiss");
+ expect(editor.dropdownOpen.value).toBe(false);
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts
new file mode 100644
index 0000000000..730e3bc019
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridFilterBuilder.spec.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { buildDataGridStructuredWhere, useDataGridFilterBuilder, type DataGridStructuredFilterRule } from "@/composables/useDataGridFilterBuilder";
+
+describe("useDataGridFilterBuilder", () => {
+ it("normalizes values when modes change", () => {
+ const builder = useDataGridFilterBuilder({ columns: ["id"], createId: () => "rule-1", isComplete: () => true, buildCondition: async () => "id = 1" });
+ builder.ensureRule();
+ builder.updateRule("rule-1", { rawValue: "1", rawEndValue: "2", mode: "is-null" });
+ expect(builder.rules.value[0]).toMatchObject({ rawValue: "", rawEndValue: "" });
+ });
+
+ it("skips disabled rules and applies conjunctions", async () => {
+ let nextId = 0;
+ const builder = useDataGridFilterBuilder({
+ columns: ["id", "name"],
+ createId: () => `rule-${++nextId}`,
+ isComplete: (rule) => !!rule.rawValue,
+ buildCondition: async (rule) => `${rule.columnName} = '${rule.rawValue}'`,
+ });
+ builder.ensureRule();
+ builder.updateRule("rule-1", { rawValue: "1" });
+ builder.addRule();
+ builder.updateRule("rule-2", { columnName: "name", rawValue: "Alice", conjunction: "OR" });
+ expect(await builder.apply()).toBe("(id = '1') OR (name = 'Alice')");
+ });
+
+ it("groups conditions in rule order", () => {
+ const rule = (id: string, conjunction: "AND" | "OR"): DataGridStructuredFilterRule => ({ id, columnName: id, mode: "equals", rawValue: id, rawEndValue: "", conjunction });
+ expect(
+ buildDataGridStructuredWhere([
+ { rule: rule("a", "AND"), condition: "a" },
+ { rule: rule("b", "AND"), condition: "b" },
+ { rule: rule("c", "OR"), condition: "c" },
+ ]),
+ ).toBe("((a) AND (b)) OR (c)");
+ });
+});
diff --git a/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts
new file mode 100644
index 0000000000..896f8cfe51
--- /dev/null
+++ b/apps/desktop/src/composables/__tests__/useDataGridResultLifecycle.spec.ts
@@ -0,0 +1,28 @@
+import { nextTick, ref } from "vue";
+import { describe, expect, it } from "vitest";
+import { useDataGridResultLifecycle } from "@/composables/useDataGridResultLifecycle";
+
+describe("useDataGridResultLifecycle", () => {
+ it("invalidates operations when the result identity changes", async () => {
+ const result = ref
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (() => {
-
-
-
-
-
-
-
-
+
- {{ t("grid.columnFormatterFor", { column: col.name }) }}
-
-
- {{ t("grid.columnFormatterHint") }}
-
+
+
@@ -11177,379 +8646,59 @@ const gridContextMenuItems = computed
+ {{ t("grid.columnFormatterFor", { column: col.name }) }}
-
+
+
+ {{ t("grid.columnFormatterHint") }}
+
+
+
-
-
+
+
+
+
+
+
+
+
-
-
-
+
(() => {
-
-
+
+
+
+ {{ t("grid.formatterType") }}
+
+
+
- {{ t("grid.formatterType") }}
+ {{ t("grid.formatterTimestampUnit") }}
-
-
-
-
-
-
- {{ t("grid.formatterTimestampUnit") }}
-
-
-
-
-
- {{ t("grid.formatterDatetimePattern") }}
-
-
+
-
-
-
- {{ t("grid.formatterJsonPathInput") }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ t("grid.formatterSavedCustom") }}
-
-
-
- {{ t("grid.formatterCustomTemplateHint") }}
-
-
-
- {{ t("grid.formatterPreview") }}
-
-
-
+
- {{ row.index }}
- {{ row.raw }}
- {{ row.formatted }}
-
+ {{ t("grid.formatterDatetimePattern") }}
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
+ {{ columnFilterPanelTitle(col.name) }}
+
+
+
+
+
-
-
- (() => {
- {{ columnFilterPanelTitle(col.name) }}
-
-
-
-
-
- {{ t("grid.value") }}
- {{ t("grid.count") }}
-
-
-
+
+
+
+
+
@@ -10876,186 +8508,35 @@ const gridContextMenuItems = computed
+ {{
+ t("grid.moreValues", {
+ count: localFilterAllOptions.length - localFilterOptions.length,
+ })
+ }}
-
-
-
-
-
- {{
- t("grid.moreValues", {
- count: localFilterAllOptions.length - localFilterOptions.length,
- })
- }}
-
-
-
- {{ t("grid.noSearchResults") }}
-
+
+
+ {{ t("grid.noSearchResults") }}
-
-
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
+
-
-
-
- {{ t("grid.columnName") }}
-
- {{ col.name }}
-
-
-
- {{ t("grid.columnType") }}
- {{ columnTypeMap.get(col.name) }}
-
-
- {{ t("grid.columnComment") }}
- {{ columnCommentMap.get(col.name) }}
-
-
-
+
-
-
-
-
-
-
-
- {{ t("grid.columnName") }}
-
- {{ activeCellDetail.column }}
-
-
-
- {{ t("grid.rowNumber") }}
- {{ activeCellDetail.rowNumber }}
-
-
- {{ t("grid.columnType") }}
-
- {{ activeCellDetail.type || "-" }}
-
-
-
- {{ t("grid.nullValue") }}
- {{ activeCellDetail.value === null ? "true" : "false" }}
-
-
- {{ t("grid.valueLength") }}
- {{ activeCellDetail.length }}
-
-
- {{ t("grid.columnComment") }}
-
- {{ activeCellDetail.comment || t("grid.noComment") }}
-
-
-
- {{ t("grid.columnName") }}
- {{ activeCellDetail.column }}
-
-
-
-
- {{ t("grid.rowNumber") }}
- {{ activeCellDetail.rowNumber }}
-
-
- {{ t("grid.columnType") }}
-
- {{ activeCellDetail.type || "-" }}
-
-
-
- {{ t("grid.nullValue") }}
- {{ activeCellDetail.value === null ? "true" : "false" }}
-
-
- {{ t("grid.valueLength") }}
- {{ activeCellDetail.length }}
-
-
-
- {{ t("grid.columnComment") }}
-
- {{ activeCellDetail.comment || t("grid.noComment") }}
-
-
-
-
-
- {{ t("grid.cellValue") }}
-
-
-
-
-
-
-
-
-
-
-
- {{ t(`grid.binaryDownload.${mode}`) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
- {{ t("grid.imagePreview") }}
-
-
-
-
-
-
-
-
-
- {{ activeCellDetail.rawValuePreview }}
-
- {{
- t("grid.largeValuePreviewHint", {
- count: activeCellDetail.rawValuePreview.length,
- })
- }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ t("grid.hexViewer") }}
@@ -11106,30 +8587,18 @@ const gridContextMenuItems = computed
-
-
+
-
-
-
-
-
- {{ mongoJsonPreviewText }}
- {{ t("grid.largeValuePreviewHint", { count: mongoJsonPreviewText.length }) }}
-
-
- {{ t("grid.mongoJsonPreviewEmpty") }}
-
-
-
-
-
-
-
- {{ currentPage }}
-
-
-
-
+
- {{ t("grid.selectionSum", { value: selectionSummarySumText }) }}
-
-
- {{ t("grid.selectionCells", { count: selectionSummary.cellCount }) }}
- {{ t("grid.rows", { count: selectionSummary.rowCount }) }}
-
- {{ t("grid.customRowsPerPage") }}
-
-
-
-
-
-
- {{ t("grid.applyPageSize") }}
-
-
-
@@ -11584,9 +8733,9 @@ const gridContextMenuItems = computed(() => {
:close-on-confirm="false"
@confirm="confirmDropAllMongoIndexes"
/>
-
@@ -11786,212 +8935,6 @@ const gridContextMenuItems = computed
+
+
+
+
+
+
+ {{ t("grid.columnName") }}
+ {{ detail.column }}
+
+
+ {{ t("grid.rowNumber") }}
+ {{ detail.rowNumber }}
+
+
+ {{ t("grid.columnType") }}
+ {{ detail.type || "-" }}
+
+
+ {{ t("grid.nullValue") }}
+ {{ detail.value === null ? "true" : "false" }}
+
+
+ {{ t("grid.valueLength") }}
+ {{ detail.length }}
+
+
+ {{ t("grid.columnComment") }}
+ {{ detail.comment || t("grid.noComment") }}
+
+
+ {{ t("grid.columnName") }}
+ {{ detail.column }}
+
+
+
+
+ {{ t("grid.rowNumber") }}
+ {{ detail.rowNumber }}
+
+
+ {{ t("grid.columnType") }}
+ {{ detail.type || "-" }}
+
+
+ {{ t("grid.nullValue") }}
+ {{ detail.value === null ? "true" : "false" }}
+
+
+ {{ t("grid.valueLength") }}
+ {{ detail.length }}
+
+
+
+
+ {{ t("grid.columnComment") }}
+ {{ detail.comment || t("grid.noComment") }}
+
+
+
+
+ {{ t("grid.cellValue") }}
+
+
+
+
+
+ {{ t(`grid.binaryDownload.${mode}`) }}
+
+ ![]()
+
+ {{ t("grid.imagePreview") }}
+
+
+
+
+
+
+ {{ detail.rawValuePreview }}
+ {{ t("grid.largeValuePreviewHint", { count: detail.rawValuePreview.length }) }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ name }}
+ {{ columnType }}
+ {{ columnComment }}
+
+
+
+
+ {{ columnNameLabel }}
+
+ {{ name }}
+
+
+
+ {{ columnTypeLabel }}
+ {{ tooltipColumnType ?? columnType }}
+
+
+ {{ columnCommentLabel }}
+ {{ tooltipColumnComment ?? columnComment }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridDetailDialogs.vue b/apps/desktop/src/components/grid/DataGridDetailDialogs.vue
new file mode 100644
index 0000000000..946fceccb8
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridDetailDialogs.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridExportMenu.vue b/apps/desktop/src/components/grid/DataGridExportMenu.vue
new file mode 100644
index 0000000000..61b7f14d41
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridExportMenu.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ suggestion.value }}
+
+
+ {{ emptyHistoryText }}
+
+
+
+ {{ historyPreview.value }}
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue b/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue
new file mode 100644
index 0000000000..94a9afbbd8
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridMongoJsonPreview.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ {{ t("grid.filter") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("grid.filterBuilderNoValue") }}
+
+
+
+
+ {{ t("grid.filterBuilderEmpty") }}
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridPagination.vue b/apps/desktop/src/components/grid/DataGridPagination.vue
new file mode 100644
index 0000000000..d480b4f861
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridPagination.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+ {{ text }}
+ {{ t("grid.largeValuePreviewHint", { count: text.length }) }}
+
+ {{ t("grid.mongoJsonPreviewEmpty") }}
+
+
+
+
+
+
+ {{ currentPage }}
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridQueryControls.vue b/apps/desktop/src/components/grid/DataGridQueryControls.vue
new file mode 100644
index 0000000000..df85213893
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridQueryControls.vue
@@ -0,0 +1,214 @@
+
+
+
+
+ {{ t("grid.selectionSum", { value: selectionSummarySumText }) }}
+
+
+ {{ t("grid.selectionCells", { count: selectionSummary.cellCount }) }}
+ {{ t("grid.rows", { count: selectionSummary.rowCount }) }}
+
+ {{ t("grid.customRowsPerPage") }}
+
+
+
+ {{ t("grid.applyPageSize") }}
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/DataGridSearchBar.vue b/apps/desktop/src/components/grid/DataGridSearchBar.vue
new file mode 100644
index 0000000000..9e430a1005
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridSearchBar.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t("grid.filter") }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ summary.columnName }}
+
+ , {{ value }}
+ {{ t("grid.localFilterMoreValues", { count: summary.hiddenValueCount }) }}
+
+
+
+
+
+
+
+
+
+ {{ props.currentMatchIndex + 1 }}/{{ props.matchCount }}
+ 0
+
+
+
+
+
+
+
+
+ {{ refresh.tooltip ?? refresh.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ addRow?.tooltip ?? addRow?.label }}
+
+
+
+
+
+
+
+
+
+ {{ exportData?.label }}
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+ {{ transpose?.tooltip ?? transpose?.label }}
+
+
+
+
+
+
+ {{ tableInfo?.tooltip ?? tableInfo?.label }}
+
+
+
+
+
+
+ {{ preview?.tooltip ?? preview?.label }}
+
+
+
+
+
+
+ {{ save?.tooltip ?? save?.label }} ({{ save.shortcutLabel }})
+
+
+
+
+
+
+ {{ rollback?.tooltip ?? rollback?.label }}
+
+
+
+
+
+
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
new file mode 100644
index 0000000000..b8f83fe147
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
@@ -0,0 +1,299 @@
+// @vitest-environment happy-dom
+
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { dispatch, findAll, findOne, hostText, mountComponent } from "./vueHostHarness";
+import type { DataGridCellDetail } from "@/lib/dataGrid/dataGridDetail";
+
+const mocks = vi.hoisted(() => ({
+ editor: { create: vi.fn(), destroy: vi.fn(), setValue: vi.fn(), openSearch: vi.fn() },
+ updateSettings: vi.fn(),
+ renderWkt: vi.fn(),
+ panelCancel: vi.fn(),
+ panelOpenSearch: vi.fn(),
+}));
+
+vi.mock("vue-i18n", () => ({ useI18n: () => ({ t: (key: string) => key }) }));
+vi.mock("@lucide/vue", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ const icon = createPassthroughStub("Icon", "i");
+ return { Check: icon, ChevronLeft: icon, ChevronRight: icon, ChevronsLeft: icon, ChevronsRight: icon, Loader2: icon, Upload: icon, Search: icon, X: icon, Code2: icon, Copy: icon, Eye: icon, EyeOff: icon, Info: icon, Pencil: icon, Plus: icon, Trash2: icon };
+});
+
+vi.mock("@/components/ui/button", async () => ({ Button: (await import("./vueHostHarness")).createPassthroughStub("Button", "button") }));
+vi.mock("@/components/ui/input", async () => ({ Input: (await import("./vueHostHarness")).createPassthroughStub("Input", "input") }));
+vi.mock("@/components/ui/dialog", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ return { Dialog: createPassthroughStub("Dialog"), DialogContent: createPassthroughStub("DialogContent"), DialogFooter: createPassthroughStub("DialogFooter"), DialogHeader: createPassthroughStub("DialogHeader"), DialogTitle: createPassthroughStub("DialogTitle") };
+});
+vi.mock("@/components/ui/dropdown-menu", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ return { DropdownMenu: createPassthroughStub("DropdownMenu"), DropdownMenuContent: createPassthroughStub("DropdownMenuContent"), DropdownMenuItem: createPassthroughStub("DropdownMenuItem", "button"), DropdownMenuTrigger: createPassthroughStub("DropdownMenuTrigger") };
+});
+vi.mock("@/components/ui/popover", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ return { Popover: createPassthroughStub("Popover"), PopoverContent: createPassthroughStub("PopoverContent"), PopoverTrigger: createPassthroughStub("PopoverTrigger") };
+});
+vi.mock("@/components/ui/tooltip", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ return { Tooltip: createPassthroughStub("Tooltip"), TooltipContent: createPassthroughStub("TooltipContent"), TooltipTrigger: createPassthroughStub("TooltipTrigger") };
+});
+vi.mock("@/components/ui/select", async () => {
+ const { createPassthroughStub } = await import("./vueHostHarness");
+ return { Select: createPassthroughStub("Select"), SelectContent: createPassthroughStub("SelectContent"), SelectItem: createPassthroughStub("SelectItem"), SelectTrigger: createPassthroughStub("SelectTrigger"), SelectValue: createPassthroughStub("SelectValue") };
+});
+vi.mock("@/components/ui/tabs", async () => ({ TabsContent: (await import("./vueHostHarness")).createPassthroughStub("TabsContent") }));
+vi.mock("@/components/ui/LightDropdown.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("LightDropdown") }));
+vi.mock("@/components/ui/LightTooltip.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("LightTooltip") }));
+vi.mock("@/components/grid/TemporalCellEditor.vue", async () => ({ default: (await import("./vueHostHarness")).createPassthroughStub("TemporalCellEditor") }));
+vi.mock("@/composables/useCellDetailEditor", () => ({ useCellDetailEditor: () => mocks.editor }));
+vi.mock("@/composables/useTheme", () => ({ useTheme: () => ({ isDark: { value: false }, themePalette: { value: {} } }) }));
+vi.mock("@/stores/settingsStore", () => ({ useSettingsStore: () => ({ editorSettings: { cellDetailJsonFormatted: true, theme: "default", fontSize: 13, fontFamily: "monospace" }, updateEditorSettings: mocks.updateSettings }) }));
+vi.mock("@/lib/dataGrid/geometryPreview", () => ({ isHexGeometry: () => false, renderWktOnCanvas: mocks.renderWkt }));
+vi.mock("@/composables/useDataGridCellDetail", async () => {
+ const { ref } = await import("vue");
+ return {
+ useDataGridCellDetail: ({ onCancel }: { onCancel: () => void }) => {
+ mocks.panelCancel.mockImplementation(onCancel);
+ return { geometryPreviewOpen: ref(false), geometryCanvas: ref(), detailsEditorContainer: ref(), sideJsonPreviewContainer: ref(), openSearch: mocks.panelOpenSearch };
+ },
+ };
+});
+
+import DataGridCellDetailDialog from "@/components/grid/DataGridCellDetailDialog.vue";
+import DataGridCellDetailPanel from "@/components/grid/DataGridCellDetailPanel.vue";
+import DataGridColumnHeader from "@/components/grid/DataGridColumnHeader.vue";
+import DataGridFilterBuilder from "@/components/grid/DataGridFilterBuilder.vue";
+import DataGridPagination from "@/components/grid/DataGridPagination.vue";
+import DataGridSearchBar from "@/components/grid/DataGridSearchBar.vue";
+
+function detail(patch: Partial