@affino/datagrid-vue 0.1.0

package/dist/composables/useAffinoDataGridSelectionFeature.js

@@ -0,0 +1,160 @@
+import { computed, ref, watch } from "vue";
+export function normalizeSelectionFeature(input) {
+    if (typeof input === "boolean") {
+        return {
+            enabled: input,
+            initialSelectedRowKeys: [],
+        };
+    }
+    if (!input) {
+        return {
+            enabled: false,
+            initialSelectedRowKeys: [],
+        };
+    }
+    return {
+        enabled: input.enabled ?? true,
+        initialSelectedRowKeys: input.initialSelectedRowKeys ?? [],
+        resolveRowKey: input.resolveRowKey,
+    };
+}
+export function useAffinoDataGridSelectionFeature(options) {
+    const selectionEnabled = ref(options.feature.enabled);
+    const selectedRowKeySet = ref(new Set(options.feature.initialSelectedRowKeys));
+    const resolveRowKey = (row, index) => (options.feature.resolveRowKey
+        ? options.feature.resolveRowKey(row, index)
+        : options.fallbackResolveRowKey(row, index));
+    watch(options.rows, nextRows => {
+        if (!selectionEnabled.value) {
+            return;
+        }
+        const allowed = new Set();
+        nextRows.forEach((row, index) => {
+            allowed.add(resolveRowKey(row, index));
+        });
+        const nextSelected = new Set();
+        selectedRowKeySet.value.forEach(rowKey => {
+            if (allowed.has(rowKey)) {
+                nextSelected.add(rowKey);
+            }
+        });
+        selectedRowKeySet.value = nextSelected;
+    });
+    const selectedRowKeys = computed(() => Array.from(selectedRowKeySet.value));
+    const selectedCount = computed(() => selectedRowKeySet.value.size);
+    const isSelectedByKey = (rowKey) => (selectionEnabled.value && selectedRowKeySet.value.has(rowKey));
+    const setSelectedByKey = (rowKey, selected) => {
+        if (!selectionEnabled.value) {
+            return;
+        }
+        const next = new Set(selectedRowKeySet.value);
+        if (selected) {
+            next.add(rowKey);
+        }
+        else {
+            next.delete(rowKey);
+        }
+        selectedRowKeySet.value = next;
+    };
+    const toggleSelectedByKey = (rowKey) => {
+        setSelectedByKey(rowKey, !isSelectedByKey(rowKey));
+    };
+    const clearSelection = () => {
+        if (selectedRowKeySet.value.size === 0) {
+            return;
+        }
+        selectedRowKeySet.value = new Set();
+    };
+    const selectOnlyRow = (rowKey) => {
+        if (!selectionEnabled.value) {
+            return;
+        }
+        selectedRowKeySet.value = new Set([rowKey]);
+    };
+    const resolveSelectedRows = () => options.rows.value.filter((row, index) => (selectedRowKeySet.value.has(resolveRowKey(row, index))));
+    const selectAllRows = () => {
+        if (!selectionEnabled.value) {
+            return 0;
+        }
+        const nextSelected = new Set();
+        options.rows.value.forEach((row, index) => {
+            nextSelected.add(resolveRowKey(row, index));
+        });
+        selectedRowKeySet.value = nextSelected;
+        return nextSelected.size;
+    };
+    const selectionSnapshot = computed(() => {
+        if (!selectionEnabled.value || selectedRowKeySet.value.size === 0) {
+            return null;
+        }
+        const totalRows = options.runtime.api.getRowCount();
+        if (totalRows <= 0) {
+            return null;
+        }
+        const visibleColumns = options.runtime.columnSnapshot.value.visibleColumns;
+        const endCol = Math.max(0, visibleColumns.length - 1);
+        const ranges = [];
+        for (let rowIndex = 0; rowIndex < totalRows; rowIndex += 1) {
+            const rowNode = options.runtime.api.getRow(rowIndex);
+            if (!rowNode || rowNode.kind !== "leaf") {
+                continue;
+            }
+            const rowKey = resolveRowKey(rowNode.data, rowNode.sourceIndex);
+            if (!selectedRowKeySet.value.has(rowKey)) {
+                continue;
+            }
+            ranges.push({
+                startRow: rowIndex,
+                endRow: rowIndex,
+                startCol: 0,
+                endCol,
+                startRowId: rowNode.rowId ?? null,
+                endRowId: rowNode.rowId ?? null,
+                anchor: {
+                    rowIndex,
+                    colIndex: 0,
+                    rowId: rowNode.rowId ?? null,
+                },
+                focus: {
+                    rowIndex,
+                    colIndex: endCol,
+                    rowId: rowNode.rowId ?? null,
+                },
+            });
+        }
+        if (ranges.length === 0) {
+            return null;
+        }
+        return {
+            ranges,
+            activeRangeIndex: 0,
+            activeCell: ranges[0]?.anchor ?? null,
+        };
+    });
+    watch(selectionSnapshot, snapshot => {
+        options.internalSelectionSnapshot.value = snapshot;
+        if (!options.runtime.api.hasSelectionSupport()) {
+            return;
+        }
+        if (!snapshot) {
+            options.runtime.api.clearSelection();
+            return;
+        }
+        options.runtime.api.setSelectionSnapshot(snapshot);
+    }, { immediate: true, flush: "sync" });
+    return {
+        selectionEnabled,
+        selectedRowKeySet,
+        selectedRowKeys,
+        selectedCount,
+        resolveRowKey,
+        isSelectedByKey,
+        setSelectedByKey,
+        toggleSelectedByKey,
+        clearSelection,
+        selectOnlyRow,
+        selectAllRows,
+        resolveSelectedRows,
+        selectionSnapshot,
+    };
+}

