@affino/datagrid-vue-app 0.1.1

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

@@ -0,0 +1,160 @@
+import type { ComponentPublicInstance, CSSProperties, Ref } from "vue";
+import type { DataGridColumnPin, DataGridColumnSnapshot, DataGridOverlayRange, DataGridRowNode } from "@affino/datagrid-vue";
+import type { DataGridFillBehavior } from "@affino/datagrid-vue/advanced";
+import type { DataGridColumnMenuActionOptions, DataGridColumnMenuDisabledReasons, DataGridColumnMenuItemKey, DataGridColumnMenuItemLabels } from "../overlays/dataGridColumnMenu";
+export type DataGridTableMode = "base" | "tree" | "pivot" | "worker";
+export type DataGridPendingEdge = "top" | "right" | "bottom" | "left";
+export type DataGridTableRow<TRow extends Record<string, unknown>> = DataGridRowNode<TRow>;
+export type DataGridElementRefHandler = (value: Element | ComponentPublicInstance | null) => void;
+export type DataGridMaybeRef<T> = T | Ref<T>;
+export type DataGridTableStageCellClass = string | readonly string[] | Readonly<Record<string, boolean>>;
+export interface DataGridTableStageAnchorCell {
+    rowIndex: number;
+    columnIndex: number;
+}
+export interface DataGridTableStageLayoutSection {
+    gridContentStyle: CSSProperties;
+    mainTrackStyle: CSSProperties;
+    indexColumnStyle: CSSProperties;
+    columnStyle: (key: string) => CSSProperties;
+}
+export interface DataGridTableStageViewportSection {
+    topSpacerHeight: number;
+    bottomSpacerHeight: number;
+    viewportRowStart: number;
+    columnWindowStart: number;
+    leftColumnSpacerWidth: number;
+    rightColumnSpacerWidth: number;
+    headerViewportRef: DataGridElementRefHandler;
+    bodyViewportRef: DataGridElementRefHandler;
+    handleHeaderWheel: (event: WheelEvent) => void;
+    handleHeaderScroll: (event: Event) => void;
+    handleViewportScroll: (event: Event) => void;
+    handleViewportKeydown: (event: KeyboardEvent) => void;
+}
+export interface DataGridTableStageColumnsSection {
+    visibleColumns: readonly DataGridColumnSnapshot[];
+    renderedColumns: readonly DataGridColumnSnapshot[];
+    columnFilterTextByKey: Readonly<Record<string, string>>;
+    toggleSortForColumn: (columnKey: string, additive?: boolean) => void;
+    sortIndicator: (columnKey: string) => string;
+    setColumnFilterText: (columnKey: string, value: string) => void;
+    columnMenuEnabled?: boolean;
+    columnMenuValueFilterEnabled?: boolean;
+    columnMenuValueFilterRowLimit?: number;
+    columnMenuMaxFilterValues?: number;
+    resolveColumnMenuItems?: (columnKey: string) => readonly DataGridColumnMenuItemKey[];
+    resolveColumnMenuDisabledItems?: (columnKey: string) => readonly DataGridColumnMenuItemKey[];
+    resolveColumnMenuDisabledReasons?: (columnKey: string) => DataGridColumnMenuDisabledReasons;
+    resolveColumnMenuLabels?: (columnKey: string) => DataGridColumnMenuItemLabels;
+    resolveColumnMenuActionOptions?: (columnKey: string) => DataGridColumnMenuActionOptions;
+    isColumnFilterActive?: (columnKey: string) => boolean;
+    isColumnGrouped?: (columnKey: string) => boolean;
+    resolveColumnGroupOrder?: (columnKey: string) => number | null;
+    resolveColumnMenuSortDirection?: (columnKey: string) => "asc" | "desc" | null;
+    resolveColumnMenuSelectedTokens?: (columnKey: string) => readonly string[];
+    applyColumnMenuSort?: (columnKey: string, direction: "asc" | "desc" | null) => void;
+    applyColumnMenuPin?: (columnKey: string, pin: DataGridColumnPin) => void;
+    applyColumnMenuGroupBy?: (columnKey: string, grouped: boolean) => void;
+    applyColumnMenuFilter?: (columnKey: string, tokens: readonly string[]) => void;
+    clearColumnMenuFilter?: (columnKey: string) => void;
+    startResize: (event: MouseEvent, columnKey: string) => void;
+    handleResizeDoubleClick: (event: MouseEvent, columnKey: string) => void;
+}
+export interface DataGridTableStageRowsSection<TRow extends Record<string, unknown>> {
+    displayRows: readonly DataGridTableRow<TRow>[];
+    pinnedBottomRows: readonly DataGridTableRow<TRow>[];
+    sourceRows?: readonly TRow[];
+    showRowIndex?: boolean;
+    rowHover?: boolean;
+    stripedRows?: boolean;
+    rowClass: (row: DataGridTableRow<TRow>) => string;
+    isRowAutosizeProbe: (row: DataGridTableRow<TRow>, rowOffset: number) => boolean;
+    rowStyle: (row: DataGridTableRow<TRow>, rowOffset: number) => CSSProperties;
+    isRowInPendingClipboardCut?: (row: DataGridTableRow<TRow>) => boolean;
+    isRowFocused?: (row: DataGridTableRow<TRow>) => boolean;
+    isRowCheckboxSelected?: (row: DataGridTableRow<TRow>) => boolean;
+    allVisibleRowsSelected?: boolean;
+    someVisibleRowsSelected?: boolean;
+    handleRowClick?: (row: DataGridTableRow<TRow>) => void;
+    handleRowIndexClick?: (row: DataGridTableRow<TRow>, rowOffset: number, extend: boolean) => void;
+    handleRowIndexKeydown?: (event: KeyboardEvent, row: DataGridTableRow<TRow>, rowOffset: number) => void;
+    handleToggleAllVisibleRows?: () => void;
+    toggleGroupRow: (row: DataGridTableRow<TRow>) => void;
+    rowIndexLabel: (row: DataGridTableRow<TRow>, rowOffset: number) => string;
+    startRowResize: (event: MouseEvent, row: DataGridTableRow<TRow>, rowOffset: number) => void;
+    autosizeRow: (event: MouseEvent, row: DataGridTableRow<TRow>, rowOffset: number) => void;
+}
+export interface DataGridTableStageSelectionSection {
+    selectionRange: DataGridOverlayRange | null;
+    selectionAnchorCell?: DataGridTableStageAnchorCell | null;
+    fillPreviewRange: DataGridOverlayRange | null;
+    rangeMovePreviewRange: DataGridOverlayRange | null;
+    isFillDragging: boolean;
+    isRangeMoving: boolean;
+    fillActionAnchorCell?: DataGridTableStageAnchorCell | null;
+    fillActionBehavior?: DataGridFillBehavior | null;
+    applyFillActionBehavior: (behavior: DataGridFillBehavior) => void;
+    isFillHandleCell: (rowOffset: number, columnIndex: number) => boolean;
+    startFillHandleDrag: (event: MouseEvent) => void;
+    startFillHandleDoubleClick: (event: MouseEvent) => void;
+}
+export interface DataGridTableStageEditingSection<TRow extends Record<string, unknown>> {
+    editingCellValue: string;
+    editingCellInitialFilter: string;
+    editingCellOpenOnMount: boolean;
+    isEditingCell: (row: DataGridTableRow<TRow>, columnKey: string) => boolean;
+    startInlineEdit: (row: DataGridTableRow<TRow>, columnKey: string, options?: {
+        draftValue?: string;
+        openOnMount?: boolean;
+    }) => void;
+    updateEditingCellValue: (value: string) => void;
+    handleEditorKeydown: (event: KeyboardEvent) => void;
+    commitInlineEdit: (target?: "stay" | "next" | "previous") => void;
+    cancelInlineEdit: () => void;
+}
+export interface DataGridTableStageCellsSection<TRow extends Record<string, unknown>> {
+    cellClass?: (row: DataGridTableRow<TRow>, rowOffset: number, column: DataGridColumnSnapshot, columnIndex: number) => DataGridTableStageCellClass | null | undefined;
+    cellStyle?: (row: DataGridTableRow<TRow>, rowOffset: number, column: DataGridColumnSnapshot, columnIndex: number) => CSSProperties | null | undefined;
+    isCellSelected: (rowOffset: number, columnIndex: number) => boolean;
+    isSelectionAnchorCell: (rowOffset: number, columnIndex: number) => boolean;
+    shouldHighlightSelectedCell: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnSelectionEdge: (rowOffset: number, columnIndex: number, edge: DataGridPendingEdge) => boolean;
+    isCellInFillPreview: (rowOffset: number, columnIndex: number) => boolean;
+    isCellInPendingClipboardRange: (rowOffset: number, columnIndex: number) => boolean;
+    isCellOnPendingClipboardEdge: (rowOffset: number, columnIndex: number, edge: DataGridPendingEdge) => boolean;
+    isCellEditable: (row: DataGridTableRow<TRow>, rowOffset: number, column: DataGridColumnSnapshot, columnIndex: number) => boolean;
+    readCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+    readDisplayCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+}
+export interface DataGridTableStageInteractionSection<TRow extends Record<string, unknown>> {
+    handleCellMouseDown: (event: MouseEvent, row: DataGridTableRow<TRow>, rowOffset: number, columnIndex: number) => void;
+    handleCellClick: (row: DataGridTableRow<TRow>, rowOffset: number, column: DataGridColumnSnapshot, columnIndex: number) => void;
+    handleCellKeydown: (event: KeyboardEvent, row: DataGridTableRow<TRow>, rowOffset: number, columnIndex: number) => void;
+}
+export interface DataGridTableStageSectionedProps<TRow extends Record<string, unknown>> {
+    layout: DataGridTableStageLayoutSection;
+    viewport: DataGridTableStageViewportSection;
+    columns: DataGridTableStageColumnsSection;
+    rows: DataGridTableStageRowsSection<TRow>;
+    selection: DataGridTableStageSelectionSection;
+    editing: DataGridTableStageEditingSection<TRow>;
+    cells: DataGridTableStageCellsSection<TRow>;
+    interaction: DataGridTableStageInteractionSection<TRow>;
+}
+export interface DataGridTableStageProps<TRow extends Record<string, unknown>> extends DataGridTableStageSectionedProps<TRow> {
+    mode: DataGridTableMode;
+    rowHeightMode: "fixed" | "auto";
+}
+interface DataGridTableStageBindingsSource<TRow extends Record<string, unknown>> extends DataGridTableStageLayoutSection, DataGridTableStageViewportSection, DataGridTableStageColumnsSection, DataGridTableStageRowsSection<TRow>, DataGridTableStageSelectionSection, DataGridTableStageEditingSection<TRow>, DataGridTableStageCellsSection<TRow>, DataGridTableStageInteractionSection<TRow> {
+    mode: DataGridTableMode;
+    rowHeightMode: "fixed" | "auto";
+}
+export interface UseDataGridTableStageBindingsOptions<TRow extends Record<string, unknown>> extends Omit<{
+    [K in keyof DataGridTableStageBindingsSource<TRow>]: DataGridMaybeRef<DataGridTableStageBindingsSource<TRow>[K]>;
+}, "editingCellValue" | "headerViewportRef" | "bodyViewportRef" | "updateEditingCellValue"> {
+    editingCellValueRef: Ref<string>;
+    headerViewportRef: Ref<HTMLElement | null>;
+    bodyViewportRef: Ref<HTMLElement | null>;
+}
+export {};

