@urbicon-ui/table 6.1.4

package/dist/stores/concerns/useColumnOrder.svelte.js

@@ -0,0 +1,81 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { resolveColumnId } from '../../utils';
+/**
+ * Column order concern: manages column reordering.
+ * Maintains an ordered list of column ids and provides reorder operations.
+ * @param state - Shared table state (reads `columns` for initial order).
+ */
+export function useColumnOrder(state) {
+    let columnOrder = $state([]);
+    /** Columns sorted by the current order. Falls back to original order for unknown ids. */
+    const orderedColumns = $derived.by(() => {
+        if (columnOrder.length === 0)
+            return state.columns;
+        const columnMap = new SvelteMap(state.columns.map((col) => [resolveColumnId(col), col]));
+        const ordered = [];
+        // Add columns in the specified order
+        for (const id of columnOrder) {
+            const col = columnMap.get(id);
+            if (col) {
+                ordered.push(col);
+                columnMap.delete(id);
+            }
+        }
+        // Append any remaining columns not in the order (newly added columns)
+        for (const col of columnMap.values()) {
+            ordered.push(col);
+        }
+        return ordered;
+    });
+    /** Initialize order from current columns (called when columns change). */
+    function initOrder(columns) {
+        columnOrder = columns.map((col) => resolveColumnId(col));
+    }
+    /** Move a column from one index to another. */
+    function reorderColumn(fromIndex, toIndex) {
+        if (fromIndex === toIndex)
+            return;
+        if (columnOrder.length === 0) {
+            columnOrder = state.columns.map((col) => resolveColumnId(col));
+        }
+        const next = [...columnOrder];
+        if (fromIndex < 0 || fromIndex >= next.length || toIndex < 0 || toIndex > next.length)
+            return;
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        columnOrder = next;
+    }
+    /** Reset column order to the original (as defined by `columns` prop). */
+    function resetColumnOrder() {
+        columnOrder = [];
+    }
+    /**
+     * Replace the order wholesale with a persisted snapshot. Unknown ids
+     * are kept as-is — the derived `orderedColumns` will gracefully drop
+     * any id that no longer matches a known column, and newly added
+     * columns (not in the snapshot) are appended at the end.
+     */
+    function applyOrder(order) {
+        columnOrder = [...order];
+    }
+    /** Get the current order index for a column id. Returns -1 if not found. */
+    function getColumnIndex(id) {
+        if (columnOrder.length === 0) {
+            return state.columns.findIndex((col) => resolveColumnId(col) === id);
+        }
+        return columnOrder.indexOf(id);
+    }
+    return {
+        get orderedColumns() {
+            return orderedColumns;
+        },
+        get columnOrder() {
+            return columnOrder;
+        },
+        initOrder,
+        reorderColumn,
+        resetColumnOrder,
+        applyOrder,
+        getColumnIndex
+    };
+}

package/dist/stores/concerns/useColumnVisibility.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { Column } from '../../types/tableTypes';
+import type { TableState } from './types';
+/**
+ * Column visibility concern: manages which columns are shown or hidden.
+ */
+export declare function useColumnVisibility(state: TableState): {
+    readonly allColumns: Column[];
+    readonly hiddenColumnKeys: SvelteSet<string>;
+    setColumns: (newColumns: Column[]) => void;
+    setHiddenIds: (ids: Iterable<string>) => void;
+    hideColumn: (id: string) => void;
+    showColumn: (id: string) => void;
+    toggleColumnVisibility: (id: string) => void;
+    showAllColumns: () => void;
+};

package/dist/stores/concerns/useColumnVisibility.svelte.js