package/dist/composables/useAffinoDataGridSummaryFeature.d.ts

@@ -0,0 +1,27 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { DataGridSelectionAggregationKind, DataGridSelectionSnapshot, DataGridSelectionSummaryColumnConfig, DataGridSelectionSummarySnapshot } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "./useDataGridRuntime";
+export interface AffinoSummaryFeatureInput<TRow> {
+    enabled?: boolean;
+    columns?: readonly DataGridSelectionSummaryColumnConfig<TRow>[];
+    defaultAggregations?: readonly DataGridSelectionAggregationKind[];
+}
+export interface NormalizedAffinoSummaryFeature<TRow> {
+    enabled: boolean;
+    columns?: readonly DataGridSelectionSummaryColumnConfig<TRow>[];
+    defaultAggregations?: readonly DataGridSelectionAggregationKind[];
+}
+export interface UseAffinoDataGridSummaryFeatureOptions<TRow> {
+    runtime: UseDataGridRuntimeResult<TRow>;
+    feature: NormalizedAffinoSummaryFeature<TRow>;
+    selectionEnabled: Ref<boolean>;
+    selectionSnapshot: ComputedRef<DataGridSelectionSnapshot | null>;
+}
+export interface UseAffinoDataGridSummaryFeatureResult {
+    summaryEnabled: Ref<boolean>;
+    selectedSummary: ComputedRef<DataGridSelectionSummarySnapshot | null>;
+    recomputeSelectedSummary: () => DataGridSelectionSummarySnapshot | null;
+}
+export declare function normalizeSummaryFeature<TRow>(input: boolean | AffinoSummaryFeatureInput<TRow> | undefined): NormalizedAffinoSummaryFeature<TRow>;
+export declare function useAffinoDataGridSummaryFeature<TRow>(options: UseAffinoDataGridSummaryFeatureOptions<TRow>): UseAffinoDataGridSummaryFeatureResult;
+//# sourceMappingURL=useAffinoDataGridSummaryFeature.d.ts.map

