@r2digisolutions/ui 0.21.3 → 0.22.0

package/dist/components/container/DataTable/core/DataTableManager.svelte.js

@@ -0,0 +1,245 @@
+import { SvelteSet } from 'svelte/reactivity';
+import { normalize, defaultAccessor, compareValues, applyFilterOp } from './utils.js';
+export class DataTableManager {
+    options = $state({
+        perPage: 10,
+        perPageOptions: [10, 20, 50, 100],
+        multiSelect: true,
+        columns: [],
+        loadMode: 'local',
+        data: [],
+    });
+    state = $state({
+        ready: false,
+        items: [],
+        page: 1,
+        perPage: this.options.perPage,
+        total: 0,
+        sortBy: null,
+        sortDir: null,
+        filters: [],
+        visibleColumns: [],
+        hiddenColumns: [],
+        selected: new SvelteSet(),
+        loading: false,
+        error: undefined
+    });
+    measured = $state({});
+    reservedWidth = $state(0);
+    forcedVisible = new SvelteSet();
+    forcedHidden = new SvelteSet();
+    expanded = new SvelteSet();
+    lastWidth = $state(null);
+    constructor(opts) {
+        const columns = normalize(opts.columns);
+        this.options = ({
+            ...opts,
+            columns
+        });
+        this.state = ({
+            ...this.state,
+            perPage: this.options.perPage,
+            sortBy: opts.initialSortBy ?? null,
+            sortDir: opts.initialSortDir ?? null,
+            filters: opts.initialFilters ?? [],
+            visibleColumns: columns.map((c) => c.id),
+        });
+    }
+    setMeasuredWidths(map) {
+        this.measured = map;
+        this.reflow();
+    }
+    get columns() { return this.options.columns; }
+    getColumn(id) { return this.columns.find((c) => c.id === id); }
+    isExpanded(id) { return this.expanded.has(id); }
+    toggleExpand(id) { this.isExpanded(id) ? this.expanded.delete(id) : this.expanded.add(id); }
+    setColumnVisibility(id, show) {
+        if (show) {
+            this.forcedVisible.add(id);
+            this.forcedHidden.delete(id);
+        }
+        else {
+            this.forcedHidden.add(id);
+            this.forcedVisible.delete(id);
+        }
+        this.reflow();
+    }
+    setReservedWidth(n) {
+        if (this.reservedWidth === n)
+            return;
+        this.reservedWidth = n;
+        this.reflow();
+    }
+    clearColumnOverrides() {
+        this.forcedVisible.clear();
+        this.forcedHidden.clear();
+        this.reflow();
+    }
+    visibilityPlan(containerWidth) {
+        const available = Math.max(0, Math.floor(containerWidth) - (this.reservedWidth ?? 0));
+        const cols = this.columns;
+        const origOrder = cols.map((c) => c.id);
+        const needOf = (id) => {
+            const c = this.getColumn(id);
+            const measured = this.measured[id];
+            const fallback = Math.max(c.minWidth ?? 0, c.width ?? 0, 160);
+            return Math.ceil(measured ?? fallback);
+        };
+        // columnas que siempre se ocultan en móvil, aunque quepan
+        const mustHide = new Set();
+        if (available < 640) {
+            for (const c of cols)
+                if (c.hideOnMobile)
+                    mustHide.add(c.id);
+        }
+        // empezamos conservando el orden original
+        let visible = origOrder.filter((id) => !mustHide.has(id));
+        const totalNeed = () => visible.reduce((sum, id) => sum + needOf(id), 0);
+        if (totalNeed() > available) {
+            // hay que ocultar: orden de descarte por prioridad (más alta => se quita antes)
+            // empate: quitamos antes las columnas que están más a la derecha (idx más alto)
+            const dropOrder = cols
+                .map((c, idx) => ({ id: c.id, pr: c.priority ?? 999, idx }))
+                .filter((x) => !mustHide.has(x.id))
+                .sort((a, b) => (b.pr - a.pr) || (b.idx - a.idx));
+            const hidden = new Set([...mustHide]);
+            for (const d of dropOrder) {
+                if (totalNeed() <= available)
+                    break;
+                const k = visible.indexOf(d.id);
+                if (k !== -1) {
+                    visible.splice(k, 1);
+                    hidden.add(d.id);
+                }
+            }
+            // overrides manuales
+            const visSet = new Set(visible);
+            for (const id of this.forcedHidden)
+                visSet.delete(id);
+            for (const id of this.forcedVisible)
+                if (!mustHide.has(id))
+                    visSet.add(id);
+            const finalVisible = origOrder.filter((id) => visSet.has(id) && !mustHide.has(id));
+            const finalHidden = origOrder.filter((id) => !finalVisible.includes(id));
+            return { visible: finalVisible, hidden: finalHidden };
+        }
+        // TODO cabe: respetamos tu orden original
+        const visSet = new Set(visible);
+        for (const id of this.forcedHidden)
+            visSet.delete(id);
+        for (const id of this.forcedVisible)
+            if (!mustHide.has(id))
+                visSet.add(id);
+        const finalVisible = origOrder.filter((id) => visSet.has(id) && !mustHide.has(id));
+        const finalHidden = origOrder.filter((id) => !finalVisible.includes(id));
+        return { visible: finalVisible, hidden: finalHidden };
+    }
+    mergeWithOverrides(plan) {
+        const vis = new Set(plan.visible);
+        const hid = new Set(plan.hidden);
+        for (const id of this.forcedVisible) {
+            vis.add(id);
+            hid.delete(id);
+        }
+        for (const id of this.forcedHidden) {
+            hid.add(id);
+            vis.delete(id);
+        }
+        return { visible: [...vis], hidden: [...hid] };
+    }
+    applyVisibility(plan) {
+        this.state.visibleColumns = plan.visible;
+        this.state.hiddenColumns = plan.hidden;
+    }
+    // NUEVO: para usar desde el ResizeObserver
+    reflowForWidth(width) {
+        this.lastWidth = width;
+        const base = this.visibilityPlan(width);
+        this.applyVisibility(this.mergeWithOverrides(base));
+    }
+    // NUEVO: reflow con el último ancho conocido (o infinito si no hay)
+    reflow() {
+        const width = this.lastWidth ?? Number.POSITIVE_INFINITY;
+        const base = this.visibilityPlan(width);
+        this.applyVisibility(this.mergeWithOverrides(base));
+    }
+    // Selección / paginación / sort / filtros (sin cambios relevantes)
+    setPerPage(n) { this.state.perPage = n; this.state.page = 1; return this.load(); }
+    setPage(p) { this.state.page = p; return this.load(); }
+    setSort(id) {
+        if (this.state.sortBy !== id) {
+            this.state.sortBy = id;
+            this.state.sortDir = 'asc';
+        }
+        else {
+            this.state.sortDir = this.state.sortDir === 'asc' ? 'desc' : (this.state.sortDir === 'desc' ? null : 'asc');
+        }
+        this.state.page = 1;
+        return this.load();
+    }
+    setFilters(filters) { this.state.filters = filters; this.state.page = 1; return this.load(); }
+    clearFilters() { this.state.filters = []; this.state.page = 1; return this.load(); }
+    toggleSelect(rowId) { const s = this.state.selected; s.has(rowId) ? s.delete(rowId) : s.add(rowId); }
+    clearSelection() { this.state.selected.clear(); }
+    selectAllCurrentPage(getId = (r) => r.id) { this.state.items.forEach((r) => this.state.selected.add(getId(r))); }
+    async load() {
+        const { loadMode } = this.options;
+        this.state.loading = true;
+        this.state.error = undefined;
+        try {
+            if (loadMode === 'local')
+                return await this.loadLocal();
+            else
+                return await this.loadRemote();
+        }
+        catch (e) {
+            this.state.error = e?.message ?? 'Error al cargar';
+        }
+        finally {
+            this.state.loading = false;
+            this.state.ready = true;
+        }
+        this.reflow(); // asegura visibilidad coherente tras cargar
+    }
+    async loadRemote() {
+        const { fetcher } = this.options;
+        if (!fetcher)
+            throw new Error('fetcher requerido para modo remoto/cursor');
+        const params = {
+            page: this.state.page,
+            perPage: this.state.perPage,
+            cursor: this.state.cursor,
+            sortBy: this.state.sortBy,
+            sortDir: this.state.sortDir,
+            filters: this.state.filters
+        };
+        const res = await fetcher(params);
+        this.state.items = res.items;
+        this.state.total = res.total;
+        this.state.cursor = res.nextCursor;
+    }
+    async loadLocal() {
+        const data = this.options.data ?? [];
+        let rows = [...data];
+        for (const f of this.state.filters) {
+            const col = f.columnId ? this.getColumn(f.columnId) : undefined;
+            rows = rows.filter((r) => {
+                const value = col ? (col.accessor ? col.accessor(r) : r[col.id]) : r;
+                return applyFilterOp(value, f.op, f.value);
+            });
+        }
+        if (this.state.sortBy && this.state.sortDir) {
+            const col = this.getColumn(this.state.sortBy);
+            rows.sort((a, b) => {
+                const va = col.accessor ? col.accessor(a) : defaultAccessor(a, col.id);
+                const vb = col.accessor ? col.accessor(b) : defaultAccessor(b, col.id);
+                const cmp = compareValues(va, vb);
+                return this.state.sortDir === 'asc' ? cmp : -cmp;
+            });
+        }
+        const start = (this.state.page - 1) * this.state.perPage;
+        const end = start + this.state.perPage;
+        this.state.total = rows.length;
+        this.state.items = rows.slice(start, end);
+    }
+}