package/dist/stage/dataGridTableStage.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,105 @@
+import type { ComponentPublicInstance, CSSProperties } from "vue";
+import type { DataGridColumnSnapshot } from "@affino/datagrid-vue";
+import type { DataGridFilterableComboboxOption } from "../overlays/dataGridFilterableCombobox";
+import type { DataGridTableRow } from "./dataGridTableStage.types";
+export type DataGridTableStageBodyRow = DataGridTableRow<Record<string, unknown>>;
+export type DataGridTableStageBodyColumn = DataGridColumnSnapshot & {
+    column: DataGridColumnSnapshot["column"] & {
+        presentation?: {
+            align?: "left" | "center" | "right";
+            headerAlign?: "left" | "center" | "right";
+        };
+        capabilities?: {
+            editable?: boolean;
+            sortable?: boolean;
+            filterable?: boolean;
+        };
+    };
+};
+export type DataGridTableStageOverlaySegment = {
+    key: string;
+    style: CSSProperties;
+};
+export type DataGridTableStageSelectEditorOption = {
+    label: string;
+    value: string;
+};
+export type DataGridTableStageSelectEditorOptionsLoader = (query: string) => Promise<readonly DataGridTableStageSelectEditorOption[]>;
+export interface DataGridTableStageBodyRenderApiBase {
+    absoluteRowIndex: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    viewportRowOffset: (row: DataGridTableStageBodyRow, rowOffset: number) => number;
+    rowStateClasses: (row: DataGridTableStageBodyRow, rowOffset: number) => Record<string, boolean>;
+    handleRowContainerClick: (row: DataGridTableStageBodyRow) => void;
+    setHoveredRow: (row: DataGridTableStageBodyRow, rowOffset: number) => void;
+    builtInCellClasses: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => 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;
+    columnIndexByKey: (columnKey: string) => number;
+    cellTabIndex: (rowOffset: number, columnIndex: number) => number;
+    checkboxCellRole: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => string | undefined;
+    checkboxCellAriaChecked: (row: DataGridTableStageBodyRow, column: DataGridTableStageBodyColumn) => "true" | "false" | 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;
+    isCellEditableSafe: (row: DataGridTableStageBodyRow, rowOffset: number, column: DataGridTableStageBodyColumn, columnIndex: number) => boolean;
+    isFillHandleCellSafe: (rowOffset: number, columnIndex: number) => boolean;
+    isEditingCellSafe: (row: DataGridTableStageBodyRow, columnKey: string) => boolean;
+    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;
+}
+export interface DataGridTableStageCenterPaneRenderApi extends DataGridTableStageBodyRenderApiBase {
+    handleCenterViewportScroll: (event: Event) => void;
+    handleBodyViewportWheel: (event: WheelEvent) => void;
+    handleViewportKeydown: (event: KeyboardEvent) => void;
+    spacerStyle: (width: number) => CSSProperties;
+}
+export interface DataGridTableStagePinnedPaneProps {
+    side: "left" | "right";
+    width: number;
+    style: CSSProperties;
+    contentStyle: CSSProperties;
+    contentRef?: (value: Element | ComponentPublicInstance | null) => void;
+    columns: readonly DataGridTableStageBodyColumn[];
+    showIndexColumn: boolean;
+    displayRows: readonly DataGridTableStageBodyRow[];
+    topSpacerHeight?: number;
+    bottomSpacerHeight?: number;
+    selectionOverlaySegments: readonly DataGridTableStageOverlaySegment[];
+    fillPreviewOverlaySegments: readonly DataGridTableStageOverlaySegment[];
+    movePreviewOverlaySegments: readonly DataGridTableStageOverlaySegment[];
+}
+export interface DataGridTableStagePinnedPaneRenderApi extends DataGridTableStageBodyRenderApiBase {
+    handleLinkedViewportWheel: (event: WheelEvent) => void;
+    paneRowStyle: (row: DataGridTableStageBodyRow, rowOffset: number, paneWidth: number) => CSSProperties;
+    isFullRowSelectionSafe: (rowOffset: number) => boolean;
+    rowIndexColumnStyle: CSSProperties;
+    rowIndexCellStyle: (row: DataGridTableStageBodyRow, rowOffset: number) => CSSProperties;
+    rowIndexTabIndex: (row: DataGridTableStageBodyRow) => number;
+    handleRowIndexClickSafe: (row: DataGridTableStageBodyRow, rowOffset: number, event: MouseEvent) => void;
+    handleRowIndexKeydown: (event: KeyboardEvent, row: DataGridTableStageBodyRow, rowOffset: number) => void;
+}

