@affino/datagrid-vue-app 0.1.1 → 0.1.2

package/dist/DataGrid.js

@@ -1,565 +0,0 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, toRef, watch, } from "vue";
-import { useDataGridAppRowSelection, useDataGridAppSelection, } from "@affino/datagrid-vue";
-import DataGridDefaultRenderer from "./host/DataGridDefaultRenderer";
-import { resolveDataGridColumns, resolveDataGridFormulaRowModelOptions, } from "./config/dataGridFormulaOptions";
-import {} from "./theme/dataGridTheme";
-import { resolveDataGridGroupBy, resolveDataGridPagination, resolveDataGridRenderMode, } from "./config/dataGridPublicProps";
-import { resolveDataGridAdvancedFilter, } from "./config/dataGridAdvancedFilter";
-import { migrateDataGridSavedView, } from "./config/dataGridSavedView";
-import { resolveDataGridColumnLayout, } from "./config/dataGridColumnLayout";
-import { resolveDataGridAggregations, } from "./config/dataGridAggregations";
-import { resolveDataGridColumnMenu, } from "./overlays/dataGridColumnMenu";
-import { resolveDataGridCellMenu, resolveDataGridRowIndexMenu, } from "./overlays/dataGridContextMenu";
-import { resolveDataGridVirtualization } from "./config/dataGridVirtualization";
-import DataGridRuntimeHost from "./host/DataGridRuntimeHost";
-import { useDataGridAppControlledState, } from "./useDataGridAppControlledState";
-import { useDataGridAppRowModel } from "./useDataGridAppRowModel";
-function createDisabledRowSelectionService() {
-    return {
-        name: "selection",
-        getRowSelectionSnapshot: () => null,
-        setRowSelectionSnapshot: () => undefined,
-        clearRowSelection: () => undefined,
-        getFocusedRow: () => null,
-        setFocusedRow: () => undefined,
-        getSelectedRows: () => [],
-        isRowSelected: () => false,
-        setRowSelected: () => undefined,
-        selectRows: () => undefined,
-        deselectRows: () => undefined,
-        clearSelectedRows: () => undefined,
-    };
-}
-function composeSelectionLifecycle(hook, services) {
-    const handlers = services
-        .map(service => service?.[hook])
-        .filter((handler) => typeof handler === "function");
-    if (handlers.length === 0) {
-        return undefined;
-    }
-    return async (context) => {
-        for (const handler of handlers) {
-            await handler(context);
-        }
-    };
-}
-function composeSelectionService(options) {
-    const { userSelectionService, cellSelectionService, rowSelectionService, } = options;
-    return {
-        name: "selection",
-        init: composeSelectionLifecycle("init", [userSelectionService, cellSelectionService, rowSelectionService]),
-        start: composeSelectionLifecycle("start", [userSelectionService, cellSelectionService, rowSelectionService]),
-        stop: composeSelectionLifecycle("stop", [userSelectionService, cellSelectionService, rowSelectionService]),
-        dispose: composeSelectionLifecycle("dispose", [userSelectionService, cellSelectionService, rowSelectionService]),
-        getSelectionSnapshot: cellSelectionService.getSelectionSnapshot,
-        setSelectionSnapshot: cellSelectionService.setSelectionSnapshot,
-        clearSelection: cellSelectionService.clearSelection,
-        getRowSelectionSnapshot: rowSelectionService.getRowSelectionSnapshot,
-        setRowSelectionSnapshot: rowSelectionService.setRowSelectionSnapshot,
-        clearRowSelection: rowSelectionService.clearRowSelection,
-        getFocusedRow: rowSelectionService.getFocusedRow,
-        setFocusedRow: rowSelectionService.setFocusedRow,
-        getSelectedRows: rowSelectionService.getSelectedRows,
-        isRowSelected: rowSelectionService.isRowSelected,
-        setRowSelected: rowSelectionService.setRowSelected,
-        selectRows: rowSelectionService.selectRows,
-        deselectRows: rowSelectionService.deselectRows,
-        clearSelectedRows: rowSelectionService.clearSelectedRows,
-    };
-}
-export default defineComponent({
-    name: "DataGrid",
-    inheritAttrs: false,
-    props: {
-        rows: {
-            type: Array,
-            default: () => [],
-        },
-        rowModel: {
-            type: Object,
-            default: undefined,
-        },
-        clientRowModelOptions: {
-            type: Object,
-            default: undefined,
-        },
-        computedFields: {
-            type: Array,
-            default: undefined,
-        },
-        formulas: {
-            type: Array,
-            default: undefined,
-        },
-        formulaFunctions: {
-            type: Object,
-            default: undefined,
-        },
-        columns: {
-            type: Array,
-            default: () => [],
-        },
-        theme: {
-            type: [String, Object],
-            default: undefined,
-        },
-        aggregationModel: {
-            type: Object,
-            default: undefined,
-        },
-        renderMode: {
-            type: String,
-            default: undefined,
-        },
-        virtualization: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        pagination: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        columnMenu: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        cellMenu: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        rowIndexMenu: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        columnLayout: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        aggregations: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        advancedFilter: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-        showRowIndex: {
-            type: Boolean,
-            default: true,
-        },
-        rowSelection: {
-            type: Boolean,
-            default: true,
-        },
-        pageSize: {
-            type: Number,
-            default: undefined,
-        },
-        currentPage: {
-            type: Number,
-            default: undefined,
-        },
-        plugins: {
-            type: Array,
-            default: () => [],
-        },
-        services: {
-            type: Object,
-            default: undefined,
-        },
-        startupOrder: {
-            type: Array,
-            default: undefined,
-        },
-        autoStart: {
-            type: Boolean,
-            default: true,
-        },
-        sortModel: {
-            type: Array,
-            default: undefined,
-        },
-        filterModel: {
-            type: Object,
-            default: undefined,
-        },
-        groupBy: {
-            type: [String, Array, Object],
-            default: undefined,
-        },
-        pivotModel: {
-            type: Object,
-            default: undefined,
-        },
-        columnState: {
-            type: Object,
-            default: undefined,
-        },
-        columnOrder: {
-            type: Array,
-            default: undefined,
-        },
-        hiddenColumnKeys: {
-            type: Array,
-            default: undefined,
-        },
-        columnWidths: {
-            type: Object,
-            default: undefined,
-        },
-        columnPins: {
-            type: Object,
-            default: undefined,
-        },
-        state: {
-            type: Object,
-            default: undefined,
-        },
-        stateOptions: {
-            type: Object,
-            default: undefined,
-        },
-        rowHeightMode: {
-            type: String,
-            default: "fixed",
-        },
-        baseRowHeight: {
-            type: Number,
-            default: 31,
-        },
-        rowHover: {
-            type: Boolean,
-            default: false,
-        },
-        stripedRows: {
-            type: Boolean,
-            default: false,
-        },
-        isCellEditable: {
-            type: Function,
-            default: undefined,
-        },
-        viewMode: {
-            type: String,
-            default: undefined,
-        },
-        gantt: {
-            type: [Boolean, Object],
-            default: undefined,
-        },
-    },
-    emits: [
-        "cell-change",
-        "selection-change",
-        "row-select",
-        "update:columnState",
-        "update:columnOrder",
-        "update:hiddenColumnKeys",
-        "update:columnWidths",
-        "update:columnPins",
-        "update:groupBy",
-        "update:viewMode",
-        "update:state",
-        "ready",
-    ],
-    setup(props, { attrs, slots, emit, expose }) {
-        const dataGridRef = ref(null);
-        const currentViewMode = ref("table");
-        const resolvedRenderMode = computed(() => {
-            return resolveDataGridRenderMode(props.renderMode, props.pagination);
-        });
-        const resolvedPagination = computed(() => {
-            return resolveDataGridPagination(props.pagination, resolvedRenderMode.value, props.pageSize, props.currentPage);
-        });
-        const resolvedColumnMenu = computed(() => {
-            return resolveDataGridColumnMenu(props.columnMenu);
-        });
-        const resolvedCellMenu = computed(() => {
-            return resolveDataGridCellMenu(props.cellMenu);
-        });
-        const resolvedRowIndexMenu = computed(() => {
-            return resolveDataGridRowIndexMenu(props.rowIndexMenu);
-        });
-        const resolvedColumnLayout = computed(() => {
-            return resolveDataGridColumnLayout(props.columnLayout);
-        });
-        const resolvedAggregations = computed(() => {
-            return resolveDataGridAggregations(props.aggregations);
-        });
-        const resolvedAdvancedFilter = computed(() => {
-            return resolveDataGridAdvancedFilter(props.advancedFilter);
-        });
-        const resolvedGroupBy = computed(() => {
-            return resolveDataGridGroupBy(props.groupBy);
-        });
-        const resolvedVirtualization = computed(() => {
-            return resolveDataGridVirtualization(props.virtualization, resolvedRenderMode.value);
-        });
-        const resolvedClientRowModelOptions = computed(() => {
-            return resolveDataGridFormulaRowModelOptions({
-                columns: props.columns,
-                clientRowModelOptions: props.clientRowModelOptions,
-                computedFields: props.computedFields,
-                formulas: props.formulas,
-                formulaFunctions: props.formulaFunctions,
-            });
-        });
-        const resolvedColumns = computed(() => resolveDataGridColumns(props.columns));
-        const controlledProps = {
-            get state() {
-                return props.state;
-            },
-            get stateOptions() {
-                return props.stateOptions;
-            },
-            get columnState() {
-                return props.columnState;
-            },
-            get columnOrder() {
-                return props.columnOrder;
-            },
-            get hiddenColumnKeys() {
-                return props.hiddenColumnKeys;
-            },
-            get columnWidths() {
-                return props.columnWidths;
-            },
-            get columnPins() {
-                return props.columnPins;
-            },
-            get sortModel() {
-                return props.sortModel;
-            },
-            get filterModel() {
-                return props.filterModel;
-            },
-            get groupBy() {
-                return resolvedGroupBy.value;
-            },
-            get aggregationModel() {
-                return props.aggregationModel;
-            },
-            get pivotModel() {
-                return props.pivotModel;
-            },
-            get rowHeightMode() {
-                return props.rowHeightMode;
-            },
-            get baseRowHeight() {
-                return props.baseRowHeight;
-            },
-            get columns() {
-                return props.columns;
-            },
-        };
-        const inferredMode = computed(() => {
-            if (props.pivotModel) {
-                return "pivot";
-            }
-            if (resolvedClientRowModelOptions.value && "initialTreeData" in resolvedClientRowModelOptions.value) {
-                return "tree";
-            }
-            return "base";
-        });
-        const visibleColumns = computed(() => dataGridRef.value?.api.columns.getSnapshot().visibleColumns ?? []);
-        const totalRows = computed(() => dataGridRef.value?.api.rows.getCount() ?? 0);
-        const selectionOptions = {
-            mode: computed(() => inferredMode.value),
-            resolveRuntime: () => dataGridRef.value,
-            visibleColumns,
-            totalRows,
-            showRowSelection: computed(() => props.rowSelection),
-        };
-        const { selectionSnapshot, selectionAnchor, syncSelectionSnapshotFromRuntime, selectionService, selectionAggregatesLabel, } = useDataGridAppSelection(selectionOptions);
-        const { rowSelectionSnapshot, syncRowSelectionSnapshotFromRuntime, reconcileRowSelectionFromRuntime, selectionService: rowSelectionService, } = useDataGridAppRowSelection({
-            resolveRuntime: () => dataGridRef.value,
-        });
-        const resolvedRowSelectionService = computed(() => {
-            return props.rowSelection ? rowSelectionService : createDisabledRowSelectionService();
-        });
-        const resolvedServices = computed(() => ({
-            ...(props.services ?? {}),
-            selection: composeSelectionService({
-                userSelectionService: props.services?.selection,
-                cellSelectionService: selectionService,
-                rowSelectionService: resolvedRowSelectionService.value,
-            }),
-        }));
-        const { dataGridInstanceKey, resolvedRowModel, } = useDataGridAppRowModel({
-            rows: toRef(props, "rows"),
-            rowModel: toRef(props, "rowModel"),
-            clientRowModelOptions: resolvedClientRowModelOptions,
-            onOwnedRowModelRecreated: () => {
-                controlledState.dispose();
-            },
-        });
-        const controlledState = useDataGridAppControlledState({
-            gridRef: dataGridRef,
-            props: controlledProps,
-            emit: {
-                columnState: payload => emit("update:columnState", payload),
-                columnOrder: payload => emit("update:columnOrder", payload),
-                hiddenColumnKeys: payload => emit("update:hiddenColumnKeys", payload),
-                columnWidths: payload => emit("update:columnWidths", payload),
-                columnPins: payload => emit("update:columnPins", payload),
-                groupBy: payload => emit("update:groupBy", payload),
-                state: payload => emit("update:state", payload),
-                ready: payload => emit("ready", {
-                    api: payload.api,
-                    rowModel: resolvedRowModel.value,
-                }),
-            },
-        });
-        const handleCellChange = (payload) => {
-            reconcileRowSelectionFromRuntime();
-            emit("cell-change", payload);
-            controlledState.emitSnapshotUpdates();
-        };
-        const handleSelectionChange = (payload) => {
-            emit("selection-change", payload);
-        };
-        watch(rowSelectionSnapshot, (snapshot) => {
-            emit("row-select", snapshot);
-        }, { deep: true });
-        watch(() => props.rowSelection, enabled => {
-            if (enabled) {
-                syncRowSelectionSnapshotFromRuntime();
-                return;
-            }
-            rowSelectionService.clearRowSelection?.();
-        }, { immediate: true });
-        watch(() => props.viewMode, nextViewMode => {
-            currentViewMode.value = nextViewMode === "gantt" ? "gantt" : "table";
-        }, { immediate: true });
-        const setView = (nextViewMode) => {
-            const normalized = nextViewMode === "gantt" ? "gantt" : "table";
-            currentViewMode.value = normalized;
-            emit("update:viewMode", normalized);
-        };
-        const getSavedView = () => {
-            const state = controlledState.getState();
-            if (!state) {
-                return null;
-            }
-            return {
-                state,
-                viewMode: currentViewMode.value,
-            };
-        };
-        const migrateSavedView = (savedView, options) => {
-            return migrateDataGridSavedView(savedView, controlledState.migrateState, options);
-        };
-        const applySavedView = (savedView, options) => {
-            const applied = controlledState.applyState(savedView.state, options);
-            if (!applied) {
-                return false;
-            }
-            if (savedView.viewMode) {
-                setView(savedView.viewMode);
-            }
-            return true;
-        };
-        onBeforeUnmount(() => {
-            controlledState.dispose();
-        });
-        expose({
-            grid: dataGridRef,
-            rowModel: resolvedRowModel,
-            getApi: () => dataGridRef.value?.api ?? null,
-            getRuntime: () => dataGridRef.value?.runtime ?? null,
-            getCore: () => dataGridRef.value?.core ?? null,
-            getColumnState: () => controlledState.getColumnState(),
-            getColumnSnapshot: () => dataGridRef.value?.api.columns.getSnapshot() ?? null,
-            getSelectionAggregatesLabel: () => selectionAggregatesLabel.value,
-            getSelectionSummary: () => dataGridRef.value?.api.selection.summarize() ?? null,
-            getView: () => currentViewMode.value,
-            setView,
-            getSavedView,
-            migrateSavedView,
-            applySavedView,
-            applyColumnState: controlledState.applyColumnState,
-            getState: controlledState.getState,
-            migrateState: controlledState.migrateState,
-            applyState: controlledState.applyState,
-            exportPivotLayout: controlledState.exportPivotLayout,
-            exportPivotInterop: controlledState.exportPivotInterop,
-            importPivotLayout: controlledState.importPivotLayout,
-            expandAllGroups: controlledState.expandAllGroups,
-            collapseAllGroups: controlledState.collapseAllGroups,
-            insertRowsAt: (index, rows) => dataGridRef.value?.api.rows.insertDataAt(index, rows) ?? false,
-            insertRowBefore: (rowId, rows) => dataGridRef.value?.api.rows.insertDataBefore(rowId, rows) ?? false,
-            insertRowAfter: (rowId, rows) => dataGridRef.value?.api.rows.insertDataAfter(rowId, rows) ?? false,
-            insertColumnsAt: (index, columns) => dataGridRef.value?.api.columns.insertAt(index, columns) ?? false,
-            insertColumnBefore: (columnKey, columns) => dataGridRef.value?.api.columns.insertBefore(columnKey, columns) ?? false,
-            insertColumnAfter: (columnKey, columns) => dataGridRef.value?.api.columns.insertAfter(columnKey, columns) ?? false,
-        });
-        return () => {
-            const defaultRendererProps = {
-                mode: inferredMode.value,
-                rows: props.rows,
-                runtime: dataGridRef.value?.runtime ?? null,
-                runtimeRowModel: dataGridRef.value?.rowModel ?? null,
-                selectionSnapshot,
-                selectionAnchor,
-                rowSelectionSnapshot,
-                syncSelectionSnapshotFromRuntime,
-                syncRowSelectionSnapshotFromRuntime,
-                sortModel: props.sortModel,
-                filterModel: props.filterModel,
-                groupBy: resolvedGroupBy.value,
-                pivotModel: props.pivotModel,
-                renderMode: resolvedRenderMode.value,
-                virtualization: resolvedVirtualization.value,
-                columnMenu: resolvedColumnMenu.value,
-                cellMenu: resolvedCellMenu.value,
-                rowIndexMenu: resolvedRowIndexMenu.value,
-                columnLayout: resolvedColumnLayout.value,
-                aggregations: resolvedAggregations.value,
-                advancedFilter: resolvedAdvancedFilter.value,
-                rowHeightMode: props.rowHeightMode,
-                baseRowHeight: props.baseRowHeight,
-                rowHover: props.rowHover,
-                stripedRows: props.stripedRows,
-                isCellEditable: props.isCellEditable,
-                showRowIndex: props.showRowIndex,
-                rowSelection: props.rowSelection,
-                viewMode: currentViewMode.value,
-                gantt: props.gantt,
-            };
-            return h(DataGridRuntimeHost, {
-                ...attrs,
-                ref: dataGridRef,
-                key: dataGridInstanceKey.value,
-                rows: props.rows,
-                rowModel: resolvedRowModel.value,
-                columns: resolvedColumns.value,
-                theme: props.theme,
-                renderMode: resolvedRenderMode.value,
-                pagination: resolvedPagination.value,
-                plugins: props.plugins,
-                services: resolvedServices.value,
-                startupOrder: props.startupOrder,
-                autoStart: props.autoStart,
-                onCellChange: handleCellChange,
-                onSelectionChange: handleSelectionChange,
-            }, slots.default
-                ? {
-                    default: (slotProps) => slots.default?.({
-                        ...slotProps,
-                        defaultRendererProps: {
-                            ...defaultRendererProps,
-                            runtime: slotProps.runtime,
-                            runtimeRowModel: slotProps.rowModel,
-                        },
-                    }),
-                }
-                : {
-                    default: (slotProps) => h(DataGridDefaultRenderer, {
-                        ...defaultRendererProps,
-                        runtime: slotProps.runtime,
-                        runtimeRowModel: slotProps.rowModel,
-                    }),
-                });
-        };
-    },
-});

