@affino/datagrid-vue 0.3.2 → 0.3.4

package/dist/app/useDataGridAppModeMeta.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from "vue";
+import type { DataGridAppMode } from "./index";
+export interface UseDataGridAppModeMetaOptions {
+    mode: Ref<DataGridAppMode>;
+}
+export interface UseDataGridAppModeMetaResult {
+    modeBadge: Ref<string>;
+    modeHint: Ref<string>;
+}
+export declare function useDataGridAppModeMeta(options: UseDataGridAppModeMetaOptions): UseDataGridAppModeMetaResult;
+//# sourceMappingURL=useDataGridAppModeMeta.d.ts.map

package/dist/app/useDataGridAppModeMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppModeMeta.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppModeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACtB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CA+B9B"}

package/dist/app/useDataGridAppModeMeta.js

@@ -0,0 +1,31 @@
+import { computed } from "vue";
+export function useDataGridAppModeMeta(options) {
+    const modeBadge = computed(() => {
+        if (options.mode.value === "tree") {
+            return "Tree";
+        }
+        if (options.mode.value === "pivot") {
+            return "Pivot";
+        }
+        if (options.mode.value === "worker") {
+            return "Worker";
+        }
+        return "Base";
+    });
+    const modeHint = computed(() => {
+        if (options.mode.value === "tree") {
+            return "Tree mode: grouped path rows are highlighted.";
+        }
+        if (options.mode.value === "pivot") {
+            return "Pivot mode: aggregate/group rows are highlighted.";
+        }
+        if (options.mode.value === "worker") {
+            return "Worker mode: row-model updates are served through worker host.";
+        }
+        return "Base mode: flat client row model.";
+    });
+    return {
+        modeBadge,
+        modeHint,
+    };
+}

package/dist/app/useDataGridAppRowPresentation.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from "vue";
+import { type DataGridRowNode } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+import type { DataGridAppMode } from "./index";
+export interface UseDataGridAppRowPresentationOptions<TRow extends Record<string, unknown>> {
+    mode: Ref<DataGridAppMode>;
+    runtime: Pick<UseDataGridRuntimeResult<TRow>, "api" | "columnSnapshot">;
+    viewportRowStart: Ref<number>;
+    firstColumnKey: Ref<string>;
+}
+export interface UseDataGridAppRowPresentationResult<TRow extends Record<string, unknown>> {
+    rowIndexLabel: (row: DataGridRowNode<TRow>, rowOffset: number) => string;
+    readCell: (row: DataGridRowNode<TRow>, key: string) => string;
+    readDisplayCell: (row: DataGridRowNode<TRow>, key: string) => string;
+    rowClass: (row: DataGridRowNode<TRow>) => string;
+    toggleGroupRow: (row: DataGridRowNode<TRow>) => void;
+}
+export declare function useDataGridAppRowPresentation<TRow extends Record<string, unknown>>(options: UseDataGridAppRowPresentationOptions<TRow>): UseDataGridAppRowPresentationResult<TRow>;
+//# sourceMappingURL=useDataGridAppRowPresentation.d.ts.map

package/dist/app/useDataGridAppRowPresentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppRowPresentation.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppRowPresentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,WAAW,oCAAoC,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;IAC1B,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,gBAAgB,CAAC,CAAA;IACvE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC5B;AAED,MAAM,WAAW,mCAAmC,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvF,aAAa,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IACxE,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC7D,eAAe,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACpE,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,MAAM,CAAA;IAChD,cAAc,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;CACrD;AAED,wBAAgB,6BAA6B,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChF,OAAO,EAAE,oCAAoC,CAAC,IAAI,CAAC,GAClD,mCAAmC,CAAC,IAAI,CAAC,CA8G3C"}

package/dist/app/useDataGridAppRowPresentation.js