package/dist/stage/dataGridTableStageBody.types.js

@@ -0,0 +1 @@
+export {};

package/dist/stage/dataGridTableStageContext.d.ts

@@ -0,0 +1,45 @@
+import { type InjectionKey, type Ref } from "vue";
+import type { DataGridTableStageProps } from "./dataGridTableStage.types";
+export type DataGridTableStageSectionKey = "layout" | "viewport" | "columns" | "rows" | "selection" | "editing" | "cells" | "interaction";
+export interface DataGridTableStageContext<TRow extends Record<string, unknown>> {
+    mode: Readonly<Ref<DataGridTableStageProps<TRow>["mode"]>>;
+    rowHeightMode: Readonly<Ref<DataGridTableStageProps<TRow>["rowHeightMode"]>>;
+    layout: Readonly<Ref<DataGridTableStageProps<TRow>["layout"]>>;
+    viewport: Readonly<Ref<DataGridTableStageProps<TRow>["viewport"]>>;
+    columns: Readonly<Ref<DataGridTableStageProps<TRow>["columns"]>>;
+    rows: Readonly<Ref<DataGridTableStageProps<TRow>["rows"]>>;
+    selection: Readonly<Ref<DataGridTableStageProps<TRow>["selection"]>>;
+    editing: Readonly<Ref<DataGridTableStageProps<TRow>["editing"]>>;
+    cells: Readonly<Ref<DataGridTableStageProps<TRow>["cells"]>>;
+    interaction: Readonly<Ref<DataGridTableStageProps<TRow>["interaction"]>>;
+}
+export interface DataGridTableStageContextSource<TRow extends Record<string, unknown>> {
+    mode: Ref<DataGridTableStageProps<TRow>["mode"]>;
+    rowHeightMode: Ref<DataGridTableStageProps<TRow>["rowHeightMode"]>;
+    layout: Ref<DataGridTableStageProps<TRow>["layout"]>;
+    viewport: Ref<DataGridTableStageProps<TRow>["viewport"]>;
+    columns: Ref<DataGridTableStageProps<TRow>["columns"]>;
+    rows: Ref<DataGridTableStageProps<TRow>["rows"]>;
+    selection: Ref<DataGridTableStageProps<TRow>["selection"]>;
+    editing: Ref<DataGridTableStageProps<TRow>["editing"]>;
+    cells: Ref<DataGridTableStageProps<TRow>["cells"]>;
+    interaction: Ref<DataGridTableStageProps<TRow>["interaction"]>;
+}
+export type AnyDataGridTableStageContext = DataGridTableStageContext<Record<string, unknown>>;
+export declare const dataGridTableStageContextKey: InjectionKey<AnyDataGridTableStageContext>;
+export declare function createDataGridTableStageContext<TRow extends Record<string, unknown>>(source: DataGridTableStageContextSource<TRow>): DataGridTableStageContext<TRow>;
+export declare function createDataGridTableStageContextFromProps<TRow extends Record<string, unknown>>(props: DataGridTableStageProps<TRow>): DataGridTableStageContext<TRow>;
+export declare function materializeDataGridTableStagePropsFromContext<TRow extends Record<string, unknown>>(context: DataGridTableStageContext<TRow>): DataGridTableStageProps<TRow>;
+export declare function provideDataGridTableStageContext<TRow extends Record<string, unknown>>(context: DataGridTableStageContext<TRow>): DataGridTableStageContext<TRow>;
+export declare function useDataGridTableStageContext<TRow extends Record<string, unknown>>(): DataGridTableStageContext<TRow>;
+export declare function useDataGridTableStageMode<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableMode>>;
+export declare function useDataGridTableStageRowHeightMode<TRow extends Record<string, unknown>>(): Readonly<Ref<"fixed" | "auto">>;
+export declare function useDataGridTableStageSection<TRow extends Record<string, unknown>, TSectionKey extends DataGridTableStageSectionKey>(sectionKey: TSectionKey): DataGridTableStageContext<TRow>[TSectionKey];
+export declare function useDataGridTableStageLayoutSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageLayoutSection>>;
+export declare function useDataGridTableStageViewportSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageViewportSection>>;
+export declare function useDataGridTableStageColumnsSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageColumnsSection>>;
+export declare function useDataGridTableStageRowsSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageRowsSection<TRow>>>;
+export declare function useDataGridTableStageSelectionSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageSelectionSection>>;
+export declare function useDataGridTableStageEditingSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageEditingSection<TRow>>>;
+export declare function useDataGridTableStageCellsSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageCellsSection<TRow>>>;
+export declare function useDataGridTableStageInteractionSection<TRow extends Record<string, unknown>>(): Readonly<Ref<import("./dataGridTableStage.types").DataGridTableStageInteractionSection<TRow>>>;

