@affino/datagrid-vue-app 0.1.53 → 0.1.56

package/dist/stage/useDataGridStagePanes.grouped.d.ts

@@ -0,0 +1,86 @@
+import { type CSSProperties, type ComputedRef, type Ref } from "vue";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow } from "./dataGridTableStageBody.types";
+import type { DataGridTableStageOverlayLane, DataGridTableStageOverlaySegment, DataGridTableStagePinnedPaneProps } from "./dataGridTableStageBody.types";
+type LayoutRuntime = Readonly<Ref<{
+    leftPaneWidth: number;
+    rightPaneWidth: number;
+    bodyViewportClientWidth: number;
+    bodyViewportClientHeight: number;
+    pinnedBottomViewportClientHeight: number;
+    headerShellHeight: number;
+    headerViewportClientWidth: number;
+}>>;
+type PaneRuntime = Readonly<Ref<{
+    leftPaneContentRef: Ref<HTMLElement | null>;
+    rightPaneContentRef: Ref<HTMLElement | null>;
+    leftBottomPaneContentRef: Ref<HTMLElement | null>;
+    rightBottomPaneContentRef: Ref<HTMLElement | null>;
+    displayRows: Readonly<Ref<readonly DataGridTableStageBodyRow[]>>;
+    pinnedBottomRows: Readonly<Ref<readonly DataGridTableStageBodyRow[]>>;
+    showRowIndex: Readonly<Ref<boolean>>;
+    pinnedLeftColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+    pinnedRightColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+}>>;
+type OverlayRuntime = Readonly<Ref<{
+    leftSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftSelectionSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightSelectionSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomSelectionSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerPinnedBottomSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomSelectionOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomSelectionSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftFillPreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightFillPreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomFillPreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerPinnedBottomFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomFillPreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomFillPreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftMovePreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightMovePreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftPinnedBottomMovePreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    centerPinnedBottomMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomMovePreviewOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    rightPinnedBottomMovePreviewSeamOverlaySegments: Readonly<Ref<readonly DataGridTableStageOverlaySegment[]>>;
+    leftCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    centerCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    rightCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    leftCustomSeamOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    rightCustomSeamOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    leftPinnedBottomCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    centerPinnedBottomCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    rightPinnedBottomCustomOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    leftPinnedBottomCustomSeamOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+    rightPinnedBottomCustomSeamOverlayLanes: Readonly<Ref<readonly DataGridTableStageOverlayLane[]>>;
+}>>;
+export interface UseDataGridStagePanesOptions {
+    layoutRuntime: LayoutRuntime;
+    paneRuntime: PaneRuntime;
+    overlayRuntime: OverlayRuntime;
+}
+export interface UseDataGridStagePanesResult {
+    paneLayoutStyle: ComputedRef<CSSProperties>;
+    leftPaneStyle: ComputedRef<CSSProperties>;
+    rightPaneStyle: ComputedRef<CSSProperties>;
+    leftTrackStyle: ComputedRef<CSSProperties>;
+    rightTrackStyle: ComputedRef<CSSProperties>;
+    centerHeaderChromeCanvasStyle: ComputedRef<CSSProperties>;
+    centerChromeCanvasStyle: ComputedRef<CSSProperties>;
+    centerBottomChromeCanvasStyle: ComputedRef<CSSProperties>;
+    leftPinnedPane: ComputedRef<DataGridTableStagePinnedPaneProps>;
+    rightPinnedPane: ComputedRef<DataGridTableStagePinnedPaneProps>;
+    leftPinnedBottomPane: ComputedRef<DataGridTableStagePinnedPaneProps>;
+    rightPinnedBottomPane: ComputedRef<DataGridTableStagePinnedPaneProps>;
+}
+export declare function useDataGridStagePanes(options: UseDataGridStagePanesOptions): UseDataGridStagePanesResult;
+export {};

package/dist/stage/useDataGridStagePointerInteractions.d.ts

