@youp-grid/core 0.1.0

package/dist/infinite-scroll.js

@@ -0,0 +1,24 @@
+export function getInfiniteScrollTrigger(options) {
+    const rowCount = Math.max(0, Math.trunc(options.rowCount));
+    const lastVisibleRowIndex = normalizeLastVisibleRowIndex(options.lastVisibleRowIndex, rowCount);
+    const threshold = Math.max(0, Math.trunc(options.threshold ?? 20));
+    const remainingRows = Math.max(0, rowCount - 1 - lastVisibleRowIndex);
+    const hasMoreRows = options.hasMoreRows ?? true;
+    const loading = options.loading ?? false;
+    return {
+        shouldLoadMore: rowCount > 0 && hasMoreRows && !loading && remainingRows <= threshold,
+        rowCount,
+        lastVisibleRowIndex,
+        threshold,
+        remainingRows,
+    };
+}
+function normalizeLastVisibleRowIndex(lastVisibleRowIndex, rowCount) {
+    if (rowCount === 0) {
+        return -1;
+    }
+    return clamp(Math.trunc(lastVisibleRowIndex), -1, rowCount - 1);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/pagination.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationState, RowNode } from "./types.ts";
+export declare function applyPagination<TRow>(rows: readonly RowNode<TRow>[], pagination?: PaginationState): {
+    rows: RowNode<TRow>[];
+    pageCount?: number;
+};

package/dist/pagination.js