package/dist/components/container/DataTable/core/filters/types.d.ts

@@ -0,0 +1,18 @@
+import type { FilterOp } from "../types.js";
+export type FilterInputType = 'text' | 'select' | 'number' | 'range' | 'checkbox' | 'multiselect' | 'date' | 'rating';
+export type SelectOption = {
+    label: string;
+    value: any;
+};
+export type FilterField<T> = {
+    id: string;
+    label: string;
+    type: FilterInputType;
+    columnId?: string;
+    options?: SelectOption[];
+    op?: FilterOp;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+};

package/dist/components/container/DataTable/core/filters/types.js

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

package/dist/components/container/DataTable/core/filters/utils.d.ts

@@ -0,0 +1,3 @@
+import type { FilterDef } from "../types.js";
+import type { FilterField } from "./types.js";
+export declare function buildFilterDefs<T>(fields: FilterField<T>[], values: Record<string, any>): FilterDef<T>[];

package/dist/components/container/DataTable/core/filters/utils.js

@@ -0,0 +1,43 @@
+export function buildFilterDefs(fields, values) {
+    const defs = [];
+    for (const f of fields) {
+        const v = values[f.id];
+        if (v == null || v === '' || (Array.isArray(v) && v.length === 0))
+            continue;
+        if (f.type === 'range') {
+            const { min, max } = (v ?? {});
+            if (min != null)
+                defs.push({ id: `${f.id}_min`, label: f.label, columnId: f.columnId, op: 'gte', value: min, meta: { field: f.id, part: 'min' } });
+            if (max != null)
+                defs.push({ id: `${f.id}_max`, label: f.label, columnId: f.columnId, op: 'lte', value: max, meta: { field: f.id, part: 'max' } });
+            continue;
+        }
+        switch (f.type) {
+            case 'text':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'contains', value: String(v) });
+                break;
+            case 'number':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'equals', value: Number(v) });
+                break;
+            case 'date':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'equals', value: v });
+                break;
+            case 'checkbox':
+                if (v === true)
+                    defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'equals', value: true });
+                break;
+            case 'select':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'equals', value: v });
+                break;
+            case 'multiselect':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'in', value: Array.isArray(v) ? v : [v] });
+                break;
+            case 'rating':
+                defs.push({ id: f.id, label: f.label, columnId: f.columnId, op: f.op ?? 'gte', value: Number(v) });
+                break;
+            default:
+                break;
+        }
+    }
+    return defs;
+}

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