package/dist/composables/useAffinoDataGridSummaryFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridSummaryFeature.d.ts","sourceRoot":"","sources":["../../src/composables/useAffinoDataGridSummaryFeature.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC/D,OAAO,KAAK,EACV,gCAAgC,EAChC,yBAAyB,EACzB,oCAAoC,EACpC,gCAAgC,EACjC,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAEpE,MAAM,WAAW,yBAAyB,CAAC,IAAI;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,oCAAoC,CAAC,IAAI,CAAC,EAAE,CAAA;IAC/D,mBAAmB,CAAC,EAAE,SAAS,gCAAgC,EAAE,CAAA;CAClE;AAED,MAAM,WAAW,8BAA8B,CAAC,IAAI;IAClD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,oCAAoC,CAAC,IAAI,CAAC,EAAE,CAAA;IAC/D,mBAAmB,CAAC,EAAE,SAAS,gCAAgC,EAAE,CAAA;CAClE;AAED,MAAM,WAAW,sCAAsC,CAAC,IAAI;IAC1D,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,CAAA;IAC7C,gBAAgB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC9B,iBAAiB,EAAE,WAAW,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CACjE;AAED,MAAM,WAAW,qCAAqC;IACpD,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC5B,eAAe,EAAE,WAAW,CAAC,gCAAgC,GAAG,IAAI,CAAC,CAAA;IACrE,wBAAwB,EAAE,MAAM,gCAAgC,GAAG,IAAI,CAAA;CACxE;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAC1C,KAAK,EAAE,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,GAAG,SAAS,GAC3D,8BAA8B,CAAC,IAAI,CAAC,CAgBtC;AAED,wBAAgB,+BAA+B,CAAC,IAAI,EAClD,OAAO,EAAE,sCAAsC,CAAC,IAAI,CAAC,GACpD,qCAAqC,CAsBvC"}

package/dist/composables/useAffinoDataGridSummaryFeature.js

@@ -0,0 +1,39 @@
+import { computed, ref } from "vue";
+export function normalizeSummaryFeature(input) {
+    if (typeof input === "boolean") {
+        return {
+            enabled: input,
+        };
+    }
+    if (!input) {
+        return {
+            enabled: false,
+        };
+    }
+    return {
+        enabled: input.enabled ?? true,
+        columns: input.columns,
+        defaultAggregations: input.defaultAggregations,
+    };
+}
+export function useAffinoDataGridSummaryFeature(options) {
+    const summaryEnabled = ref(options.feature.enabled);
+    const selectedSummary = computed(() => {
+        if (!summaryEnabled.value || !options.selectionEnabled.value) {
+            return null;
+        }
+        if (!options.selectionSnapshot.value) {
+            return null;
+        }
+        return options.runtime.api.summarizeSelection({
+            columns: options.feature.columns,
+            defaultAggregations: options.feature.defaultAggregations,
+        });
+    });
+    const recomputeSelectedSummary = () => selectedSummary.value;
+    return {
+        summaryEnabled,
+        selectedSummary,
+        recomputeSelectedSummary,
+    };
+}

package/dist/composables/useAffinoDataGridTreeFeature.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from "vue";
+import type { DataGridGroupBySpec, DataGridGroupExpansionSnapshot } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "./useDataGridRuntime";
+export interface AffinoTreeFeatureInput {
+    enabled?: boolean;
+    initialGroupBy?: DataGridGroupBySpec | null;
+}
+export interface NormalizedAffinoTreeFeature {
+    enabled: boolean;
+    initialGroupBy: DataGridGroupBySpec | null;
+}
+export interface UseAffinoDataGridTreeFeatureOptions<TRow> {
+    runtime: UseDataGridRuntimeResult<TRow>;
+    feature: NormalizedAffinoTreeFeature;
+}
+export interface UseAffinoDataGridTreeFeatureResult {
+    treeEnabled: Ref<boolean>;
+    groupBy: Ref<DataGridGroupBySpec | null>;
+    groupExpansion: Ref<DataGridGroupExpansionSnapshot>;
+    setGroupBy: (groupBy: DataGridGroupBySpec | null) => void;
+    clearGroupBy: () => void;
+    toggleGroup: (groupKey: string) => void;
+    isGroupExpanded: (groupKey: string) => boolean;
+    expandGroups: (groupKeys?: readonly string[]) => number;
+    collapseGroups: (groupKeys?: readonly string[]) => number;
+    expandAllGroups: () => number;
+    collapseAllGroups: () => number;
+}
+export declare function normalizeTreeFeature(input: boolean | AffinoTreeFeatureInput | undefined): NormalizedAffinoTreeFeature;
+export declare function useAffinoDataGridTreeFeature<TRow>(options: UseAffinoDataGridTreeFeatureOptions<TRow>): UseAffinoDataGridTreeFeatureResult;
+//# sourceMappingURL=useAffinoDataGridTreeFeature.d.ts.map

package/dist/composables/useAffinoDataGridTreeFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridTreeFeature.d.ts","sourceRoot":"","sources":["../../src/composables/useAffinoDataGridTreeFeature.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,KAAK,EACV,mBAAmB,EACnB,8BAA8B,EAE/B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAEpE,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAC5C;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAA;CAC3C;AAED,MAAM,WAAW,mCAAmC,CAAC,IAAI;IACvD,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,OAAO,EAAE,2BAA2B,CAAA;CACrC;AAED,MAAM,WAAW,kCAAkC;IACjD,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACzB,OAAO,EAAE,GAAG,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;IACxC,cAAc,EAAE,GAAG,CAAC,8BAA8B,CAAC,CAAA;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAA;IACzD,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IAC9C,YAAY,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,MAAM,CAAA;IACvD,cAAc,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,MAAM,CAAA;IACzD,eAAe,EAAE,MAAM,MAAM,CAAA;IAC7B,iBAAiB,EAAE,MAAM,MAAM,CAAA;CAChC;AA4DD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,OAAO,GAAG,sBAAsB,GAAG,SAAS,GAClD,2BAA2B,CAiB7B;AAED,wBAAgB,4BAA4B,CAAC,IAAI,EAC/C,OAAO,EAAE,mCAAmC,CAAC,IAAI,CAAC,GACjD,kCAAkC,CA6HpC"}

package/dist/composables/useAffinoDataGridTreeFeature.js

