ui-svelte 0.1.0

package/dist/form/CsvField.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+	import { Button, Modal, Select, TextField, Table, useTable, Chip } from '../index.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		requiredColumns?: string[];
+		onMappingComplete?: (data: {
+			file: File;
+			mapping: Record<string, string>;
+			data: any[];
+			originalData: any[];
+		}) => void;
+		acceptMultipleFiles?: boolean;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'danger'
+			| 'warning'
+			| 'outlined'
+			| 'ghost';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+		buttonText?: string;
+		isSolid?: boolean;
+		showPreview?: boolean;
+		previewRows?: number;
+		previewPageSize?: number;
+	};
+
+	let {
+		requiredColumns = [],
+		onMappingComplete = () => {},
+		acceptMultipleFiles = false,
+		variant = 'primary',
+		size = 'md',
+		class: className,
+		buttonText = 'Seleccionar archivo CSV',
+		isSolid = false,
+		showPreview = true,
+		previewRows = 5,
+		previewPageSize = 10
+	}: Props = $props();
+
+	let fileInput = $state<HTMLInputElement | null>(null);
+	let selectedFile = $state<File | null>(null);
+	let showModal = $state(false);
+	let csvColumns = $state<string[]>([]);
+	let columnMapping = $state<Record<string, string>>({});
+	let parseError = $state<string | null>(null);
+	let csvData = $state<any[]>([]);
+	let mappedData = $state<any[]>([]);
+	let showPreviewTable = $state(false);
+
+	function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+		if (!file) return;
+
+		if (!file.name.endsWith('.csv')) {
+			parseError = 'Por favor selecciona un archivo CSV válido';
+			return;
+		}
+
+		selectedFile = file;
+		parseError = null;
+		parseCSV(file);
+	}
+
+	function parseCSV(file: File) {
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			try {
+				const text = e.target?.result as string;
+				const lines = text.split('\n').filter((line) => line.trim());
+
+				if (lines.length === 0) {
+					parseError = 'El archivo CSV está vacío';
+					return;
+				}
+
+				const delimiter = text.includes(';') ? ';' : ',';
+				const headers = lines[0].split(delimiter).map((h) => h.trim().replace(/^"|"$/g, ''));
+				csvColumns = headers;
+
+				csvData = lines.slice(1).map((line) => {
+					const values = line.split(delimiter).map((v) => v.trim().replace(/^"|"$/g, ''));
+					const row: Record<string, string> = {};
+					headers.forEach((header, idx) => {
+						row[header] = values[idx] || '';
+					});
+					return row;
+				});
+
+				const initialMapping: Record<string, string> = {};
+				requiredColumns.forEach((reqCol) => {
+					const match = headers.find((h) => h.toLowerCase() === reqCol.toLowerCase());
+					initialMapping[reqCol] = match || '';
+				});
+				columnMapping = initialMapping;
+
+				showModal = true;
+			} catch (error: any) {
+				parseError = 'Error al parsear el archivo CSV: ' + error.message;
+			}
+		};
+
+		reader.onerror = () => {
+			parseError = 'Error al leer el archivo';
+		};
+
+		reader.readAsText(file);
+	}
+
+	function confirmMapping() {
+		const unmappedColumns = requiredColumns.filter((col) => !columnMapping[col]);
+
+		if (unmappedColumns.length > 0) {
+			parseError = `Por favor mapea las siguientes columnas: ${unmappedColumns.join(', ')}`;
+			return;
+		}
+
+		mappedData = csvData.map((row) => {
+			const newRow: Record<string, string> = {};
+			Object.entries(columnMapping).forEach(([requiredCol, csvCol]) => {
+				newRow[requiredCol] = row[csvCol] || '';
+			});
+			return newRow;
+		});
+
+		onMappingComplete({
+			file: selectedFile!,
+			mapping: columnMapping,
+			data: mappedData,
+			originalData: csvData
+		});
+
+		if (showPreview) {
+			showPreviewTable = true;
+		}
+
+		closeModal();
+	}
+
+	function closeModal() {
+		showModal = false;
+		parseError = null;
+	}
+
+	function getPreviewData(requiredCol: string): string {
+		const csvCol = columnMapping[requiredCol];
+		if (!csvCol || csvData.length === 0) return 'N/A';
+		return csvData[0][csvCol] || 'N/A';
+	}
+
+	function clearImport() {
+		mappedData = [];
+		showPreviewTable = false;
+		selectedFile = null;
+		if (fileInput) {
+			fileInput.value = '';
+		}
+	}
+
+	const selectOptions = $derived(
+		csvColumns.map((col) => ({
+			id: col,
+			label: col
+		}))
+	);
+
+	const previewTable = $derived(
+		mappedData.length > 0
+			? useTable({
+					data: mappedData,
+					columns: requiredColumns.map((col) => ({
+						label: col.charAt(0).toUpperCase() + col.slice(1),
+						field: col,
+						sortable: true
+					})),
+					initialPageSize: previewPageSize
+				})
+			: null
+	);
+</script>
+
+<div class={className}>
+	<input
+		type="file"
+		accept=".csv"
+		bind:this={fileInput}
+		onchange={handleFileSelect}
+		style="display: none;"
+	/>
+
+	<Button
+		{variant}
+		{size}
+		{isSolid}
+		startIcon="fluent:document-arrow-up-24-regular"
+		onclick={() => fileInput?.click()}
+	>
+		{selectedFile ? selectedFile.name : buttonText}
+	</Button>
+
+	{#if parseError}
+		<div class="csv-field-error">
+			{parseError}
+		</div>
+	{/if}
+
+	{#if showPreviewTable && mappedData.length > 0 && previewTable}
+		<div class="csv-preview-container">
+			<div class="csv-preview-header">
+				<div class="csv-preview-info">
+					<h4 class="csv-preview-title">
+						Datos Importados
+						<span class="csv-preview-count">({mappedData.length} registros)</span>
+					</h4>
+					<div class="csv-mapping-summary">
+						{#each Object.entries(columnMapping) as [required, csv], index}
+							{#if index < 3}
+								<Chip size="sm" variant="muted">
+									{required} → {csv}
+								</Chip>
+							{/if}
+						{/each}
+						{#if Object.entries(columnMapping).length > 3}
+							<Chip size="sm" variant="muted">
+								+{Object.entries(columnMapping).length - 3} más
+							</Chip>
+						{/if}
+					</div>
+				</div>
+				<Button variant="ghost" size="sm" onclick={clearImport}>
+					<span class="csv-clear-icon">✕</span>
+					Limpiar
+				</Button>
+			</div>
+
+			<Table table={previewTable} showPagination isStriped hasDividers size="sm" />
+		</div>
+	{/if}
+</div>
+
+<Modal bind:open={showModal} onclose={closeModal} variant="surface" closeOnOverlay>
+	{#snippet header()}
+		<h2 class="csv-modal-title">Mapear Columnas del CSV</h2>
+	{/snippet}
+
+	<div class="csv-modal-body">
+		<p class="csv-instructions">
+			Asocia cada columna requerida con la columna correspondiente del archivo CSV:
+		</p>
+
+		<div class="csv-mapping-list">
+			{#each requiredColumns as requiredCol, index}
+				<div class="csv-mapping-item">
+					<Select
+						label={requiredCol}
+						options={selectOptions}
+						bind:value={columnMapping[requiredCol]}
+						placeholder="-- Seleccionar columna --"
+						variant="outlined"
+						size="md"
+						isFloatLabel
+					/>
+
+					{#if columnMapping[requiredCol]}
+						<TextField
+							value={getPreviewData(requiredCol)}
+							label="Vista previa"
+							variant="muted"
+							size="sm"
+							isFloatLabel
+							islabelActive
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	{#snippet footer()}
+		<div class="csv-modal-footer">
+			<Button variant="ghost" size="md" onclick={closeModal}>Cancelar</Button>
+			<Button variant="primary" size="md" isSolid onclick={confirmMapping}>Confirmar mapeo</Button>
+		</div>
+	{/snippet}
+</Modal>
+
+<style>
+	.csv-field-error {
+		margin-top: 0.625rem;
+		padding: 0.625rem;
+		background: rgb(254 226 226);
+		color: rgb(220 38 38);
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+	}
+
+	.csv-modal-title {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: rgb(17 24 39);
+	}
+
+	.csv-modal-body {
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+	}
+
+	.csv-instructions {
+		margin: 0;
+		color: rgb(107 114 128);
+		font-size: 0.875rem;
+	}
+
+	.csv-mapping-list {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.csv-mapping-item {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.csv-modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.75rem;
+	}
+
+	.csv-preview-container {
+		margin-top: 1.5rem;
+		padding: 1.25rem;
+		background: rgb(249 250 251);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.75rem;
+	}
+
+	.csv-preview-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin-bottom: 1rem;
+		gap: 1rem;
+	}
+
+	.csv-preview-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.csv-preview-title {
+		margin: 0 0 0.75rem 0;
+		font-size: 1rem;
+		font-weight: 600;
+		color: rgb(17 24 39);
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.csv-preview-count {
+		font-size: 0.875rem;
+		font-weight: 400;
+		color: rgb(107 114 128);
+	}
+
+	.csv-mapping-summary {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+
+	.csv-clear-icon {
+		font-size: 1.125rem;
+		line-height: 1;
+	}
+</style>

package/dist/form/CsvField.svelte.d.ts

@@ -0,0 +1,21 @@
+type Props = {
+    requiredColumns?: string[];
+    onMappingComplete?: (data: {
+        file: File;
+        mapping: Record<string, string>;
+        data: any[];
+        originalData: any[];
+    }) => void;
+    acceptMultipleFiles?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning' | 'outlined' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    buttonText?: string;
+    isSolid?: boolean;
+    showPreview?: boolean;
+    previewRows?: number;
+    previewPageSize?: number;
+};
+declare const CsvField: import("svelte").Component<Props, {}, "">;
+type CsvField = ReturnType<typeof CsvField>;
+export default CsvField;

package/dist/form/DateField.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+	import { ArrowLeft24RegularIcon, ArrowRight24RegularIcon } from '../icons/index.js';
+	import { Button, formatDate, getWeekdays, Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { onMount } from 'svelte';
+
+	type Props = {
+		value?: unknown;
+		placeholder?: string;
+		onchange?: (value: unknown) => void;
+		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
+		name?: string;
+		class?: string;
+		label?: string;
+		isLabelActive?: boolean;
+		helpText?: string;
+		errorText?: string;
+		isFloatLabel?: boolean;
+		isSolid?: boolean;
+	};
+
+	let {
+		value = $bindable(),
+		placeholder = 'Select an option',
+		onchange,
+		variant = 'outlined',
+		size = 'md',
+		name,
+		label,
+		isLabelActive,
+		helpText,
+		errorText,
+		class: className,
+		isFloatLabel,
+		isSolid
+	}: Props = $props();
+
+	let selectedDate = $state<Date>(new Date());
+	let currentMonth = $derived(selectedDate.getMonth());
+	let currentYear = $derived(selectedDate.getFullYear());
+	let contentEl = $state<HTMLDivElement>();
+	let controlElement = $state<HTMLElement>();
+
+	let isOpen = $state(false);
+	const uid = $props.id();
+
+	let isActive = $state(false);
+	let isFocused = $state(false);
+
+	let position = $state({
+		top: 0,
+		left: 0,
+		width: 'auto',
+		isBottomHalf: false
+	});
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outlined: 'is-outlined',
+		line: 'is-line'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	const style = $derived(
+		`top: ${position.top}px; left: ${position.left}px; width: ${position.width}px; transform-origin: ${position.isBottomHalf ? 'bottom' : 'top'} center;`
+	);
+
+	const getDaysInMonth = (month: number, year: number) => {
+		const firstDay = new Date(year, month, 1);
+		const lastDay = new Date(year, month + 1, 0);
+		const daysInMonth = lastDay.getDate();
+		const startingDayOfWeek = firstDay.getDay();
+
+		const days = [];
+
+		for (let i = 0; i < startingDayOfWeek; i++) {
+			days.push(null);
+		}
+
+		for (let day = 1; day <= daysInMonth; day++) {
+			days.push(new Date(year, month, day));
+		}
+
+		return days;
+	};
+
+	const changeMonth = (direction: 'prev' | 'next') => {
+		if (direction === 'prev') {
+			currentMonth--;
+			if (currentMonth < 0) {
+				currentMonth = 11;
+				currentYear--;
+			}
+		} else {
+			currentMonth++;
+			if (currentMonth > 11) {
+				currentMonth = 0;
+				currentYear++;
+			}
+		}
+	};
+
+	const selectDate = (date: Date) => {
+		selectedDate = new Date(date);
+		selectedDate;
+	};
+
+	const isToday = (date: Date) => {
+		const today = new Date();
+		return (
+			date &&
+			date.getDate() === today.getDate() &&
+			date.getMonth() === today.getMonth() &&
+			date.getFullYear() === today.getFullYear()
+		);
+	};
+
+	const isSelected = (date: Date) => {
+		return (
+			date &&
+			date.getDate() === selectedDate.getDate() &&
+			date.getMonth() === selectedDate.getMonth() &&
+			date.getFullYear() === selectedDate.getFullYear()
+		);
+	};
+
+	const monthName = $derived(
+		formatDate(new Date(currentYear, currentMonth, 1), {
+			month: 'short'
+		})
+	);
+
+	const days = $derived(getDaysInMonth(currentMonth, currentYear));
+	const weekdays = $derived(getWeekdays('short'));
+
+	const formattedSelectedDate = $derived(
+		formatDate(selectedDate, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		})
+	);
+
+	const handleClickOutside = (event: Event) => {
+		if (
+			isOpen &&
+			!controlElement?.contains(event.target as Node) &&
+			!contentEl?.contains(event.target as Node)
+		) {
+			isOpen = false;
+		}
+	};
+
+	const toggleDropdown = () => {
+		if (!isOpen) {
+			startEventListeners();
+			updatePosition();
+			isOpen = true;
+		} else {
+			stopEventListeners();
+			isOpen = false;
+		}
+	};
+
+	const updatePosition = () => {
+		if (!controlElement || !contentEl) return;
+
+		const rect = controlElement.getBoundingClientRect();
+		const windowHeight = window.innerHeight;
+		const contentHeight = contentEl.getBoundingClientRect().height;
+		const isBottomHalf = rect.top + rect.height / 2 > windowHeight / 2;
+
+		const top = isBottomHalf ? rect.top - contentHeight - 8 : rect.top + rect.height;
+		position = {
+			top: top,
+			left: rect.left + window.scrollX,
+			width: 'auto',
+			isBottomHalf
+		};
+	};
+
+	const startEventListeners = () => {
+		window.addEventListener('resize', updatePosition);
+		window.addEventListener('scroll', updatePosition, true);
+		document.addEventListener('click', handleClickOutside);
+	};
+
+	const stopEventListeners = () => {
+		window.removeEventListener('resize', updatePosition);
+		window.removeEventListener('scroll', updatePosition, true);
+		document.removeEventListener('click', handleClickOutside);
+	};
+
+	onMount(() => {
+		return () => stopEventListeners();
+	});
+</script>
+
+<div class={cn('field', className)}>
+	<input type="text" {name} bind:value hidden />
+
+	{#if !isFloatLabel && label}
+		<div class="field-label">{label}</div>
+	{/if}
+
+	<button
+		type="button"
+		bind:this={controlElement}
+		class={cn(
+			'control',
+			variantClasses[variant],
+			sizeClasses[size],
+			isFloatLabel && 'is-float',
+			isSolid && 'is-solid',
+			(isActive || isFocused) && 'is-active'
+		)}
+		class:is-error={errorText}
+		onclick={toggleDropdown}
+		onmouseenter={() => (isActive = true)}
+		onmouseleave={() => (isActive = false)}
+	>
+		{#if isFloatLabel && label}
+			<span
+				class={cn(
+					'control-label',
+					(isActive || isFocused || isLabelActive || isOpen || value !== '') && 'is-active'
+				)}
+			>
+				{label}
+			</span>
+		{/if}
+		<div class="control-selected">
+			{#if formattedSelectedDate}
+				{formattedSelectedDate}
+			{:else if isFloatLabel}
+				{#if isActive || isOpen}
+					{placeholder}
+				{/if}
+			{:else}
+				{placeholder}
+			{/if}
+		</div>
+	</button>
+
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-error')}>{errorText || helpText}</div>
+	{/if}
+
+	<div class:is-open={isOpen} class="date-popover" {style} bind:this={contentEl}>
+		<div class="date-picker-header">
+			<Button variant="ghost" onclick={() => changeMonth('prev')}>
+				<Icon icon={ArrowLeft24RegularIcon} />
+			</Button>
+
+			<span>{monthName} {currentYear}</span>
+
+			<Button variant="ghost" onclick={() => changeMonth('next')}>
+				<Icon icon={ArrowRight24RegularIcon} />
+			</Button>
+		</div>
+		<div class="date-picker-weekdays">
+			{#each weekdays as weekday}
+				<div class="weekday">{weekday}</div>
+			{/each}
+		</div>
+		<div class="date-picker-days">
+			{#each days as day}
+				{#if day}
+					<button
+						class="date-picker-day-button"
+						class:today={isToday(day)}
+						class:selected={isSelected(day)}
+						onclick={() => selectDate(day)}
+						type="button"
+					>
+						{day.getDate()}
+					</button>
+				{:else}
+					<div class="date-picker-empty-day"></div>
+				{/if}
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/form/DateField.svelte.d.ts

@@ -0,0 +1,18 @@
+type Props = {
+    value?: unknown;
+    placeholder?: string;
+    onchange?: (value: unknown) => void;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    class?: string;
+    label?: string;
+    isLabelActive?: boolean;
+    helpText?: string;
+    errorText?: string;
+    isFloatLabel?: boolean;
+    isSolid?: boolean;
+};
+declare const DateField: import("svelte").Component<Props, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;