@@ -0,0 +1,106 @@
+import { buildDataGridCellRenderModel, } from "@affino/datagrid-core";
+export function useDataGridAppRowPresentation(options) {
+    const rowIndexLabel = (row, rowOffset) => {
+        if (row.kind === "group") {
+            return "";
+        }
+        const sourceId = row.data.id;
+        if (typeof sourceId === "number" && Number.isFinite(sourceId)) {
+            return String(sourceId);
+        }
+        return String(options.viewportRowStart.value + rowOffset + 1);
+    };
+    const resolveColumnDef = (key) => {
+        return options.runtime.columnSnapshot.value.byKey[key]?.column;
+    };
+    const readCell = (row, key) => {
+        if (row.kind === "group") {
+            const level = Math.max(0, row.groupMeta?.level ?? 0);
+            const indent = "· ".repeat(level);
+            const caret = row.state.expanded ? "▾" : "▸";
+            const isGroupLabelColumn = options.mode.value === "tree"
+                ? key === "name"
+                : key === options.firstColumnKey.value;
+            if (isGroupLabelColumn) {
+                return `${indent}${caret} ${String(row.groupMeta?.groupField ?? "group")}: ${String(row.groupMeta?.groupValue ?? row.rowId)} (${row.groupMeta?.childrenCount ?? 0})`;
+            }
+            if (options.mode.value === "tree") {
+                return "";
+            }
+            const groupValue = row.data[key]
+                ?? row.groupMeta?.aggregates?.[key];
+            return groupValue == null ? "" : String(groupValue);
+        }
+        const value = row.data[key];
+        return value == null ? "" : String(value);
+    };
+    const readDisplayCell = (row, key) => {
+        if (row.kind === "group") {
+            const level = Math.max(0, row.groupMeta?.level ?? 0);
+            const indent = "· ".repeat(level);
+            const caret = row.state.expanded ? "▾" : "▸";
+            const isGroupLabelColumn = options.mode.value === "tree"
+                ? key === "name"
+                : key === options.firstColumnKey.value;
+            if (isGroupLabelColumn) {
+                return `${indent}${caret} ${String(row.groupMeta?.groupField ?? "group")}: ${String(row.groupMeta?.groupValue ?? row.rowId)} (${row.groupMeta?.childrenCount ?? 0})`;
+            }
+            if (options.mode.value === "tree") {
+                return "";
+            }
+            const groupValue = row.data[key]
+                ?? row.groupMeta?.aggregates?.[key];
+            const column = resolveColumnDef(key);
+            if (!column) {
+                return groupValue == null ? "" : String(groupValue);
+            }
+            return buildDataGridCellRenderModel({
+                column,
+                value: groupValue,
+            }).displayValue;
+        }
+        const value = row.data[key];
+        const column = resolveColumnDef(key);
+        if (!column) {
+            return value == null ? "" : String(value);
+        }
+        return buildDataGridCellRenderModel({
+            column,
+            row: row.data,
+            value,
+        }).displayValue;
+    };
+    const rowClass = (row) => {
+        if (options.mode.value === "pivot") {
+            return row.kind === "group" ? "row--group row--pivot" : "row--pivot";
+        }
+        if (row.kind !== "group") {
+            return "";
+        }
+        if (options.mode.value === "tree") {
+            return "row--group row--tree";
+        }
+        return "row--group";
+    };
+    const toggleGroupRow = (row) => {
+        if (row.kind !== "group") {
+            return;
+        }
+        const groupKey = row.groupMeta?.groupKey;
+        if (!groupKey) {
+            return;
+        }
+        if (row.state.expanded) {
+            options.runtime.api.rows.collapseGroup(groupKey);
+            return;
+        }
+        options.runtime.api.rows.expandGroup(groupKey);
+    };
+    return {
+        rowIndexLabel,
+        readCell,
+        readDisplayCell,
+        rowClass,
+        toggleGroupRow,
+    };
+}