package/dist/DataGridDefaultRenderer.js

@@ -1,2 +0,0 @@
-export { default } from "./host/DataGridDefaultRenderer";
-export * from "./host/DataGridDefaultRenderer";

package/dist/DataGridModuleHost.js

@@ -1,2 +0,0 @@
-export { default } from "./host/DataGridModuleHost";
-export * from "./host/DataGridModuleHost";

package/dist/DataGridRuntimeHost.js

@@ -1 +0,0 @@
-export { default } from "./host/DataGridRuntimeHost";

package/dist/config/dataGridAdvancedFilter.js

@@ -1,21 +0,0 @@
-const DEFAULT_BUTTON_LABEL = "Advanced filter";
-export function resolveDataGridAdvancedFilter(input) {
-    if (typeof input === "boolean") {
-        return {
-            enabled: input,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    if (!input) {
-        return {
-            enabled: false,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    return {
-        enabled: input.enabled ?? true,
-        buttonLabel: typeof input.buttonLabel === "string" && input.buttonLabel.trim().length > 0
-            ? input.buttonLabel.trim()
-            : DEFAULT_BUTTON_LABEL,
-    };
-}

package/dist/config/dataGridAggregations.js

@@ -1,21 +0,0 @@
-const DEFAULT_BUTTON_LABEL = "Aggregations";
-export function resolveDataGridAggregations(input) {
-    if (typeof input === "boolean") {
-        return {
-            enabled: input,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    if (!input) {
-        return {
-            enabled: false,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    return {
-        enabled: input.enabled ?? true,
-        buttonLabel: typeof input.buttonLabel === "string" && input.buttonLabel.trim().length > 0
-            ? input.buttonLabel.trim()
-            : DEFAULT_BUTTON_LABEL,
-    };
-}

package/dist/config/dataGridColumnLayout.js

@@ -1,21 +0,0 @@
-const DEFAULT_BUTTON_LABEL = "Columns";
-export function resolveDataGridColumnLayout(input) {
-    if (typeof input === "boolean") {
-        return {
-            enabled: input,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    if (!input) {
-        return {
-            enabled: false,
-            buttonLabel: DEFAULT_BUTTON_LABEL,
-        };
-    }
-    return {
-        enabled: input.enabled ?? true,
-        buttonLabel: typeof input.buttonLabel === "string" && input.buttonLabel.trim().length > 0
-            ? input.buttonLabel.trim()
-            : DEFAULT_BUTTON_LABEL,
-    };
-}