@affino/datagrid-vue 0.1.0

package/dist/composables/useTableFindReplaceBridge.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, Ref } from "vue";
+import type { UiTableColumn, VisibleRow } from "../../core/types";
+import type { SelectionPoint } from "./useTableSelection";
+import type { useFindReplaceStore } from "@/stores/useFindReplaceStore";
+export type FindReplaceStore = ReturnType<typeof useFindReplaceStore>;
+interface UseTableFindReplaceBridgeOptions {
+    findReplace: FindReplaceStore;
+    processedRows: ComputedRef<VisibleRow[]>;
+    visibleColumns: ComputedRef<UiTableColumn[]>;
+    scrollToRow: (rowIndex: number) => void;
+    scrollToColumn: (columnKey: string) => void;
+    focusCell: (rowIndex: number, columnKey: string) => void;
+    getCellValue: (rowIndex: number, columnKey: string) => unknown;
+    setCellValue: (rowIndex: number, columnKey: string | number, value: unknown) => boolean;
+    focusContainer: () => void;
+    undo: () => void;
+    redo: () => void;
+    anchorCell: Ref<SelectionPoint | null>;
+    selectedCell: Ref<SelectionPoint | null>;
+    isEventInsideTable: (target: EventTarget | null) => boolean;
+    isEditableTarget: (target: EventTarget | null) => boolean;
+}
+export declare function useTableFindReplaceBridge(options: UseTableFindReplaceBridgeOptions): {
+    closeFindReplace: () => void;
+};
+export {};
+//# sourceMappingURL=useTableFindReplaceBridge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableFindReplaceBridge.d.ts","sourceRoot":"","sources":["../../src/composables/useTableFindReplaceBridge.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAErE,UAAU,gCAAgC;IACxC,WAAW,EAAE,gBAAgB,CAAA;IAC7B,aAAa,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,CAAA;IACxC,cAAc,EAAE,WAAW,CAAC,aAAa,EAAE,CAAC,CAAA;IAC5C,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACxD,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAA;IAC9D,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;IACvF,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,UAAU,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACtC,YAAY,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,OAAO,CAAA;IAC3D,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,OAAO,CAAA;CAC1D;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,gCAAgC;;EAkHlF"}

package/dist/composables/useTableFindReplaceBridge.js

