@affino/datagrid-vue-app 0.1.1 → 0.1.2

package/dist/useDataGridAppControlledState.js

@@ -1,390 +0,0 @@
-import { onBeforeUnmount, watch } from "vue";
-function normalizeWidth(width) {
-    if (!Number.isFinite(width)) {
-        return null;
-    }
-    return Math.max(0, Math.trunc(width));
-}
-function createSyncKey(value) {
-    try {
-        return JSON.stringify(value);
-    }
-    catch {
-        return null;
-    }
-}
-function cloneGroupBySpec(groupBy) {
-    if (!groupBy) {
-        return null;
-    }
-    return {
-        fields: [...groupBy.fields],
-        expandedByDefault: groupBy.expandedByDefault,
-    };
-}
-export function useDataGridAppControlledState(options) {
-    let unsubscribeRowModel = null;
-    let unsubscribeColumnModel = null;
-    let scheduledSnapshotEmit = false;
-    let lastAppliedColumnInputsKey = null;
-    let lastAppliedStateInputKey = null;
-    let lastEmittedColumnStateKey = null;
-    let lastEmittedUnifiedStateKey = null;
-    let lastEmittedGroupByKey = null;
-    let lastObservedColumnStateKey = null;
-    let lastObservedUnifiedStateKey = null;
-    const disposeSubscriptions = () => {
-        unsubscribeRowModel?.();
-        unsubscribeColumnModel?.();
-        unsubscribeRowModel = null;
-        unsubscribeColumnModel = null;
-    };
-    const getColumnState = () => {
-        const columnsApi = options.gridRef.value?.api.columns;
-        if (!columnsApi) {
-            return null;
-        }
-        const snapshot = columnsApi.getSnapshot();
-        const visibility = {};
-        const widths = {};
-        const pins = {};
-        for (const column of snapshot.columns) {
-            visibility[column.key] = column.visible;
-            widths[column.key] = column.width;
-            pins[column.key] = column.pin;
-        }
-        return {
-            order: [...snapshot.order],
-            visibility,
-            widths,
-            pins,
-        };
-    };
-    const emitSnapshotUpdates = () => {
-        if (scheduledSnapshotEmit) {
-            return;
-        }
-        scheduledSnapshotEmit = true;
-        queueMicrotask(() => {
-            scheduledSnapshotEmit = false;
-            const columnState = getColumnState();
-            const api = options.gridRef.value?.api;
-            if (columnState) {
-                const columnStateKey = createSyncKey(columnState);
-                lastObservedColumnStateKey = columnStateKey;
-                if (columnStateKey !== lastEmittedColumnStateKey) {
-                    lastEmittedColumnStateKey = columnStateKey;
-                    options.emit.columnState(columnState);
-                    options.emit.columnOrder(columnState.order);
-                    options.emit.hiddenColumnKeys(Object.entries(columnState.visibility)
-                        .filter(([, visible]) => !visible)
-                        .map(([columnKey]) => columnKey));
-                    options.emit.columnWidths(columnState.widths);
-                    options.emit.columnPins(columnState.pins);
-                }
-            }
-            if (api) {
-                const groupBy = cloneGroupBySpec(api.rows.getSnapshot().groupBy);
-                const groupByKey = createSyncKey(groupBy);
-                if (groupByKey !== lastEmittedGroupByKey) {
-                    lastEmittedGroupByKey = groupByKey;
-                    options.emit.groupBy(groupBy);
-                }
-                const unifiedState = api.state.get();
-                const unifiedStateKey = createSyncKey(unifiedState);
-                lastObservedUnifiedStateKey = unifiedStateKey;
-                if (unifiedStateKey !== lastEmittedUnifiedStateKey) {
-                    lastEmittedUnifiedStateKey = unifiedStateKey;
-                    options.emit.state(unifiedState);
-                }
-            }
-        });
-    };
-    const syncSortAndFilterModel = () => {
-        const api = options.gridRef.value?.api;
-        if (!api || (options.props.sortModel === undefined && options.props.filterModel === undefined)) {
-            return;
-        }
-        api.rows.setSortAndFilterModel({
-            sortModel: options.props.sortModel ?? [],
-            filterModel: options.props.filterModel ?? null,
-        });
-    };
-    const syncGroupBy = () => {
-        const api = options.gridRef.value?.api;
-        if (!api || options.props.groupBy === undefined) {
-            return;
-        }
-        api.rows.setGroupBy(options.props.groupBy ?? null);
-    };
-    const syncAggregationModel = () => {
-        const api = options.gridRef.value?.api;
-        if (!api || options.props.aggregationModel === undefined) {
-            return;
-        }
-        api.rows.setAggregationModel(options.props.aggregationModel ?? null);
-    };
-    const syncPivotModel = () => {
-        const api = options.gridRef.value?.api;
-        if (!api || options.props.pivotModel === undefined) {
-            return;
-        }
-        api.pivot.setModel(options.props.pivotModel ?? null);
-    };
-    const syncColumnState = () => {
-        const api = options.gridRef.value?.api;
-        if (!api) {
-            return;
-        }
-        if (options.props.columnState === undefined &&
-            options.props.columnOrder === undefined &&
-            options.props.hiddenColumnKeys === undefined &&
-            options.props.columnWidths === undefined &&
-            options.props.columnPins === undefined) {
-            return;
-        }
-        const columnInputsKey = createSyncKey({
-            columnState: options.props.columnState,
-            columnOrder: options.props.columnOrder,
-            hiddenColumnKeys: options.props.hiddenColumnKeys,
-            columnWidths: options.props.columnWidths,
-            columnPins: options.props.columnPins,
-        });
-        if (columnInputsKey === lastAppliedColumnInputsKey) {
-            return;
-        }
-        if (options.props.columnState &&
-            !options.props.columnOrder &&
-            !options.props.hiddenColumnKeys &&
-            !options.props.columnWidths &&
-            !options.props.columnPins &&
-            createSyncKey(options.props.columnState) === lastObservedColumnStateKey) {
-            lastAppliedColumnInputsKey = columnInputsKey;
-            return;
-        }
-        if (options.props.columnState) {
-            api.columns.setOrder(options.props.columnState.order);
-            for (const [columnKey, visible] of Object.entries(options.props.columnState.visibility)) {
-                api.columns.setVisibility(columnKey, visible);
-            }
-            for (const [columnKey, width] of Object.entries(options.props.columnState.widths)) {
-                api.columns.setWidth(columnKey, normalizeWidth(width));
-            }
-            for (const [columnKey, pin] of Object.entries(options.props.columnState.pins)) {
-                api.columns.setPin(columnKey, pin);
-            }
-        }
-        if (options.props.columnOrder) {
-            api.columns.setOrder(options.props.columnOrder);
-        }
-        if (options.props.hiddenColumnKeys) {
-            const hidden = new Set(options.props.hiddenColumnKeys);
-            const snapshot = api.columns.getSnapshot();
-            for (const column of snapshot.columns) {
-                api.columns.setVisibility(column.key, !hidden.has(column.key));
-            }
-        }
-        if (options.props.columnWidths) {
-            for (const [columnKey, width] of Object.entries(options.props.columnWidths)) {
-                api.columns.setWidth(columnKey, normalizeWidth(width));
-            }
-        }
-        if (options.props.columnPins) {
-            for (const [columnKey, pin] of Object.entries(options.props.columnPins)) {
-                api.columns.setPin(columnKey, pin);
-            }
-        }
-        lastAppliedColumnInputsKey = columnInputsKey;
-    };
-    const syncUnifiedState = () => {
-        const api = options.gridRef.value?.api;
-        if (!api || options.props.state == null) {
-            return;
-        }
-        const stateInputKey = createSyncKey(options.props.state);
-        if (stateInputKey === lastAppliedStateInputKey) {
-            return;
-        }
-        if (stateInputKey === lastObservedUnifiedStateKey) {
-            lastAppliedStateInputKey = stateInputKey;
-            return;
-        }
-        const migrated = api.state.migrate(options.props.state, { strict: options.props.stateOptions?.strict });
-        if (!migrated) {
-            return;
-        }
-        api.state.set(migrated, options.props.stateOptions ?? {});
-        lastAppliedStateInputKey = stateInputKey;
-    };
-    const syncRowHeight = () => {
-        const api = options.gridRef.value?.api;
-        if (!api) {
-            return;
-        }
-        api.view.setRowHeightMode(options.props.rowHeightMode);
-        api.view.setBaseRowHeight(Math.max(24, Math.trunc(options.props.baseRowHeight)));
-    };
-    const handleGridReady = () => {
-        const grid = options.gridRef.value;
-        if (!grid) {
-            return;
-        }
-        lastAppliedColumnInputsKey = null;
-        lastAppliedStateInputKey = null;
-        disposeSubscriptions();
-        unsubscribeRowModel = grid.rowModel.subscribe(() => {
-            emitSnapshotUpdates();
-        });
-        unsubscribeColumnModel = grid.columnModel.subscribe(() => {
-            emitSnapshotUpdates();
-        });
-        syncUnifiedState();
-        syncColumnState();
-        syncSortAndFilterModel();
-        syncGroupBy();
-        syncAggregationModel();
-        syncPivotModel();
-        syncRowHeight();
-        emitSnapshotUpdates();
-        options.emit.ready({ api: grid.api });
-    };
-    const getState = () => {
-        return options.gridRef.value?.api.state.get() ?? null;
-    };
-    const migrateState = (state, migrateOptions) => {
-        return options.gridRef.value?.api.state.migrate(state, migrateOptions) ?? null;
-    };
-    const applyColumnState = (columnState) => {
-        const api = options.gridRef.value?.api;
-        if (!api) {
-            return false;
-        }
-        lastAppliedColumnInputsKey = createSyncKey({
-            columnState,
-            columnOrder: null,
-            hiddenColumnKeys: null,
-            columnWidths: null,
-            columnPins: null,
-        });
-        api.columns.setOrder(columnState.order);
-        for (const [columnKey, visible] of Object.entries(columnState.visibility)) {
-            api.columns.setVisibility(columnKey, visible);
-        }
-        for (const [columnKey, width] of Object.entries(columnState.widths)) {
-            api.columns.setWidth(columnKey, normalizeWidth(width));
-        }
-        for (const [columnKey, pin] of Object.entries(columnState.pins)) {
-            api.columns.setPin(columnKey, pin);
-        }
-        emitSnapshotUpdates();
-        return true;
-    };
-    const applyState = (state, setOptions) => {
-        const api = options.gridRef.value?.api;
-        if (!api) {
-            return false;
-        }
-        const migrated = api.state.migrate(state, { strict: setOptions?.strict });
-        if (!migrated) {
-            return false;
-        }
-        api.state.set(migrated, setOptions);
-        lastAppliedStateInputKey = createSyncKey(state);
-        emitSnapshotUpdates();
-        return true;
-    };
-    const exportPivotLayout = () => {
-        return options.gridRef.value?.api.pivot.exportLayout() ?? null;
-    };
-    const exportPivotInterop = () => {
-        return options.gridRef.value?.api.pivot.exportInterop() ?? null;
-    };
-    const importPivotLayout = (layout, importOptions) => {
-        const api = options.gridRef.value?.api;
-        if (!api) {
-            return false;
-        }
-        api.pivot.importLayout(layout, importOptions);
-        emitSnapshotUpdates();
-        return true;
-    };
-    const expandAllGroups = () => {
-        options.gridRef.value?.api.rows.expandAllGroups();
-        emitSnapshotUpdates();
-    };
-    const collapseAllGroups = () => {
-        options.gridRef.value?.api.rows.collapseAllGroups();
-        emitSnapshotUpdates();
-    };
-    watch(() => options.gridRef.value, () => {
-        handleGridReady();
-    }, { immediate: true });
-    watch(() => options.props.columns, () => {
-        lastAppliedColumnInputsKey = null;
-        lastAppliedStateInputKey = null;
-        syncUnifiedState();
-        syncColumnState();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => [options.props.state, options.props.stateOptions], () => {
-        syncUnifiedState();
-        syncColumnState();
-        syncSortAndFilterModel();
-        syncGroupBy();
-        syncAggregationModel();
-        syncPivotModel();
-        syncRowHeight();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => [
-        options.props.columnState,
-        options.props.columnOrder,
-        options.props.hiddenColumnKeys,
-        options.props.columnWidths,
-        options.props.columnPins,
-    ], () => {
-        syncColumnState();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => [options.props.sortModel, options.props.filterModel], () => {
-        syncSortAndFilterModel();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => options.props.groupBy, () => {
-        syncGroupBy();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => options.props.aggregationModel, () => {
-        syncAggregationModel();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => options.props.pivotModel, () => {
-        syncPivotModel();
-        emitSnapshotUpdates();
-    }, { deep: true });
-    watch(() => [options.props.rowHeightMode, options.props.baseRowHeight], () => {
-        syncRowHeight();
-        emitSnapshotUpdates();
-    });
-    const dispose = () => {
-        disposeSubscriptions();
-    };
-    onBeforeUnmount(() => {
-        dispose();
-    });
-    return {
-        emitSnapshotUpdates,
-        handleGridReady,
-        dispose,
-        getColumnState,
-        getState,
-        migrateState,
-        applyColumnState,
-        applyState,
-        exportPivotLayout,
-        exportPivotInterop,
-        importPivotLayout,
-        expandAllGroups,
-        collapseAllGroups,
-    };
-}

package/dist/useDataGridAppRowModel.js

@@ -1,85 +0,0 @@
-import { computed, onBeforeUnmount, ref, shallowRef, watch } from "vue";
-import { createClientRowModel, } from "@affino/datagrid-vue";
-function getProjectionStageNow() {
-    const performanceApi = globalThis.performance;
-    if (performanceApi && typeof performanceApi.now === "function") {
-        return performanceApi.now();
-    }
-    return Date.now();
-}
-const defaultProjectionStageTimer = (_stage, run) => {
-    const startedAt = getProjectionStageNow();
-    const result = run();
-    return {
-        result,
-        duration: Math.max(0, getProjectionStageNow() - startedAt),
-    };
-};
-function resolveClientRowModelOptions(value) {
-    return {
-        projectionStageTimer: defaultProjectionStageTimer,
-        ...(value ?? {}),
-    };
-}
-export function useDataGridAppRowModel(options) {
-    const dataGridInstanceKey = ref(0);
-    const fallbackRowModel = createClientRowModel();
-    const internalRowModel = shallowRef(options.rowModel.value
-        ? null
-        : createClientRowModel({
-            rows: options.rows.value,
-            ...resolveClientRowModelOptions(options.clientRowModelOptions.value),
-        }));
-    const disposeOwnedRowModel = (model) => {
-        if (!model || model === options.rowModel.value) {
-            return;
-        }
-        if ("dispose" in model && typeof model.dispose === "function") {
-            model.dispose();
-        }
-    };
-    const recreateInternalRowModel = () => {
-        if (options.rowModel.value) {
-            return;
-        }
-        disposeOwnedRowModel(internalRowModel.value);
-        internalRowModel.value = createClientRowModel({
-            rows: options.rows.value,
-            ...resolveClientRowModelOptions(options.clientRowModelOptions.value),
-        });
-        dataGridInstanceKey.value += 1;
-        options.onOwnedRowModelRecreated?.();
-    };
-    const resolvedRowModel = computed(() => {
-        return options.rowModel.value ?? internalRowModel.value ?? fallbackRowModel;
-    });
-    watch(options.rows, nextRows => {
-        if (!internalRowModel.value) {
-            return;
-        }
-        internalRowModel.value.setRows(nextRows);
-    }, { deep: false });
-    watch(options.clientRowModelOptions, () => {
-        recreateInternalRowModel();
-    }, { deep: true });
-    watch(options.rowModel, nextRowModel => {
-        if (nextRowModel) {
-            disposeOwnedRowModel(internalRowModel.value);
-            internalRowModel.value = null;
-            dataGridInstanceKey.value += 1;
-            return;
-        }
-        if (!internalRowModel.value) {
-            recreateInternalRowModel();
-        }
-    });
-    onBeforeUnmount(() => {
-        disposeOwnedRowModel(internalRowModel.value);
-        disposeOwnedRowModel(fallbackRowModel);
-    });
-    return {
-        dataGridInstanceKey,
-        resolvedRowModel,
-        disposeOwnedRowModel,
-    };
-}

package/dist/useDataGridTableStageBindings.js

@@ -1 +0,0 @@
-export * from "./stage/useDataGridTableStageBindings";

package/dist/useDataGridTableStageCellIo.d.ts

@@ -1,28 +0,0 @@
-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>;

package/dist/useDataGridTableStageCellIo.js

@@ -1,62 +0,0 @@
-import { resolveDataGridCellClickAction, toggleDataGridCellValue, } from "@affino/datagrid-core";
-export function useDataGridTableStageCellIo(options) {
-    const readStageCell = (row, columnKey) => {
-        if (options.isRowSelectionColumnKey(columnKey)) {
-            return options.readRowSelectionCell(row);
-        }
-        return options.readCell(row, columnKey);
-    };
-    const readStageDisplayCell = (row, columnKey) => {
-        if (options.isRowSelectionColumnKey(columnKey)) {
-            return options.readRowSelectionDisplayCell(row);
-        }
-        return options.readDisplayCell(row, columnKey);
-    };
-    const handleCellClick = (row, rowOffset, column, columnIndex) => {
-        if (options.isRowSelectionColumn(column)) {
-            options.toggleRowCheckboxSelected(row);
-            return;
-        }
-        const rowIndex = options.viewportRowStart.value + rowOffset;
-        const editable = options.isCellEditableByKey(row, rowIndex, column.key, columnIndex);
-        const clickAction = resolveDataGridCellClickAction({
-            column: column.column,
-            row: row.kind !== "group" ? row.data : undefined,
-            editable,
-        });
-        if (clickAction !== "toggle") {
-            return;
-        }
-        if (row.kind === "group" || row.rowId == null) {
-            return;
-        }
-        const beforeSnapshot = options.captureHistorySnapshot();
-        options.runtime.api.rows.applyEdits([
-            {
-                rowId: row.rowId,
-                data: {
-                    [column.key]: toggleDataGridCellValue({
-                        column: column.column,
-                        row: row.data,
-                    }),
-                },
-            },
-        ]);
-        options.recordHistoryIntentTransaction({
-            intent: "edit",
-            label: `Toggle ${column.key}`,
-            affectedRange: {
-                startRow: rowIndex,
-                endRow: rowIndex,
-                startColumn: columnIndex,
-                endColumn: columnIndex,
-            },
-        }, beforeSnapshot);
-        options.syncViewport();
-    };
-    return {
-        readStageCell,
-        readStageDisplayCell,
-        handleCellClick,
-    };
-}

package/dist/useDataGridTableStageColumns.d.ts

@@ -1,21 +0,0 @@
-import { type ComputedRef, type Ref } from "vue";
-import type { DataGridColumnSnapshot } from "@affino/datagrid-vue";
-import type { DataGridCellEditablePredicate } from "./dataGridEditability";
-import type { DataGridTableRow } from "./dataGridTableStage.types";
-export interface UseDataGridTableStageColumnsOptions<TRow extends Record<string, unknown>> {
-    runtime: Pick<import("@affino/datagrid-vue").UseDataGridRuntimeResult<TRow>, "api">;
-    visibleColumns: Ref<readonly DataGridColumnSnapshot[]>;
-    isCellEditable?: DataGridCellEditablePredicate<TRow>;
-}
-export interface UseDataGridTableStageColumnsResult<TRow extends Record<string, unknown>> {
-    orderedVisibleColumns: ComputedRef<readonly DataGridColumnSnapshot[]>;
-    centerColumns: ComputedRef<readonly DataGridColumnSnapshot[]>;
-    resolveColumnWidth: (column: DataGridColumnSnapshot) => number;
-    stageColumnStyle: (columnKey: string) => Record<string, string>;
-    isRowSelectionColumnKey: (columnKey: string) => boolean;
-    isRowSelectionColumn: (column: DataGridColumnSnapshot) => boolean;
-    isCellEditable: (row: DataGridTableRow<TRow>, rowIndex: number, column: DataGridColumnSnapshot) => boolean;
-    isCellEditableByKey: (row: DataGridTableRow<TRow>, rowIndex: number, columnKey: string, columnIndex: number) => boolean;
-    rowSelectionColumn: ComputedRef<DataGridColumnSnapshot | null>;
-}
-export declare function useDataGridTableStageColumns<TRow extends Record<string, unknown>>(options: UseDataGridTableStageColumnsOptions<TRow>): UseDataGridTableStageColumnsResult<TRow>;