@r2digisolutions/ui 0.28.3 → 0.29.0

package/dist/components/container/DataTableShell/DataTableShell.svelte

@@ -251,94 +251,89 @@
 		<div class="min-w-full">
 			<!-- HEADER -->
 			<div
-				class="sticky top-0 z-10 border-b border-neutral-200/80 bg-neutral-50/95 text-[11px] tracking-wide text-neutral-500 uppercase backdrop-blur-xl dark:border-neutral-800/80 dark:bg-neutral-950/95 dark:text-neutral-400"
+				class="sticky top-0 z-10 grid w-max items-center gap-0 border-b border-neutral-200/80 bg-neutral-50/95 text-[11px] tracking-wide text-neutral-500 uppercase backdrop-blur-xl dark:border-neutral-800/80 dark:bg-neutral-950/95 dark:text-neutral-400"
+				style={`grid-template-columns:${gridTemplate}`}
 			>
-				<div class="grid w-max items-center gap-0" style={`grid-template-columns:${gridTemplate}`}>
-					{#if controller.multiSelect}
-						<div
-							class={`sticky top-0 left-0 z-20 flex items-center justify-center border-r border-neutral-200/60 bg-neutral-50/95 px-2 ${
-								density === 'compact' ? 'py-1.5' : 'py-2.5'
-							} backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
-						>
-							<input
-								type="checkbox"
-								bind:this={selectAllEl}
-								onchange={handleToggleAll}
-								class="h-3.5 w-3.5 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
-								data-stop-row-toggle="true"
-							/>
-						</div>
-					{/if}
+				{#if controller.multiSelect}
+					<div
+						class={`sticky top-0 left-0 z-20 flex items-center justify-center border-r border-neutral-200/60 bg-neutral-50/95 px-2 ${
+							density === 'compact' ? 'py-1.5' : 'py-2.5'
+						} backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
+					>
+						<input
+							type="checkbox"
+							bind:this={selectAllEl}
+							onchange={handleToggleAll}
+							class="h-3.5 w-3.5 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
+							data-stop-row-toggle="true"
+						/>
+					</div>
+				{/if}
 
-					{#each controller.mainColumns as col (col.id)}
-						{@const sticky = stickyOffsets[col.id as keyof T]}
+				{#each controller.mainColumns as col (col.id)}
+					{@const sticky = stickyOffsets[col.id as keyof T]}
+					<div
+						role="columnheader"
+						tabindex="0"
+						class={`relative flex items-center border-r border-neutral-200/60 px-3 ${
+							density === 'compact' ? 'py-1.5' : 'py-2.5'
+						} text-left text-[11px] font-semibold text-neutral-600 dark:border-neutral-800/70 dark:text-neutral-300 ${
+							col.sticky === 'left'
+								? 'z-10 bg-neutral-50/95 shadow-[1px_0_0_rgba(15,23,42,0.15)] backdrop-blur-xl dark:bg-neutral-950/95'
+								: ''
+						}`}
+						style={col.sticky === 'left' && sticky?.left !== undefined
+							? `position: sticky; left: ${sticky.left}px; top: 0;`
+							: ''}
+						ondblclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
+					>
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-1"
+							onclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
+							data-stop-row-toggle="true"
+						>
+							{#if headerCell}
+								{@render headerCell(col)}
+							{:else}
+								<span class="line-clamp-1">{col.label}</span>
+							{/if}
+							{#if col.sortable}
+								<span
+									class={`text-[9px] ${
+										controller.sortColumn === col.id
+											? 'text-purple-500'
+											: 'text-neutral-300 dark:text-neutral-600'
+									}`}
+								>
+									{#if controller.sortColumn === col.id}
+										{controller.sortDirection === 'asc' ? '▲' : '▼'}
+									{:else}
+										↕
+									{/if}
+								</span>
+							{/if}
+						</button>
 						<div
 							role="columnheader"
 							tabindex="0"
-							class={`relative flex items-center border-r border-neutral-200/60 px-3 ${
-								density === 'compact' ? 'py-1.5' : 'py-2.5'
-							} text-left text-[11px] font-semibold text-neutral-600 dark:border-neutral-800/70 dark:text-neutral-300 ${
-								col.sticky === 'left'
-									? 'z-10 bg-neutral-50/95 shadow-[1px_0_0_rgba(15,23,42,0.15)] backdrop-blur-xl dark:bg-neutral-950/95'
-									: ''
-							}`}
-							style={col.sticky === 'left' && sticky?.left !== undefined
-								? `position: sticky; left: ${sticky.left}px; top: 0;`
-								: ''}
-							ondblclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
+							class="absolute inset-y-1 right-0 flex w-2 cursor-col-resize items-center justify-end"
+							onmousedown={(e) =>
+								onResizeDown(e, col.id as keyof T, e.currentTarget.parentElement as HTMLDivElement)}
+							data-stop-row-toggle="true"
 						>
-							<button
-								type="button"
-								class="flex w-full items-center justify-between gap-1"
-								onclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
-								data-stop-row-toggle="true"
-							>
-								{#if headerCell}
-									{@render headerCell(col)}
-								{:else}
-									<span class="line-clamp-1">{col.label}</span>
-								{/if}
-								{#if col.sortable}
-									<span
-										class={`text-[9px] ${
-											controller.sortColumn === col.id
-												? 'text-purple-500'
-												: 'text-neutral-300 dark:text-neutral-600'
-										}`}
-									>
-										{#if controller.sortColumn === col.id}
-											{controller.sortDirection === 'asc' ? '▲' : '▼'}
-										{:else}
-											↕
-										{/if}
-									</span>
-								{/if}
-							</button>
 							<div
-								role="columnheader"
-								tabindex="0"
-								class="absolute inset-y-1 right-0 flex w-2 cursor-col-resize items-center justify-end"
-								onmousedown={(e) =>
-									onResizeDown(
-										e,
-										col.id as keyof T,
-										e.currentTarget.parentElement as HTMLDivElement
-									)}
-								data-stop-row-toggle="true"
-							>
-								<div
-									class="h-6 w-[2px] rounded-full bg-neutral-200 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-400"
-								></div>
-							</div>
+								class="h-6 w-[2px] rounded-full bg-neutral-200 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-400"
+							></div>
 						</div>
-					{/each}
+					</div>
+				{/each}
 
-					<div
-						class={`sticky top-0 right-0 z-20 flex items-center justify-end border-l border-neutral-200/60 bg-neutral-50/95 px-2 ${
-							density === 'compact' ? 'py-1.5' : 'py-2.5'
-						} backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
-					></div>
-				</div>
+				<div
+					class={`sticky top-0 right-0 z-20 flex items-center justify-end border-l border-neutral-200/60 bg-neutral-50/95 px-2 ${
+						density === 'compact' ? 'py-1.5' : 'py-2.5'
+					} backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
+				></div>
 			</div>
 
 			<!-- BODY -->

package/dist/components/container/SelectMultiple/SelectMultiple.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import type { Option, Props } from './type.js';
+	import { BoxSelect, Check, ChevronDown, Save, Search, X, Plus } from 'lucide-svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import Tag from '../../ui/Tag/Tag.svelte';
+	import Dialog from '../../ui/Dialog/Dialog.svelte';
+	import DialogHeader from '../../ui/Dialog/DialogHeader.svelte';
+	import DialogTitle from '../../ui/Dialog/DialogTitle.svelte';
+	import DialogDescription from '../../ui/Dialog/DialogDescription.svelte';
+	import Input from '../../ui/Input/Input.svelte';
+	import DialogContent from '../../ui/Dialog/DialogContent.svelte';
+	import Checkbox from '../../ui/Checkbox/Checkbox.svelte';
+	import DialogFooter from '../../ui/Dialog/DialogFooter.svelte';
+	import Button from '../../ui/Button/Button.svelte';
+	import { i18n } from '../../../settings/index.js';
+	import NoContent from '../../ui/NoContent/NoContent.svelte';
+	import Field from '../../ui/Field/Field.svelte';
+
+	let {
+		options,
+		value = $bindable(),
+		label,
+		name,
+		placeholder,
+		multiple = true,
+		onConfirm,
+		onCancel,
+		required,
+		errors = [],
+		...props
+	}: Props = $props();
+
+	let open = $state(false);
+	let search = $state('');
+
+	let selected_items = $state(new SvelteMap<string, Option>());
+	let pending_selection = $state(new SvelteMap<string, Option>());
+
+	$effect(() => {
+		selected_items = new SvelteMap((value ?? []).map((v) => [v.value, v] as [string, Option]));
+	});
+
+	function openDialog() {
+		pending_selection = new SvelteMap(selected_items);
+		search = '';
+		open = true;
+	}
+
+	function toggleItem(item: Option) {
+		if (!multiple) {
+			pending_selection = new SvelteMap([[item.value, item]]);
+			confirmSelection();
+			return;
+		}
+
+		const next = new SvelteMap(pending_selection);
+
+		if (next.has(item.value)) {
+			next.delete(item.value);
+		} else {
+			next.set(item.value, item);
+		}
+
+		pending_selection = next;
+	}
+
+	function confirmSelection() {
+		value = [...pending_selection.values()];
+		selected_items = new SvelteMap(pending_selection);
+		open = false;
+		onConfirm?.(value);
+	}
+
+	function cancelSelection() {
+		pending_selection = new SvelteMap(selected_items);
+		open = false;
+		onCancel?.();
+	}
+
+	function removeSelected(v: string) {
+		const next = new SvelteMap(selected_items);
+		next.delete(v);
+		selected_items = next;
+		value = [...selected_items.values()];
+	}
+
+	const filtered_options = $derived.by(() => {
+		if (!search) return options;
+		const term = search.toLowerCase();
+		return options.filter((option) => option.label.toLowerCase().includes(term));
+	});
+
+	const single_selected: Option | undefined = $derived.by(() => {
+		if (!selected_items.size) return;
+		return selected_items.values().next().value;
+	});
+
+	const footerMessage = $derived.by(() => {
+		if (multiple) {
+			if (pending_selection.size === 0) return 'No hay elementos seleccionados.';
+			if (pending_selection.size === 1) return '1 elemento seleccionado.';
+			return `${pending_selection.size} elementos seleccionados.`;
+		} else {
+			if (single_selected) return `Seleccionado: ${single_selected.label}`;
+			return '';
+		}
+	});
+</script>
+
+<div class={['flex w-full flex-col gap-2', props.parentClass].join(' ')}>
+	<Field {name} {label} {errors} {required}>
+		<button
+			type="button"
+			onclick={openDialog}
+			class="flex h-11 w-full items-center gap-2 rounded-2xl border border-neutral-200/70 bg-neutral-50/80 px-3.5 text-left text-sm text-neutral-800 shadow-xs transition-all hover:border-neutral-300 hover:bg-neutral-50 focus-visible:ring-2 focus-visible:ring-indigo-500/60 focus-visible:outline-none dark:border-neutral-700/70 dark:bg-neutral-900/70 dark:text-neutral-100 dark:hover:border-neutral-500 dark:hover:bg-neutral-900"
+		>
+			<BoxSelect class="h-4 w-4 text-neutral-400 dark:text-neutral-500" />
+
+			<span class="truncate text-[13px] text-neutral-600 dark:text-neutral-300">
+				{#if multiple}
+					{#if selected_items.size > 0}
+						{selected_items.size === 1
+							? Array.from(selected_items.values())[0].label
+							: `${selected_items.size} seleccionados`}
+					{:else}
+						{placeholder}
+					{/if}
+				{:else if selected_items.size > 0}
+					{single_selected?.label ?? placeholder}
+				{:else}
+					{placeholder}
+				{/if}
+			</span>
+
+			{#if multiple && selected_items.size > 0}
+				<span
+					class="ml-1 rounded-full bg-neutral-200/80 px-2 py-[2px] text-[11px] text-neutral-700 tabular-nums dark:bg-neutral-800/90 dark:text-neutral-200"
+				>
+					{selected_items.size}
+				</span>
+			{/if}
+
+			<ChevronDown
+				class={[
+					'ml-auto h-4 w-4 text-neutral-400 transition-transform dark:text-neutral-500',
+					open ? 'rotate-180' : ''
+				].join(' ')}
+			/>
+		</button>
+	</Field>
+
+	{#if multiple}
+		<div class="flex flex-wrap gap-1.5">
+			{#each Array.from(selected_items.values()) as item, index (item.value)}
+				<input type="hidden" name="{name}[{index}]" value={item.value} />
+				<Tag
+					onclose={() => removeSelected(item.value)}
+					variant="solid"
+					color="indigo"
+					class="rounded-full bg-indigo-500/10 text-[11px] text-indigo-700 ring-1 ring-indigo-500/30 dark:bg-indigo-500/15 dark:text-indigo-200"
+				>
+					{item.label}
+				</Tag>
+			{/each}
+		</div>
+	{:else}
+		<input type="hidden" {name} value={single_selected?.value ?? ''} />
+	{/if}
+</div>
+
+<Dialog {open} onclose={cancelSelection}>
+	<DialogHeader>
+		<DialogTitle>{label}</DialogTitle>
+		{#if placeholder}
+			<DialogDescription>{placeholder}</DialogDescription>
+		{/if}
+
+		<div class="mt-4 space-y-2">
+			<div class="relative">
+				<Input
+					type="search"
+					class="w-full"
+					placeholder="Buscar..."
+					name="search"
+					autofocus
+					value={search}
+					oninput={(e) => (search = e.currentTarget.value)}
+				/>
+				<div class="top absolute left-2">
+					<Search class="h-4 w-4 text-neutral-400" />
+				</div>
+			</div>
+
+			{#if multiple}
+				<div
+					class="flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400"
+				>
+					<span>
+						Seleccionados:
+						<span class="ml-1 font-semibold text-neutral-700 dark:text-neutral-200">
+							{pending_selection.size}
+						</span>
+						{#if options.length}
+							<span class="ml-1 text-neutral-400">/ {options.length}</span>
+						{/if}
+					</span>
+					{#if pending_selection.size > 0}
+						<button
+							type="button"
+							class="inline-flex items-center gap-1 rounded-full px-2 py-[2px] text-[11px] text-neutral-500 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+							onclick={() => (pending_selection = new SvelteMap())}
+						>
+							<X class="h-3 w-3" />
+							Limpiar
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</DialogHeader>
+
+	<DialogContent class="max-h-[70dvh] gap-1 py-2">
+		{#each filtered_options as item (item.value)}
+			{#if multiple}
+				<label class="flex flex-row gap-1">
+					<Checkbox
+						class={[
+							'group flex items-center gap-3 rounded-2xl border px-3.5 py-2.5 text-sm transition-all',
+							pending_selection.has(item.value)
+								? 'border-indigo-500/70 bg-indigo-500/8 shadow-sm shadow-indigo-500/20 dark:border-indigo-400/70 dark:bg-indigo-500/10'
+								: 'border-transparent bg-neutral-100/80 hover:bg-neutral-200/80 dark:bg-neutral-900/70 dark:hover:bg-neutral-800'
+						]}
+						value={item.value}
+						label={item.label}
+						checked={pending_selection.has(item.value)}
+						onchange={() => toggleItem(item)}
+					/>
+					<div class="flex flex-col">
+						<span>{item.label}</span>
+						{#if item.description}
+							<span
+								class="block text-[11px] text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-400 dark:group-hover:text-neutral-300"
+							>
+								{item.description}
+							</span>
+						{/if}
+					</div>
+				</label>
+			{:else}
+				<button
+					type="button"
+					onclick={() => toggleItem(item)}
+					class={[
+						'flex w-full cursor-pointer items-center gap-3 rounded-2xl border px-3.5 py-2.5 text-sm transition-all',
+						pending_selection.has(item.value)
+							? 'border-indigo-500/70 bg-indigo-500/8 shadow-sm shadow-indigo-500/20 dark:border-indigo-400/70 dark:bg-indigo-500/10'
+							: 'border-transparent bg-neutral-100/80 hover:bg-neutral-200/80 dark:bg-neutral-900/70 dark:hover:bg-neutral-800'
+					].join(' ')}
+				>
+					<!-- icono left -->
+					<div
+						class={[
+							'flex h-7 w-7 items-center justify-center rounded-full border text-neutral-500 transition-all',
+							pending_selection.has(item.value)
+								? 'border-transparent bg-linear-to-tr from-indigo-500 via-violet-500 to-blue-500 text-white shadow-sm shadow-indigo-500/40'
+								: 'border-neutral-300 bg-white/90 dark:border-neutral-600 dark:bg-neutral-900/90'
+						].join(' ')}
+					>
+						{#if pending_selection.has(item.value)}
+							<Check class="h-3.5 w-3.5" />
+						{:else}
+							<Plus class="h-3.5 w-3.5" />
+						{/if}
+					</div>
+
+					<div class="flex flex-1 flex-col text-left">
+						<span class="text-[13px] font-medium text-neutral-800 dark:text-neutral-100">
+							{item.label}
+						</span>
+						{#if item.description}
+							<span class="text-[11px] text-neutral-500 dark:text-neutral-400">
+								{item.description}
+							</span>
+						{/if}
+					</div>
+
+					{#if pending_selection.has(item.value)}
+						<div
+							class="inline-flex items-center gap-1 rounded-full bg-neutral-900/90 px-2.5 py-[3px] text-[10px] font-medium text-neutral-50 shadow-sm shadow-black/40 dark:bg-neutral-50/95 dark:text-neutral-900"
+						>
+							<Check class="h-3 w-3" />
+							<span>Seleccionado</span>
+						</div>
+					{/if}
+				</button>
+			{/if}
+		{:else}
+			<NoContent
+				icon={Search}
+				title="No se encontraron resultados"
+				subtitle="Prueba con otros términos o limpia el buscador."
+			/>
+		{/each}
+	</DialogContent>
+
+	<DialogFooter class="flex items-center justify-between gap-2">
+		{#if footerMessage}
+			<div class="text-[11px] text-neutral-500 dark:text-neutral-400">
+				{footerMessage}
+			</div>
+		{/if}
+
+		<div class="ml-auto flex gap-2">
+			<Button variant="secondary" onclick={cancelSelection}>
+				<X class="h-4 w-4" />
+				{i18n.t('common.cancel')}
+			</Button>
+			<Button variant="primary" onclick={confirmSelection}>
+				<Save class="h-4 w-4" />
+				{i18n.t('common.confirm')}
+				{#if multiple}
+					<span class="ml-1 text-[11px] tabular-nums">
+						({pending_selection.size})
+					</span>
+				{/if}
+			</Button>
+		</div>
+	</DialogFooter>
+</Dialog>

package/dist/components/container/SelectMultiple/SelectMultiple.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './type.js';
+declare const SelectMultiple: import("svelte").Component<Props, {}, "value">;
+type SelectMultiple = ReturnType<typeof SelectMultiple>;
+export default SelectMultiple;

package/dist/components/container/SelectMultiple/type.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Option {
+    label: string;
+    value: string;
+    description?: string;
+    [key: string]: any;
+}
+export interface Props {
+    parentClass?: ClassValue;
+    class?: ClassValue;
+    required?: boolean;
+    multiple?: boolean;
+    onConfirm?: (selected: Option[]) => void;
+    onCancel?: () => void;
+    item?: Snippet<[option: Option]>;
+    options: Option[];
+    value?: Option[];
+    label: string;
+    name: string;
+    placeholder: string;
+    errors?: string[];
+}

package/dist/components/container/SelectMultiple/type.js

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

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

@@ -2,6 +2,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';
+import SelectMultiple from './SelectMultiple/SelectMultiple.svelte';
 export * from './DataTable/core/types.js';
 export * from './TabsStepper/core/types.js';
-export { DataTable, TabsStepper, DataTableShell, DataTableController };
+export { DataTable, TabsStepper, DataTableShell, DataTableController, SelectMultiple };

package/dist/components/container/index.js

@@ -2,6 +2,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';
+import SelectMultiple from './SelectMultiple/SelectMultiple.svelte';
 export * from './DataTable/core/types.js';
 export * from './TabsStepper/core/types.js';
-export { DataTable, TabsStepper, DataTableShell, DataTableController };
+export { DataTable, TabsStepper, DataTableShell, DataTableController, SelectMultiple };

package/dist/components/ui/Tag/Tag.svelte

@@ -30,7 +30,8 @@
 		white: `${type}-white text-black`,
 		info: `${type}-blue-500 text-whit`,
 		outline: `${type}-gray-200 text-gray-800`,
-		default: `${type}-gray-800 text-white`
+		default: `${type}-gray-800 text-white`,
+		indigo: `${type}-indigo-500 text-white`
 	});
 
 	const variants: Record<typeof variant, string> = $derived({

package/dist/components/ui/Tag/type.d.ts

@@ -4,7 +4,7 @@ export interface Props {
     onclick?(): void;
     href?: string;
     variant?: 'solid' | 'outline';
-    color?: 'primary' | 'secondary' | 'danger' | 'white' | 'teal' | 'info' | 'outline' | 'default';
+    color?: 'primary' | 'secondary' | 'danger' | 'white' | 'teal' | 'info' | 'outline' | 'default' | 'indigo';
     shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     onclose?(): void;
     class?: ClassValue;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.28.3",
+	"version": "0.29.0",
 	"private": false,
 	"packageManager": "bun@1.3.4",
 	"publishConfig": {
@@ -82,7 +82,7 @@
 		"tailwindcss": "4.1.17",
 		"typescript": "5.9.3",
 		"typescript-eslint": "8.48.1",
-		"vite": "7.2.6",
+		"vite": "7.2.7",
 		"vitest": "4.0.15"
 	},
 	"dependencies": {