@r2digisolutions/ui 0.27.3 → 0.28.0

package/dist/components/container/DataTableShell/core/DataTableInternal.svelte.js

@@ -0,0 +1,396 @@
+export class DataTableInternal {
+    options;
+    rows = $state([]);
+    loading = $state(false);
+    page = $state(1);
+    pageSize = $state(20);
+    mode = 'pagination';
+    sortColumn = $state(null);
+    sortDirection = $state('asc');
+    search = $state('');
+    filters = $state({});
+    selectedIds = $state(new Set());
+    hiddenColumnIds = $state(new Set());
+    columnWidths = $state({});
+    multiSelect = false;
+    maxVisibleColumns;
+    columns = $state([]);
+    stickyColumnsIds = [];
+    stickyRowsPredicate;
+    query = $state(null);
+    constructor(options) {
+        this.options = options;
+        this.columns = options.columns.map((c) => {
+            const min = c.minWidth ?? 120;
+            const def = c.defaultWidth ?? min ?? 160;
+            return {
+                minWidth: min,
+                defaultWidth: def,
+                searchable: true,
+                align: c.align ?? 'left',
+                ...c
+            };
+        });
+        this.pageSize = options.pageSize ?? 20;
+        this.mode = options.mode ?? 'pagination';
+        this.multiSelect = options.multiSelect ?? false;
+        this.maxVisibleColumns = options.maxVisibleColumns;
+        this.stickyColumnsIds = options.stickyColumns ?? [];
+        this.stickyRowsPredicate = options.stickyRows;
+    }
+    getRowId(row, index) {
+        if (this.options.idField)
+            return this.options.idField(row, index);
+        const anyRow = row;
+        if (anyRow && anyRow.id != null)
+            return String(anyRow.id);
+        return String(index);
+    }
+    setRows(rows) {
+        this.rows = rows;
+        this.page = 1;
+        this.selectedIds = new Set();
+    }
+    appendRows(rows) {
+        this.rows = [...this.rows, ...rows];
+    }
+    setLoading(value) {
+        this.loading = value;
+    }
+    setMode(mode) {
+        this.mode = mode;
+    }
+    setPage(page) {
+        const max = this.pageCount;
+        const next = Math.min(Math.max(1, page), max);
+        this.page = next;
+    }
+    nextPage() {
+        this.setPage(this.page + 1);
+    }
+    prevPage() {
+        this.setPage(this.page - 1);
+    }
+    setPageSize(size) {
+        this.pageSize = size;
+        this.page = 1;
+    }
+    setSearch(value) {
+        this.search = value;
+        this.page = 1;
+    }
+    setFilter(id, value) {
+        const copy = { ...this.filters };
+        if (!value) {
+            delete copy[id];
+        }
+        else {
+            copy[id] = { id, value };
+        }
+        this.filters = copy;
+        this.page = 1;
+    }
+    clearFilters() {
+        this.filters = {};
+    }
+    setSort(columnId) {
+        if (this.sortColumn === columnId) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortColumn = columnId;
+            this.sortDirection = 'asc';
+        }
+    }
+    clearSort() {
+        this.sortColumn = null;
+        this.sortDirection = 'asc';
+    }
+    setQuery(query) {
+        this.query = query;
+        this.page = 1;
+    }
+    clearQuery() {
+        this.query = null;
+        this.page = 1;
+    }
+    toggleRowSelection(id) {
+        const next = new Set(this.selectedIds);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.selectedIds = next;
+    }
+    selectAllVisible(rows) {
+        const next = new Set(this.selectedIds);
+        rows.forEach((row, index) => {
+            const id = this.getRowId(row, index);
+            next.add(id);
+        });
+        this.selectedIds = next;
+    }
+    clearSelection() {
+        this.selectedIds = new Set();
+    }
+    isRowSelected(id) {
+        return this.selectedIds.has(id);
+    }
+    toggleColumnVisibility(id) {
+        const next = new Set(this.hiddenColumnIds);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.hiddenColumnIds = next;
+    }
+    hideColumn(id) {
+        const next = new Set(this.hiddenColumnIds);
+        next.add(id);
+        this.hiddenColumnIds = next;
+    }
+    showColumn(id) {
+        const next = new Set(this.hiddenColumnIds);
+        next.delete(id);
+        this.hiddenColumnIds = next;
+    }
+    showAllColumns() {
+        this.hiddenColumnIds = new Set();
+    }
+    hideAllColumns() {
+        const all = new Set();
+        this.columns.forEach((c) => all.add(c.id));
+        this.hiddenColumnIds = all;
+    }
+    setColumnWidth(id, width) {
+        const next = { ...this.columnWidths };
+        const col = this.columns.find((c) => c.id === id);
+        const min = col?.minWidth ?? 120;
+        const max = col?.maxWidth ?? 480;
+        next[id] = Math.min(Math.max(width, min), max);
+        this.columnWidths = next;
+    }
+    resetColumnWidths() {
+        this.columnWidths = {};
+    }
+    getColumnWidth(id) {
+        const raw = this.columnWidths[id];
+        if (raw)
+            return raw;
+        const col = this.columns.find((c) => c.id === id);
+        if (!col)
+            return 160;
+        const base = col.defaultWidth ?? col.minWidth ?? 160;
+        return base;
+    }
+    allColumns = $derived.by(() => this.columns);
+    visibleColumns = $derived.by(() => this.columns.filter((c) => !this.hiddenColumnIds.has(c.id)));
+    mainColumns = $derived.by(() => {
+        if (!this.maxVisibleColumns || this.visibleColumns.length <= this.maxVisibleColumns) {
+            return this.visibleColumns;
+        }
+        return this.visibleColumns.slice(0, this.maxVisibleColumns);
+    });
+    overflowColumns = $derived.by(() => {
+        if (!this.maxVisibleColumns || this.visibleColumns.length <= this.maxVisibleColumns) {
+            return [];
+        }
+        return this.visibleColumns.slice(this.maxVisibleColumns);
+    });
+    getFieldValue(row, field) {
+        const col = this.columns.find((c) => c.id === field);
+        if (col && col.accessor)
+            return col.accessor(row);
+        return row[field];
+    }
+    evalOperator(value, operator, raw) {
+        const v = value;
+        const target = raw;
+        if (operator === 'is_empty') {
+            return v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0);
+        }
+        if (operator === 'is_not_empty') {
+            return !(v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0));
+        }
+        if (operator === 'in' || operator === 'not_in') {
+            const list = Array.isArray(target)
+                ? target
+                : String(target)
+                    .split(',')
+                    .map((x) => x.trim())
+                    .filter(Boolean);
+            const str = v == null ? '' : String(v);
+            const result = list.some((x) => String(x) === str);
+            return operator === 'in' ? result : !result;
+        }
+        if (typeof v === 'number' && typeof target === 'number') {
+            if (operator === 'equals')
+                return v === target;
+            if (operator === 'not_equals')
+                return v !== target;
+            if (operator === 'greater_than')
+                return v > target;
+            if (operator === 'less_than')
+                return v < target;
+        }
+        const vs = v == null ? '' : String(v).toLowerCase();
+        const ts = String(target).toLowerCase();
+        if (operator === 'equals')
+            return vs === ts;
+        if (operator === 'not_equals')
+            return vs !== ts;
+        if (operator === 'contains')
+            return vs.includes(ts);
+        if (operator === 'not_contains')
+            return !vs.includes(ts);
+        if (operator === 'greater_than')
+            return vs > ts;
+        if (operator === 'less_than')
+            return vs < ts;
+        if (operator === 'startsWith')
+            return vs.startsWith(ts);
+        if (operator === 'endsWith')
+            return vs.endsWith(ts);
+        return true;
+    }
+    evalFilter(row, filter) {
+        const [field, operator, value] = filter;
+        const v = this.getFieldValue(row, field);
+        return this.evalOperator(v, operator, value);
+    }
+    evalQueryFilters(row, join, items) {
+        if (!items.length)
+            return true;
+        if (join === 'AND') {
+            for (const item of items) {
+                let ok = true;
+                if (Array.isArray(item))
+                    ok = this.evalFilter(row, item);
+                else
+                    ok = this.evalQueryGroup(row, item);
+                if (!ok)
+                    return false;
+            }
+            return true;
+        }
+        for (const item of items) {
+            let ok = false;
+            if (Array.isArray(item))
+                ok = this.evalFilter(row, item);
+            else
+                ok = this.evalQueryGroup(row, item);
+            if (ok)
+                return true;
+        }
+        return false;
+    }
+    evalQueryGroup(row, group) {
+        return this.evalQueryFilters(row, group.joinOperation, group.filters);
+    }
+    evalQuery(row, query) {
+        if (!query.useQuery || !query.filters.length)
+            return true;
+        return this.evalQueryFilters(row, query.joinOperation, query.filters);
+    }
+    filteredRows = $derived.by(() => {
+        let data = this.rows;
+        const search = this.search.trim().toLowerCase();
+        if (search) {
+            data = data.filter((row) => {
+                return this.visibleColumns.some((col) => {
+                    if (col.searchable === false)
+                        return false;
+                    const value = this.getFieldValue(row, col.id);
+                    if (value == null)
+                        return false;
+                    const str = String(value).toLowerCase();
+                    return str.includes(search);
+                });
+            });
+        }
+        const filters = Object.values(this.filters);
+        if (filters.length) {
+            data = data.filter((row) => {
+                return filters.every((f) => {
+                    const col = this.columns.find((c) => c.id === f.id);
+                    if (!col)
+                        return true;
+                    const value = this.getFieldValue(row, col.id);
+                    if (value == null)
+                        return false;
+                    const str = String(value).toLowerCase();
+                    return str.includes(f.value.toLowerCase());
+                });
+            });
+        }
+        if (this.query && this.query.useQuery && this.query.filters.length) {
+            const q = this.query;
+            data = data.filter((row) => this.evalQuery(row, q));
+        }
+        if (this.sortColumn) {
+            const col = this.columns.find((c) => c.id === this.sortColumn);
+            if (col) {
+                const dir = this.sortDirection === 'asc' ? 1 : -1;
+                data = [...data].sort((a, b) => {
+                    const av = this.getFieldValue(a, col.id);
+                    const bv = this.getFieldValue(b, col.id);
+                    if (av == null && bv == null)
+                        return 0;
+                    if (av == null)
+                        return -1 * dir;
+                    if (bv == null)
+                        return 1 * dir;
+                    if (typeof av === 'number' && typeof bv === 'number') {
+                        if (av === bv)
+                            return 0;
+                        return av > bv ? dir : -dir;
+                    }
+                    const as = String(av).toLowerCase();
+                    const bs = String(bv).toLowerCase();
+                    if (as === bs)
+                        return 0;
+                    return as > bs ? dir : -dir;
+                });
+            }
+        }
+        return data;
+    });
+    totalRows = $derived.by(() => this.filteredRows.length);
+    pageCount = $derived.by(() => {
+        if (this.mode === 'infinite')
+            return 1;
+        if (!this.totalRows)
+            return 1;
+        return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+    });
+    currentRows = $derived.by(() => {
+        if (this.mode === 'infinite')
+            return this.filteredRows;
+        const start = (this.page - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this.filteredRows.slice(start, end);
+    });
+    selectedCount = $derived.by(() => this.selectedIds.size);
+    allVisibleSelected = $derived.by(() => {
+        if (!this.currentRows.length)
+            return false;
+        let all = true;
+        this.currentRows.forEach((row, index) => {
+            const id = this.getRowId(row, index);
+            if (!this.selectedIds.has(id))
+                all = false;
+        });
+        return all;
+    });
+    someVisibleSelected = $derived.by(() => {
+        if (!this.currentRows.length)
+            return false;
+        let some = false;
+        this.currentRows.forEach((row, index) => {
+            const id = this.getRowId(row, index);
+            if (this.selectedIds.has(id))
+                some = true;
+        });
+        return some && !this.allVisibleSelected;
+    });
+}