@@ -0,0 +1,30 @@
+import { type Ref } from "vue";
+import type { DataGridTableMode } from "./dataGridTableStage.types";
+import type { DataGridOverlayRange } from "@affino/datagrid-vue";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow } from "./dataGridTableStageBody.types";
+export interface UseDataGridStagePointerInteractionsOptions {
+    mode: Readonly<Ref<DataGridTableMode>>;
+    selection: Readonly<Ref<{
+        isFillDragging: boolean;
+        rangeMoveEnabled: boolean;
+        startFillHandleDrag: (event: MouseEvent) => void;
+        startFillHandleDoubleClick: (event: MouseEvent) => void;
+    } | null>>;
+    selectionRange: Readonly<Ref<DataGridOverlayRange | null>>;
+    visibleColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+    displayRows: Readonly<Ref<readonly DataGridTableStageBodyRow[]>>;
+    viewportRowStart: Readonly<Ref<number>>;
+    fillActionMenuOpen: Ref<boolean>;
+    isCellSelectedSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isCellOnSelectionEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+}
+export interface UseDataGridStagePointerInteractionsResult {
+    clearRangeMoveHandleHover: () => void;
+    isRangeMoveHandleHoverCell: (rowOffset: number, columnIndex: number) => boolean;
+    handleCellMouseMove: (event: MouseEvent, rowOffset: number, columnIndex: number) => void;
+    handleFillHandleMouseDown: (event: MouseEvent) => void;
+    handleFillHandleDoubleClick: (event: MouseEvent) => void;
+    resetGlobalFillDragCursor: () => void;
+}
+export declare function useDataGridStagePointerInteractions(options: UseDataGridStagePointerInteractionsOptions): UseDataGridStagePointerInteractionsResult;

package/dist/stage/useDataGridStageRenderApis.d.ts

