@r2digisolutions/ui 0.21.3 → 0.22.0

package/dist/components/container/DataTable/components/ContextMenu.svelte

@@ -0,0 +1,203 @@
+<script module lang="ts">
+	export type Entry = {
+		id: string;
+		label?: string;
+		shortcut?: string;
+		onClick?: () => void;
+		disabled?: boolean;
+		children?: Entry[];
+		kind?: 'item' | 'divider' | 'label';
+	};
+</script>
+
+<script lang="ts">
+	type Props = {
+		items?: Entry[];
+		x?: number;
+		y?: number;
+		open?: boolean;
+		title?: string;
+		searchable?: boolean;
+		context?: any;
+	};
+	let {
+		items = [],
+		x = 0,
+		y = 0,
+		open = $bindable(false),
+		title = '',
+		searchable = true,
+		context = null
+	}: Props = $props();
+
+	let stack = $state<{ label: string; items: Entry[] }[]>([]);
+	let q = $state('');
+
+	const current = $derived(stack.length ? stack[stack.length - 1] : { label: title, items });
+
+	function close() {
+		open = false;
+		stack = [];
+		q = '';
+	}
+
+	function hasChildren(it: Entry) {
+		return !!(it.children && it.children.length);
+	}
+
+	function clickItem(it: Entry) {
+		if (it.disabled) return;
+		if (hasChildren(it)) {
+			stack.push({ label: it.label ?? '', items: it.children! });
+			q = '';
+			return;
+		}
+		if (it.kind !== 'divider' && it.kind !== 'label') {
+			it.onClick?.();
+			close();
+		}
+	}
+
+	function matches(it: Entry, query: string): boolean {
+		if (it.kind === 'divider') return true;
+		const lbl = (it.label ?? '').toLowerCase();
+		if (lbl.includes(query)) return true;
+		if (hasChildren(it)) return it.children!.some((c) => matches(c, query));
+		return false;
+	}
+
+	const filtered = $derived.by(() => {
+		const list = current.items ?? [];
+		const query = q.trim().toLowerCase();
+		let arr = query ? list.filter((it) => matches(it, query)) : list.slice();
+
+		// limpiar divisores (sin duplicados, ni al principio/fin)
+		const out: Entry[] = [];
+		let prevDiv = false;
+		for (const it of arr) {
+			if (it.kind === 'divider') {
+				if (out.length === 0 || prevDiv) continue;
+				prevDiv = true;
+				out.push(it);
+			} else {
+				prevDiv = false;
+				out.push(it);
+			}
+		}
+		if (out.length && out[out.length - 1].kind === 'divider') out.pop();
+		return out;
+	});
+
+	function back() {
+		if (stack.length) {
+			stack.pop();
+			q = '';
+		}
+	}
+
+	function onKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			if (stack.length) back();
+			else close();
+		} else if (e.key === 'Backspace' && q === '' && stack.length) {
+			back();
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+		const handler = (e: KeyboardEvent) => onKey(e);
+		document.addEventListener('keydown', handler);
+		return () => document.removeEventListener('keydown', handler);
+	});
+</script>
+
+{#if open}
+	<div
+		role="dialog"
+		class="fixed inset-0 z-40"
+		onclick={() => close()}
+		oncontextmenu={(e) => e.preventDefault()}
+		aria-modal="true"
+		tabindex="0"
+	/>
+
+	<div
+		class="fixed z-50 w-72 rounded-2xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900"
+		style={`left:${x}px; top:${y}px`}
+		oncontextmenu={(e) => e.preventDefault()}
+	>
+		<div class="flex items-center gap-1 px-1 py-1">
+			{#if stack.length > 0}
+				<button
+					class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+					role="dialog"
+					aria-label="Atrás"
+					onclick={back}
+				>
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg
+					>
+				</button>
+			{/if}
+			<div class="min-w-0 flex-1 truncate px-1 text-xs font-medium opacity-70">
+				{current.label || title}
+			</div>
+			{#if searchable}
+				<input
+					class="w-28 rounded-lg border border-gray-200 px-2 py-1 text-xs dark:border-gray-800 dark:bg-gray-950"
+					placeholder="Buscar…"
+					bind:value={q}
+				/>
+			{/if}
+		</div>
+
+		<div
+			class="max-h-72 overflow-auto rounded-xl border border-gray-200 p-1 dark:border-gray-800 dark:bg-gray-950"
+		>
+			{#each filtered as it}
+				{#if it.kind === 'divider'}
+					<div class="my-1 border-t border-gray-200 dark:border-gray-800"></div>
+				{:else if it.kind === 'label'}
+					<div class="px-3 py-1 text-[11px] tracking-wide uppercase opacity-60">{it.label}</div>
+				{:else}
+					<button
+						class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-gray-100 disabled:opacity-50 dark:hover:bg-gray-800"
+						role="dialog"
+						disabled={it.disabled}
+						onclick={() => clickItem(it)}
+					>
+						<span class="truncate">{it.label}</span>
+						<span class="flex items-center gap-2">
+							{#if it.shortcut}
+								<kbd class="rounded bg-gray-100 px-1 text-[10px] dark:bg-gray-800"
+									>{it.shortcut}</kbd
+								>
+							{/if}
+							{#if hasChildren(it)}
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									class="opacity-60"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
+								>
+							{/if}
+						</span>
+					</button>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{/if}

package/dist/components/container/DataTable/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,21 @@
+export type Entry = {
+    id: string;
+    label?: string;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    children?: Entry[];
+    kind?: 'item' | 'divider' | 'label';
+};
+type Props = {
+    items?: Entry[];
+    x?: number;
+    y?: number;
+    open?: boolean;
+    title?: string;
+    searchable?: boolean;
+    context?: any;
+};
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/container/DataTable/components/FilterPanel.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import Input from '@UI/Input/Input.svelte';
+	import type { FilterField } from '../core/filters/types';
+	import { buildFilterDefs } from '../core/filters/utils';
+	import Checkbox from '@UI/Checkbox/Checkbox.svelte';
+	import Button from '@UI/buttons/Button.svelte';
+	import { Check, X } from 'lucide-svelte';
+
+	interface Props {
+		fields: FilterField<any>[];
+		values?: Record<string, any>;
+		onapply?: (defs: any[], values: Record<string, any>) => void;
+		onclear?: () => void;
+	}
+
+	const { fields, values = $bindable<Record<string, any>>({}), onapply, onclear }: Props = $props();
+
+	let open = $state(false);
+
+	const count = $derived(
+		Object.values(values).reduce(
+			(n, v) =>
+				n +
+				(v == null || v === ''
+					? 0
+					: Array.isArray(v)
+						? v.length > 0
+							? 1
+							: 0
+						: typeof v === 'object'
+							? v.min != null || v.max != null
+								? 1
+								: 0
+							: 1),
+			0
+		)
+	);
+	function setValue(id: string, v: any) {
+		values[id] = v;
+	}
+	function toggleArray(id: string, v: any) {
+		const arr = Array.isArray(values[id]) ? [...values[id]] : [];
+		const i = arr.findIndex((x) => x === v);
+		if (i >= 0) arr.splice(i, 1);
+		else arr.push(v);
+		values[id] = arr;
+	}
+	function apply() {
+		const defs = buildFilterDefs(fields, values);
+		onapply?.(defs, values);
+		open = false;
+	}
+	function clear() {
+		for (const k of Object.keys(values)) delete values[k];
+		onclear?.();
+	}
+</script>
+
+<div class="relative">
+	<button
+		class="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-gray-200 px-3 py-2 text-sm hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900"
+		onclick={() => (open = !open)}
+	>
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"><polygon points="3 5 21 5 14 13 14 19 10 21 10 13 3 5" /></svg
+		>
+		Filtros
+		{#if count > 0}
+			<span class="rounded bg-purple-600 px-1 text-[11px] text-white">{count}</span>
+		{/if}
+	</button>
+	{#if open}
+		<div
+			role="dialog"
+			class="fixed inset-0 z-40"
+			onclick={() => (open = false)}
+			oncontextmenu={(e) => e.preventDefault()}
+			aria-modal="true"
+			tabindex="0"
+		/>
+		<div
+			class="absolute z-50 mt-2 w-80 rounded-2xl border border-gray-200 bg-white p-4 shadow-xl ring-1 ring-black/5 dark:border-gray-800 dark:bg-gray-900"
+		>
+			<div class="mb-3 text-sm font-medium">Filtros</div>
+			<div class="space-y-3">
+				{#each fields as f}
+					{#if f.type === 'text'}
+						<Input
+							label={f.label}
+							type="text"
+							placeholder={f.placeholder}
+							value={values[f.id]}
+							onchange={(e) => (values[f.id] = e)}
+						/>
+					{:else if f.type === 'number'}
+						<Input
+							label={f.label}
+							type="number"
+							min={f.min}
+							max={f.max}
+							step={f.step}
+							value={values[f.id]}
+							onchange={(e) => (values[f.id] = e)}
+						/>
+					{:else if f.type === 'date'}
+						<Input
+							label={f.label}
+							type="date"
+							value={values[f.id]}
+							onchange={(e) => (values[f.id] = e)}
+						/>
+					{:else if f.type === 'checkbox'}
+						<Checkbox checked={values[f.id]} label={f.label} onchange={(e) => (values[f.id] = e)} />
+					{:else if f.type === 'select'}
+						<div>
+							<label class="mb-1 block text-xs opacity-70">{f.label}</label>
+							<select
+								class="w-full rounded-xl border border-gray-200 px-3 py-2 dark:border-gray-800"
+								bind:value={values[f.id]}
+							>
+								<option value="">Todos</option>
+								{#each f.options ?? [] as opt}
+									<option value={opt.value}>{opt.label}</option>
+								{/each}
+							</select>
+						</div>
+					{:else if f.type === 'multiselect'}
+						<div>
+							<label class="mb-1 block text-xs opacity-70">{f.label}</label>
+							<div class="max-h-40 overflow-auto rounded-xl border p-2">
+								{#each f.options ?? [] as opt}
+									<Checkbox
+										checked={(values[f.id] ?? []).includes(opt.value)}
+										onchange={() => toggleArray(f.id, opt.value)}
+										label={opt.label}
+									/>
+								{/each}
+							</div>
+						</div>
+					{:else if f.type === 'range'}
+						<div>
+							<label class="mb-1 block text-xs opacity-70">{f.label}</label>
+							<div class="grid grid-cols-2 gap-2">
+								<Input
+									type="number"
+									placeholder="Min"
+									min={f.min}
+									max={f.max}
+									step={f.step}
+									value={values[f.id]?.min ?? 0}
+									onchange={(e) => (values[f.id].min = e)}
+								/>
+								<Input
+									type="number"
+									placeholder="Max"
+									min={f.min}
+									max={f.max}
+									step={f.step}
+									value={values[f.id]?.max ?? 0}
+									onchange={(e) => (values[f.id].max = e)}
+								/>
+							</div>
+						</div>
+					{:else if f.type === 'rating'}
+						<div>
+							<label class="mb-1 block text-xs opacity-70">{f.label}</label>
+							<select class="w-full rounded-xl border px-3 py-2" bind:value={values[f.id]}>
+								<option value="">Cualquiera</option>
+								<option value="4">4+</option>
+								<option value="3">3+</option>
+								<option value="2">2+</option>
+								<option value="1">1+</option>
+							</select>
+						</div>
+					{/if}
+				{/each}
+			</div>
+			<div class="mt-4 flex gap-2">
+				<Button variant="outline" onclick={() => clear()}>
+					<X class="h-4 w-4" />
+					Limpiar
+				</Button>
+				<Button onclick={() => apply()}>
+					<Check class="h-4 w-4" />
+					Aplicar
+				</Button>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/container/DataTable/components/FilterPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FilterField } from '../core/filters/types';
+interface Props {
+    fields: FilterField<any>[];
+    values?: Record<string, any>;
+    onapply?: (defs: any[], values: Record<string, any>) => void;
+    onclear?: () => void;
+}
+declare const FilterPanel: import("svelte").Component<Props, {}, "values">;
+type FilterPanel = ReturnType<typeof FilterPanel>;
+export default FilterPanel;

package/dist/components/container/DataTable/components/Pagination.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-svelte';
+
+	interface Props {
+		page: number;
+		perPage: number;
+		total: number;
+		perPageOptions?: number[];
+		onchange?: (p: number) => void;
+		onperpage?: (n: number) => void;
+	}
+
+	let {
+		page,
+		perPage = $bindable(10),
+		total,
+		perPageOptions = [10, 20, 50, 100],
+		onchange,
+		onperpage
+	}: Props = $props();
+
+	const totalPages = $derived(Math.max(1, Math.ceil(total / perPage)));
+
+	function go(n: number) {
+		if (n < 1 || n > totalPages) return;
+		onchange?.(n);
+	}
+</script>
+
+<div class="flex flex-col items-center justify-between gap-3 sm:flex-row">
+	<div class="text-sm opacity-70">Página {page} de {totalPages} — {total} filas</div>
+	<div class="flex items-center gap-2">
+		<select
+			class="rounded-xl border border-gray-200 px-2 py-1 pr-6 dark:border-gray-800"
+			bind:value={perPage}
+			onchange={(e) => onperpage?.(Number((e.target as HTMLSelectElement).value))}
+		>
+			{#each perPageOptions as n}<option value={n}>{n} / pág</option>{/each}
+		</select>
+		<div class="inline-flex overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800">
+			<button
+				class="flex items-center gap-2 px-3 py-1.5 disabled:opacity-40"
+				disabled={page <= 1}
+				onclick={() => go(page - 1)}
+			>
+				<ChevronLeftIcon class="h-4 w-4" />
+				Prev
+			</button>
+			<button
+				class="flex items-center gap-2 px-3 py-1.5 disabled:opacity-40"
+				disabled={page >= totalPages}
+				onclick={() => go(page + 1)}
+			>
+				Next
+				<ChevronRightIcon class="h-4 w-4" />
+			</button>
+		</div>
+	</div>
+</div>

package/dist/components/container/DataTable/components/Pagination.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    page: number;
+    perPage: number;
+    total: number;
+    perPageOptions?: number[];
+    onchange?: (p: number) => void;
+    onperpage?: (n: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "perPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/container/DataTable/components/QuickFilters.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { FilterDef } from '../core/types';
+
+	interface Props {
+		filters: FilterDef<any>[];
+		onapply: (filters: FilterDef<any>[]) => void;
+	}
+
+	const { filters, onapply }: Props = $props();
+
+	let text = $state('');
+
+	function submit() {
+		const base = filters.filter((f) => f.meta?.kind !== 'quick');
+		const q: FilterDef<any> = {
+			id: 'q',
+			label: 'Búsqueda',
+			op: 'contains',
+			value: text,
+			meta: { kind: 'quick', column: 'all' }
+		};
+		onapply([...base, q]);
+	}
+</script>
+
+<div class="flex items-center gap-2">
+	<input
+		class="w-64 rounded-xl border px-3 py-2"
+		placeholder="Buscar…"
+		bind:value={text}
+		onkeydown={(e) => e.key === 'Enter' && submit()}
+	/>
+	<button
+		type="button"
+		class="rounded-xl bg-black px-3 py-2 text-white dark:bg-white dark:text-black"
+		onclick={submit}>Aplicar</button
+	>
+</div>

package/dist/components/container/DataTable/components/QuickFilters.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { FilterDef } from '../core/types';
+interface Props {
+    filters: FilterDef<any>[];
+    onapply: (filters: FilterDef<any>[]) => void;
+}
+declare const QuickFilters: import("svelte").Component<Props, {}, "">;
+type QuickFilters = ReturnType<typeof QuickFilters>;
+export default QuickFilters;

package/dist/components/container/DataTable/core/DataTableManager.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { TableOptions, TableState, VisibilityPlan } from './types.js';
+export declare class DataTableManager<T extends {
+    id?: any;
+} = any> {
+    options: TableOptions<T>;
+    state: TableState<T>;
+    measured: Record<string, number>;
+    reservedWidth: number;
+    forcedVisible: SvelteSet<string>;
+    forcedHidden: SvelteSet<string>;
+    expanded: SvelteSet<any>;
+    lastWidth: number | null;
+    constructor(opts: TableOptions<T>);
+    setMeasuredWidths(map: Record<string, number>): void;
+    get columns(): import("./types.js").ColumnDef<T>[];
+    getColumn(id: string): import("./types.js").ColumnDef<T>;
+    isExpanded(id: any): boolean;
+    toggleExpand(id: any): void;
+    setColumnVisibility(id: string, show: boolean): void;
+    setReservedWidth(n: number): void;
+    clearColumnOverrides(): void;
+    visibilityPlan(containerWidth: number): VisibilityPlan;
+    private mergeWithOverrides;
+    applyVisibility(plan: VisibilityPlan): void;
+    reflowForWidth(width: number): void;
+    reflow(): void;
+    setPerPage(n: number): Promise<void>;
+    setPage(p: number): Promise<void>;
+    setSort(id: string): Promise<void>;
+    setFilters(filters: typeof this.state.filters): Promise<void>;
+    clearFilters(): Promise<void>;
+    toggleSelect(rowId: any): void;
+    clearSelection(): void;
+    selectAllCurrentPage(getId?: (row: T) => any): void;
+    load(): Promise<void>;
+    private loadRemote;
+    private loadLocal;
+}