@@ -0,0 +1,183 @@
+import { onBeforeUnmount, ref } from "vue";
+function cloneGroupBy(groupBy) {
+    if (!groupBy) {
+        return null;
+    }
+    return {
+        fields: Array.isArray(groupBy.fields) ? [...groupBy.fields] : [],
+        expandedByDefault: Boolean(groupBy.expandedByDefault),
+    };
+}
+function cloneGroupExpansion(expansion) {
+    if (!expansion) {
+        return {
+            expandedByDefault: false,
+            toggledGroupKeys: [],
+        };
+    }
+    return {
+        expandedByDefault: Boolean(expansion.expandedByDefault),
+        toggledGroupKeys: Array.isArray(expansion.toggledGroupKeys) ? [...expansion.toggledGroupKeys] : [],
+    };
+}
+function normalizeGroupKey(groupKey) {
+    if (typeof groupKey !== "string") {
+        return null;
+    }
+    const trimmed = groupKey.trim();
+    return trimmed.length > 0 ? trimmed : null;
+}
+function toUniqueGroupKeys(groupKeys) {
+    const unique = new Set();
+    for (const rawKey of groupKeys) {
+        const key = normalizeGroupKey(rawKey);
+        if (key) {
+            unique.add(key);
+        }
+    }
+    return Array.from(unique);
+}
+function resolveRowGroupKey(row) {
+    if (row.kind !== "group") {
+        return null;
+    }
+    const fromMeta = row.groupMeta?.groupKey;
+    if (typeof fromMeta === "string" && fromMeta.trim().length > 0) {
+        return fromMeta.trim();
+    }
+    if (typeof row.rowId === "string" && row.rowId.trim().length > 0) {
+        return row.rowId.trim();
+    }
+    return null;
+}
+export function normalizeTreeFeature(input) {
+    if (typeof input === "boolean") {
+        return {
+            enabled: input,
+            initialGroupBy: null,
+        };
+    }
+    if (!input) {
+        return {
+            enabled: false,
+            initialGroupBy: null,
+        };
+    }
+    return {
+        enabled: input.enabled ?? true,
+        initialGroupBy: cloneGroupBy(input.initialGroupBy ?? null),
+    };
+}
+export function useAffinoDataGridTreeFeature(options) {
+    const treeEnabled = ref(options.feature.enabled);
+    const snapshot = options.runtime.rowModel.getSnapshot();
+    const groupBy = ref(cloneGroupBy(snapshot.groupBy));
+    const groupExpansion = ref(cloneGroupExpansion(snapshot.groupExpansion));
+    const unsubscribe = options.runtime.rowModel.subscribe(next => {
+        groupBy.value = cloneGroupBy(next.groupBy);
+        groupExpansion.value = cloneGroupExpansion(next.groupExpansion);
+    });
+    onBeforeUnmount(() => {
+        unsubscribe();
+    });
+    if (treeEnabled.value && options.feature.initialGroupBy) {
+        options.runtime.api.setGroupBy(cloneGroupBy(options.feature.initialGroupBy));
+    }
+    const setGroupBy = (nextGroupBy) => {
+        if (!treeEnabled.value) {
+            return;
+        }
+        options.runtime.api.setGroupBy(cloneGroupBy(nextGroupBy));
+    };
+    const clearGroupBy = () => {
+        if (!treeEnabled.value) {
+            return;
+        }
+        options.runtime.api.setGroupBy(null);
+    };
+    const toggleGroup = (groupKey) => {
+        if (!treeEnabled.value) {
+            return;
+        }
+        const key = normalizeGroupKey(groupKey);
+        if (!key) {
+            return;
+        }
+        options.runtime.api.toggleGroup(key);
+    };
+    const isGroupExpanded = (groupKey) => {
+        const key = normalizeGroupKey(groupKey);
+        if (!key) {
+            return false;
+        }
+        const expansion = groupExpansion.value;
+        const toggled = new Set(expansion.toggledGroupKeys ?? []);
+        return expansion.expandedByDefault ? !toggled.has(key) : toggled.has(key);
+    };
+    const collectVisibleGroupKeys = () => {
+        const total = options.runtime.api.getRowCount();
+        const keys = new Set();
+        for (let rowIndex = 0; rowIndex < total; rowIndex += 1) {
+            const row = options.runtime.api.getRow(rowIndex);
+            if (!row) {
+                continue;
+            }
+            const key = resolveRowGroupKey(row);
+            if (key) {
+                keys.add(key);
+            }
+        }
+        return Array.from(keys);
+    };
+    const resolveTargetGroupKeys = (groupKeys) => {
+        if (!groupKeys || groupKeys.length === 0) {
+            return collectVisibleGroupKeys();
+        }
+        return toUniqueGroupKeys(groupKeys);
+    };
+    const expandGroups = (groupKeys) => {
+        if (!treeEnabled.value || !groupBy.value) {
+            return 0;
+        }
+        const targets = resolveTargetGroupKeys(groupKeys);
+        let affected = 0;
+        for (const groupKey of targets) {
+            if (isGroupExpanded(groupKey)) {
+                continue;
+            }
+            options.runtime.api.toggleGroup(groupKey);
+            affected += 1;
+        }
+        return affected;
+    };
+    const collapseGroups = (groupKeys) => {
+        if (!treeEnabled.value || !groupBy.value) {
+            return 0;
+        }
+        const targets = resolveTargetGroupKeys(groupKeys);
+        let affected = 0;
+        for (const groupKey of targets) {
+            if (!isGroupExpanded(groupKey)) {
+                continue;
+            }
+            options.runtime.api.toggleGroup(groupKey);
+            affected += 1;
+        }
+        return affected;
+    };
+    const expandAllGroups = () => expandGroups();
+    const collapseAllGroups = () => collapseGroups();
+    return {
+        treeEnabled,
+        groupBy,
+        groupExpansion,
+        setGroupBy,
+        clearGroupBy,
+        toggleGroup,
+        isGroupExpanded,
+        expandGroups,
+        collapseGroups,
+        expandAllGroups,
+        collapseAllGroups,
+    };
+}

package/dist/composables/useAffinoDataGridUi.d.ts