@@ -0,0 +1,141 @@
+import { type CSSProperties, type Ref, type VNodeChild } from "vue";
+import type { DataGridTableStageCenterPaneRenderApi, DataGridTableStagePinnedPaneRenderApi } from "./dataGridTableStageBody.types";
+import type { DataGridTableStageEditingSection } from "./dataGridTableStage.types";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow, DataGridTableStageSelectEditorOption, DataGridTableStageSelectEditorOptionsLoader } from "./dataGridTableStageBody.types";
+import type { DataGridFilterableComboboxOption } from "../overlays/dataGridFilterableCombobox";
+import type { DataGridTableMode } from "./dataGridTableStage.types";
+export interface UseDataGridStageRenderApisOptions {
+    mode: Readonly<Ref<DataGridTableMode>>;
+    rows: Readonly<Ref<{
+        rowClass: (row: DataGridTableStageBodyRow) => string;
+        rowStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+        isRowAutosizeProbe: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+        rowIndexLabel: (row: DataGridTableStageBodyRow, rowOffset: number) => string;
+        handleRowClick?: (row: DataGridTableStageBodyRow) => void;
+        isRowFocused?: (row: DataGridTableStageBodyRow) => boolean;
+        isRowCheckboxSelected?: (row: DataGridTableStageBodyRow) => boolean;
+        reorderRowsByIndex?: (payload: {
+            sourceRowId: string | number;
+            targetRowId: string | number;
+            placement: "before" | "after";
+        }) => boolean;
+        consumeRecentRowResizeInteraction?: () => boolean;
+        startRowResize: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+        autosizeRow: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+        showRowIndex?: boolean;
+        stripedRows?: boolean;
+        rowHover?: boolean;
+    }>>;
+    selection: Readonly<Ref<{
+        isFillDragging: boolean;
+        rangeMoveEnabled: boolean;
+        startFillHandleDrag: (event: MouseEvent) => void;
+        startFillHandleDoubleClick: (event: MouseEvent) => void;
+        isFillHandleCell: (rowOffset: number, columnIndex: number) => boolean;
+    }>>;
+    selectionRange: Readonly<Ref<{
+        startRow: number;
+        endRow: number;
+        startColumn: number;
+        endColumn: number;
+    } | null>>;
+    selectionRanges: Readonly<Ref<readonly {
+        startRow: number;
+        endRow: number;
+        startColumn: number;
+        endColumn: number;
+    }[]>>;
+    visibleColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+    displayRows: Readonly<Ref<readonly DataGridTableStageBodyRow[]>>;
+    editing: Readonly<Ref<DataGridTableStageEditingSection<Record<string, unknown>>>>;
+    cells: Readonly<Ref<{
+        isCellSelected?: (rowOffset: number, columnIndex: number) => boolean;
+        isSelectionAnchorCell?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInFillPreview?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInPendingClipboardRange?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellOnPendingClipboardEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+        isCellEditable?: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+        isCellOnSelectionEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+        readCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+        readDisplayCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+    }>>;
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isEditingCellSafe: (row: DataGridTableStageBodyRow, columnKey: string) => boolean;
+    isCellSelectedSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isSelectionAnchorCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightSelectedCellVisual: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInFillPreviewSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInPendingClipboardRangeSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnPendingClipboardEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isCellOnSelectionEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isFillHandleCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isVisibleCellEditableByAbsoluteCoord: (rowIndex: number, columnIndex: number) => boolean;
+    resolveAbsoluteRowIndex: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    resolveViewportRowOffset: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    rowStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    handleRowContainerClick: (row: DataGridTableStageBodyRow) => void;
+    setHoveredRow: (row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    isFullRowSelectionSafe: (rowOffset: number) => boolean;
+    rowIndexColumnStyle: Readonly<Ref<CSSProperties>>;
+    rowIndexCellClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    rowIndexCellStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+    rowIndexTabIndex: (row: DataGridTableStageBodyRow) => number;
+    isRowIndexDraggable: (row: DataGridTableStageBodyRow) => boolean;
+    handleRowIndexClickSafe: (row: DataGridTableStageBodyRow, rowOffset: number, event: MouseEvent) => void;
+    handleRowIndexKeydownSafe: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragStart: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragOver: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDrop: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    clearRowIndexDragState: () => void;
+    columnIndexByKey: (columnKey: string) => number;
+    builtInCellClasses: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => Record<string, boolean>;
+    cellStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => Record<string, boolean>;
+    resolveCellCustomClass: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => unknown;
+    columnStyle: (key: string) => CSSProperties;
+    bodyCellPresentationStyle: (column: DataGridTableStageBodyColumn) => CSSProperties;
+    bodyCellSelectionStyle: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number, columnIndex: number) => CSSProperties;
+    resolveCellCustomStyle: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => CSSProperties;
+    cellTabIndex: (rowOffset: number, columnIndex: number) => number;
+    cellAriaRole: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => string | undefined;
+    cellAriaChecked: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | "false" | "mixed" | undefined;
+    cellAriaPressed: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | "false" | "mixed" | undefined;
+    cellAriaLabel: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => string | undefined;
+    cellAriaDisabled: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | undefined;
+    handleCellMouseDown: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => void;
+    handleBodyCellClick: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => void;
+    handleCellMouseMove: (event: MouseEvent, rowOffset: number, columnIndex: number) => void;
+    clearRangeMoveHandleHover: () => void;
+    handleCellKeydown: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => void;
+    startInlineEditIfAllowed: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number) => void;
+    handleFillHandleMouseDown: (event: MouseEvent) => void;
+    handleFillHandleDoubleClick: (event: MouseEvent) => void;
+    isSelectEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    resolveSelectEditorValue: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => string;
+    resolveSelectEditorOptions: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => readonly DataGridTableStageSelectEditorOption[];
+    resolveSelectEditorOptionsLoader: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => DataGridTableStageSelectEditorOptionsLoader | undefined;
+    handleSelectEditorCommit: (value: string, target?: "stay" | "next" | "previous") => void;
+    handleSelectEditorCancel: () => void;
+    handleSelectEditorOptionsResolved: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, options: ReadonlyArray<DataGridFilterableComboboxOption>) => void;
+    isDateEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    resolveDateEditorInputType: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => "date" | "datetime-local";
+    handleDateEditorChange: (value: string, target?: "stay" | "next" | "previous") => void;
+    isTextEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    updateEditingCellValue: (value: string) => void;
+    handleEditorKeydown: (event: KeyboardEvent) => void;
+    handleTextEditorBlur: () => void;
+    shouldRenderCheckboxCell: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => boolean;
+    checkboxIndicatorClass: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => Record<string, boolean>;
+    checkboxIndicatorMarkClass: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => Record<string, boolean>;
+    readResolvedDisplayCell: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => string;
+    renderResolvedCellContent: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => VNodeChild;
+    handleCenterViewportScroll: (event: Event) => void;
+    handleBodyViewportWheel: (event: WheelEvent) => void;
+    handleViewportKeydown: (event: KeyboardEvent) => void;
+    handleLinkedViewportWheel: (event: WheelEvent) => void;
+}
+export declare function useDataGridStageRenderApis(options: UseDataGridStageRenderApisOptions): {
+    pinnedPaneRenderApi: import("vue").ComputedRef<DataGridTableStagePinnedPaneRenderApi>;
+    centerPaneRenderApi: import("vue").ComputedRef<DataGridTableStageCenterPaneRenderApi>;
+    paneRowStyle: (row: DataGridTableStageBodyRow, rowOffset: number, paneWidth: number) => CSSProperties;
+    spacerStyle: (width: number) => CSSProperties;
+};