@@ -0,0 +1,58 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { resolveColumnId } from '../../utils';
+/**
+ * Column visibility concern: manages which columns are shown or hidden.
+ */
+export function useColumnVisibility(state) {
+    let allColumns = $state([]);
+    let hiddenColumnKeys = new SvelteSet();
+    function setColumns(newColumns) {
+        allColumns = [...newColumns];
+        state.columns = newColumns.filter((col) => !hiddenColumnKeys.has(resolveColumnId(col)));
+    }
+    function hideColumn(id) {
+        hiddenColumnKeys = new SvelteSet([...hiddenColumnKeys, id]);
+        state.columns = allColumns.filter((col) => !hiddenColumnKeys.has(resolveColumnId(col)));
+    }
+    function showColumn(id) {
+        const next = new SvelteSet(hiddenColumnKeys);
+        next.delete(id);
+        hiddenColumnKeys = next;
+        state.columns = allColumns.filter((col) => !hiddenColumnKeys.has(resolveColumnId(col)));
+    }
+    function toggleColumnVisibility(id) {
+        if (hiddenColumnKeys.has(id)) {
+            showColumn(id);
+        }
+        else {
+            hideColumn(id);
+        }
+    }
+    function showAllColumns() {
+        hiddenColumnKeys = new SvelteSet();
+        state.columns = [...allColumns];
+    }
+    /**
+     * Replace the hidden-column set wholesale. Used by the host store to
+     * apply a persisted snapshot before the consumer's `columns` prop
+     * reaches `setColumns`. Filtering of `state.columns` happens lazily on
+     * the next `setColumns` call.
+     */
+    function setHiddenIds(ids) {
+        hiddenColumnKeys = new SvelteSet(ids);
+    }
+    return {
+        get allColumns() {
+            return allColumns;
+        },
+        get hiddenColumnKeys() {
+            return hiddenColumnKeys;
+        },
+        setColumns,
+        setHiddenIds,
+        hideColumn,
+        showColumn,
+        toggleColumnVisibility,
+        showAllColumns
+    };
+}

package/dist/stores/concerns/useExpansion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableState } from './types';
+/**
+ * Expansion concern: manages row expand/collapse state.
+ * Supports both single-expand and multi-expand modes.
+ */
+export declare function useExpansion(state: TableState): {
+    toggleExpand: (itemId: string | number) => void;
+    isItemExpanded: (itemId: string | number) => boolean;
+};

package/dist/stores/concerns/useExpansion.svelte.js

@@ -0,0 +1,32 @@
+import { SvelteSet } from 'svelte/reactivity';
+/**
+ * Expansion concern: manages row expand/collapse state.
+ * Supports both single-expand and multi-expand modes.
+ */
+export function useExpansion(state) {
+    function toggleExpand(itemId) {
+        if (state.multiExpand) {
+            const next = new SvelteSet(state.expandedItemIds);
+            if (next.has(itemId)) {
+                next.delete(itemId);
+            }
+            else {
+                next.add(itemId);
+            }
+            state.expandedItemIds = next;
+        }
+        else {
+            state.expandedItemId = state.expandedItemId === itemId ? null : itemId;
+        }
+    }
+    function isItemExpanded(itemId) {
+        if (state.multiExpand) {
+            return state.expandedItemIds.has(itemId);
+        }
+        return state.expandedItemId === itemId;
+    }
+    return {
+        toggleExpand,
+        isItemExpanded
+    };
+}

package/dist/stores/concerns/useFiltering.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Filter, FilterOperator, TableItem } from '../../types/tableTypes';
+import { resolveColumnId } from '../../utils';
+import type { TableState } from './types';
+/**
+ * Filtering concern: manages active filters and computes filtered items.
+ * Combines search-term matching and advanced filter matching.
+ *
+ * Values for both search and filter matching come from the column's
+ * accessor (string property or function), not a raw `getNestedValue` —
+ * which keeps object-typed properties and computed columns honest.
+ */
+export declare function useFiltering(state: TableState): {
+    readonly filteredItems: TableItem[];
+    addFilter: (filter: Filter) => void;
+    removeFilter: (index: number) => void;
+    removeFiltersByColumn: (column: string, operator?: FilterOperator, value?: string) => void;
+    clearAllFilters: () => void;
+    hasFilterForColumn: (column: string, operator?: FilterOperator, value?: string) => boolean;
+};
+export { resolveColumnId };