@@ -0,0 +1,16 @@
+export function applyPagination(rows, pagination) {
+    if (!pagination) {
+        return { rows: [...rows] };
+    }
+    const pageSize = Math.max(1, pagination.pageSize);
+    const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
+    const pageIndex = clamp(pagination.pageIndex, 0, pageCount - 1);
+    const start = pageIndex * pageSize;
+    return {
+        rows: rows.slice(start, start + pageSize),
+        pageCount,
+    };
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/row-grouping.d.ts

@@ -0,0 +1,3 @@
+import type { ResolvedColumnDef, RowDisplayNode, RowGroupNode, RowGroupingState, RowNode } from "./types.ts";
+export declare function applyRowGrouping<TRow>(rows: readonly RowNode<TRow>[], columns: readonly ResolvedColumnDef<TRow>[], rowGrouping?: RowGroupingState): RowDisplayNode<TRow>[];
+export declare function isRowGroupNode<TRow>(row: RowDisplayNode<TRow>): row is RowGroupNode;

package/dist/row-grouping.js

@@ -0,0 +1,65 @@
+import { getColumnById } from "./columns.js";
+export function applyRowGrouping(rows, columns, rowGrouping) {
+    const groupColumns = (rowGrouping?.columnIds ?? [])
+        .map((columnId) => getColumnById(columns, columnId))
+        .filter((column) => Boolean(column));
+    if (groupColumns.length === 0) {
+        return [...rows];
+    }
+    const collapsedGroupIds = new Set(rowGrouping?.collapsedGroupIds ?? []);
+    const groupedRows = groupRows(rows, groupColumns, collapsedGroupIds, 0, []);
+    return groupedRows.map((row, index) => isRowGroupNode(row) ? { ...row, index } : row);
+}
+export function isRowGroupNode(row) {
+    return "type" in row && row.type === "group";
+}
+function groupRows(rows, columns, collapsedGroupIds, depth, path) {
+    const column = columns[depth];
+    if (!column) {
+        return [...rows];
+    }
+    const grouped = new Map();
+    for (const row of rows) {
+        const value = column.accessor(row.original);
+        const key = stringifyGroupValue(value);
+        const existing = grouped.get(key);
+        if (existing) {
+            existing.rows.push(row);
+            continue;
+        }
+        grouped.set(key, { value, rows: [row] });
+    }
+    const result = [];
+    for (const [key, group] of grouped) {
+        const groupId = createGroupId([...path, `${column.id}:${key}`]);
+        const expanded = !collapsedGroupIds.has(groupId);
+        result.push({
+            type: "group",
+            id: groupId,
+            groupId,
+            index: result.length,
+            depth,
+            columnId: column.id,
+            value: group.value,
+            label: stringifyGroupLabel(group.value),
+            rowCount: group.rows.length,
+            expanded,
+        });
+        if (expanded) {
+            result.push(...groupRows(group.rows, columns, collapsedGroupIds, depth + 1, [
+                ...path,
+                `${column.id}:${key}`,
+            ]));
+        }
+    }
+    return result;
+}
+function createGroupId(path) {
+    return `group:${path.join("/")}`;
+}
+function stringifyGroupValue(value) {
+    return encodeURIComponent(stringifyGroupLabel(value));
+}
+function stringifyGroupLabel(value) {
+    return String(value ?? "(empty)");
+}

package/dist/row-model.d.ts

@@ -0,0 +1,2 @@
+import type { BuildRowModelOptions, RowModel } from "./types.ts";
+export declare function buildRowModel<TRow>(options: BuildRowModelOptions<TRow>): RowModel<TRow>;

package/dist/row-model.js

@@ -0,0 +1,72 @@
+import { applyColumnState, getVisibleColumns } from "./column-state.js";
+import { applyAggregation } from "./aggregation.js";
+import { normalizeColumns } from "./columns.js";
+import { applyFilters } from "./filtering.js";
+import { applyPagination } from "./pagination.js";
+import { applyRowGrouping } from "./row-grouping.js";
+import { applySorting } from "./sorting.js";
+export function buildRowModel(options) {
+    const columns = applyColumnState(normalizeColumns(options.columns), options.state?.columns);
+    const visibleColumns = getVisibleColumns(columns);
+    const allRows = createRowNodes(options.rows, options.getRowId);
+    if (options.rowModelType === "server") {
+        return buildServerRowModel({
+            allRows,
+            columns,
+            visibleColumns,
+            state: options.state,
+            serverRowCount: options.serverRowCount,
+            serverFilteredRowCount: options.serverFilteredRowCount,
+        });
+    }
+    const filteredRows = applyFilters(allRows, columns, options.state?.filters);
+    const sortedRows = applySorting(filteredRows, columns, options.state?.sort);
+    const paginated = applyPagination(sortedRows, options.state?.pagination);
+    const aggregation = applyAggregation(filteredRows, columns, options.state?.aggregation);
+    const displayRows = applyRowGrouping(paginated.rows, columns, options.state?.rowGrouping);
+    return {
+        columns,
+        visibleColumns,
+        allRows,
+        filteredRows,
+        sortedRows,
+        visibleRows: paginated.rows,
+        displayRows,
+        aggregation,
+        totalRowCount: allRows.length,
+        filteredRowCount: filteredRows.length,
+        visibleRowCount: paginated.rows.length,
+        pageCount: paginated.pageCount,
+    };
+}
+function buildServerRowModel(context) {
+    const totalRowCount = context.serverRowCount ?? context.allRows.length;
+    const filteredRowCount = context.serverFilteredRowCount ?? totalRowCount;
+    return {
+        columns: context.columns,
+        visibleColumns: context.visibleColumns,
+        allRows: context.allRows,
+        filteredRows: context.allRows,
+        sortedRows: context.allRows,
+        visibleRows: context.allRows,
+        displayRows: applyRowGrouping(context.allRows, context.columns, context.state?.rowGrouping),
+        aggregation: applyAggregation(context.allRows, context.columns, context.state?.aggregation),
+        totalRowCount,
+        filteredRowCount,
+        visibleRowCount: context.allRows.length,
+        pageCount: getServerPageCount(filteredRowCount, context.state?.pagination),
+    };
+}
+function getServerPageCount(rowCount, pagination) {
+    if (!pagination) {
+        return undefined;
+    }
+    return Math.ceil(Math.max(0, rowCount) / Math.max(1, pagination.pageSize));
+}
+function createRowNodes(rows, getRowId) {
+    return rows.map((row, index) => ({
+        id: getRowId ? getRowId(row, index) : index,
+        index,
+        original: row,
+    }));
+}

package/dist/selection.d.ts

@@ -0,0 +1,5 @@
+import type { GridRowId, GridState } from "./types.ts";
+export declare function setRowSelected(state: GridState, rowId: GridRowId, selected: boolean): GridState;
+export declare function toggleRowSelected(state: GridState, rowId: GridRowId): GridState;
+export declare function setSelectedRows(state: GridState, rowIds: readonly GridRowId[]): GridState;
+export declare function clearSelection(state: GridState): GridState;

package/dist/selection.js

@@ -0,0 +1,28 @@
+export function setRowSelected(state, rowId, selected) {
+    const selectedRowIds = new Set(state.selectedRowIds ?? []);
+    if (selected) {
+        selectedRowIds.add(rowId);
+    }
+    else {
+        selectedRowIds.delete(rowId);
+    }
+    return {
+        ...state,
+        selectedRowIds: [...selectedRowIds],
+    };
+}
+export function toggleRowSelected(state, rowId) {
+    return setRowSelected(state, rowId, !(state.selectedRowIds ?? []).includes(rowId));
+}
+export function setSelectedRows(state, rowIds) {
+    return {
+        ...state,
+        selectedRowIds: [...new Set(rowIds)],
+    };
+}
+export function clearSelection(state) {
+    return {
+        ...state,
+        selectedRowIds: [],
+    };
+}

package/dist/sorting.d.ts

@@ -0,0 +1,2 @@
+import type { ResolvedColumnDef, RowNode, SortRule } from "./types.ts";
+export declare function applySorting<TRow>(rows: readonly RowNode<TRow>[], columns: readonly ResolvedColumnDef<TRow>[], sortRules?: readonly SortRule[]): RowNode<TRow>[];

package/dist/sorting.js

@@ -0,0 +1,49 @@
+import { getColumnById } from "./columns.js";
+export function applySorting(rows, columns, sortRules = []) {
+    const activeRules = sortRules.filter((rule) => rule.direction);
+    if (activeRules.length === 0) {
+        return [...rows];
+    }
+    return [...rows].sort((left, right) => {
+        for (const rule of activeRules) {
+            const column = getColumnById(columns, rule.columnId);
+            if (!column) {
+                continue;
+            }
+            const result = compareRows(left, right, column);
+            if (result !== 0) {
+                return rule.direction === "desc" ? -result : result;
+            }
+        }
+        return left.index - right.index;
+    });
+}
+function compareRows(left, right, column) {
+    const leftValue = column.accessor(left.original);
+    const rightValue = column.accessor(right.original);
+    if (column.comparator) {
+        return column.comparator(leftValue, rightValue, left.original, right.original);
+    }
+    return comparePrimitive(leftValue, rightValue);
+}
+function comparePrimitive(left, right) {
+    if (left == null && right == null) {
+        return 0;
+    }
+    if (left == null) {
+        return -1;
+    }
+    if (right == null) {
+        return 1;
+    }
+    if (typeof left === "number" && typeof right === "number") {
+        return left - right;
+    }
+    if (left instanceof Date && right instanceof Date) {
+        return left.getTime() - right.getTime();
+    }
+    return String(left).localeCompare(String(right), undefined, {
+        numeric: true,
+        sensitivity: "base",
+    });
+}

package/dist/state.d.ts

@@ -0,0 +1,28 @@
+import type { AggregationRule, CursorPaginationState, FilterRule, GridState, PaginationState, RemoteCacheState, RowGroupingState, SortDirection } from "./types.ts";
+export declare function createGridState(state?: GridState): GridState;
+export declare function toggleSort(state: GridState, columnId: string, options?: {
+    multi?: boolean;
+    cycle?: readonly (SortDirection | undefined)[];
+}): GridState;
+export declare function setSort(state: GridState, columnId: string, direction: SortDirection, options?: {
+    multi?: boolean;
+}): GridState;
+export declare function clearSort(state: GridState, columnId: string): GridState;
+export declare function setFilter(state: GridState, filter: FilterRule): GridState;
+export declare function clearFilter(state: GridState, columnId: string): GridState;
+export declare function setPagination(state: GridState, pagination: PaginationState): GridState;
+export declare function setCursorPagination(state: GridState, cursorPagination: CursorPaginationState): GridState;
+export declare function setCursorPage(state: GridState, cursor: string | undefined): GridState;
+export declare function setCursorPageSize(state: GridState, pageSize: number): GridState;
+export declare function setAggregation(state: GridState, aggregation: readonly AggregationRule[]): GridState;
+export declare function setRowGrouping(state: GridState, rowGrouping: RowGroupingState | undefined): GridState;
+export declare function toggleRowGroupExpanded(state: GridState, groupId: string): GridState;
+export declare function startRemoteRequest(state: GridState, requestId: string): GridState;
+export declare function finishRemoteRequest(state: GridState, requestId: string): GridState;
+export declare function failRemoteRequest(state: GridState, requestId: string, error?: string): GridState;
+export declare function cancelRemoteRequest(state: GridState, requestId?: string | undefined): GridState;
+export declare function isActiveRemoteRequest(state: GridState, requestId: string): boolean;
+export declare function createRemoteCacheKey(state: GridState): string;
+export declare function setRemoteCache(state: GridState, remoteCache: RemoteCacheState): GridState;
+export declare function invalidateRemoteCache(state: GridState, key?: string): GridState;
+export declare function acknowledgeRemoteCache(state: GridState, key?: string): GridState;

package/dist/state.js

@@ -0,0 +1,295 @@
+export function createGridState(state = {}) {
+    return {
+        columns: state.columns ? [...state.columns] : [],
+        sort: state.sort ? [...state.sort] : [],
+        filters: state.filters ? [...state.filters] : [],
+        aggregation: state.aggregation ? [...state.aggregation] : [],
+        rowGrouping: state.rowGrouping
+            ? {
+                columnIds: [...state.rowGrouping.columnIds],
+                collapsedGroupIds: state.rowGrouping.collapsedGroupIds
+                    ? [...state.rowGrouping.collapsedGroupIds]
+                    : undefined,
+            }
+            : undefined,
+        pagination: state.pagination ? { ...state.pagination } : undefined,
+        cursorPagination: state.cursorPagination ? { ...state.cursorPagination } : undefined,
+        remoteRequest: state.remoteRequest ? { ...state.remoteRequest } : undefined,
+        remoteCache: state.remoteCache
+            ? {
+                ...state.remoteCache,
+                invalidatedKeys: state.remoteCache.invalidatedKeys
+                    ? [...state.remoteCache.invalidatedKeys]
+                    : undefined,
+            }
+            : undefined,
+        selectedRowIds: state.selectedRowIds ? [...state.selectedRowIds] : [],
+    };
+}
+export function toggleSort(state, columnId, options = {}) {
+    const cycle = options.cycle ?? ["asc", "desc", undefined];
+    const currentRules = state.sort ?? [];
+    const currentRule = currentRules.find((rule) => rule.columnId === columnId);
+    const currentIndex = cycle.findIndex((direction) => direction === currentRule?.direction);
+    const nextDirection = cycle[(currentIndex + 1) % cycle.length];
+    const remainingRules = options.multi
+        ? currentRules.filter((rule) => rule.columnId !== columnId)
+        : [];
+    return {
+        ...state,
+        sort: nextDirection
+            ? [...remainingRules, { columnId, direction: nextDirection }]
+            : remainingRules,
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setSort(state, columnId, direction, options = {}) {
+    const currentRules = state.sort ?? [];
+    const remainingRules = options.multi
+        ? currentRules.filter((rule) => rule.columnId !== columnId)
+        : [];
+    return {
+        ...state,
+        sort: [...remainingRules, { columnId, direction }],
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function clearSort(state, columnId) {
+    return {
+        ...state,
+        sort: (state.sort ?? []).filter((rule) => rule.columnId !== columnId),
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setFilter(state, filter) {
+    const filters = (state.filters ?? []).filter((item) => item.columnId !== filter.columnId);
+    return {
+        ...state,
+        filters: [...filters, filter],
+        pagination: resetPageIndex(state.pagination),
+        cursorPagination: resetCursor(state.cursorPagination),
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function clearFilter(state, columnId) {
+    return {
+        ...state,
+        filters: (state.filters ?? []).filter((filter) => filter.columnId !== columnId),
+        pagination: resetPageIndex(state.pagination),
+        cursorPagination: resetCursor(state.cursorPagination),
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setPagination(state, pagination) {
+    return {
+        ...state,
+        pagination: {
+            pageIndex: Math.max(0, pagination.pageIndex),
+            pageSize: Math.max(1, pagination.pageSize),
+        },
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setCursorPagination(state, cursorPagination) {
+    return {
+        ...state,
+        cursorPagination: {
+            ...cursorPagination,
+            pageSize: Math.max(1, cursorPagination.pageSize),
+        },
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setCursorPage(state, cursor) {
+    const cursorPagination = state.cursorPagination ?? {
+        pageSize: state.pagination?.pageSize ?? 50,
+    };
+    return setCursorPagination(state, {
+        ...cursorPagination,
+        cursor,
+    });
+}
+export function setCursorPageSize(state, pageSize) {
+    return setCursorPagination(state, {
+        ...state.cursorPagination,
+        cursor: undefined,
+        pageSize,
+    });
+}
+export function setAggregation(state, aggregation) {
+    return {
+        ...state,
+        aggregation: [...aggregation],
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function setRowGrouping(state, rowGrouping) {
+    return {
+        ...state,
+        rowGrouping: rowGrouping
+            ? {
+                columnIds: [...rowGrouping.columnIds],
+                collapsedGroupIds: rowGrouping.collapsedGroupIds
+                    ? [...rowGrouping.collapsedGroupIds]
+                    : undefined,
+            }
+            : undefined,
+        remoteCache: markRemoteCacheStale(state.remoteCache),
+    };
+}
+export function toggleRowGroupExpanded(state, groupId) {
+    const rowGrouping = state.rowGrouping;
+    if (!rowGrouping) {
+        return state;
+    }
+    const collapsedGroupIds = new Set(rowGrouping.collapsedGroupIds ?? []);
+    if (collapsedGroupIds.has(groupId)) {
+        collapsedGroupIds.delete(groupId);
+    }
+    else {
+        collapsedGroupIds.add(groupId);
+    }
+    return {
+        ...state,
+        rowGrouping: {
+            ...rowGrouping,
+            columnIds: [...rowGrouping.columnIds],
+            collapsedGroupIds: collapsedGroupIds.size > 0 ? [...collapsedGroupIds] : undefined,
+        },
+    };
+}
+export function startRemoteRequest(state, requestId) {
+    return {
+        ...state,
+        remoteRequest: {
+            requestId,
+            sequence: (state.remoteRequest?.sequence ?? 0) + 1,
+            status: "loading",
+        },
+    };
+}
+export function finishRemoteRequest(state, requestId) {
+    if (!isActiveRemoteRequest(state, requestId)) {
+        return state;
+    }
+    return setRemoteRequestStatus(state, {
+        requestId,
+        sequence: state.remoteRequest?.sequence ?? 0,
+        status: "success",
+    });
+}
+export function failRemoteRequest(state, requestId, error) {
+    if (!isActiveRemoteRequest(state, requestId)) {
+        return state;
+    }
+    return setRemoteRequestStatus(state, {
+        requestId,
+        sequence: state.remoteRequest?.sequence ?? 0,
+        status: "error",
+        error,
+    });
+}
+export function cancelRemoteRequest(state, requestId = state.remoteRequest?.requestId) {
+    if (!requestId || !isActiveRemoteRequest(state, requestId)) {
+        return state;
+    }
+    return setRemoteRequestStatus(state, {
+        requestId,
+        sequence: state.remoteRequest?.sequence ?? 0,
+        status: "cancelled",
+    });
+}
+export function isActiveRemoteRequest(state, requestId) {
+    return state.remoteRequest?.requestId === requestId && state.remoteRequest.status === "loading";
+}
+export function createRemoteCacheKey(state) {
+    return JSON.stringify({
+        sort: state.sort ?? [],
+        filters: state.filters ?? [],
+        aggregation: state.aggregation ?? [],
+        rowGrouping: state.rowGrouping,
+        pagination: state.pagination,
+        cursorPagination: state.cursorPagination,
+    });
+}
+export function setRemoteCache(state, remoteCache) {
+    return {
+        ...state,
+        remoteCache: normalizeRemoteCache(remoteCache),
+    };
+}
+export function invalidateRemoteCache(state, key = state.remoteCache?.key ?? createRemoteCacheKey(state)) {
+    const remoteCache = normalizeRemoteCache(state.remoteCache);
+    return {
+        ...state,
+        remoteCache: {
+            ...remoteCache,
+            key,
+            version: remoteCache.version + 1,
+            stale: true,
+            invalidatedKeys: addUniqueKey(remoteCache.invalidatedKeys, key),
+        },
+    };
+}
+export function acknowledgeRemoteCache(state, key = state.remoteCache?.key ?? createRemoteCacheKey(state)) {
+    const remoteCache = normalizeRemoteCache(state.remoteCache);
+    const invalidatedKeys = (remoteCache.invalidatedKeys ?? []).filter((item) => item !== key);
+    const nextRemoteCache = normalizeRemoteCache({
+        ...remoteCache,
+        key,
+        stale: invalidatedKeys.length > 0,
+        invalidatedKeys: invalidatedKeys.length > 0 ? invalidatedKeys : undefined,
+    });
+    return {
+        ...state,
+        remoteCache: nextRemoteCache,
+    };
+}
+function resetPageIndex(pagination) {
+    if (!pagination) {
+        return undefined;
+    }
+    return {
+        ...pagination,
+        pageIndex: 0,
+    };
+}
+function resetCursor(cursorPagination) {
+    if (!cursorPagination) {
+        return undefined;
+    }
+    return {
+        ...cursorPagination,
+        cursor: undefined,
+    };
+}
+function setRemoteRequestStatus(state, remoteRequest) {
+    return {
+        ...state,
+        remoteRequest,
+    };
+}
+function markRemoteCacheStale(remoteCache) {
+    if (!remoteCache) {
+        return undefined;
+    }
+    return {
+        ...normalizeRemoteCache(remoteCache),
+        stale: true,
+    };
+}
+function normalizeRemoteCache(remoteCache) {
+    const { invalidatedKeys: rawInvalidatedKeys, ...rest } = remoteCache ?? {};
+    const invalidatedKeys = rawInvalidatedKeys ? [...new Set(rawInvalidatedKeys)] : undefined;
+    const nextRemoteCache = {
+        ...rest,
+        version: Math.max(0, Math.trunc(remoteCache?.version ?? 0)),
+    };
+    if (invalidatedKeys && invalidatedKeys.length > 0) {
+        nextRemoteCache.invalidatedKeys = invalidatedKeys;
+    }
+    return nextRemoteCache;
+}
+function addUniqueKey(keys, key) {
+    return [...new Set([...(keys ?? []), key])];
+}