package/dist/stage/useDataGridStageRenderApis.grouped.d.ts

@@ -0,0 +1,140 @@
+import { type CSSProperties, type Ref, type VNodeChild } from "vue";
+import type { DataGridTableStageCenterPaneRenderApi, DataGridTableStagePinnedPaneRenderApi } from "./dataGridTableStageBody.types";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow, DataGridTableStageSelectEditorOption, DataGridTableStageSelectEditorOptionsLoader } from "./dataGridTableStageBody.types";
+import type { DataGridFilterableComboboxOption } from "../overlays/dataGridFilterableCombobox";
+import type { DataGridTableMode, DataGridTableStageEditingSection } from "./dataGridTableStage.types";
+type RowRuntime = Readonly<Ref<{
+    rows: Readonly<Ref<{
+        rowStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+    }>>;
+    resolveAbsoluteRowIndex: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    resolveViewportRowOffset: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    rowStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    handleRowContainerClick: (row: DataGridTableStageBodyRow) => void;
+    setHoveredRow: (row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    isFullRowSelectionSafe: (rowOffset: number) => boolean;
+    rowIndexColumnStyle: Readonly<Ref<CSSProperties>>;
+    rowIndexCellClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    rowIndexCellStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+    rowIndexTabIndex: (row: DataGridTableStageBodyRow) => number;
+    isRowIndexDraggable: (row: DataGridTableStageBodyRow) => boolean;
+    handleRowIndexClickSafe: (row: DataGridTableStageBodyRow, rowOffset: number, event: MouseEvent) => void;
+    handleRowIndexKeydownSafe: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragStart: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragOver: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDrop: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    clearRowIndexDragState: () => void;
+    columnIndexByKey: (columnKey: string) => number;
+}>>;
+type CellRuntime = Readonly<Ref<{
+    visibleColumns: readonly DataGridTableStageBodyColumn[];
+    cells: {
+        isSelectionAnchorCell?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInFillPreview?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInPendingClipboardRange?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellOnPendingClipboardEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+        isCellOnSelectionEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+        readCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+        readDisplayCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+    };
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isEditingCellSafe: (row: DataGridTableStageBodyRow, columnKey: string) => boolean;
+    isCellSelectedSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isSelectionAnchorCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightSelectedCellVisual: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInFillPreviewSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInPendingClipboardRangeSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnPendingClipboardEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isCellOnSelectionEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isFillHandleCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isVisibleCellEditableByAbsoluteCoord: (rowIndex: number, columnIndex: number) => boolean;
+    builtInCellClasses: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => Record<string, boolean>;
+    cellStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => Record<string, boolean>;
+    resolveCellCustomClass: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => unknown;
+    columnStyle: (key: string) => CSSProperties;
+    bodyCellPresentationStyle: (column: DataGridTableStageBodyColumn) => CSSProperties;
+    bodyCellSelectionStyle: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number, columnIndex: number) => CSSProperties;
+    resolveCellCustomStyle: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => CSSProperties;
+    cellTabIndex: (rowOffset: number, columnIndex: number) => number;
+    cellAriaRole: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => string | undefined;
+    cellAriaChecked: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | "false" | "mixed" | undefined;
+    cellAriaPressed: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | "false" | "mixed" | undefined;
+    cellAriaLabel: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => string | undefined;
+    cellAriaDisabled: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => "true" | undefined;
+    handleCellMouseDown: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => void;
+    handleBodyCellClick: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => void;
+    handleCellMouseMove: (event: MouseEvent, rowOffset: number, columnIndex: number) => void;
+    clearRangeMoveHandleHover: () => void;
+    handleCellKeydown: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number, columnIndex: number) => void;
+    startInlineEditIfAllowed: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number) => void;
+    handleFillHandleMouseDown: (event: MouseEvent) => void;
+    handleFillHandleDoubleClick: (event: MouseEvent) => void;
+    shouldRenderCheckboxCell: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => boolean;
+    checkboxIndicatorClass: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => Record<string, boolean>;
+    checkboxIndicatorMarkClass: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => Record<string, boolean>;
+}>>;
+type EditorRuntime = Readonly<Ref<{
+    mode: DataGridTableMode;
+    rows: Readonly<Ref<{
+        rowClass: (row: DataGridTableStageBodyRow) => string;
+        rowStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+        isRowAutosizeProbe: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+        rowIndexLabel: (row: DataGridTableStageBodyRow, rowOffset: number) => string;
+        handleRowClick?: (row: DataGridTableStageBodyRow) => void;
+        isRowFocused?: (row: DataGridTableStageBodyRow) => boolean;
+        isRowCheckboxSelected?: (row: DataGridTableStageBodyRow) => boolean;
+        reorderRowsByIndex?: (payload: {
+            sourceRowId: string | number;
+            targetRowId: string | number;
+            placement: "before" | "after";
+        }) => boolean;
+        consumeRecentRowResizeInteraction?: () => boolean;
+        startRowResize: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+        autosizeRow: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+        showRowIndex?: boolean;
+        stripedRows?: boolean;
+        rowHover?: boolean;
+    }>>;
+    cells: Readonly<Ref<{
+        readCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+        readDisplayCell: (row: DataGridTableStageBodyRow, columnKey: string) => string;
+    }>>;
+    editing: Readonly<Ref<DataGridTableStageEditingSection<Record<string, unknown>>>>;
+    startInlineEditIfAllowed: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number) => void;
+    resolveCellEditorMode: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => "none" | "text" | "select" | "date" | "datetime";
+    resolveSelectEditorOptions: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => readonly DataGridTableStageSelectEditorOption[];
+    resolveSelectEditorOptionsLoader: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => DataGridTableStageSelectEditorOptionsLoader | undefined;
+    handleSelectEditorOptionsResolved: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, options: ReadonlyArray<DataGridFilterableComboboxOption>) => void;
+    readResolvedDisplayCell: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => string;
+    renderResolvedCellContent: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => VNodeChild;
+    resolveSelectEditorValue: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => string;
+    isSelectEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isDateEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    resolveDateEditorInputType: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => "date" | "datetime-local";
+    isTextEditorCell: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    handleSelectEditorCommit: (value: string, target?: "stay" | "next" | "previous") => void;
+    handleSelectEditorCancel: () => void;
+    handleDateEditorChange: (value: string, target?: "stay" | "next" | "previous") => void;
+    handleTextEditorBlur: () => void;
+    updateEditingCellValue: (value: string) => void;
+    handleEditorKeydown: (event: KeyboardEvent) => void;
+}>>;
+type ViewportRuntime = Readonly<Ref<{
+    handleCenterViewportScroll: (event: Event) => void;
+    handleBodyViewportWheel: (event: WheelEvent) => void;
+    handleViewportKeydown: (event: KeyboardEvent) => void;
+    handleLinkedViewportWheel: (event: WheelEvent) => void;
+}>>;
+export interface UseDataGridStageRenderApisOptions {
+    rowRuntime: RowRuntime;
+    cellRuntime: CellRuntime;
+    editorRuntime: EditorRuntime;
+    viewportRuntime: ViewportRuntime;
+}
+export declare function useDataGridStageRenderApis(options: UseDataGridStageRenderApisOptions): {
+    pinnedPaneRenderApi: import("vue").ComputedRef<DataGridTableStagePinnedPaneRenderApi>;
+    centerPaneRenderApi: import("vue").ComputedRef<DataGridTableStageCenterPaneRenderApi>;
+    paneRowStyle: (row: DataGridTableStageBodyRow, rowOffset: number, paneWidth: number) => CSSProperties;
+    spacerStyle: (width: number) => CSSProperties;
+};
+export {};