package/dist/stores/concerns/useFiltering.svelte.js

@@ -0,0 +1,109 @@
+import { resolveColumnId, resolveColumnValue, resolveValueById } from '../../utils';
+/**
+ * Filtering concern: manages active filters and computes filtered items.
+ * Combines search-term matching and advanced filter matching.
+ *
+ * Values for both search and filter matching come from the column's
+ * accessor (string property or function), not a raw `getNestedValue` —
+ * which keeps object-typed properties and computed columns honest.
+ */
+export function useFiltering(state) {
+    const filteredItems = $derived.by(() => {
+        if (!state.items.length)
+            return [];
+        // In server mode, items are already filtered by the server
+        if (state.mode === 'server')
+            return state.items;
+        return state.items.filter((item) => {
+            const matchesSearchTerm = state.searchTerm === '' ||
+                state.columns
+                    // Discriminate synthetic columns first — afterwards TS narrows to
+                    // DataColumnString | DataColumnFunction, which carries `searchable`.
+                    .filter((col) => col.accessor !== undefined && col.searchable !== false)
+                    .some((column) => {
+                    const raw = resolveColumnValue(column, item);
+                    // Object/array values stringify to "[object Object]" and produce
+                    // misleading matches. Treat them as no-match unless the column
+                    // explicitly opts in via a string-returning accessor/formatter.
+                    if (raw !== null && typeof raw === 'object' && !(raw instanceof Date)) {
+                        return false;
+                    }
+                    const value = raw === null || raw === undefined ? '' : String(raw);
+                    return value.toLowerCase().includes(state.searchTerm.toLowerCase());
+                });
+            const matchesFilters = state.activeFilters.length === 0 ||
+                state.activeFilters.every((filter) => {
+                    const raw = resolveValueById(state.columns, item, filter.column);
+                    const value = String(raw ?? '').toLowerCase();
+                    const filterValue = filter.value.toLowerCase();
+                    switch (filter.operator) {
+                        case 'contains':
+                            return value.includes(filterValue);
+                        case 'equals':
+                            return value === filterValue;
+                        case 'startsWith':
+                            return value.startsWith(filterValue);
+                        case 'endsWith':
+                            return value.endsWith(filterValue);
+                        case 'greaterThan':
+                            return Number(value) > Number(filterValue);
+                        case 'lessThan':
+                            return Number(value) < Number(filterValue);
+                        default:
+                            if (import.meta.env?.DEV)
+                                console.warn(`[Table] Unknown filter operator "${filter.operator}" — row excluded.`);
+                            return false;
+                    }
+                });
+            return matchesSearchTerm && matchesFilters;
+        });
+    });
+    function addFilter(filter) {
+        state.activeFilters = [...state.activeFilters, filter];
+        state.currentPage = 1;
+    }
+    function removeFilter(index) {
+        state.activeFilters = state.activeFilters.filter((_, i) => i !== index);
+        state.currentPage = 1;
+    }
+    function removeFiltersByColumn(column, operator, value) {
+        state.activeFilters = state.activeFilters.filter((filter) => {
+            if (filter.column !== column)
+                return true;
+            if (operator && filter.operator !== operator)
+                return true;
+            if (value && filter.value !== value)
+                return true;
+            return false;
+        });
+        state.currentPage = 1;
+    }
+    function clearAllFilters() {
+        state.activeFilters = [];
+        state.currentPage = 1;
+    }
+    function hasFilterForColumn(column, operator, value) {
+        return state.activeFilters.some((filter) => {
+            if (filter.column !== column)
+                return false;
+            if (operator && filter.operator !== operator)
+                return false;
+            if (value && filter.value !== value)
+                return false;
+            return true;
+        });
+    }
+    return {
+        get filteredItems() {
+            return filteredItems;
+        },
+        addFilter,
+        removeFilter,
+        removeFiltersByColumn,
+        clearAllFilters,
+        hasFilterForColumn
+    };
+}
+// Re-exported so concerns that compose useFiltering can keep their column-id
+// resolution consistent without re-importing the util path.
+export { resolveColumnId };