package/dist/app/useDataGridAppRowSelection.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from "vue";
+import type { DataGridRowId, DataGridRowSelectionSnapshot } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeOptions, UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+export interface UseDataGridAppRowSelectionOptions<TRow> {
+    resolveRuntime?: () => Pick<UseDataGridRuntimeResult<TRow>, "api"> | null;
+}
+export interface UseDataGridAppRowSelectionResult<TRow> {
+    rowSelectionSnapshot: Ref<DataGridRowSelectionSnapshot | null>;
+    focusedRow: Ref<DataGridRowId | null>;
+    selectedRows: Ref<Set<DataGridRowId>>;
+    selectionService: NonNullable<NonNullable<UseDataGridRuntimeOptions<TRow>["services"]>["selection"]>;
+    runtimeServices: Pick<NonNullable<UseDataGridRuntimeOptions<TRow>["services"]>, "selection">;
+    syncRowSelectionSnapshotFromRuntime: () => void;
+    reconcileRowSelectionFromRuntime: () => void;
+}
+export declare function useDataGridAppRowSelection<TRow>(options: UseDataGridAppRowSelectionOptions<TRow>): UseDataGridAppRowSelectionResult<TRow>;
+//# sourceMappingURL=useDataGridAppRowSelection.d.ts.map

package/dist/app/useDataGridAppRowSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppRowSelection.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppRowSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAA;AAWxF,OAAO,KAAK,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAE5G,MAAM,WAAW,iCAAiC,CAAC,IAAI;IACrD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAA;CAC1E;AAED,MAAM,WAAW,gCAAgC,CAAC,IAAI;IACpD,oBAAoB,EAAE,GAAG,CAAC,4BAA4B,GAAG,IAAI,CAAC,CAAA;IAC9D,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACrC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAA;IACrC,gBAAgB,EAAE,WAAW,CAAC,WAAW,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;IACpG,eAAe,EAAE,IAAI,CAAC,WAAW,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,WAAW,CAAC,CAAA;IAC5F,mCAAmC,EAAE,MAAM,IAAI,CAAA;IAC/C,gCAAgC,EAAE,MAAM,IAAI,CAAA;CAC7C;AAQD,wBAAgB,0BAA0B,CAAC,IAAI,EAC7C,OAAO,EAAE,iCAAiC,CAAC,IAAI,CAAC,GAC/C,gCAAgC,CAAC,IAAI,CAAC,CAqFxC"}

package/dist/app/useDataGridAppRowSelection.js

@@ -0,0 +1,85 @@
+import { ref } from "vue";
+import { clearDataGridSelectedRows, dataGridRowSelectionSnapshotsEqual, deselectDataGridRows, normalizeDataGridRowSelectionSnapshot, reconcileDataGridRowSelectionSnapshot, selectDataGridRows, setDataGridRowFocused, setDataGridRowSelected, } from "@affino/datagrid-core";
+function toNullableSnapshot(snapshot) {
+    return snapshot.focusedRow == null && snapshot.selectedRows.length === 0
+        ? null
+        : snapshot;
+}
+export function useDataGridAppRowSelection(options) {
+    const rowSelectionSnapshot = ref(null);
+    const focusedRow = ref(null);
+    const selectedRows = ref(new Set());
+    const syncSnapshot = (snapshot) => {
+        const normalized = normalizeDataGridRowSelectionSnapshot(snapshot);
+        const nextSnapshot = toNullableSnapshot(normalized);
+        if (dataGridRowSelectionSnapshotsEqual(rowSelectionSnapshot.value, nextSnapshot)) {
+            return;
+        }
+        rowSelectionSnapshot.value = nextSnapshot;
+        focusedRow.value = normalized.focusedRow;
+        selectedRows.value = new Set(normalized.selectedRows);
+    };
+    const selectionService = {
+        name: "selection",
+        getRowSelectionSnapshot: () => rowSelectionSnapshot.value,
+        setRowSelectionSnapshot: snapshot => {
+            syncSnapshot(snapshot);
+        },
+        clearRowSelection: () => {
+            syncSnapshot(null);
+        },
+        getFocusedRow: () => focusedRow.value,
+        setFocusedRow: rowId => {
+            syncSnapshot(toNullableSnapshot(setDataGridRowFocused(rowSelectionSnapshot.value, rowId)));
+        },
+        getSelectedRows: () => [...selectedRows.value],
+        isRowSelected: rowId => selectedRows.value.has(rowId),
+        setRowSelected: (rowId, selected) => {
+            syncSnapshot(toNullableSnapshot(setDataGridRowSelected(rowSelectionSnapshot.value, rowId, selected)));
+        },
+        selectRows: rowIds => {
+            syncSnapshot(toNullableSnapshot(selectDataGridRows(rowSelectionSnapshot.value, rowIds)));
+        },
+        deselectRows: rowIds => {
+            syncSnapshot(toNullableSnapshot(deselectDataGridRows(rowSelectionSnapshot.value, rowIds)));
+        },
+        clearSelectedRows: () => {
+            syncSnapshot(toNullableSnapshot(clearDataGridSelectedRows(rowSelectionSnapshot.value)));
+        },
+    };
+    const runtimeServices = {
+        selection: selectionService,
+    };
+    const syncRowSelectionSnapshotFromRuntime = () => {
+        const runtime = options.resolveRuntime?.() ?? null;
+        syncSnapshot(runtime?.api.rowSelection.hasSupport()
+            ? runtime.api.rowSelection.getSnapshot()
+            : null);
+    };
+    const reconcileRowSelectionFromRuntime = () => {
+        const runtime = options.resolveRuntime?.() ?? null;
+        if (!runtime?.api.rowSelection.hasSupport()) {
+            syncSnapshot(null);
+            return;
+        }
+        const rowCount = runtime.api.rows.getCount();
+        const allowedRowIds = [];
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+            const rowId = runtime.api.rows.get(rowIndex)?.rowId;
+            if (rowId == null) {
+                continue;
+            }
+            allowedRowIds.push(rowId);
+        }
+        syncSnapshot(toNullableSnapshot(reconcileDataGridRowSelectionSnapshot(rowSelectionSnapshot.value, allowedRowIds)));
+    };
+    return {
+        rowSelectionSnapshot,
+        focusedRow,
+        selectedRows,
+        selectionService,
+        runtimeServices,
+        syncRowSelectionSnapshotFromRuntime,
+        reconcileRowSelectionFromRuntime,
+    };
+}