package/dist/stage/useDataGridStageRowIndex.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type Ref } from "vue";
+import type { DataGridOverlayRange } from "@affino/datagrid-vue";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow } from "./dataGridTableStageBody.types";
+import type { DataGridTableStageLayoutSection, DataGridTableStageRowsSection } from "./dataGridTableStage.types";
+export interface UseDataGridStageRowIndexOptions {
+    rows: Readonly<Ref<DataGridTableStageRowsSection<Record<string, unknown>>>>;
+    layout: Readonly<Ref<DataGridTableStageLayoutSection>>;
+    viewportRowStart: Readonly<Ref<number>>;
+    selectionRange: Readonly<Ref<DataGridOverlayRange | null>>;
+    visibleColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+    isHoveredRow: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+    isStripedRow: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+    resolveAbsoluteRowIndex: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    resolveInlineRowStateFill: (row: DataGridTableStageBodyRow, rowOffset: number, options?: {
+        fullBleed?: boolean;
+    }) => CSSProperties | null;
+    isDataGridPlaceholderSurfaceRow: (row: DataGridTableStageBodyRow) => boolean;
+}
+export interface UseDataGridStageRowIndexResult {
+    showRowIndex: Readonly<Ref<boolean>>;
+    indexColumnWidthPx: Readonly<Ref<number>>;
+    resolvedRowIndexColumnStyle: Readonly<Ref<CSSProperties>>;
+    rowIndexCellClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    rowIndexCellStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+    rowIndexTabIndex: (row: DataGridTableStageBodyRow) => number;
+    isFullRowSelectionSafe: (rowOffset: number, row?: DataGridTableStageBodyRow) => boolean;
+    isRowIndexDraggable: (row: DataGridTableStageBodyRow) => boolean;
+    handleRowClickSafe: (row: DataGridTableStageBodyRow) => void;
+    handleRowIndexClickSafe: (row: DataGridTableStageBodyRow, rowOffset: number, event: MouseEvent) => void;
+    handleRowIndexKeydownSafe: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragStart: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDragOver: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    handleRowIndexDrop: (event: DragEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    clearRowIndexDragState: () => void;
+}
+export declare function useDataGridStageRowIndex(options: UseDataGridStageRowIndexOptions): UseDataGridStageRowIndexResult;

package/dist/stage/useDataGridStageRowState.d.ts

@@ -0,0 +1,75 @@
+import { type CSSProperties, type Ref } from "vue";
+import type { DataGridTableStageBodyColumn, DataGridTableStageBodyRow } from "./dataGridTableStageBody.types";
+export interface UseDataGridStageRowStateOptions {
+    rows: Readonly<Ref<{
+        rowHover?: boolean;
+        stripedRows?: boolean;
+        isRowFocused?: (row: DataGridTableStageBodyRow) => boolean;
+        isRowCheckboxSelected?: (row: DataGridTableStageBodyRow) => boolean;
+        isRowInPendingClipboardCut?: (row: DataGridTableStageBodyRow) => boolean;
+        toggleGroupRow: (row: DataGridTableStageBodyRow) => void;
+    }>>;
+    selection: Readonly<Ref<{
+        selectionAnchorCell?: {
+            rowIndex: number;
+            columnIndex: number;
+        } | null;
+        fillActionAnchorCell?: {
+            rowIndex: number;
+            columnIndex: number;
+        } | null;
+        isFillHandleCell?: (rowOffset: number, columnIndex: number) => boolean;
+    }>>;
+    selectionRange: Readonly<Ref<{
+        startRow: number;
+        endRow: number;
+        startColumn: number;
+        endColumn: number;
+    } | null>>;
+    selectionRanges: Readonly<Ref<readonly {
+        startRow: number;
+        endRow: number;
+        startColumn: number;
+        endColumn: number;
+    }[]>>;
+    displayRows: Readonly<Ref<readonly DataGridTableStageBodyRow[]>>;
+    visibleColumns: Readonly<Ref<readonly DataGridTableStageBodyColumn[]>>;
+    viewportRowStart: Readonly<Ref<number>>;
+    isHoveredRow: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+    isStripedRow: (row: DataGridTableStageBodyRow, rowOffset: number) => boolean;
+    resolveAbsoluteRowIndex: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    isCellSelectedSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isEditingCellSafe: (row: DataGridTableStageBodyRow, columnKey: string) => boolean;
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    resolveCellEditorMode: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => "none" | "text" | "select" | "date" | "datetime";
+    startInlineEditIfAllowed: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number) => void;
+    handleCellClick: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => void;
+    hasExplicitGroupCellRenderer: Readonly<Ref<boolean>>;
+    cells: Readonly<Ref<{
+        isSelectionAnchorCell?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInFillPreview?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellInPendingClipboardRange?: (rowOffset: number, columnIndex: number) => boolean;
+        isCellOnPendingClipboardEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+        isCellOnSelectionEdge?: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    }>>;
+}
+export interface UseDataGridStageRowStateResult {
+    rowStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    resolveInlineRowStateFill: (row: DataGridTableStageBodyRow, rowOffset: number, options?: {
+        fullBleed?: boolean;
+    }) => CSSProperties | null;
+    bodyCellSelectionStyle: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn, rowOffset: number, columnIndex: number) => CSSProperties;
+    handleBodyCellClick: (event: MouseEvent, row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => void;
+    isVisualSelectionAnchorCell: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightSelectedCellVisual: (rowOffset: number, columnIndex: number) => boolean;
+    isSelectionAnchorCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInFillPreviewSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInPendingClipboardRangeSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnPendingClipboardEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isCellOnSelectionEdgeSafe: (rowOffset: number, columnIndex: number, edge: "top" | "right" | "bottom" | "left") => boolean;
+    isFillHandleCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isVisibleCellEditableByAbsoluteCoord: (rowIndex: number, columnIndex: number) => boolean;
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isEditingCellSafe: (row: DataGridTableStageBodyRow, columnKey: string) => boolean;
+}
+export declare function useDataGridStageRowState(options: UseDataGridStageRowStateOptions): UseDataGridStageRowStateResult;