@@ -0,0 +1,36 @@
+import { type Ref } from "vue";
+import type { DataGridContextMenuActionId } from "./useDataGridContextMenu";
+import type { AffinoDataGridActionId, AffinoDataGridActionResult, UseAffinoDataGridOptions, UseAffinoDataGridResult } from "./useAffinoDataGrid.types";
+export interface AffinoDataGridUiToolbarAction {
+    id: AffinoDataGridActionId;
+    label: string;
+}
+export interface UseAffinoDataGridUiOptions<TRow> extends UseAffinoDataGridOptions<TRow> {
+    status?: Ref<string>;
+    initialStatus?: string;
+    toolbarActions?: readonly AffinoDataGridActionId[];
+    actionLabels?: Partial<Record<AffinoDataGridActionId, string>>;
+}
+export interface UseAffinoDataGridUiResult<TRow> extends UseAffinoDataGridResult<TRow> {
+    ui: {
+        status: Ref<string>;
+        setStatus: (message: string) => void;
+        applyActionResult: (result: AffinoDataGridActionResult) => void;
+        resolveActionLabel: (actionId: AffinoDataGridActionId) => string;
+        toolbarActions: Ref<readonly AffinoDataGridUiToolbarAction[]>;
+        bindToolbarAction: (actionId: AffinoDataGridActionId) => {
+            onClick: () => void;
+        };
+        bindContextMenuAction: (actionId: DataGridContextMenuActionId, options?: Parameters<UseAffinoDataGridResult<TRow>["bindings"]["contextMenuAction"]>[1]) => ReturnType<UseAffinoDataGridResult<TRow>["bindings"]["contextMenuAction"]>;
+        bindHeaderCell: (columnKey: string) => ReturnType<UseAffinoDataGridResult<TRow>["bindings"]["headerCell"]>;
+        bindRowSelection: UseAffinoDataGridResult<TRow>["bindings"]["rowSelection"];
+        bindDataCell: UseAffinoDataGridResult<TRow>["bindings"]["dataCell"];
+        bindInlineEditor: UseAffinoDataGridResult<TRow>["bindings"]["inlineEditor"];
+        isCellEditing: UseAffinoDataGridResult<TRow>["bindings"]["isCellEditing"];
+        resolveHeaderAriaSort: (columnKey: string) => "none" | "ascending" | "descending";
+        bindContextMenuRoot: UseAffinoDataGridResult<TRow>["bindings"]["contextMenuRoot"];
+        bindContextMenuRef: UseAffinoDataGridResult<TRow>["bindings"]["contextMenuRef"];
+    };
+}
+export declare function useAffinoDataGridUi<TRow>(options: UseAffinoDataGridUiOptions<TRow>): UseAffinoDataGridUiResult<TRow>;
+//# sourceMappingURL=useAffinoDataGridUi.d.ts.map

package/dist/composables/useAffinoDataGridUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridUi.d.ts","sourceRoot":"","sources":["../../src/composables/useAffinoDataGridUi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAE7C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,EACV,sBAAsB,EACtB,0BAA0B,EAC1B,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,2BAA2B,CAAA;AAwBlC,MAAM,WAAW,6BAA6B;IAC5C,EAAE,EAAE,sBAAsB,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,0BAA0B,CAAC,IAAI,CAAE,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACtF,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAA;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC,CAAA;CAC/D;AAED,MAAM,WAAW,yBAAyB,CAAC,IAAI,CAAE,SAAQ,uBAAuB,CAAC,IAAI,CAAC;IACpF,EAAE,EAAE;QACF,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;QACnB,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;QACpC,iBAAiB,EAAE,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAA;QAC/D,kBAAkB,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,MAAM,CAAA;QAChE,cAAc,EAAE,GAAG,CAAC,SAAS,6BAA6B,EAAE,CAAC,CAAA;QAC7D,iBAAiB,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK;YAAE,OAAO,EAAE,MAAM,IAAI,CAAA;SAAE,CAAA;QAChF,qBAAqB,EAAE,CACrB,QAAQ,EAAE,2BAA2B,EACrC,OAAO,CAAC,EAAE,UAAU,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,KACpF,UAAU,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;QAC/E,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;QAC1G,gBAAgB,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,CAAA;QAC3E,YAAY,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAA;QACnE,gBAAgB,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,CAAA;QAC3E,aAAa,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAA;QACzE,qBAAqB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,WAAW,GAAG,YAAY,CAAA;QACjF,mBAAmB,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAAA;QACjF,kBAAkB,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAA;KAChF,CAAA;CACF;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EACtC,OAAO,EAAE,0BAA0B,CAAC,IAAI,CAAC,GACxC,yBAAyB,CAAC,IAAI,CAAC,CA0EjC"}

package/dist/composables/useAffinoDataGridUi.js

