@affino/datagrid-vue-app 0.4.5 → 0.5.0

package/dist/internal.js

@@ -1,7 +1,7 @@
 import { d as t, r } from "./chunks/dataGridOverlayThemeVars-vzY74EIz.js";
 import { buildDataGridChromePaneModel as i, buildDataGridChromeRenderModel as d } from "@affino/datagrid-chrome";
-import { D as l, a as n, r as G, b as D, c as S, d as u, u as g, e as b, f as T } from "./chunks/useDataGridAppRowModel-PWQ72nCy.js";
-import { _ as p, a as c, c as R, b as x, d as C, p as f, u as v, e as M, f as h, g as w, h as y, i as F, j as P, k as A, l as O, m as _, n as E, o as H } from "./chunks/DataGridGanttStageEntry-BlGuno5g.js";
+import { D as l, a as n, r as G, b as D, c as S, d as u, u as g, e as b, f as T } from "./chunks/useDataGridAppRowModel-B8MCx0Ep.js";
+import { _ as p, a as c, c as R, b as x, d as C, p as f, u as v, e as M, f as h, g as w, h as y, i as F, j as P, k as A, l as O, m as _, n as E, o as H } from "./chunks/DataGridGanttStageEntry-B7apnhQj.js";
 import { _ as V } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js";
 import { _ as k } from "./chunks/DataGridFindReplacePopover.vue_vue_type_script_setup_true_lang-BEVRKG31.js";
 import { buildDataGridTimelineRenderModels as B, normalizeDataGridGanttOptions as I, resolveDataGridTimelineRange as L } from "@affino/datagrid-gantt";

package/dist/overlays/DataGridAdvancedFilterPopover.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
 }>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => void;
     add: () => void;
-    open: () => void;
     remove: (clauseId: number) => void;
+    open: () => void;
     apply: () => void;
     "reset-all": () => void;
     "update-clause": (payload: DataGridAppAdvancedFilterClausePatch) => void;

package/dist/overlays/DataGridColumnMenu.vue.d.ts

@@ -1,6 +1,8 @@
 import type { DataGridColumnHistogramEntry } from "@affino/datagrid-vue";
 import type { DataGridColumnMenuActionOptions, DataGridColumnMenuCustomItem, DataGridColumnMenuDisabledReasons, DataGridColumnMenuItemKey, DataGridColumnMenuItemLabels, DataGridColumnMenuTriggerMode } from "./dataGridColumnMenu";
+import type { DataGridMenuOverlayOpenReason } from "./dataGridMenuOverlay";
 type DataGridColumnPin = "left" | "right" | "none";