package/dist/stage/dataGridTableStageContext.js

@@ -0,0 +1,88 @@
+import { inject, provide, toRef, } from "vue";
+export const dataGridTableStageContextKey = Symbol("data-grid-table-stage-context");
+export function createDataGridTableStageContext(source) {
+    return {
+        mode: source.mode,
+        rowHeightMode: source.rowHeightMode,
+        layout: source.layout,
+        viewport: source.viewport,
+        columns: source.columns,
+        rows: source.rows,
+        selection: source.selection,
+        editing: source.editing,
+        cells: source.cells,
+        interaction: source.interaction,
+    };
+}
+export function createDataGridTableStageContextFromProps(props) {
+    return createDataGridTableStageContext({
+        mode: toRef(props, "mode"),
+        rowHeightMode: toRef(props, "rowHeightMode"),
+        layout: toRef(props, "layout"),
+        viewport: toRef(props, "viewport"),
+        columns: toRef(props, "columns"),
+        rows: toRef(props, "rows"),
+        selection: toRef(props, "selection"),
+        editing: toRef(props, "editing"),
+        cells: toRef(props, "cells"),
+        interaction: toRef(props, "interaction"),
+    });
+}
+export function materializeDataGridTableStagePropsFromContext(context) {
+    return {
+        mode: context.mode.value,
+        rowHeightMode: context.rowHeightMode.value,
+        layout: context.layout.value,
+        viewport: context.viewport.value,
+        columns: context.columns.value,
+        rows: context.rows.value,
+        selection: context.selection.value,
+        editing: context.editing.value,
+        cells: context.cells.value,
+        interaction: context.interaction.value,
+    };
+}
+export function provideDataGridTableStageContext(context) {
+    provide(dataGridTableStageContextKey, context);
+    return context;
+}
+export function useDataGridTableStageContext() {
+    const context = inject(dataGridTableStageContextKey);
+    if (!context) {
+        throw new Error("DataGrid table stage context is not available outside of DataGridTableStage.");
+    }
+    return context;
+}
+export function useDataGridTableStageMode() {
+    return useDataGridTableStageContext().mode;
+}
+export function useDataGridTableStageRowHeightMode() {
+    return useDataGridTableStageContext().rowHeightMode;
+}
+export function useDataGridTableStageSection(sectionKey) {
+    return useDataGridTableStageContext()[sectionKey];
+}
+export function useDataGridTableStageLayoutSection() {
+    return useDataGridTableStageSection("layout");
+}
+export function useDataGridTableStageViewportSection() {
+    return useDataGridTableStageSection("viewport");
+}
+export function useDataGridTableStageColumnsSection() {
+    return useDataGridTableStageSection("columns");
+}
+export function useDataGridTableStageRowsSection() {
+    return useDataGridTableStageSection("rows");
+}
+export function useDataGridTableStageSelectionSection() {
+    return useDataGridTableStageSection("selection");
+}
+export function useDataGridTableStageEditingSection() {
+    return useDataGridTableStageSection("editing");
+}
+export function useDataGridTableStageCellsSection() {
+    return useDataGridTableStageSection("cells");
+}
+export function useDataGridTableStageInteractionSection() {
+    return useDataGridTableStageSection("interaction");
+}