package/dist/components/container/DataTableShell/core/context.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableController } from './DataTableController.svelte';
+export declare function provideTable<T>(controller: DataTableController<T>): void;
+export declare function useTable<T>(): DataTableController<T>;

package/dist/components/container/DataTableShell/core/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const TABLE_CTX = Symbol('datagrid');
+export function provideTable(controller) {
+    setContext(TABLE_CTX, controller);
+}
+export function useTable() {
+    const ctx = getContext(TABLE_CTX);
+    if (!ctx) {
+        throw new Error('DataTable context not found');
+    }
+    return ctx;
+}

package/dist/components/container/DataTableShell/core/filters-types.d.ts

@@ -0,0 +1,14 @@
+export type FilterOperator = 'equals' | 'contains' | 'greater_than' | 'less_than' | 'startsWith' | 'endsWith' | 'not_equals' | 'is_empty' | 'is_not_empty' | 'not_contains' | 'in' | 'not_in';
+export type Operator = 'AND' | 'OR';
+export type Filter = [string, FilterOperator, string | number | boolean | string[]];
+export type QueryGroup = {
+    type: 'group';
+    joinOperation: Operator;
+    filters: TQueryFilter;
+};
+export type TQueryFilter = (Filter | QueryGroup)[];
+export type QueryStructure = {
+    useQuery: boolean;
+    joinOperation: Operator;
+    filters: TQueryFilter;
+};