package/dist/stage/useDataGridStageViewportRuntime.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPublicInstance, type Ref } from "vue";
+import type { DataGridTableStageViewportSection } from "./dataGridTableStage.types";
+export interface UseDataGridStageViewportRuntimeSyncers {
+    syncBodyViewportMetrics: () => void;
+    syncPinnedBottomViewportMetrics: () => void;
+    syncPinnedBottomViewportScrollLeft: () => void;
+    scheduleGridChromeRedraw: (mode?: "full" | "center-scroll") => void;
+    flushGridChromeRedraw: (mode?: "full" | "center-scroll") => void;
+    connectGridChromeResizeObserver: () => void;
+    disconnectGridChromeResizeObserver: () => void;
+}
+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>>;
+}
+export interface UseDataGridStageViewportRuntimeResult {
+    bodyViewportEl: Ref<HTMLElement | null>;
+    bottomViewportEl: Ref<HTMLElement | null>;
+    bodyViewportScrollTop: Ref<number>;
+    bodyViewportScrollLeft: Ref<number>;
+    bodyViewportClientWidth: Ref<number>;
+    bodyViewportClientHeight: Ref<number>;
+    pinnedBottomViewportClientHeight: Ref<number>;
+    bodyViewportTopOffset: Ref<number>;
+    headerShellHeight: Ref<number>;
+    headerViewportClientWidth: Ref<number>;
+    captureBodyViewportRef: (value: Element | ComponentPublicInstance | null) => void;
+    capturePinnedBottomViewportRef: (value: Element | ComponentPublicInstance | null) => void;
+    handleCenterViewportScroll: (event: Event) => void;
+    handlePinnedBottomViewportScroll: (event: Event) => void;
+    handleLinkedViewportWheel: (event: WheelEvent) => void;
+    handleBodyViewportWheel: (event: WheelEvent) => void;
+}
+export declare function useDataGridStageViewportRuntime(options: UseDataGridStageViewportRuntimeOptions): UseDataGridStageViewportRuntimeResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affino/datagrid-vue-app",
-  "version": "0.1.53",
+  "version": "0.1.56",
   "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.3",
     "@affino/datagrid-chrome": "0.1.1",
-    "@affino/datagrid-gantt": "0.1.2",
-    "@affino/datagrid-vue": "0.3.38",
-    "@affino/datagrid-theme": "0.2.2"
+    "@affino/datagrid-vue": "0.3.40",
+    "@affino/datagrid-gantt": "0.1.2"
   },
   "peerDependencies": {
     "vue": "^3.3.0"