package/dist/app/useDataGridAppRowSizing.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from "vue";
+import type { DataGridRowNode } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+import type { DataGridAppMode, DataGridAppRowHeightMode } from "./useDataGridAppControls";
+export interface UseDataGridAppRowSizingOptions<TRow> {
+    mode: Ref<DataGridAppMode>;
+    rowHeightMode: Ref<DataGridAppRowHeightMode>;
+    normalizedBaseRowHeight: Ref<number>;
+    viewportRowStart: Ref<number>;
+    bodyViewportRef?: Ref<HTMLElement | null>;
+    runtime: Pick<UseDataGridRuntimeResult<TRow>, "api">;
+    minRowHeight?: number;
+    syncViewport?: () => void;
+}
+export interface UseDataGridAppRowSizingResult<TRow> {
+    rowStyle: (row: DataGridRowNode<TRow>, rowOffset: number) => Record<string, string>;
+    isRowAutosizeProbe: (row: DataGridRowNode<TRow>, rowOffset: number) => boolean;
+    measureVisibleRowHeights: () => void;
+    startRowResize: (event: MouseEvent, row: DataGridRowNode<TRow>, rowOffset: number) => void;
+    autosizeRow: (event: MouseEvent, row: DataGridRowNode<TRow>, rowOffset: number) => void;
+    dispose: () => void;
+}
+export declare function useDataGridAppRowSizing<TRow>(options: UseDataGridAppRowSizingOptions<TRow>): UseDataGridAppRowSizingResult<TRow>;
+//# sourceMappingURL=useDataGridAppRowSizing.d.ts.map

package/dist/app/useDataGridAppRowSizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppRowSizing.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppRowSizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAEzF,MAAM,WAAW,8BAA8B,CAAC,IAAI;IAClD,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;IAC1B,aAAa,EAAE,GAAG,CAAC,wBAAwB,CAAC,CAAA;IAC5C,uBAAuB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACpC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,eAAe,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAA;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,6BAA6B,CAAC,IAAI;IACjD,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnF,kBAAkB,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAA;IAC9E,wBAAwB,EAAE,MAAM,IAAI,CAAA;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1F,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,eAAe,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACvF,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAC1C,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,GAC5C,6BAA6B,CAAC,IAAI,CAAC,CA8OrC"}

package/dist/app/useDataGridAppRowSizing.js