package/dist/stores/concerns/useFocusManagement.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { TableState } from './types';
+export type FocusDirection = 'up' | 'down' | 'first' | 'last';
+/**
+ * Focus management concern: tracks which row is focused for keyboard navigation.
+ * Uses the roving tabindex pattern (WAI-ARIA Grid).
+ * @param _state - Shared table state (unused here; kept for concern-signature parity).
+ * @param getVisibleItemCount - Getter for the number of currently visible rows.
+ */
+export declare function useFocusManagement(_state: TableState, getVisibleItemCount: () => number): {
+    readonly focusedRowIndex: number;
+    resetFocus: () => void;
+    setFocusedRow: (index: number) => void;
+    moveFocus: (direction: FocusDirection) => void;
+    isFocusedRow: (index: number) => boolean;
+};

package/dist/stores/concerns/useFocusManagement.svelte.js

@@ -0,0 +1,52 @@
+/**
+ * Focus management concern: tracks which row is focused for keyboard navigation.
+ * Uses the roving tabindex pattern (WAI-ARIA Grid).
+ * @param _state - Shared table state (unused here; kept for concern-signature parity).
+ * @param getVisibleItemCount - Getter for the number of currently visible rows.
+ */
+export function useFocusManagement(_state, getVisibleItemCount) {
+    let focusedRowIndex = $state(0);
+    /** Reset focus to first row when data changes */
+    function resetFocus() {
+        focusedRowIndex = 0;
+    }
+    function setFocusedRow(index) {
+        const count = getVisibleItemCount();
+        if (count === 0) {
+            focusedRowIndex = 0;
+            return;
+        }
+        focusedRowIndex = Math.max(0, Math.min(index, count - 1));
+    }
+    function moveFocus(direction) {
+        const count = getVisibleItemCount();
+        if (count === 0)
+            return;
+        switch (direction) {
+            case 'up':
+                setFocusedRow(focusedRowIndex - 1);
+                break;
+            case 'down':
+                setFocusedRow(focusedRowIndex + 1);
+                break;
+            case 'first':
+                setFocusedRow(0);
+                break;
+            case 'last':
+                setFocusedRow(count - 1);
+                break;
+        }
+    }
+    function isFocusedRow(index) {
+        return focusedRowIndex === index;
+    }
+    return {
+        get focusedRowIndex() {
+            return focusedRowIndex;
+        },
+        resetFocus,
+        setFocusedRow,
+        moveFocus,
+        isFocusedRow
+    };
+}

package/dist/stores/concerns/useGrouping.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { TableItem } from '../../types/tableTypes';
+import type { TableState } from './types';
+/**
+ * Grouping concern: manages group-by key, group order, collapse state,
+ * and computes grouped items.
+ * @param state - Shared table state.
+ * @param getSortedItems - Getter for upstream sorted items.
+ */
+export declare function useGrouping(state: TableState, getSortedItems: () => TableItem[]): {
+    readonly grouped: Record<string, TableItem[]>;
+    setGroupByKey: (key: string | null) => void;
+    setGroupOrder: (order: string[]) => void;
+    toggleGroup: (groupName: string) => void;
+    toggleAllGroups: () => void;
+};

package/dist/stores/concerns/useGrouping.svelte.js