@@ -0,0 +1,81 @@
+import { computed, ref } from "vue";
+import { useAffinoDataGrid } from "./useAffinoDataGrid";
+const DEFAULT_ACTION_LABELS = {
+    copy: "Copy",
+    cut: "Cut",
+    paste: "Paste",
+    clear: "Clear",
+    "sort-asc": "Sort ascending",
+    "sort-desc": "Sort descending",
+    "sort-clear": "Clear sort",
+    filter: "Filter",
+    "auto-size": "Auto size",
+    "select-all": "Select all",
+    "clear-selection": "Clear selection",
+};
+const DEFAULT_TOOLBAR_ACTIONS = [
+    "copy",
+    "cut",
+    "paste",
+    "select-all",
+    "clear-selection",
+];
+export function useAffinoDataGridUi(options) {
+    const grid = useAffinoDataGrid(options);
+    const status = options.status ?? ref(options.initialStatus ?? "Ready");
+    const setStatus = (message) => {
+        status.value = message;
+    };
+    const applyActionResult = (result) => {
+        setStatus(result.message);
+    };
+    const resolveActionLabel = (actionId) => (options.actionLabels?.[actionId] ?? DEFAULT_ACTION_LABELS[actionId] ?? actionId);
+    const toolbarActions = computed(() => {
+        const ids = options.toolbarActions ?? DEFAULT_TOOLBAR_ACTIONS;
+        return ids.map(id => ({
+            id,
+            label: resolveActionLabel(id),
+        }));
+    });
+    const bindToolbarAction = (actionId) => grid.bindings.actionButton(actionId, {
+        onResult: applyActionResult,
+    });
+    const bindContextMenuAction = (actionId, options = {}) => grid.bindings.contextMenuAction(actionId, {
+        ...options,
+        onResult: result => {
+            applyActionResult(result);
+            options.onResult?.(result);
+        },
+    });
+    const bindHeaderCell = (columnKey) => {
+        const base = grid.bindings.headerCell(columnKey);
+        return {
+            ...base,
+            onClick: (event) => {
+                base.onClick(event);
+                setStatus(`Sorted by ${columnKey}`);
+            },
+        };
+    };
+    const resolveHeaderAriaSort = (columnKey) => (grid.bindings.headerSort(columnKey)["aria-sort"]);
+    return {
+        ...grid,
+        ui: {
+            status,
+            setStatus,
+            applyActionResult,
+            resolveActionLabel,
+            toolbarActions,
+            bindToolbarAction,
+            bindContextMenuAction,
+            bindHeaderCell,
+            bindRowSelection: grid.bindings.rowSelection,
+            bindDataCell: grid.bindings.dataCell,
+            bindInlineEditor: grid.bindings.inlineEditor,
+            isCellEditing: grid.bindings.isCellEditing,
+            resolveHeaderAriaSort,
+            bindContextMenuRoot: grid.bindings.contextMenuRoot,
+            bindContextMenuRef: grid.bindings.contextMenuRef,
+        },
+    };
+}

package/dist/composables/useAffinoDataGridVisibilityFeature.d.ts

@@ -0,0 +1,28 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { DataGridColumnDef } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "./useDataGridRuntime";
+export interface AffinoVisibilityFeatureInput {
+    enabled?: boolean;
+    hiddenColumnKeys?: readonly string[];
+}
+export interface NormalizedAffinoVisibilityFeature {
+    enabled: boolean;
+    hiddenColumnKeys: readonly string[];
+}
+export interface UseAffinoDataGridVisibilityFeatureOptions<TRow> {
+    runtime: UseDataGridRuntimeResult<TRow>;
+    columns: Ref<readonly DataGridColumnDef[]>;
+    feature: NormalizedAffinoVisibilityFeature;
+}
+export interface UseAffinoDataGridVisibilityFeatureResult {
+    visibilityEnabled: Ref<boolean>;
+    hiddenColumnKeys: ComputedRef<readonly string[]>;
+    isColumnVisible: (columnKey: string) => boolean;
+    setColumnVisible: (columnKey: string, visible: boolean) => void;
+    toggleColumnVisible: (columnKey: string) => void;
+    setHiddenColumnKeys: (keys: readonly string[]) => void;
+    resetHiddenColumns: () => void;
+}
+export declare function normalizeVisibilityFeature(input: boolean | AffinoVisibilityFeatureInput | undefined): NormalizedAffinoVisibilityFeature;
+export declare function useAffinoDataGridVisibilityFeature<TRow>(options: UseAffinoDataGridVisibilityFeatureOptions<TRow>): UseAffinoDataGridVisibilityFeatureResult;
+//# sourceMappingURL=useAffinoDataGridVisibilityFeature.d.ts.map