@@ -0,0 +1,215 @@
+import { nextTick, ref, watch } from "vue";
+export function useDataGridAppRowSizing(options) {
+    const minRowHeight = options.minRowHeight ?? 24;
+    const rowHeightRenderRevision = ref(0);
+    const measuringRowKey = ref(null);
+    const rowResizeState = ref(null);
+    const autoMeasuredRowIndexes = new Set();
+    const manualAutoRowHeightFloors = new Map();
+    const shouldUseFixedRowHeight = () => {
+        return options.rowHeightMode.value === "fixed";
+    };
+    const resolveRenderedRowKey = (row, rowOffset) => {
+        if (row.rowId != null) {
+            return String(row.rowId);
+        }
+        return `row-${options.viewportRowStart.value + rowOffset}`;
+    };
+    const resolveFixedRowHeightPx = (rowIndex) => {
+        const override = options.runtime.api.view.getRowHeightOverride(rowIndex);
+        return override ?? options.normalizedBaseRowHeight.value;
+    };
+    const resolveAutoRowHeightFloorPx = (rowIndex) => {
+        return Math.max(minRowHeight, options.normalizedBaseRowHeight.value, manualAutoRowHeightFloors.get(rowIndex) ?? 0);
+    };
+    const resolveRowHeightPx = (rowIndex) => {
+        if (shouldUseFixedRowHeight()) {
+            return resolveFixedRowHeightPx(rowIndex);
+        }
+        const override = options.runtime.api.view.getRowHeightOverride(rowIndex);
+        return Math.max(resolveAutoRowHeightFloorPx(rowIndex), override ?? 0);
+    };
+    const rowStyle = (row, rowOffset) => {
+        void rowHeightRenderRevision.value;
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        if (!shouldUseFixedRowHeight()) {
+            return {
+                minHeight: `${resolveRowHeightPx(rowIndex)}px`,
+            };
+        }
+        const rowKey = resolveRenderedRowKey(row, rowOffset);
+        if (measuringRowKey.value === rowKey) {
+            return {};
+        }
+        const px = `${resolveRowHeightPx(rowIndex)}px`;
+        return {
+            height: px,
+            minHeight: px,
+        };
+    };
+    const isRowAutosizeProbe = (row, rowOffset) => {
+        return measuringRowKey.value === resolveRenderedRowKey(row, rowOffset);
+    };
+    const clearAutoMeasuredRowHeights = () => {
+        if (autoMeasuredRowIndexes.size === 0) {
+            return false;
+        }
+        for (const rowIndex of autoMeasuredRowIndexes) {
+            if (manualAutoRowHeightFloors.has(rowIndex)) {
+                continue;
+            }
+            options.runtime.api.view.setRowHeightOverride(rowIndex, null);
+        }
+        autoMeasuredRowIndexes.clear();
+        rowHeightRenderRevision.value += 1;
+        return true;
+    };
+    const measureVisibleRowHeights = () => {
+        if (options.mode.value !== "base" || options.rowHeightMode.value !== "auto") {
+            return;
+        }
+        const viewport = options.bodyViewportRef?.value;
+        const measurementRoot = viewport?.closest(".grid-body-shell");
+        const rowElements = measurementRoot
+            ? Array.from(measurementRoot.querySelectorAll(".grid-row[data-row-index]"))
+            : viewport
+                ? Array.from(viewport.querySelectorAll(".grid-body-content > .grid-row[data-row-index]"))
+                : [];
+        if (rowElements.length === 0) {
+            options.runtime.api.view.measureRowHeight();
+            return;
+        }
+        const measuredHeightByRowIndex = new Map();
+        for (const rowElement of rowElements) {
+            const indexRaw = rowElement.getAttribute("data-row-index");
+            if (!indexRaw) {
+                continue;
+            }
+            const rowIndex = Number.parseInt(indexRaw, 10);
+            if (!Number.isFinite(rowIndex) || rowIndex < 0) {
+                continue;
+            }
+            const measuredHeight = Math.max(minRowHeight, Math.round(rowElement.getBoundingClientRect().height || rowElement.offsetHeight || options.normalizedBaseRowHeight.value));
+            const previous = measuredHeightByRowIndex.get(rowIndex) ?? 0;
+            measuredHeightByRowIndex.set(rowIndex, Math.max(previous, measuredHeight));
+        }
+        let changed = false;
+        for (const [rowIndex, measuredHeight] of measuredHeightByRowIndex) {
+            const nextHeight = Math.max(measuredHeight, resolveAutoRowHeightFloorPx(rowIndex));
+            const nextOverride = nextHeight === options.normalizedBaseRowHeight.value && !manualAutoRowHeightFloors.has(rowIndex)
+                ? null
+                : nextHeight;
+            const previousOverride = options.runtime.api.view.getRowHeightOverride(rowIndex);
+            if (previousOverride === nextOverride) {
+                if (nextOverride == null) {
+                    autoMeasuredRowIndexes.delete(rowIndex);
+                }
+                else {
+                    autoMeasuredRowIndexes.add(rowIndex);
+                }
+                continue;
+            }
+            options.runtime.api.view.setRowHeightOverride(rowIndex, nextOverride);
+            if (nextOverride == null) {
+                autoMeasuredRowIndexes.delete(rowIndex);
+            }
+            else {
+                autoMeasuredRowIndexes.add(rowIndex);
+            }
+            changed = true;
+        }
+        if (changed) {
+            rowHeightRenderRevision.value += 1;
+            options.syncViewport?.();
+        }
+    };
+    watch(options.rowHeightMode, (nextMode, previousMode) => {
+        if (previousMode === "auto" && nextMode !== "auto") {
+            if (clearAutoMeasuredRowHeights()) {
+                options.syncViewport?.();
+            }
+        }
+    });
+    const stopRowResize = () => {
+        rowResizeState.value = null;
+        if (typeof window !== "undefined") {
+            window.removeEventListener("mousemove", onRowResizeMove);
+            window.removeEventListener("mouseup", onRowResizeEnd);
+        }
+    };
+    const onRowResizeMove = (event) => {
+        const state = rowResizeState.value;
+        if (!state || options.mode.value !== "base") {
+            return;
+        }
+        const delta = event.clientY - state.startY;
+        const nextHeight = Math.max(minRowHeight, Math.round(state.startBase + delta));
+        const rowIndex = Number.parseInt(state.rowKey, 10);
+        if (Number.isFinite(rowIndex)) {
+            if (options.rowHeightMode.value === "auto") {
+                manualAutoRowHeightFloors.set(rowIndex, nextHeight);
+                autoMeasuredRowIndexes.add(rowIndex);
+            }
+            options.runtime.api.view.setRowHeightOverride(rowIndex, nextHeight);
+            rowHeightRenderRevision.value += 1;
+            options.syncViewport?.();
+        }
+    };
+    const onRowResizeEnd = () => {
+        if (!rowResizeState.value) {
+            return;
+        }
+        stopRowResize();
+    };
+    const startRowResize = (event, _row, rowOffset) => {
+        if (options.mode.value !== "base") {
+            return;
+        }
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        const rowKey = String(rowIndex);
+        rowResizeState.value = {
+            rowKey,
+            startY: event.clientY,
+            startBase: resolveRowHeightPx(rowIndex),
+        };
+        if (typeof window !== "undefined") {
+            window.addEventListener("mousemove", onRowResizeMove);
+            window.addEventListener("mouseup", onRowResizeEnd);
+        }
+    };
+    const autosizeRow = (event, row, rowOffset) => {
+        if (options.mode.value !== "base") {
+            return;
+        }
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        if (options.rowHeightMode.value === "auto") {
+            manualAutoRowHeightFloors.delete(rowIndex);
+            void nextTick(() => {
+                measureVisibleRowHeights();
+                options.syncViewport?.();
+            });
+            return;
+        }
+        const rowKey = resolveRenderedRowKey(row, rowOffset);
+        measuringRowKey.value = rowKey;
+        const rowElement = event.currentTarget?.closest(".grid-row");
+        void nextTick(() => {
+            const measured = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : options.normalizedBaseRowHeight.value;
+            options.runtime.api.view.setRowHeightOverride(rowIndex, Math.max(minRowHeight, measured));
+            rowHeightRenderRevision.value += 1;
+            measuringRowKey.value = null;
+            options.syncViewport?.();
+        });
+    };
+    return {
+        rowStyle,
+        isRowAutosizeProbe,
+        measureVisibleRowHeights,
+        startRowResize,
+        autosizeRow,
+        dispose: () => {
+            stopRowResize();
+            clearAutoMeasuredRowHeights();
+        },
+    };
+}