@@ -0,0 +1,86 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { findColumnById, resolveValueById } from '../../utils';
+/**
+ * Grouping concern: manages group-by key, group order, collapse state,
+ * and computes grouped items.
+ * @param state - Shared table state.
+ * @param getSortedItems - Getter for upstream sorted items.
+ */
+export function useGrouping(state, getSortedItems) {
+    const grouped = $derived.by(() => {
+        const items = getSortedItems();
+        if (!state.groupByKey)
+            return { ungrouped: items };
+        // Synthetic columns have no accessor — grouping by them would bucket
+        // every row under 'Unassigned'. Fall back to ungrouped instead.
+        const groupColumn = findColumnById(state.columns, state.groupByKey);
+        if (groupColumn && groupColumn.accessor === undefined)
+            return { ungrouped: items };
+        const result = {};
+        for (const item of items) {
+            const groupValue = resolveValueById(state.columns, item, state.groupByKey);
+            const groupKey = groupValue !== undefined && groupValue !== null ? String(groupValue) : 'Unassigned';
+            if (!result[groupKey]) {
+                result[groupKey] = [];
+            }
+            result[groupKey].push(item);
+        }
+        if (state.groupOrder && state.groupOrder.length > 0) {
+            const ordered = {};
+            state.groupOrder.forEach((groupKey) => {
+                if (result[groupKey]) {
+                    ordered[groupKey] = result[groupKey];
+                }
+            });
+            Object.keys(result).forEach((groupKey) => {
+                if (!ordered[groupKey]) {
+                    ordered[groupKey] = result[groupKey];
+                }
+            });
+            return ordered;
+        }
+        return result;
+    });
+    function setGroupByKey(key) {
+        state.groupByKey = key;
+        state.collapsedGroups = new SvelteSet();
+        state.allGroupsExpanded = true;
+        state.currentPage = 1;
+    }
+    function setGroupOrder(order) {
+        state.groupOrder = order;
+    }
+    function toggleGroup(groupName) {
+        const newGroups = new SvelteSet(state.collapsedGroups);
+        if (newGroups.has(groupName)) {
+            newGroups.delete(groupName);
+        }
+        else {
+            newGroups.add(groupName);
+        }
+        state.collapsedGroups = newGroups;
+        const groupKeys = Object.keys(grouped);
+        if (groupKeys.length > 0) {
+            state.allGroupsExpanded = state.collapsedGroups.size === 0;
+        }
+    }
+    function toggleAllGroups() {
+        const isExpanded = state.allGroupsExpanded;
+        if (isExpanded) {
+            state.collapsedGroups = new SvelteSet(Object.keys(grouped));
+        }
+        else {
+            state.collapsedGroups = new SvelteSet();
+        }
+        state.allGroupsExpanded = !state.allGroupsExpanded;
+    }
+    return {
+        get grouped() {
+            return grouped;
+        },
+        setGroupByKey,
+        setGroupOrder,
+        toggleGroup,
+        toggleAllGroups
+    };
+}

package/dist/stores/concerns/useLiveUpdates.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { TableItem } from '../../types/tableTypes';
+import type { TableState } from './types';
+/**
+ * Summary of pending live changes.
+ */
+export interface LiveUpdateCounts {
+    inserts: number;
+    updates: number;
+    deletes: number;
+    total: number;
+}
+/**
+ * A pending update: the item ID and the changed fields.
+ */
+export interface PendingUpdate {
+    id: string | number;
+    changes: Partial<TableItem>;
+}
+/**
+ * Live updates concern: manages a pending buffer of inserts, updates, and deletes
+ * that are NOT immediately applied to the visible table.
+ *
+ * Instead, the UI shows a notification (e.g. "3 new, 2 updated") and the user
+ * decides when to merge them. This avoids disorienting UX issues like rows
+ * jumping, disappearing, or conflicting with active selection/editing.
+ *
+ * @param state - Shared table state (items are modified on apply).
+ */
+export declare function useLiveUpdates(state: TableState): {
+    readonly counts: LiveUpdateCounts;
+    readonly hasPending: boolean;
+    readonly pendingInserts: TableItem[];
+    readonly pendingUpdates: PendingUpdate[];
+    readonly pendingDeletes: Set<string | number>;
+    pushInsert: (item: TableItem) => void;
+    pushUpdate: (id: string | number, changes: Partial<TableItem>) => void;
+    pushDelete: (id: string | number) => void;
+    applyAll: () => void;
+    applyInserts: () => void;
+    applyUpdates: () => void;
+    applyDeletes: () => void;
+    dismissAll: () => void;
+    isRecentlyUpdated: (id: string | number) => boolean;
+    isPendingDelete: (id: string | number) => boolean;
+};