package/dist/composables/useAffinoDataGridVisibilityFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridVisibilityFeature.d.ts","sourceRoot":"","sources":["../../src/composables/useAffinoDataGridVisibilityFeature.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAC9D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAEpE,MAAM,WAAW,4BAA4B;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CACrC;AAED,MAAM,WAAW,iCAAiC;IAChD,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,SAAS,MAAM,EAAE,CAAA;CACpC;AAED,MAAM,WAAW,yCAAyC,CAAC,IAAI;IAC7D,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,OAAO,EAAE,GAAG,CAAC,SAAS,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,iCAAiC,CAAA;CAC3C;AAED,MAAM,WAAW,wCAAwC;IACvD,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC/B,gBAAgB,EAAE,WAAW,CAAC,SAAS,MAAM,EAAE,CAAC,CAAA;IAChD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAA;IAC/C,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/D,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAA;IACtD,kBAAkB,EAAE,MAAM,IAAI,CAAA;CAC/B;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,OAAO,GAAG,4BAA4B,GAAG,SAAS,GACxD,iCAAiC,CAiBnC;AAED,wBAAgB,kCAAkC,CAAC,IAAI,EACrD,OAAO,EAAE,yCAAyC,CAAC,IAAI,CAAC,GACvD,wCAAwC,CA+C1C"}

package/dist/composables/useAffinoDataGridVisibilityFeature.js

@@ -0,0 +1,59 @@
+import { computed, ref, watch } from "vue";
+export function normalizeVisibilityFeature(input) {
+    if (typeof input === "boolean") {
+        return {
+            enabled: input,
+            hiddenColumnKeys: [],
+        };
+    }
+    if (!input) {
+        return {
+            enabled: false,
+            hiddenColumnKeys: [],
+        };
+    }
+    return {
+        enabled: input.enabled ?? true,
+        hiddenColumnKeys: Array.isArray(input.hiddenColumnKeys) ? [...input.hiddenColumnKeys] : [],
+    };
+}
+export function useAffinoDataGridVisibilityFeature(options) {
+    const visibilityEnabled = ref(options.feature.enabled);
+    const hiddenColumnKeySet = ref(new Set(options.feature.hiddenColumnKeys));
+    const hiddenColumnKeys = computed(() => Array.from(hiddenColumnKeySet.value));
+    const isColumnVisible = (columnKey) => (!hiddenColumnKeySet.value.has(columnKey));
+    const setColumnVisible = (columnKey, visible) => {
+        const next = new Set(hiddenColumnKeySet.value);
+        if (visible) {
+            next.delete(columnKey);
+        }
+        else {
+            next.add(columnKey);
+        }
+        hiddenColumnKeySet.value = next;
+    };
+    const toggleColumnVisible = (columnKey) => {
+        setColumnVisible(columnKey, !isColumnVisible(columnKey));
+    };
+    const setHiddenColumnKeys = (keys) => {
+        hiddenColumnKeySet.value = new Set(keys);
+    };
+    const resetHiddenColumns = () => {
+        hiddenColumnKeySet.value = new Set();
+    };
+    watch([options.columns, hiddenColumnKeys, visibilityEnabled], ([nextColumns, nextHiddenColumnKeys, enabled]) => {
+        const hidden = new Set(nextHiddenColumnKeys);
+        nextColumns.forEach(column => {
+            options.runtime.api.setColumnVisibility(column.key, !enabled || !hidden.has(column.key));
+        });
+    }, { immediate: true });
+    return {
+        visibilityEnabled,
+        hiddenColumnKeys,
+        isColumnVisible,
+        setColumnVisible,
+        toggleColumnVisible,
+        setHiddenColumnKeys,
+        resetHiddenColumns,
+    };
+}