@@ -0,0 +1,84 @@
+import { nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+export function useTableFindReplaceBridge(options) {
+    const { findReplace, processedRows, visibleColumns, scrollToRow, scrollToColumn, focusCell, getCellValue, setCellValue, focusContainer, undo, redo, anchorCell, selectedCell, isEventInsideTable, isEditableTarget, } = options;
+    function openFindModal() {
+        findReplace.activate("find");
+    }
+    function openReplaceModal() {
+        findReplace.activate("replace");
+    }
+    function closeFindReplace() {
+        findReplace.deactivate();
+        findReplace.clearResults();
+        nextTick(() => focusContainer());
+    }
+    findReplace.setContext({
+        getRows: () => processedRows.value,
+        getColumns: () => visibleColumns.value,
+        scrollToCell: async (rowIndex, columnKey) => {
+            scrollToRow(rowIndex);
+            scrollToColumn(columnKey);
+            await nextTick();
+        },
+        selectCell: (rowIndex, columnKey) => {
+            focusCell(rowIndex, columnKey);
+        },
+        getCellValue: (rowIndex, columnKey) => getCellValue(rowIndex, columnKey),
+        setCellValue: (rowIndex, columnKey, value) => setCellValue(rowIndex, columnKey, value),
+        focusContainer: () => focusContainer(),
+        undo: () => undo(),
+        redo: () => redo(),
+    });
+    watch(() => {
+        const cell = anchorCell.value ?? selectedCell.value;
+        return cell ? cell.colIndex : null;
+    }, colIndex => {
+        if (colIndex == null || colIndex < 0) {
+            findReplace.setActiveColumn(null);
+            return;
+        }
+        const column = visibleColumns.value[colIndex];
+        findReplace.setActiveColumn(column?.key ?? null);
+    }, { immediate: true });
+    watch(() => visibleColumns.value.map(column => column.key).join("|"), () => {
+        const cell = anchorCell.value ?? selectedCell.value;
+        if (!cell) {
+            findReplace.setActiveColumn(null);
+            return;
+        }
+        const column = visibleColumns.value[cell.colIndex];
+        findReplace.setActiveColumn(column?.key ?? null);
+    });
+    const handleGlobalKeydown = (event) => {
+        const key = event.key.toLowerCase();
+        const ctrlOrMeta = event.metaKey || event.ctrlKey;
+        if (!ctrlOrMeta)
+            return;
+        const insideTable = isEventInsideTable(event.target);
+        const active = findReplace.isActive;
+        const target = event.target;
+        const pageRoot = document.querySelector("[data-ui-page]");
+        const insidePage = pageRoot ? pageRoot.contains(target) : false;
+        if (!active && !insideTable && !insidePage)
+            return;
+        if (!active && isEditableTarget(event.target))
+            return;
+        if (key === "f") {
+            event.preventDefault();
+            openFindModal();
+        }
+        else if (key === "h") {
+            event.preventDefault();
+            openReplaceModal();
+        }
+    };
+    onMounted(() => {
+        window.addEventListener("keydown", handleGlobalKeydown, true);
+    });
+    onBeforeUnmount(() => {
+        window.removeEventListener("keydown", handleGlobalKeydown, true);
+    });
+    return {
+        closeFindReplace,
+    };
+}

package/dist/composables/useTableFocusManagement.d.ts

@@ -0,0 +1,35 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { UiTableColumn } from "../../core/types";
+import type { SelectionPoint } from "./useTableSelection";
+interface UseTableFocusManagementOptions {
+    anchorCell: Ref<SelectionPoint | null>;
+    selectedCell: Ref<SelectionPoint | null>;
+    isCellInSelectionRange: (rowIndex: number, colIndex: number) => boolean;
+    selectCell: (rowIndex: number, columnKey: string, extend: boolean, options?: {
+        colIndex?: number;
+    }) => void;
+    visibleColumns: ComputedRef<UiTableColumn[]>;
+    containerRef: Ref<HTMLDivElement | null>;
+    focusableContainers: ComputedRef<HTMLElement[]>;
+    resolveCellElement: (rowIndex: number, columnKey: string) => HTMLElement | null;
+    isGridFocused: Ref<boolean>;
+}
+interface CellFocusPayload {
+    rowIndex: number;
+    colIndex: number;
+    columnKey: string;
+}
+export declare function useTableFocusManagement({ anchorCell, selectedCell, isCellInSelectionRange, selectCell, visibleColumns, containerRef, focusableContainers, resolveCellElement, isGridFocused, }: UseTableFocusManagementOptions): {
+    isActiveCell: (rowIndex: number, colIndex: number) => boolean;
+    getCellTabIndex: (rowIndex: number, colIndex: number) => number;
+    getCellDomId: (rowIndex: number, columnKey: string) => string;
+    getAriaRowIndex: (displayIndex: number) => number;
+    getAriaColIndex: (colIndex: number) => number;
+    getHeaderTabIndex: (colIndex: number) => number;
+    focusActiveCellElement: (preventScroll?: boolean) => boolean;
+    onCellComponentFocus: (payload: CellFocusPayload) => void;
+    onGridFocusIn: (event: FocusEvent) => void;
+    onGridFocusOut: (event: FocusEvent) => void;
+};
+export {};
+//# sourceMappingURL=useTableFocusManagement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableFocusManagement.d.ts","sourceRoot":"","sources":["../../src/composables/useTableFocusManagement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzD,UAAU,8BAA8B;IACtC,UAAU,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACtC,YAAY,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACvE,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3G,cAAc,EAAE,WAAW,CAAC,aAAa,EAAE,CAAC,CAAA;IAC5C,YAAY,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,mBAAmB,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAA;IAC/C,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAA;IAC/E,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CAC5B;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,GACd,EAAE,8BAA8B;6BACC,MAAM,YAAY,MAAM,KAAG,OAAO;gCAK/B,MAAM,YAAY,MAAM,KAAG,MAAM;6BAIpC,MAAM,aAAa,MAAM,KAAG,MAAM;oCAI3B,MAAM,KAAG,MAAM;gCAInB,MAAM,KAAG,MAAM;kCAIb,MAAM,KAAG,MAAM;yDAOG,OAAO;oCAYvB,gBAAgB;2BAiBzB,UAAU;4BAwBT,UAAU;EA6B1C"}

package/dist/composables/useTableFocusManagement.js

@@ -0,0 +1,106 @@
+import { nextTick, watch } from "vue";
+export function useTableFocusManagement({ anchorCell, selectedCell, isCellInSelectionRange, selectCell, visibleColumns, containerRef, focusableContainers, resolveCellElement, isGridFocused, }) {
+    const isActiveCell = (rowIndex, colIndex) => {
+        const active = anchorCell.value ?? selectedCell.value;
+        return Boolean(active && active.rowIndex === rowIndex && active.colIndex === colIndex);
+    };
+    const getCellTabIndex = (rowIndex, colIndex) => {
+        return isActiveCell(rowIndex, colIndex) ? 0 : -1;
+    };
+    const getCellDomId = (rowIndex, columnKey) => {
+        return `ui-table-cell-${rowIndex}-${columnKey}`;
+    };
+    const getAriaRowIndex = (displayIndex) => {
+        return displayIndex + 1;
+    };
+    const getAriaColIndex = (colIndex) => {
+        return colIndex + 1;
+    };
+    const getHeaderTabIndex = (colIndex) => {
+        const active = anchorCell.value ?? selectedCell.value;
+        if (active?.colIndex === colIndex)
+            return 0;
+        if (!active && colIndex === 0)
+            return 0;
+        return -1;
+    };
+    const focusActiveCellElement = (preventScroll = true) => {
+        const active = anchorCell.value ?? selectedCell.value;
+        if (!active)
+            return false;
+        const column = visibleColumns.value[active.colIndex];
+        if (!column)
+            return false;
+        const cell = resolveCellElement(active.rowIndex, column.key);
+        if (!cell)
+            return false;
+        cell.focus({ preventScroll });
+        isGridFocused.value = true;
+        return true;
+    };
+    const onCellComponentFocus = (payload) => {
+        const focused = selectedCell.value ?? anchorCell.value;
+        const withinRange = isCellInSelectionRange(payload.rowIndex, payload.colIndex);
+        if (focused && focused.rowIndex === payload.rowIndex && focused.colIndex === payload.colIndex) {
+            isGridFocused.value = true;
+            return;
+        }
+        if (withinRange) {
+            isGridFocused.value = true;
+            return;
+        }
+        selectCell(payload.rowIndex, payload.columnKey, false, { colIndex: payload.colIndex });
+        isGridFocused.value = true;
+    };
+    const onGridFocusIn = (event) => {
+        const container = containerRef.value;
+        if (!container)
+            return;
+        isGridFocused.value = true;
+        if (event.target === container) {
+            nextTick(() => focusActiveCellElement());
+        }
+    };
+    const isTargetWithinTable = (node) => {
+        if (!node) {
+            return false;
+        }
+        if (containerRef.value?.contains(node)) {
+            return true;
+        }
+        for (const surface of focusableContainers.value) {
+            if (surface?.contains(node)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const onGridFocusOut = (event) => {
+        const container = containerRef.value;
+        if (!container) {
+            isGridFocused.value = false;
+            return;
+        }
+        const nextTarget = event.relatedTarget;
+        if (!isTargetWithinTable(nextTarget)) {
+            isGridFocused.value = false;
+        }
+    };
+    watch(anchorCell, () => {
+        if (!isGridFocused.value)
+            return;
+        nextTick(() => focusActiveCellElement());
+    });
+    return {
+        isActiveCell,
+        getCellTabIndex,
+        getCellDomId,
+        getAriaRowIndex,
+        getAriaColIndex,
+        getHeaderTabIndex,
+        focusActiveCellElement,
+        onCellComponentFocus,
+        onGridFocusIn,
+        onGridFocusOut,
+    };
+}

package/dist/composables/useTableGridLayout.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { CSSProperties } from "vue";
+import type { RowPoolItem } from "./useTableViewport";
+interface UseTableGridLayoutParams {
+    totalContentHeightDom: ComputedRef<number>;
+    rowHeightDom: ComputedRef<number>;
+    stickyBottomOffsets: Ref<Map<number, number>>;
+    startIndex: Ref<number>;
+    rowWindowStart?: Ref<number> | ComputedRef<number>;
+}
+export declare function useTableGridLayout({ totalContentHeightDom, rowHeightDom, stickyBottomOffsets, startIndex, rowWindowStart: _rowWindowStart, }: UseTableGridLayoutParams): {
+    virtualContainerStyle: ComputedRef<CSSProperties>;
+    headerRowStickyStyle: ComputedRef<CSSProperties>;
+    rowLayerStyle: (pooled: RowPoolItem) => CSSProperties;
+};
+export {};
+//# sourceMappingURL=useTableGridLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableGridLayout.d.ts","sourceRoot":"","sources":["../../src/composables/useTableGridLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErD,UAAU,wBAAwB;IAChC,qBAAqB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1C,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,mBAAmB,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7C,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACvB,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;CACnD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,cAAc,EAAE,eAAe,GAChC,EAAE,wBAAwB;;;4BAYM,WAAW,KAAG,aAAa;EAoC3D"}

package/dist/composables/useTableGridLayout.js

@@ -0,0 +1,47 @@
+import { computed } from "vue";
+export function useTableGridLayout({ totalContentHeightDom, rowHeightDom, stickyBottomOffsets, startIndex, rowWindowStart: _rowWindowStart, }) {
+    const headerRowStickyStyle = computed(() => ({
+        position: "sticky",
+        top: "0px",
+        zIndex: 45,
+    }));
+    const virtualContainerStyle = computed(() => ({
+        position: "relative",
+        height: `${totalContentHeightDom.value}px`,
+    }));
+    const rowLayerStyle = (pooled) => {
+        const resolvedIndex = pooled.rowIndex >= 0 ? pooled.rowIndex : startIndex.value + pooled.poolIndex;
+        const translateIndex = resolvedIndex >= 0 ? resolvedIndex : 0;
+        const translateY = translateIndex * rowHeightDom.value;
+        const style = {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            transform: `translate3d(0, ${translateY}px, 0)`,
+            height: `${rowHeightDom.value}px`,
+            width: "100%",
+        };
+        if (!pooled.entry) {
+            style.visibility = "hidden";
+            style.pointerEvents = "none";
+            return style;
+        }
+        const bottomOffset = stickyBottomOffsets.value.get(pooled.entry.originalIndex);
+        if (bottomOffset != null) {
+            style.position = "sticky";
+            style.top = "auto";
+            style.bottom = `${bottomOffset}px`;
+            style.transform = "none";
+            style.zIndex = 8;
+        }
+        if (pooled.entry.stickyTop && pooled.displayIndex === 0) {
+            style.top = `var(--ui-table-header-height, 40px)`;
+        }
+        return style;
+    };
+    return {
+        virtualContainerStyle,
+        headerRowStickyStyle,
+        rowLayerStyle,
+    };
+}

package/dist/composables/useTableGrouping.d.ts

@@ -0,0 +1,54 @@
+import { type ComputedRef } from "vue";
+import type { UiTableColumn, VisibleRow } from "../../core/types";
+import type { RowKey } from "@/composables/useSelectableRows";
+import type { UiTableSettingsAdapter } from "/datagrid-core/tableSettingsAdapter";
+export interface GroupRowData {
+    __group: true;
+    key: string;
+    columnKey: string;
+    value: any;
+    level: number;
+    size: number;
+    [key: string]: unknown;
+}
+interface UseTableGroupingOptions {
+    sortedRows: ComputedRef<VisibleRow[]>;
+    settingsAdapter: ComputedRef<UiTableSettingsAdapter>;
+    tableId: ComputedRef<string>;
+    isPlaceholderRow?: (row: unknown) => boolean;
+}
+export declare const GROUP_INDENT_BASE = 12;
+export declare const GROUP_INDENT_STEP = 16;
+export declare function useTableGrouping(options: UseTableGroupingOptions): {
+    groupState: import("vue").Ref<{
+        key: string;
+        expanded: boolean;
+    }[], {
+        key: string;
+        expanded: boolean;
+    }[] | {
+        key: string;
+        expanded: boolean;
+    }[]>;
+    groupExpansion: import("vue").Ref<Record<string, boolean>, Record<string, boolean>>;
+    groupHydrated: import("vue").Ref<boolean, boolean>;
+    groupedColumns: ComputedRef<string[]>;
+    groupedColumnSet: ComputedRef<Set<string>>;
+    groupOrderMap: ComputedRef<Map<string, number>>;
+    groupRowMembership: ComputedRef<Map<string, RowData[]>>;
+    processedRowIndexMap: ComputedRef<Map<RowKey, number>>;
+    processedRows: ComputedRef<VisibleRow[]>;
+    getGroupExpanded: (key: string) => boolean;
+    setGroupExpanded: (key: string, expanded: boolean) => void;
+    findRowIndexByRowId: (rowId: RowKey | null | undefined) => number | null;
+    getRowIdForDisplayIndex: (index: number) => RowKey | null;
+    toggleGroupRow: (key: string) => void;
+    isGroupExpanded: (key: string) => boolean;
+    onGroupColumn: (column: UiTableColumn) => void;
+    isGroupRowEntry: (entry: VisibleRow | null | undefined) => entry is VisibleRow & {
+        row: GroupRowData;
+    };
+    setGroupRefreshCallback: (callback: (() => void) | null) => void;
+};
+export {};
+//# sourceMappingURL=useTableGrouping.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableGrouping.d.ts","sourceRoot":"","sources":["../../src/composables/useTableGrouping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,KAAK,EAAW,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACtE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAEjF,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,IAAI,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,GAAG,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,UAAU,uBAAuB;IAC/B,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC,CAAA;IACrC,eAAe,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAA;IACpD,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC5B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAA;CAC7C;AAYD,eAAO,MAAM,iBAAiB,KAAK,CAAA;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAA;AAEnC,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB;;aACjC,MAAM;kBAAY,OAAO;;aAAzB,MAAM;kBAAY,OAAO;;aAAzB,MAAM;kBAAY,OAAO;;;;;;;;;;4BA2CxB,MAAM,KAAG,OAAO;4BAQhB,MAAM,YAAY,OAAO;iCAkJpB,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,MAAM,GAAG,IAAI;qCAQrC,MAAM,KAAG,MAAM,GAAG,IAAI;0BAcjC,MAAM;2BAaL,MAAM,KAAG,OAAO;4BAIf,aAAa;6BAcZ,UAAU,GAAG,IAAI,GAAG,SAAS,KAAG,KAAK,IAAI,UAAU,GAAG;QAAE,GAAG,EAAE,YAAY,CAAA;KAAE;wCAnNhE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;EAmQ/D"}

package/dist/composables/useTableGrouping.js

@@ -0,0 +1,255 @@
+import { computed, ref, shallowRef, watch } from "vue";
+export const GROUP_INDENT_BASE = 12;
+export const GROUP_INDENT_STEP = 16;
+export function useTableGrouping(options) {
+    const groupState = ref([]);
+    const groupExpansion = ref({});
+    const groupHydrated = ref(false);
+    const placeholderPredicate = options.isPlaceholderRow ?? null;
+    const effectiveSortedRows = computed(() => {
+        const rows = options.sortedRows.value;
+        if (!placeholderPredicate) {
+            return rows;
+        }
+        if (!rows.length) {
+            return rows;
+        }
+        return rows.filter(entry => !placeholderPredicate(entry.row));
+    });
+    const groupedColumns = computed(() => groupState.value.map(group => group.key));
+    const groupedColumnSet = computed(() => {
+        const set = new Set();
+        groupState.value.forEach(entry => set.add(entry.key));
+        return set;
+    });
+    const groupOrderMap = computed(() => {
+        const map = new Map();
+        groupState.value.forEach((entry, index) => {
+            map.set(entry.key, index + 1);
+        });
+        return map;
+    });
+    const refreshCallback = shallowRef(null);
+    function scheduleRefresh() {
+        refreshCallback.value?.();
+    }
+    function setGroupRefreshCallback(callback) {
+        refreshCallback.value = callback;
+    }
+    function getGroupExpanded(key) {
+        const record = groupExpansion.value;
+        if (Object.prototype.hasOwnProperty.call(record, key)) {
+            return record[key];
+        }
+        return true;
+    }
+    function setGroupExpanded(key, expanded) {
+        groupExpansion.value = {
+            ...groupExpansion.value,
+            [key]: expanded,
+        };
+        if (groupState.value.some(item => item.key === key)) {
+            groupState.value = groupState.value.map(item => item.key === key ? { ...item, expanded } : item);
+        }
+    }
+    function groupRowsByColumns(rows, columns) {
+        if (!columns.length)
+            return [];
+        const buildLevel = (data, level) => {
+            const columnKey = columns[level];
+            const groupsMap = new Map();
+            for (const row of data) {
+                const raw = row.row?.[columnKey];
+                const value = raw ?? "(blank)";
+                if (!groupsMap.has(value)) {
+                    groupsMap.set(value, []);
+                }
+                groupsMap.get(value).push(row);
+            }
+            return Array.from(groupsMap.entries()).map(([value, subset]) => {
+                const key = `${columnKey}:${String(value)}`;
+                const children = level < columns.length - 1 ? buildLevel(subset, level + 1) : [];
+                return {
+                    key,
+                    columnKey,
+                    value,
+                    level,
+                    rows: subset,
+                    children,
+                    expanded: getGroupExpanded(key),
+                };
+            });
+        };
+        return buildLevel(rows, 0);
+    }
+    function flattenGroupedTree(groups) {
+        const output = [];
+        const pushGroupRow = (node) => {
+            const payload = {
+                __group: true,
+                key: node.key,
+                columnKey: node.columnKey,
+                value: node.value,
+                level: node.level,
+                size: node.rows.length,
+            };
+            output.push({
+                row: payload,
+                rowId: `__group:${node.key}`,
+                originalIndex: -1,
+                displayIndex: 0,
+            });
+        };
+        const pushDataRow = (entry) => {
+            output.push({
+                ...entry,
+                displayIndex: 0,
+            });
+        };
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                pushGroupRow(node);
+                if (!node.expanded) {
+                    continue;
+                }
+                if (node.children.length) {
+                    traverse(node.children);
+                }
+                else {
+                    node.rows.forEach(pushDataRow);
+                }
+            }
+        };
+        traverse(groups);
+        return output.map((entry, index) => ({
+            ...entry,
+            displayIndex: index,
+        }));
+    }
+    const groupedTree = computed(() => groupedColumns.value.length ? groupRowsByColumns(effectiveSortedRows.value, groupedColumns.value) : []);
+    const groupRowMembership = computed(() => {
+        const map = new Map();
+        const collect = (nodes) => {
+            for (const node of nodes) {
+                const rows = [];
+                for (const entry of node.rows) {
+                    const candidate = entry?.row;
+                    if (!candidate) {
+                        continue;
+                    }
+                    if (candidate.__group) {
+                        continue;
+                    }
+                    rows.push(candidate);
+                }
+                map.set(node.key, rows);
+                if (node.children.length) {
+                    collect(node.children);
+                }
+            }
+        };
+        if (groupedTree.value.length) {
+            collect(groupedTree.value);
+        }
+        return map;
+    });
+    const flattenedGroupedRows = computed(() => groupedColumns.value.length ? flattenGroupedTree(groupedTree.value) : []);
+    const processedRows = computed(() => groupedColumns.value.length ? flattenedGroupedRows.value : effectiveSortedRows.value);
+    const processedRowIndexMap = computed(() => {
+        const map = new Map();
+        processedRows.value.forEach((entry, index) => {
+            if (entry?.rowId !== undefined && entry?.rowId !== null) {
+                map.set(entry.rowId, index);
+            }
+        });
+        return map;
+    });
+    function findRowIndexByRowId(rowId) {
+        if (rowId === null || rowId === undefined) {
+            return null;
+        }
+        const index = processedRowIndexMap.value.get(rowId);
+        return typeof index === "number" ? index : null;
+    }
+    function getRowIdForDisplayIndex(index) {
+        const entry = processedRows.value[index];
+        return entry?.rowId ?? null;
+    }
+    function findGroupByKey(nodes, key) {
+        for (const node of nodes) {
+            if (node.key === key)
+                return node;
+            const child = findGroupByKey(node.children, key);
+            if (child)
+                return child;
+        }
+        return null;
+    }
+    function toggleGroupRow(key) {
+        if (!groupedColumns.value.length) {
+            return;
+        }
+        const node = findGroupByKey(groupedTree.value, key);
+        if (!node) {
+            return;
+        }
+        const next = !getGroupExpanded(key);
+        setGroupExpanded(key, next);
+        scheduleRefresh();
+    }
+    function isGroupExpanded(key) {
+        return getGroupExpanded(key);
+    }
+    function onGroupColumn(column) {
+        if (!column || column.isSystem) {
+            return;
+        }
+        const existingIndex = groupState.value.findIndex(item => item.key === column.key);
+        if (existingIndex >= 0) {
+            groupState.value = groupState.value.filter(item => item.key !== column.key);
+        }
+        else {
+            groupState.value = [...groupState.value, { key: column.key, expanded: true }];
+        }
+        groupExpansion.value = {};
+        scheduleRefresh();
+    }
+    function isGroupRowEntry(entry) {
+        return Boolean(entry?.row && entry.row.__group);
+    }
+    watch(groupState, () => {
+        scheduleRefresh();
+    }, { deep: true });
+    watch(groupedColumns, () => {
+        if (!groupHydrated.value)
+            return;
+        groupExpansion.value = {};
+        scheduleRefresh();
+    });
+    watch([groupState, groupExpansion], ([state, expansion]) => {
+        if (!groupHydrated.value)
+            return;
+        const columns = state.map(item => item.key);
+        options.settingsAdapter.value.setGroupState(options.tableId.value, columns, { ...expansion });
+    }, { deep: true });
+    return {
+        groupState,
+        groupExpansion,
+        groupHydrated,
+        groupedColumns,
+        groupedColumnSet,
+        groupOrderMap,
+        groupRowMembership,
+        processedRowIndexMap,
+        processedRows,
+        getGroupExpanded,
+        setGroupExpanded,
+        findRowIndexByRowId,
+        getRowIdForDisplayIndex,
+        toggleGroupRow,
+        isGroupExpanded,
+        onGroupColumn,
+        isGroupRowEntry,
+        setGroupRefreshCallback,
+    };
+}