package/dist/stage/useDataGridTableStageBindings.d.ts

@@ -0,0 +1,11 @@
+import { type ComputedRef } from "vue";
+import { type DataGridTableStageContext } from "./dataGridTableStageContext";
+import type { DataGridElementRefHandler, DataGridTableStageProps, UseDataGridTableStageBindingsOptions } from "./dataGridTableStage.types";
+export interface UseDataGridTableStageBindingsResult<TRow extends Record<string, unknown>> {
+    tableStageProps: ComputedRef<DataGridTableStageProps<TRow>>;
+    tableStageContext: DataGridTableStageContext<TRow>;
+    captureHeaderViewportRef: DataGridElementRefHandler;
+    captureBodyViewportRef: DataGridElementRefHandler;
+    updateEditingCellValue: (value: string) => void;
+}
+export declare function useDataGridTableStageBindings<TRow extends Record<string, unknown>>(options: UseDataGridTableStageBindingsOptions<TRow>): UseDataGridTableStageBindingsResult<TRow>;

package/dist/stage/useDataGridTableStageBindings.js

@@ -0,0 +1,162 @@
+import { computed, unref } from "vue";
+import { createDataGridTableStageContext } from "./dataGridTableStageContext";
+function createElementRefHandler(target) {
+    return value => {
+        target.value = value instanceof HTMLElement ? value : null;
+    };
+}
+export function useDataGridTableStageBindings(options) {
+    const captureHeaderViewportRef = createElementRefHandler(options.headerViewportRef);
+    const captureBodyViewportRef = createElementRefHandler(options.bodyViewportRef);
+    const updateEditingCellValue = (value) => {
+        options.editingCellValueRef.value = value;
+    };
+    const layoutSection = computed(() => ({
+        gridContentStyle: unref(options.gridContentStyle),
+        mainTrackStyle: unref(options.mainTrackStyle),
+        indexColumnStyle: unref(options.indexColumnStyle),
+        columnStyle: unref(options.columnStyle),
+    }));
+    const viewportSection = computed(() => ({
+        topSpacerHeight: unref(options.topSpacerHeight),
+        bottomSpacerHeight: unref(options.bottomSpacerHeight),
+        viewportRowStart: unref(options.viewportRowStart),
+        columnWindowStart: unref(options.columnWindowStart),
+        leftColumnSpacerWidth: unref(options.leftColumnSpacerWidth),
+        rightColumnSpacerWidth: unref(options.rightColumnSpacerWidth),
+        headerViewportRef: captureHeaderViewportRef,
+        bodyViewportRef: captureBodyViewportRef,
+        handleHeaderWheel: unref(options.handleHeaderWheel),
+        handleHeaderScroll: unref(options.handleHeaderScroll),
+        handleViewportScroll: unref(options.handleViewportScroll),
+        handleViewportKeydown: unref(options.handleViewportKeydown),
+    }));
+    const columnsSection = computed(() => ({
+        visibleColumns: unref(options.visibleColumns),
+        renderedColumns: unref(options.renderedColumns),
+        columnFilterTextByKey: unref(options.columnFilterTextByKey),
+        toggleSortForColumn: unref(options.toggleSortForColumn),
+        sortIndicator: unref(options.sortIndicator),
+        setColumnFilterText: unref(options.setColumnFilterText),
+        columnMenuEnabled: unref(options.columnMenuEnabled),
+        columnMenuValueFilterEnabled: unref(options.columnMenuValueFilterEnabled),
+        columnMenuValueFilterRowLimit: unref(options.columnMenuValueFilterRowLimit),
+        columnMenuMaxFilterValues: unref(options.columnMenuMaxFilterValues),
+        resolveColumnMenuItems: unref(options.resolveColumnMenuItems),
+        resolveColumnMenuDisabledItems: unref(options.resolveColumnMenuDisabledItems),
+        resolveColumnMenuDisabledReasons: unref(options.resolveColumnMenuDisabledReasons),
+        resolveColumnMenuLabels: unref(options.resolveColumnMenuLabels),
+        resolveColumnMenuActionOptions: unref(options.resolveColumnMenuActionOptions),
+        isColumnFilterActive: unref(options.isColumnFilterActive),
+        isColumnGrouped: unref(options.isColumnGrouped),
+        resolveColumnGroupOrder: unref(options.resolveColumnGroupOrder),
+        resolveColumnMenuSortDirection: unref(options.resolveColumnMenuSortDirection),
+        resolveColumnMenuSelectedTokens: unref(options.resolveColumnMenuSelectedTokens),
+        applyColumnMenuSort: unref(options.applyColumnMenuSort),
+        applyColumnMenuPin: unref(options.applyColumnMenuPin),
+        applyColumnMenuGroupBy: unref(options.applyColumnMenuGroupBy),
+        applyColumnMenuFilter: unref(options.applyColumnMenuFilter),
+        clearColumnMenuFilter: unref(options.clearColumnMenuFilter),
+        startResize: unref(options.startResize),
+        handleResizeDoubleClick: unref(options.handleResizeDoubleClick),
+    }));
+    const rowsSection = computed(() => ({
+        displayRows: unref(options.displayRows),
+        pinnedBottomRows: unref(options.pinnedBottomRows),
+        sourceRows: unref(options.sourceRows),
+        showRowIndex: unref(options.showRowIndex),
+        rowHover: unref(options.rowHover),
+        stripedRows: unref(options.stripedRows),
+        rowClass: unref(options.rowClass),
+        isRowAutosizeProbe: unref(options.isRowAutosizeProbe),
+        rowStyle: unref(options.rowStyle),
+        isRowInPendingClipboardCut: unref(options.isRowInPendingClipboardCut),
+        isRowFocused: unref(options.isRowFocused),
+        isRowCheckboxSelected: unref(options.isRowCheckboxSelected),
+        allVisibleRowsSelected: unref(options.allVisibleRowsSelected),
+        someVisibleRowsSelected: unref(options.someVisibleRowsSelected),
+        handleRowClick: unref(options.handleRowClick),
+        handleRowIndexClick: unref(options.handleRowIndexClick),
+        handleRowIndexKeydown: unref(options.handleRowIndexKeydown),
+        handleToggleAllVisibleRows: unref(options.handleToggleAllVisibleRows),
+        toggleGroupRow: unref(options.toggleGroupRow),
+        rowIndexLabel: unref(options.rowIndexLabel),
+        startRowResize: unref(options.startRowResize),
+        autosizeRow: unref(options.autosizeRow),
+    }));
+    const selectionSection = computed(() => ({
+        selectionRange: unref(options.selectionRange),
+        selectionAnchorCell: unref(options.selectionAnchorCell),
+        fillPreviewRange: unref(options.fillPreviewRange),
+        rangeMovePreviewRange: unref(options.rangeMovePreviewRange),
+        isFillDragging: unref(options.isFillDragging),
+        isRangeMoving: unref(options.isRangeMoving),
+        fillActionAnchorCell: unref(options.fillActionAnchorCell),
+        fillActionBehavior: unref(options.fillActionBehavior),
+        applyFillActionBehavior: unref(options.applyFillActionBehavior),
+        isFillHandleCell: unref(options.isFillHandleCell),
+        startFillHandleDrag: unref(options.startFillHandleDrag),
+        startFillHandleDoubleClick: unref(options.startFillHandleDoubleClick),
+    }));
+    const editingSection = computed(() => ({
+        editingCellValue: options.editingCellValueRef.value,
+        editingCellInitialFilter: unref(options.editingCellInitialFilter),
+        editingCellOpenOnMount: unref(options.editingCellOpenOnMount),
+        isEditingCell: unref(options.isEditingCell),
+        startInlineEdit: unref(options.startInlineEdit),
+        updateEditingCellValue,
+        handleEditorKeydown: unref(options.handleEditorKeydown),
+        commitInlineEdit: unref(options.commitInlineEdit),
+        cancelInlineEdit: unref(options.cancelInlineEdit),
+    }));
+    const cellsSection = computed(() => ({
+        cellClass: unref(options.cellClass),
+        cellStyle: unref(options.cellStyle),
+        isCellSelected: unref(options.isCellSelected),
+        isSelectionAnchorCell: unref(options.isSelectionAnchorCell),
+        shouldHighlightSelectedCell: unref(options.shouldHighlightSelectedCell),
+        isCellOnSelectionEdge: unref(options.isCellOnSelectionEdge),
+        isCellInFillPreview: unref(options.isCellInFillPreview),
+        isCellInPendingClipboardRange: unref(options.isCellInPendingClipboardRange),
+        isCellOnPendingClipboardEdge: unref(options.isCellOnPendingClipboardEdge),
+        isCellEditable: unref(options.isCellEditable),
+        readCell: unref(options.readCell),
+        readDisplayCell: unref(options.readDisplayCell),
+    }));
+    const interactionSection = computed(() => ({
+        handleCellMouseDown: unref(options.handleCellMouseDown),
+        handleCellClick: unref(options.handleCellClick),
+        handleCellKeydown: unref(options.handleCellKeydown),
+    }));
+    const tableStageProps = computed(() => ({
+        mode: unref(options.mode),
+        rowHeightMode: unref(options.rowHeightMode),
+        layout: layoutSection.value,
+        viewport: viewportSection.value,
+        columns: columnsSection.value,
+        rows: rowsSection.value,
+        selection: selectionSection.value,
+        editing: editingSection.value,
+        cells: cellsSection.value,
+        interaction: interactionSection.value,
+    }));
+    const tableStageContext = createDataGridTableStageContext({
+        mode: computed(() => unref(options.mode)),
+        rowHeightMode: computed(() => unref(options.rowHeightMode)),
+        layout: layoutSection,
+        viewport: viewportSection,
+        columns: columnsSection,
+        rows: rowsSection,
+        selection: selectionSection,
+        editing: editingSection,
+        cells: cellsSection,
+        interaction: interactionSection,
+    });
+    return {
+        tableStageProps,
+        tableStageContext,
+        captureHeaderViewportRef,
+        captureBodyViewportRef,
+        updateEditingCellValue,
+    };
+}