package/dist/components/container/DataTableShell/core/filters-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/container/DataTableShell/core/types.d.ts

@@ -0,0 +1,60 @@
+export type SortDirection = 'asc' | 'desc';
+export type DataTableMode = 'pagination' | 'infinite';
+export type ColumnAlign = 'left' | 'center' | 'right';
+export type ColumnType = 'text' | 'number' | 'date' | 'datetime' | 'badge';
+export interface ColumnDef<T> {
+    id: keyof T;
+    label: string;
+    accessor?: (row: T) => unknown;
+    sortable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+    hidden?: boolean;
+    align?: ColumnAlign;
+    searchable?: boolean;
+    type?: ColumnType;
+    format?: (value: unknown, row: T) => string;
+    sticky?: 'left' | 'right';
+}
+export interface RowAction<T> {
+    id: string;
+    label: ((row: T) => any) | string;
+    danger?: boolean;
+    icon?: (row: T) => unknown;
+    onClick?: (row: T) => Promise<void> | void;
+    children?: RowAction<T>[];
+}
+export interface DataTableOptions<T> {
+    idField?: (row: T, index: number) => string;
+    columns: ColumnDef<T>[];
+    pageSize?: number;
+    mode?: DataTableMode;
+    multiSelect?: boolean;
+    maxVisibleColumns?: number;
+    stickyColumns?: string[];
+    stickyRows?: (row: T, index: number) => boolean;
+}
+export interface ColumnFilter {
+    id: string;
+    value: string;
+}
+export type FilterOperator = 'equals' | 'contains' | 'greater_than' | 'less_than' | 'startsWith' | 'endsWith' | 'not_equals' | 'is_empty' | 'is_not_empty' | 'not_contains' | 'in' | 'not_in';
+export type LogicOperator = 'AND' | 'OR';
+export type Filter = [string, FilterOperator, string | number | boolean];
+export type QueryFilter = Filter | QueryGroup;
+export type TQueryFilter = QueryFilter[];
+export type QueryGroup = {
+    type: 'group';
+    joinOperation: LogicOperator;
+    filters: QueryFilter[];
+};
+export type QueryStructure = {
+    useQuery: boolean;
+    joinOperation: LogicOperator;
+    filters: QueryFilter[];
+};
+export type AnyAction<T> = RowAction<T> & {
+    children?: AnyAction<T>[];
+    hidden?: ((row: T) => boolean) | boolean;
+};