@@ -0,0 +1,101 @@
+export type RowId = string | number;
+export type SortDir = 'asc' | 'desc' | null;
+export type ColumnKey<T> = Extract<keyof T, string>;
+export type Accessor<T, R = any> = (row: T) => R;
+export type ColumnType = 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'badge' | 'link' | 'code';
+type BaseColumn<T> = {
+    header: string;
+    width?: number;
+    minWidth?: number;
+    priority?: number;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    hideOnMobile?: boolean;
+    responsiveLabel?: string;
+    class?: string;
+    type?: ColumnType;
+    format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    trueLabel?: string;
+    falseLabel?: string;
+};
+/** Columna ligada a una key existente de T (autocomplete de keys) */
+export type KeyColumn<T, K extends ColumnKey<T> = ColumnKey<T>> = BaseColumn<T> & {
+    id: K;
+    accessor?: (row: T) => T[K];
+    renderCell?: (row: T) => any;
+    renderCollapsed?: (row: T) => any;
+};
+/** Columna virtual (id libre), requiere accessor explícito */
+export type VirtualColumn<T> = BaseColumn<T> & {
+    id: string;
+    accessor: Accessor<T>;
+    renderCell?: (row: T) => any;
+    renderCollapsed?: (row: T) => any;
+};
+export type ColumnDef<T> = KeyColumn<T>;
+export type FilterOp = 'equals' | 'not_equals' | 'contains' | 'starts_with' | 'ends_with' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'not_in' | 'is_empty' | 'is_not_empty';
+export type FilterDef<T> = {
+    id: string;
+    label: string;
+    columnId?: string;
+    op: FilterOp;
+    value?: any;
+    meta?: Record<string, any>;
+};
+export type FetchResult<T> = {
+    items: T[];
+    total: number;
+    nextCursor?: string;
+};
+export type FetchParams = {
+    page: number;
+    perPage: number;
+    cursor?: string;
+    sortBy?: string | null;
+    sortDir?: SortDir;
+    filters: FilterDef<any>[];
+};
+export type LoadMode = 'local' | 'remote' | 'cursor';
+export type TableOptions<T> = {
+    id?: string;
+    columns: ColumnDef<T>[];
+    loadMode: LoadMode;
+    data?: T[];
+    fetcher?: (params: FetchParams) => Promise<FetchResult<T>>;
+    perPage?: number;
+    perPageOptions?: number[];
+    multiSelect?: boolean;
+    keepSelectionOnPageChange?: boolean;
+    initialSortBy?: string | null;
+    initialSortDir?: SortDir;
+    initialFilters?: FilterDef<T>[];
+};
+export type TableState<T> = {
+    ready: boolean;
+    items: T[];
+    page: number;
+    perPage: number;
+    total: number;
+    cursor?: string;
+    sortBy: string | null;
+    sortDir: SortDir;
+    filters: FilterDef<T>[];
+    visibleColumns: string[];
+    hiddenColumns: string[];
+    selected: Set<RowId>;
+    loading: boolean;
+    error?: string;
+};
+export type VisibilityPlan = {
+    visible: string[];
+    hidden: string[];
+};
+export type CellContext<T> = {
+    row: T | null;
+    rowIndex: number | null;
+    columnId: string | null;
+    column: ColumnDef<T> | null;
+    columnIndex: number | null;
+    event: MouseEvent;
+};
+export {};

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

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