package/dist/stage/useDataGridTableStageCellIo.d.ts

@@ -0,0 +1,28 @@
+import { type DataGridColumnSnapshot } from "@affino/datagrid-vue";
+import type { DataGridCopyRange } from "@affino/datagrid-vue/advanced";
+import type { DataGridTableRow } from "./dataGridTableStage.types";
+export interface UseDataGridTableStageCellIoOptions<TRow extends Record<string, unknown>> {
+    runtime: Pick<import("@affino/datagrid-vue").UseDataGridRuntimeResult<TRow>, "api">;
+    viewportRowStart: import("vue").Ref<number>;
+    isRowSelectionColumnKey: (columnKey: string) => boolean;
+    isRowSelectionColumn: (column: DataGridColumnSnapshot) => boolean;
+    isCellEditableByKey: (row: DataGridTableRow<TRow>, rowIndex: number, columnKey: string, columnIndex: number) => boolean;
+    readRowSelectionCell: (row: DataGridTableRow<TRow>) => string;
+    readRowSelectionDisplayCell: (row: DataGridTableRow<TRow>) => string;
+    readCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+    readDisplayCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+    toggleRowCheckboxSelected: (row: DataGridTableRow<TRow>) => void;
+    captureHistorySnapshot: () => unknown;
+    recordHistoryIntentTransaction: (descriptor: {
+        intent: string;
+        label: string;
+        affectedRange?: DataGridCopyRange | null;
+    }, beforeSnapshot: unknown) => void;
+    syncViewport: () => void;
+}
+export interface UseDataGridTableStageCellIoResult<TRow extends Record<string, unknown>> {
+    readStageCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+    readStageDisplayCell: (row: DataGridTableRow<TRow>, columnKey: string) => string;
+    handleCellClick: (row: DataGridTableRow<TRow>, rowOffset: number, column: DataGridColumnSnapshot, columnIndex: number) => void;
+}
+export declare function useDataGridTableStageCellIo<TRow extends Record<string, unknown>>(options: UseDataGridTableStageCellIoOptions<TRow>): UseDataGridTableStageCellIoResult<TRow>;