package/dist/components/container/DataTableShell/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/container/index.d.ts

@@ -1,5 +1,7 @@
 import DataTable from './DataTable/DataTable.svelte';
 import TabsStepper from './TabsStepper/TabsStepper.svelte';
+import DataTableShell from './DataTableShell/DataTableShell.svelte';
+import { DataTableController } from './DataTableShell/core/DataTableController.svelte.js';
 export * from './DataTable/core/types.js';
 export * from './TabsStepper/core/types.js';
-export { DataTable, TabsStepper };
+export { DataTable, TabsStepper, DataTableShell, DataTableController };

package/dist/components/container/index.js

@@ -1,5 +1,7 @@
 import DataTable from './DataTable/DataTable.svelte';
 import TabsStepper from './TabsStepper/TabsStepper.svelte';
+import DataTableShell from './DataTableShell/DataTableShell.svelte';
+import { DataTableController } from './DataTableShell/core/DataTableController.svelte.js';
 export * from './DataTable/core/types.js';
 export * from './TabsStepper/core/types.js';
-export { DataTable, TabsStepper };
+export { DataTable, TabsStepper, DataTableShell, DataTableController };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.27.3",
+	"version": "0.28.0",
 	"private": false,
 	"packageManager": "bun@1.3.3",
 	"publishConfig": {
@@ -55,35 +55,35 @@
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "8.6.14",
-		"@storybook/svelte": "10.1.0",
-		"@storybook/sveltekit": "10.1.0",
+		"@storybook/svelte": "10.1.4",
+		"@storybook/sveltekit": "10.1.4",
 		"@storybook/test": "8.6.14",
 		"@sveltejs/adapter-static": "3.0.10",
-		"@sveltejs/kit": "2.49.0",
+		"@sveltejs/kit": "2.49.1",
 		"@sveltejs/package": "2.5.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
 		"@tailwindcss/postcss": "4.1.17",
 		"@testing-library/svelte": "5.2.9",
-		"@vitest/browser": "4.0.14",
+		"@vitest/browser": "4.0.15",
 		"changeset": "0.2.6",
 		"eslint": "9.39.1",
 		"eslint-config-prettier": "10.1.8",
-		"eslint-plugin-svelte": "3.13.0",
+		"eslint-plugin-svelte": "3.13.1",
 		"globals": "16.5.0",
 		"jsdom": "27.2.0",
 		"lucide-svelte": "0.555.0",
-		"prettier": "3.7.1",
+		"prettier": "3.7.4",
 		"prettier-plugin-svelte": "3.4.0",
-		"prettier-plugin-tailwindcss": "0.7.1",
+		"prettier-plugin-tailwindcss": "0.7.2",
 		"publint": "0.3.15",
-		"storybook": "10.1.0",
-		"svelte": "5.45.2",
+		"storybook": "10.1.4",
+		"svelte": "5.45.5",
 		"svelte-check": "4.3.4",
 		"tailwindcss": "4.1.17",
 		"typescript": "5.9.3",
-		"typescript-eslint": "8.48.0",
-		"vite": "7.2.4",
-		"vitest": "4.0.14"
+		"typescript-eslint": "8.48.1",
+		"vite": "7.2.6",
+		"vitest": "4.0.15"
 	},
 	"dependencies": {
 		"@tailwindcss/container-queries": "0.1.1",