package/dist/components/container/DataTable/core/utils.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnDef, FilterOp } from './types.js';
+export declare function normalize<T>(columns: ColumnDef<T>[]): ColumnDef<T>[];
+export declare function defaultAccessor<T>(row: any, id: string): any;
+export declare function compareValues(a: any, b: any): number;
+export declare function applyFilterOp(value: any, op: FilterOp, target: any): boolean;

package/dist/components/container/DataTable/core/utils.js

@@ -0,0 +1,66 @@
+export function normalize(columns) {
+    return columns.map((c, i) => ({
+        width: 160,
+        minWidth: 96,
+        priority: i,
+        align: 'left',
+        sortable: true,
+        ...c
+    }));
+}
+export function defaultAccessor(row, id) {
+    return row?.[id];
+}
+export function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === 'string' && typeof b === 'string')
+        return a.localeCompare(b);
+    if (a > b)
+        return 1;
+    if (a < b)
+        return -1;
+    return 0;
+}
+export function applyFilterOp(value, op, target) {
+    switch (op) {
+        case 'equals':
+            return value === target;
+        case 'not_equals':
+            return value !== target;
+        case 'contains':
+            return String(value ?? '')
+                .toLowerCase()
+                .includes(String(target ?? '').toLowerCase());
+        case 'starts_with':
+            return String(value ?? '')
+                .toLowerCase()
+                .startsWith(String(target ?? '').toLowerCase());
+        case 'ends_with':
+            return String(value ?? '')
+                .toLowerCase()
+                .endsWith(String(target ?? '').toLowerCase());
+        case 'gt':
+            return value > target;
+        case 'lt':
+            return value < target;
+        case 'gte':
+            return value >= target;
+        case 'lte':
+            return value <= target;
+        case 'in':
+            return Array.isArray(target) ? target.includes(value) : false;
+        case 'not_in':
+            return Array.isArray(target) ? !target.includes(value) : false;
+        case 'is_empty':
+            return value == null || value === '';
+        case 'is_not_empty':
+            return !(value == null || value === '');
+        default:
+            return true;
+    }
+}

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