+type DataGridColumnMenuOpenReason = DataGridMenuOverlayOpenReason;
 type DataGridColumnMenuValueEntriesResult = readonly DataGridColumnHistogramEntry[] | Promise<readonly DataGridColumnHistogramEntry[]>;
 type __VLS_Props = {
     rowCount: number;
@@ -28,29 +30,27 @@ type __VLS_Props = {
     filterActive: boolean;
     selectedFilterTokens: readonly string[];
     maxFilterValues: number;
+    anchorElement?: HTMLElement | null;
+    openReason?: DataGridColumnMenuOpenReason;
 };
-declare function toggleMenuFromElement(element: HTMLElement | null): void;
-declare var __VLS_15: {
+declare var __VLS_13: {
     open: boolean;
-    toggleMenuFromElement: typeof toggleMenuFromElement;
-}, __VLS_17: {
-    open: boolean;
-    toggleMenuFromElement: typeof toggleMenuFromElement;
+    toggleMenuFromElement: (element: HTMLElement | null, reason?: DataGridMenuOverlayOpenReason) => void;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
-} & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    sort: (direction: "desc" | "asc" | null) => void;
+    sort: (direction: "asc" | "desc" | null) => void;
     pin: (pin: DataGridColumnPin) => void;
     group: (grouped: boolean) => void;
     "apply-filter": (tokens: readonly string[]) => void;
     "clear-filter": () => void;
     "update-text-filter": (value: string) => void;
+    close: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & {
-    onSort?: ((direction: "desc" | "asc" | null) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onSort?: ((direction: "asc" | "desc" | null) => any) | undefined;
     onGroup?: ((grouped: boolean) => any) | undefined;
     onPin?: ((pin: DataGridColumnPin) => any) | undefined;
     "onApply-filter"?: ((tokens: readonly string[]) => any) | undefined;

package/dist/overlays/DataGridMenuOverlay.vue.d.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties } from "vue";
+import { type MenuOptions } from "@affino/menu-vue";
+import type { DataGridMenuOverlayOpenReason } from "./dataGridMenuOverlay";
+type DataGridMenuContentAlign = "start" | "center" | "end";
+type __VLS_Props = {
+    contextMenuEnabled?: boolean;
+    options: MenuOptions;
+    contentClassName: string;
+    align?: DataGridMenuContentAlign;
+    gutter?: number;
+    contentStyle?: CSSProperties | Record<string, string>;
+    contentAttrs?: Record<string, string | boolean | number | undefined>;
+};
+declare function closeMenu(): void;
+declare function openMenuFromElement(element: HTMLElement | null, reason?: DataGridMenuOverlayOpenReason): void;
+declare function toggleMenuFromElement(element: HTMLElement | null, reason?: DataGridMenuOverlayOpenReason): void;
+declare var __VLS_15: {
+    open: boolean;
+    toggleMenuFromElement: typeof toggleMenuFromElement;
+}, __VLS_17: {
+    open: boolean;
+    toggleMenuFromElement: typeof toggleMenuFromElement;
+}, __VLS_25: {
+    open: boolean;
+    closeMenu: typeof closeMenu;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_15) => any;
+} & {
+    trigger?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    contextMenuEnabled: boolean;
+    align: string;
+    gutter: number;
+    contentAttrs: () => {};
+}>, {
+    closeMenu: typeof closeMenu;
+    openMenuFromElement: typeof openMenuFromElement;
+    toggleMenuFromElement: typeof toggleMenuFromElement;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+    open: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    contextMenuEnabled: boolean;
+    align: string;
+    gutter: number;
+    contentAttrs: () => {};
+}>>> & {
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}, {
+    contextMenuEnabled: boolean;
+    align: DataGridMenuContentAlign;
+    gutter: number;
+    contentAttrs: Record<string, string | boolean | number | undefined>;
+}, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/overlays/dataGridMenuOverlay.d.ts

@@ -0,0 +1,7 @@
+export type DataGridMenuOverlayOpenReason = "button" | "contextmenu" | "keyboard";
+export type DataGridMenuOverlayControllerOpenReason = "pointer" | "keyboard" | "programmatic";
+export interface DataGridMenuOverlayController {
+    closeMenu: () => void;
+    openMenuFromElement: (element: HTMLElement | null, reason?: DataGridMenuOverlayOpenReason) => void;
+    toggleMenuFromElement: (element: HTMLElement | null, reason?: DataGridMenuOverlayOpenReason) => void;
+}

package/dist/stage/DataGridCellContentRenderer.d.ts

@@ -1,15 +1,7 @@
-import { type PropType, type VNodeChild } from "vue";
-declare const _default: import("vue").DefineComponent<{
-    content: {
-        type: PropType<VNodeChild>;
-        default: null;
-    };
-}, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    content: {
-        type: PropType<VNodeChild>;
-        default: null;
-    };
-}>>, {
-    content: VNodeChild;
-}, {}>;
-export default _default;
+import { type FunctionalComponent, type VNodeChild } from "vue";
+interface DataGridCellContentRendererProps {
+    content?: VNodeChild;
+    contentKey?: string;
+}
+declare const DataGridCellContentRenderer: FunctionalComponent<DataGridCellContentRendererProps>;
+export default DataGridCellContentRenderer;

package/dist/stage/DataGridTableStageCenterPane.vue.d.ts

@@ -1,11 +1,21 @@
 import { type PropType } from "vue";
-import type { DataGridTableStageBodyRow, DataGridTableStageCenterPaneRenderApi, DataGridTableStageOverlayLane, DataGridTableStageOverlaySegment } from "./dataGridTableStageBody.types";
+import type { DataGridTableStageBodyRow, DataGridTableStageBodyRowKeyMode, DataGridTableStageCenterPaneRenderApi, DataGridTableStageOverlayLane, DataGridTableStageOverlaySegment } from "./dataGridTableStageBody.types";
 import type { DataGridElementRefHandler, DataGridTableStageCenterPaneDiagnostics } from "./dataGridTableStage.types";
-declare const __VLS_export: import("vue").DefineComponent<{
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    chrome?: (props: typeof __VLS_1) => any;
+} & {
+    'content-chrome'?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{
     viewportRef: {
         type: PropType<DataGridElementRefHandler>;
         default: undefined;
     };
+    contentRef: {
+        type: PropType<DataGridElementRefHandler>;
+        default: undefined;
+    };
     displayRows: {
         type: PropType<readonly DataGridTableStageBodyRow[]>;
         required: true;
@@ -18,6 +28,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: PropType<string | number | null>;
         default: null;
     };
+    rowKeyMode: {
+        type: PropType<DataGridTableStageBodyRowKeyMode>;
+        default: string;
+    };
     topSpacerHeight: {
         type: NumberConstructor;
         default: undefined;
@@ -34,6 +48,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    innerHorizontalScrollport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     handleScroll: {
         type: PropType<(event: Event) => void>;
         default: undefined;
@@ -91,6 +109,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: PropType<DataGridElementRefHandler>;
         default: undefined;
     };
+    contentRef: {
+        type: PropType<DataGridElementRefHandler>;
+        default: undefined;
+    };
     displayRows: {
         type: PropType<readonly DataGridTableStageBodyRow[]>;
         required: true;
@@ -103,6 +125,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: PropType<string | number | null>;
         default: null;
     };
+    rowKeyMode: {
+        type: PropType<DataGridTableStageBodyRowKeyMode>;
+        default: string;
+    };
     topSpacerHeight: {
         type: NumberConstructor;
         default: undefined;
@@ -119,6 +145,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    innerHorizontalScrollport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     handleScroll: {
         type: PropType<(event: Event) => void>;
         default: undefined;
@@ -180,14 +210,23 @@ declare const __VLS_export: import("vue").DefineComponent<{
     reportFillPlumbingDetail: ((layer: string, value: string) => void) | undefined;
     handleKeydown: (event: KeyboardEvent) => void;
     viewportRef: DataGridElementRefHandler;
+    contentRef: DataGridElementRefHandler;
     bodyRowsRevision: string | number | null;
+    rowKeyMode: DataGridTableStageBodyRowKeyMode;
     viewportClass: string;
     viewportTabIndex: number;
+    innerHorizontalScrollport: boolean;
     handleScroll: (event: Event) => void;
     handleWheel: (event: WheelEvent) => void;
     handleContextMenu: (event: MouseEvent) => void;
     overlayLanes: readonly DataGridTableStageOverlayLane[];
     perfTraceEnabled: boolean;
 }, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/stage/DataGridTableStageChromeLayer.vue.d.ts

@@ -0,0 +1,15 @@
+import type { DataGridChromePaneModel } from "@affino/datagrid-chrome";
+type __VLS_Props = {
+    model: DataGridChromePaneModel;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/stage/DataGridTableStageHeader.vue.d.ts

@@ -1,11 +1,11 @@
 import { type CSSProperties, type PropType } from "vue";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_31: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     'center-chrome'?: (props: typeof __VLS_1) => any;
 } & {
     'left-chrome'?: (props: typeof __VLS_3) => any;
 } & {
-    'right-chrome'?: (props: typeof __VLS_31) => any;
+    'right-chrome'?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     paneLayoutStyle: {

package/dist/stage/dataGridTableStage.types.d.ts

@@ -4,6 +4,7 @@ import type { DataGridFillBehavior } from "@affino/datagrid-vue/advanced";
 import type { DataGridLayoutMode } from "../config/dataGridLayout";
 import type { DataGridColumnMenuActionOptions, DataGridColumnMenuCustomItem, DataGridColumnMenuDisabledReasons, DataGridColumnMenuItemKey, DataGridColumnMenuItemLabels, DataGridColumnMenuTriggerMode } from "../overlays/dataGridColumnMenu";
 export type DataGridTableMode = "base" | "tree" | "pivot" | "worker";
+export type DataGridColumnMenuOpenReason = "button" | "contextmenu" | "keyboard";
 export type DataGridColumnMenuValueEntriesResult = readonly DataGridColumnHistogramEntry[] | Promise<readonly DataGridColumnHistogramEntry[]>;
 export type DataGridPendingEdge = "top" | "right" | "bottom" | "left";
 export type DataGridTableRow<TRow extends Record<string, unknown>> = DataGridRowNode<TRow>;
@@ -21,6 +22,11 @@ export interface DataGridTableStageCustomOverlay {
     hideSingleCell?: boolean;
     zIndex?: number;
 }
+export interface DataGridActiveColumnMenuState {
+    columnId: string;
+    anchorEl: HTMLElement;
+    reason: DataGridColumnMenuOpenReason;
+}
 export interface DataGridTableStageCenterPaneDiagnostics {
     mounted?: boolean;
     debugJson?: string;
@@ -58,8 +64,6 @@ export interface DataGridTableStageViewportSection {
     rightColumnSpacerWidth: number;
     headerViewportRef: DataGridElementRefHandler;
     bodyViewportRef: DataGridElementRefHandler;
-    handleHeaderWheel: (event: WheelEvent) => void;
-    handleHeaderScroll: (event: Event) => void;
     handleViewportScroll: (event: Event) => void;
     handleViewportKeydown: (event: KeyboardEvent) => void;
 }
@@ -101,6 +105,9 @@ export interface DataGridTableStageColumnsSection {
     applyColumnMenuGroupBy?: (columnKey: string, grouped: boolean) => void;
     applyColumnMenuFilter?: (columnKey: string, tokens: readonly string[]) => void;
     clearColumnMenuFilter?: (columnKey: string) => void;
+    activeColumnMenu?: DataGridActiveColumnMenuState | null;
+    openColumnMenu?: (columnKey: string, anchorEl: HTMLElement, reason: DataGridColumnMenuOpenReason) => void;
+    closeColumnMenu?: () => void;
     startResize: (event: MouseEvent, columnKey: string) => void;
     handleResizeDoubleClick: (event: MouseEvent, columnKey: string) => void;
 }

package/dist/stage/dataGridTableStageBody.types.d.ts

@@ -4,6 +4,7 @@ import type { DataGridAppCellRenderer, DataGridAppGroupCellRenderer } from "../c
 import type { DataGridFilterableComboboxOption } from "../overlays/dataGridFilterableCombobox";
 import type { DataGridTableRow } from "./dataGridTableStage.types";
 export type DataGridTableStageBodyRow = DataGridTableRow<Record<string, unknown>>;
+export type DataGridTableStageBodyRowKeyMode = "row" | "recycled";
 export type DataGridTableStageBodyColumn = DataGridColumnSnapshot & {
     column: DataGridColumnSnapshot["column"] & {
         cellRenderer?: DataGridAppCellRenderer<Record<string, unknown>> | null;
@@ -112,6 +113,7 @@ export interface DataGridTableStageCenterPaneRenderApi extends DataGridTableStag
 }
 export interface DataGridTableStagePinnedPaneProps {
     side: "left" | "right";
+    rowKeyMode?: DataGridTableStageBodyRowKeyMode;
     width: number;
     style: CSSProperties;
     contentStyle: CSSProperties;

package/dist/stage/useDataGridStageChromeCanvas.d.ts

@@ -1,10 +1,12 @@
 import { type ComputedRef, type Ref } from "vue";
 import type { DataGridChromeRenderModel } from "@affino/datagrid-chrome";
-type GridChromeRedrawMode = "full" | "center-scroll";
+type GridChromeRedrawMode = "full" | "center-scroll" | "body-scroll";
+type GridChromeRedrawSource = string;
 export interface UseDataGridStageChromeCanvasOptions {
     stageRootEl: Ref<HTMLElement | null>;
     bodyShellRef: Ref<HTMLElement | null>;
     bodyViewportEl: Ref<HTMLElement | null>;
+    verticalBodyViewportEl: Ref<HTMLElement | null>;
     bottomViewportEl: Ref<HTMLElement | null>;
     leftHeaderChromeCanvasEl: Ref<HTMLCanvasElement | null>;
     centerHeaderChromeCanvasEl: Ref<HTMLCanvasElement | null>;
@@ -19,6 +21,7 @@ export interface UseDataGridStageChromeCanvasOptions {
     bodyViewportScrollLeft: Ref<number>;
     bodyViewportClientWidth: Ref<number>;
     bodyViewportClientHeight: Ref<number>;
+    bodyViewportShellClientWidth: Ref<number>;
     pinnedBottomViewportClientHeight: Ref<number>;
     bodyViewportTopOffset: Ref<number>;
     headerShellHeight: Ref<number>;
@@ -33,8 +36,8 @@ export interface UseDataGridStageChromeCanvasResult {
     syncBodyViewportMetrics: () => void;
     syncPinnedBottomViewportMetrics: () => void;
     syncPinnedBottomViewportScrollLeft: () => void;
-    scheduleGridChromeRedraw: (mode?: GridChromeRedrawMode) => void;
-    flushGridChromeRedraw: (mode?: GridChromeRedrawMode) => void;
+    scheduleGridChromeRedraw: (mode?: GridChromeRedrawMode, source?: GridChromeRedrawSource) => void;
+    flushGridChromeRedraw: (mode?: GridChromeRedrawMode, source?: GridChromeRedrawSource) => void;
     connectGridChromeResizeObserver: () => void;
     disconnectGridChromeResizeObserver: () => void;
 }

package/dist/stage/useDataGridStageChromeModel.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type Ref } from "vue";
-import { type DataGridChromeRenderModel } from "@affino/datagrid-chrome";
+import { type DataGridChromePaneModel, type DataGridChromeRenderModel } from "@affino/datagrid-chrome";
 import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow } from "./dataGridTableStageBody.types";
 import type { DataGridTableStageLayoutSection, DataGridTableStageRowsSection, DataGridTableStageViewportSection } from "./dataGridTableStage.types";
 interface DataGridPivotHeaderMeta {
@@ -42,6 +42,7 @@ export interface UseDataGridStageChromeModelResult {
     chromeRenderModel: ComputedRef<DataGridChromeRenderModel>;
     headerChromeRenderModel: ComputedRef<DataGridChromeRenderModel>;
     pinnedBottomChromeRenderModel: ComputedRef<DataGridChromeRenderModel>;
+    bodyCenterChromeLayerModel: ComputedRef<DataGridChromePaneModel>;
     hasPivotHeaderGroups: ComputedRef<boolean>;
     rowMetrics: ComputedRef<readonly {
         top: number;

package/dist/stage/useDataGridStageOverlays.d.ts

@@ -7,6 +7,7 @@ export interface UseDataGridStageOverlaysOptions {
     overlayGeometryContext: ComputedRef<DataGridStageOverlayGeometryContext>;
     bodyViewportClientHeight: Ref<number>;
     bodyViewportScrollTop: Ref<number>;
+    bodyOverlayRowOrigin?: Ref<number>;
     bottomViewportClientHeight: Ref<number>;
     visibleColumns: ComputedRef<readonly DataGridTableStageBodyColumn[]>;
     displayRows: ComputedRef<readonly unknown[]>;

package/dist/stage/useDataGridStageRowState.d.ts

@@ -45,6 +45,7 @@ export interface UseDataGridStageRowStateOptions {
     startInlineEditIfAllowed: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number) => void;
     handleCellClick: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => void;
     hasExplicitGroupCellRenderer: Readonly<Ref<boolean>>;
+    useCanvasChrome?: Readonly<Ref<boolean>>;
     cells: Readonly<Ref<{
         isSelectionAnchorCell?: (rowOffset: number, columnIndex: number) => boolean;
         isCellInFillPreview?: (rowOffset: number, columnIndex: number) => boolean;

package/dist/stage/useDataGridStageViewportRuntime.d.ts

@@ -1,12 +1,13 @@
 import { type ComponentPublicInstance, type Ref } from "vue";
 import type { DataGridTableStageViewportSection } from "./dataGridTableStage.types";
-type GridChromeRedrawMode = "full" | "center-scroll";
+type GridChromeRedrawMode = "full" | "center-scroll" | "body-scroll";
+type GridChromeRedrawSource = string;
 export interface UseDataGridStageViewportRuntimeSyncers {
     syncBodyViewportMetrics: () => void;
     syncPinnedBottomViewportMetrics: () => void;
     syncPinnedBottomViewportScrollLeft: () => void;
-    scheduleGridChromeRedraw: (mode?: GridChromeRedrawMode) => void;
-    flushGridChromeRedraw: (mode?: GridChromeRedrawMode) => void;
+    scheduleGridChromeRedraw: (mode?: GridChromeRedrawMode, source?: GridChromeRedrawSource) => void;
+    flushGridChromeRedraw: (mode?: GridChromeRedrawMode, source?: GridChromeRedrawSource) => void;
     connectGridChromeResizeObserver: () => void;
     disconnectGridChromeResizeObserver: () => void;
 }
@@ -14,18 +15,20 @@ export interface UseDataGridStageViewportRuntimeOptions {
     stageRootEl: Readonly<Ref<HTMLElement | null>>;
     viewport: Readonly<Ref<DataGridTableStageViewportSection>>;
     gridChromeSyncers: Readonly<Ref<UseDataGridStageViewportRuntimeSyncers>>;
-    leftPaneContentRef: Readonly<Ref<HTMLElement | null>>;
-    rightPaneContentRef: Readonly<Ref<HTMLElement | null>>;
     perfTraceEnabled?: boolean;
 }
 export interface UseDataGridStageViewportRuntimeResult {
     bodyViewportEl: Ref<HTMLElement | null>;
+    verticalBodyViewportEl: Ref<HTMLElement | null>;
+    centerHorizontalViewportEl: Ref<HTMLElement | null>;
+    sharedVerticalViewportEl: Ref<HTMLElement | null>;
     topViewportEl: Ref<HTMLElement | null>;
     bottomViewportEl: Ref<HTMLElement | null>;
     bodyViewportScrollTop: Ref<number>;
     bodyViewportScrollLeft: Ref<number>;
     bodyViewportClientWidth: Ref<number>;
     bodyViewportClientHeight: Ref<number>;
+    bodyViewportShellClientWidth: Ref<number>;
     pinnedTopViewportClientHeight: Ref<number>;
     pinnedBottomViewportClientHeight: Ref<number>;
     bodyViewportTopOffset: Ref<number>;
@@ -35,9 +38,11 @@ export interface UseDataGridStageViewportRuntimeResult {
     isBodyViewportScrollIdle: Ref<boolean>;
     runWhenBodyViewportScrollIdle: (callback: () => void) => void;
     captureBodyViewportRef: (value: Element | ComponentPublicInstance | null) => void;
+    captureSharedVerticalViewportRef: (value: Element | ComponentPublicInstance | null) => void;
     capturePinnedTopViewportRef: (value: Element | ComponentPublicInstance | null) => void;
     capturePinnedBottomViewportRef: (value: Element | ComponentPublicInstance | null) => void;
     handleCenterViewportScroll: (event: Event) => void;
+    handleSharedVerticalViewportScroll: (event: Event) => void;
     handlePinnedTopViewportScroll: (event: Event) => void;
     handlePinnedBottomViewportScroll: (event: Event) => void;
     handleLinkedViewportWheel: (event: WheelEvent) => void;

package/dist/stage/useDataGridTableStageColumns.d.ts

@@ -6,6 +6,7 @@ export interface UseDataGridTableStageColumnsOptions<TRow extends Record<string,
     runtime: Pick<import("@affino/datagrid-vue").UseDataGridRuntimeResult<TRow>, "api">;
     visibleColumns: Ref<readonly DataGridColumnSnapshot[]>;
     showRowSelection?: Ref<boolean>;
+    rowSelectionColumnWidth?: Ref<number>;
     isCellEditable?: DataGridCellEditablePredicate<TRow>;
 }
 export interface UseDataGridTableStageColumnsResult<TRow extends Record<string, unknown>> {

package/dist/stage/useDataGridTableStageRuntime.d.ts

@@ -10,7 +10,7 @@ import type { DataGridPlaceholderRowsOptions } from "../config/dataGridPlacehold
 import type { DataGridVirtualizationOptions } from "../config/dataGridVirtualization";
 import type { DataGridTableStageContext } from "./dataGridTableStageContext";
 import type { DataGridTableStageHistoryAdapter } from "./useDataGridTableStageHistory";
-import type { DataGridColumnMenuValueEntriesResult, DataGridTableRow, DataGridTableStageCellClass, DataGridTableStageCenterPaneDiagnostics, DataGridTableStageProps } from "./dataGridTableStage.types";
+import type { DataGridActiveColumnMenuState, DataGridColumnMenuOpenReason, DataGridColumnMenuValueEntriesResult, DataGridTableRow, DataGridTableStageCellClass, DataGridTableStageCenterPaneDiagnostics, DataGridTableStageProps } from "./dataGridTableStage.types";
 export type { DataGridTableStageHistoryAdapter } from "./useDataGridTableStageHistory";
 interface DataGridAppFillProjectionContext {
     sortModel: readonly DataGridSortState[];
@@ -224,6 +224,7 @@ export interface UseDataGridTableStageRuntimeOptions<TRow extends Record<string,
     chromeSignature?: Ref<string | undefined>;
     showRowIndex?: Ref<boolean>;
     showRowSelection?: Ref<boolean>;
+    rowSelectionColumnWidth?: Ref<number>;
     isRowInPendingClipboardCut?: (row: import("@affino/datagrid-vue").DataGridRowNode<TRow>) => boolean;
     syncRowSelectionSnapshotFromRuntime?: () => void;
     flushRowSelectionSnapshotUpdates?: () => void;
@@ -264,6 +265,9 @@ export interface UseDataGridTableStageRuntimeOptions<TRow extends Record<string,
     applyColumnMenuGroupBy?: (columnKey: string, grouped: boolean) => void;
     applyColumnMenuFilter?: (columnKey: string, tokens: readonly string[]) => void;
     clearColumnMenuFilter?: (columnKey: string) => void;
+    activeColumnMenu?: Ref<DataGridActiveColumnMenuState | null>;
+    openColumnMenu?: (columnKey: string, anchorEl: HTMLElement, reason: DataGridColumnMenuOpenReason) => void;
+    closeColumnMenu?: () => void;
     onCellEdit?: (payload: {
         rowId: string | number;
         columnKey: string;

package/dist/stage/useDataGridTableStageScrollSync.d.ts

@@ -1,6 +1,5 @@
 import type { Ref } from "vue";
 export interface UseDataGridTableStageScrollSyncOptions {
-    bodyViewportRef: Ref<HTMLElement | null>;
     isColumnResizing: Ref<boolean>;
     applyColumnResizeFromPointer: (clientX: number) => void;
     stopColumnResize: () => void;
@@ -10,7 +9,6 @@ export interface UseDataGridTableStageScrollSyncOptions {
     handleInteractionWindowPointerCancel: () => void;
     handleInteractionWindowBlur: () => void;
     handleInteractionWindowContextMenuCapture: (event: MouseEvent) => boolean;
-    syncViewport: (event: Event) => void;
 }
 export interface UseDataGridTableStageScrollSyncResult {
     handleWindowMouseMove: (event: MouseEvent) => void;
@@ -18,8 +16,6 @@ export interface UseDataGridTableStageScrollSyncResult {
     handleWindowPointerCancel: (event: PointerEvent) => void;
     handleWindowBlur: () => void;
     handleWindowContextMenuCapture: (event: MouseEvent) => boolean;
-    handleHeaderWheel: (event: WheelEvent) => void;
-    handleHeaderScroll: (event: Event) => void;
     handleWindowMouseUp: () => void;
 }
 export declare function useDataGridTableStageScrollSync(options: UseDataGridTableStageScrollSyncOptions): UseDataGridTableStageScrollSyncResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affino/datagrid-vue-app",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Declarative Vue DataGrid component for Affino",
   "type": "module",
   "main": "dist/index.js",
@@ -45,10 +45,10 @@
   "dependencies": {
     "@affino/menu-vue": "^2.1.1",
     "@affino/popover-vue": "^1.1.0",
-    "@affino/datagrid-theme": "0.2.4",
-    "@affino/datagrid-vue": "0.4.1",
+    "@affino/datagrid-gantt": "0.1.2",
+    "@affino/datagrid-vue": "0.5.0",
     "@affino/datagrid-chrome": "0.1.1",
-    "@affino/datagrid-gantt": "0.1.2"
+    "@affino/datagrid-theme": "0.2.4"
   },
   "peerDependencies": {
     "vue": "^3.3.0"