package/dist/app/useDataGridAppRuntime.d.ts

@@ -0,0 +1,32 @@
+import { type Ref } from "vue";
+import type { DataGridColumnInput, CreateClientRowModelOptions, DataGridRowNodeInput, DataGridTreeDataFilterMode } from "@affino/datagrid-core";
+import type { DataGridPivotSpec } from "@affino/datagrid-pivot";
+import { type UseDataGridRuntimeOptions, type UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+type MaybeRef<T> = T | Ref<T>;
+export type DataGridAppRuntimeMode = "base" | "tree" | "pivot" | "worker";
+export interface UseDataGridAppRuntimeOptions<TRow> {
+    mode: MaybeRef<DataGridAppRuntimeMode>;
+    rows: Ref<readonly TRow[]>;
+    columns: Ref<readonly DataGridColumnInput[]>;
+    clientRowModelOptions?: Omit<CreateClientRowModelOptions<TRow>, "rows">;
+    services?: UseDataGridRuntimeOptions<TRow>["services"];
+    treeData?: {
+        getDataPath: (row: TRow) => readonly string[];
+        filterMode?: DataGridTreeDataFilterMode;
+    };
+    initialPivotModel?: DataGridPivotSpec | null;
+    worker?: {
+        rowInputs?: MaybeRef<readonly DataGridRowNodeInput<TRow>[]>;
+        resolveRowInputs?: (rows: readonly TRow[]) => readonly DataGridRowNodeInput<TRow>[];
+        resolveRowInputsOnDemand?: () => readonly DataGridRowNodeInput<TRow>[];
+        rowInputsUpdateKey?: MaybeRef<unknown>;
+        createHostWorker?: () => Worker;
+    };
+}
+export interface UseDataGridAppRuntimeResult<TRow> {
+    runtime: UseDataGridRuntimeResult<TRow>;
+    rowVersion: Ref<number>;
+}
+export declare function useDataGridAppRuntime<TRow>(options: UseDataGridAppRuntimeOptions<TRow>): UseDataGridAppRuntimeResult<TRow>;
+export {};
+//# sourceMappingURL=useDataGridAppRuntime.d.ts.map

package/dist/app/useDataGridAppRuntime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppRuntime.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAClE,OAAO,KAAK,EACV,mBAAmB,EACnB,2BAA2B,EAE3B,oBAAoB,EACpB,0BAA0B,EAC3B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAsB,KAAK,yBAAyB,EAAE,KAAK,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAQrI,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAS7B,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEzE,MAAM,WAAW,4BAA4B,CAAC,IAAI;IAChD,IAAI,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAA;IACtC,IAAI,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAC1B,OAAO,EAAE,GAAG,CAAC,SAAS,mBAAmB,EAAE,CAAC,CAAA;IAC5C,qBAAqB,CAAC,EAAE,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAA;IACvE,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE;QACT,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,SAAS,MAAM,EAAE,CAAA;QAC7C,UAAU,CAAC,EAAE,0BAA0B,CAAA;KACxC,CAAA;IACD,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC5C,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAC3D,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,KAAK,SAAS,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAA;QACnF,wBAAwB,CAAC,EAAE,MAAM,SAAS,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAA;QACtE,kBAAkB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QACtC,gBAAgB,CAAC,EAAE,MAAM,MAAM,CAAA;KAChC,CAAA;CACF;AAkBD,MAAM,WAAW,2BAA2B,CAAC,IAAI;IAC/C,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACxB;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EACxC,OAAO,EAAE,4BAA4B,CAAC,IAAI,CAAC,GAC1C,2BAA2B,CAAC,IAAI,CAAC,CA4HnC"}