@@ -0,0 +1,2 @@
+import DataTable from './DataTable/DataTable.svelte';
+export { DataTable };

package/dist/components/container/index.js

@@ -0,0 +1,2 @@
+import DataTable from './DataTable/DataTable.svelte';
+export { DataTable };

package/dist/components/ui/Card/Card.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Props } from './type.js';
+	import CardFooter from './CardFooter.svelte';
+	import CardHeader from './CardHeader.svelte';
 
-	const { children, footer, header, onclick, ...props }: Props = $props();
+	const { children, footer, header, onclick, body_class, ...props }: Props = $props();
 </script>
 
 <svelte:element
@@ -18,20 +20,18 @@
 	]}
 >
 	{#if header}
-		<header class="flex flex-row p-6 pb-2">
+		<CardHeader>
 			{@render header()}
-		</header>
+		</CardHeader>
 	{/if}
 
-	<section class={['flex flex-1 flex-col', props.body_class]}>
+	<section class={['flex flex-1 flex-col', body_class]}>
 		{@render children()}
 	</section>
 
 	{#if footer}
-		<footer
-			class="flex justify-between rounded-b-xl border-t border-gray-200 bg-gray-50 p-3 pt-2 dark:border-neutral-700 dark:bg-neutral-800"
-		>
+		<CardFooter>
 			{@render footer()}
-		</footer>
+		</CardFooter>
 	{/if}
 </svelte:element>

package/dist/components/ui/Card/CardContent.svelte

@@ -1,7 +1,15 @@
-<script>
-	const { children } = $props();
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		children: Snippet;
+		class?: ClassValue;
+	}
+
+	const { children, ...props }: Props = $props();
 </script>
 
-<div class="flex flex-1 flex-col gap-2 p-6">
+<div class={['flex flex-1 flex-col p-3', props.class]}>
 	{@render children()}
 </div>

package/dist/components/ui/Card/CardContent.svelte.d.ts

@@ -1,11 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    children: Snippet;
+    class?: ClassValue;
+}
+declare const CardContent: import("svelte").Component<Props, {}, "">;
+type CardContent = ReturnType<typeof CardContent>;
 export default CardContent;
-type CardContent = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const CardContent: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type $$ComponentProps = {
-    children: any;
-};

package/dist/components/ui/Card/CardFooter.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
-	const { children } = $props();
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		children: Snippet;
+		class?: ClassValue;
+	}
+	const { children, ...props }: Props = $props();
 </script>
 
 <footer
-	class="flex justify-between rounded-b-xl border-t border-gray-200 bg-gray-50 p-3 pt-2 dark:border-neutral-700 dark:bg-neutral-800"
+	class={[
+		'flex justify-between rounded-b-xl border-t border-gray-200 bg-gray-50 p-3 pt-2 dark:border-neutral-700 dark:bg-neutral-800',
+		props.class
+	]}
 >
 	{@render children()}
 </footer>

package/dist/components/ui/Card/CardFooter.svelte.d.ts

@@ -1,5 +1,9 @@
-declare const CardFooter: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    children: Snippet;
+    class?: ClassValue;
+}
+declare const CardFooter: import("svelte").Component<Props, {}, "">;
 type CardFooter = ReturnType<typeof CardFooter>;
 export default CardFooter;

package/dist/components/ui/Card/CardHeader.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
-	const { children } = $props();
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		children: Snippet;
+		class?: ClassValue;
+	}
+
+	const { children, ...props }: Props = $props();
 </script>
 
-<header class="flex flex-row gap-2">
+<header class={['flex flex-row gap-2 p-3 pb-2', props.class]}>
 	{@render children()}
 </header>

package/dist/components/ui/Card/CardHeader.svelte.d.ts

@@ -1,5 +1,9 @@
-declare const CardHeader: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    children: Snippet;
+    class?: ClassValue;
+}
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
 type CardHeader = ReturnType<typeof CardHeader>;
 export default CardHeader;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './stores/I18n.svelte.js';
 export * from './settings/index.js';
 export * from './types/index.js';
 export * from './components/index.js';
+export * from './components/container/index.js';

package/dist/index.js

@@ -2,3 +2,4 @@ export * from './stores/I18n.svelte.js';
 export * from './settings/index.js';
 export * from './types/index.js';
 export * from './components/index.js';
+export * from './components/container/index.js';