@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/forms/FormCheckbox/FormCheckbox.svelte

@@ -1,53 +1,53 @@
-<script lang="ts">
-	import { Checkbox, key, Label } from '../../index.js';
-	import type { FormCheckboxProps, FormSelectProps } from '../../types/index.js';
-	import { getContext } from 'svelte';
-
-	let {
-		label = '',
-		required,
-		name,
-		disabled,
-		contextKey = null,
-		placeholder,
-		multiple = false,
-		onChange,
-		...otherProps
-	}: FormCheckboxProps = $props();
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	const hasError = $derived($touched[name] && $errors[name]?.length);
-	const error = $derived($errors[name]?.join(', '));
-	const value = $derived($data[name]);
-
-	function handleChange(e: Event) {
-		const value = (e.target as HTMLInputElement).checked;
-		setData({ ...$data, [name]: value });
-		if (onChange) onChange(e);
-	}
-</script>
-
-<div class="relative space-y-1">
-	<Checkbox {disabled} onchange={handleChange} {...otherProps} checked={value}
-		>{label}
-		{#if required}
-			<span class="pt-1 pl-1 text-red-500">*</span>
-		{/if}
-	</Checkbox>
-
-	{#if hasError}
-		<Label
-			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
-				'text-red-600'}"
-		>
-			<span class="v-error-message hidden backdrop-blur-sm">
-				{error}
-			</span>
-			<iconify-icon
-				icon="solar:danger-circle-bold-duotone"
-				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
-				style="font-size: 18px;"
-			></iconify-icon>
-		</Label>
-	{/if}
-</div>
+<script lang="ts">
+	import { Checkbox, key, Label } from '../../index.js';
+	import type { FormCheckboxProps, FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onChange,
+		...otherProps
+	}: FormCheckboxProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const value = $derived($data[name]);
+
+	function handleChange(e: Event) {
+		const value = (e.target as HTMLInputElement).checked;
+		setData({ ...$data, [name]: value });
+		if (onChange) onChange(e);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Checkbox {disabled} onchange={handleChange} {...otherProps} checked={value}
+		>{label}
+		{#if required}
+			<span class="pt-1 pl-1 text-red-500">*</span>
+		{/if}
+	</Checkbox>
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>

package/dist/forms/FormDatepicker/FormDatepicker.svelte

@@ -1,159 +1,159 @@
-<script lang="ts" module>
-	/**
-	 * Converts a string to a Date object, handling multiple common formats
-	 * @param dateString - The string to convert to a date
-	 * @returns Date object or null if parsing fails
-	 */
-	export function stringToDate(dateString: string): Date | undefined {
-		if (!dateString) return undefined;
-
-		// Try ISO format first (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss)
-		let date = new Date(dateString);
-		if (!isNaN(date.getTime())) return date;
-
-		// Try common formats with different separators
-		const formats = [
-			// DD/MM/YYYY or MM/DD/YYYY
-			/(\d{1,2})[\/\-\.](\d{1,2})[\/\-\.](\d{4})/,
-			// YYYY/MM/DD
-			/(\d{4})[\/\-\.](\d{1,2})[\/\-\.](\d{1,2})/,
-			// Month name formats (MMM DD, YYYY)
-			/([A-Za-z]+)\s(\d{1,2}),?\s(\d{4})/,
-			// Unix timestamp (as string)
-			/^\d{10,13}$/
-		];
-
-		for (const regex of formats) {
-			const match = dateString.match(regex);
-			if (!match) continue;
-
-			if (regex === formats[3]) {
-				// Unix timestamp
-				const timestamp = parseInt(dateString);
-				return new Date(timestamp * (dateString.length === 10 ? 1000 : 1));
-			}
-
-			let day, month, year;
-			if (regex === formats[0]) {
-				// DD/MM/YYYY or MM/DD/YYYY
-				const first = parseInt(match[1]);
-				const second = parseInt(match[2]);
-
-				// Determine if format is DD/MM or MM/DD
-				if (first > 12) {
-					day = first;
-					month = second - 1;
-				} else if (second > 12) {
-					day = second;
-					month = first - 1;
-				} else {
-					// Ambiguous case, default to DD/MM
-					day = second;
-					month = first - 1;
-				}
-				year = parseInt(match[3]);
-			} else if (regex === formats[1]) {
-				// YYYY/MM/DD
-				year = parseInt(match[1]);
-				month = parseInt(match[2]) - 1;
-				day = parseInt(match[3]);
-			} else if (regex === formats[2]) {
-				// Month name
-				month = new Date(`${match[1]} 1, 2000`).getMonth();
-				day = parseInt(match[2]);
-				year = parseInt(match[3]);
-			}
-
-			date = new Date(year, month, day);
-			if (!isNaN(date.getTime())) return date;
-		}
-
-		// Try the Date constructor one more time in case of locale-specific formats
-		date = new Date(dateString);
-		return isNaN(date.getTime()) ? undefined : date;
-	}
-</script>
-
-<script lang="ts">
-	import { key, type DateOrRange, type FormDatepickerProps } from '../../index.js';
-	import { getContext } from 'svelte';
-	import Label from '../label/Label.svelte';
-	import Datepicker from '../datepicker/Datepicker.svelte';
-
-	let {
-		label = '',
-		required,
-		name,
-		disabled,
-		contextKey = null,
-		placeholder,
-		range,
-		locale,
-		dateFormat,
-		onchange,
-		...otherProps
-		// onchange,
-	}: FormDatepickerProps & { onchange?: (value: DateOrRange) => void } = $props();
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	const hasError = $derived($touched[name] && $errors[name]?.length);
-	const error = $derived($errors[name]?.join(', '));
-	const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? '';
-	const value = $derived($data[name] ? stringToDate($data[name]) : undefined);
-	const rangeDate = $derived(getRange());
-
-	function getRange() {
-		if (!range) return { from: undefined, to: undefined };
-		const splits = $data[name].split(' - ');
-		return {
-			from: stringToDate(splits[0]),
-			to: stringToDate(splits[1])
-		};
-	}
-
-	function handleChange(e: DateOrRange) {
-		if (!range) {
-			setData({ ...$data, [name]: formatDate(e as Date) });
-		} else if (typeof e === 'object' && 'from' in e && 'to' in e) {
-			const d = `${formatDate(e.from)} - ${formatDate(e.to)}`;
-			setData({ ...$data, [name]: d });
-		}
-		if (onchange) onchange(e);
-	}
-</script>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<Datepicker
-		{disabled}
-		{range}
-		{value}
-		onselect={handleChange}
-		rangeFrom={rangeDate.from}
-		rangeTo={rangeDate.to}
-		{name}
-		{...otherProps}
-	/>
-
-	{#if hasError}
-		<Label
-			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
-				'text-red-600'}"
-		>
-			<span class="v-error-message hidden backdrop-blur-sm">
-				{error}
-			</span>
-			<iconify-icon
-				icon="solar:danger-circle-bold-duotone"
-				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
-				style="font-size: 18px;"
-			></iconify-icon>
-		</Label>
-	{/if}
-</div>
+<script lang="ts" module>
+	/**
+	 * Converts a string to a Date object, handling multiple common formats
+	 * @param dateString - The string to convert to a date
+	 * @returns Date object or null if parsing fails
+	 */
+	export function stringToDate(dateString: string): Date | undefined {
+		if (!dateString) return undefined;
+
+		// Try ISO format first (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss)
+		let date = new Date(dateString);
+		if (!isNaN(date.getTime())) return date;
+
+		// Try common formats with different separators
+		const formats = [
+			// DD/MM/YYYY or MM/DD/YYYY
+			/(\d{1,2})[\/\-\.](\d{1,2})[\/\-\.](\d{4})/,
+			// YYYY/MM/DD
+			/(\d{4})[\/\-\.](\d{1,2})[\/\-\.](\d{1,2})/,
+			// Month name formats (MMM DD, YYYY)
+			/([A-Za-z]+)\s(\d{1,2}),?\s(\d{4})/,
+			// Unix timestamp (as string)
+			/^\d{10,13}$/
+		];
+
+		for (const regex of formats) {
+			const match = dateString.match(regex);
+			if (!match) continue;
+
+			if (regex === formats[3]) {
+				// Unix timestamp
+				const timestamp = parseInt(dateString);
+				return new Date(timestamp * (dateString.length === 10 ? 1000 : 1));
+			}
+
+			let day, month, year;
+			if (regex === formats[0]) {
+				// DD/MM/YYYY or MM/DD/YYYY
+				const first = parseInt(match[1]);
+				const second = parseInt(match[2]);
+
+				// Determine if format is DD/MM or MM/DD
+				if (first > 12) {
+					day = first;
+					month = second - 1;
+				} else if (second > 12) {
+					day = second;
+					month = first - 1;
+				} else {
+					// Ambiguous case, default to DD/MM
+					day = second;
+					month = first - 1;
+				}
+				year = parseInt(match[3]);
+			} else if (regex === formats[1]) {
+				// YYYY/MM/DD
+				year = parseInt(match[1]);
+				month = parseInt(match[2]) - 1;
+				day = parseInt(match[3]);
+			} else if (regex === formats[2]) {
+				// Month name
+				month = new Date(`${match[1]} 1, 2000`).getMonth();
+				day = parseInt(match[2]);
+				year = parseInt(match[3]);
+			}
+
+			date = new Date(year, month, day);
+			if (!isNaN(date.getTime())) return date;
+		}
+
+		// Try the Date constructor one more time in case of locale-specific formats
+		date = new Date(dateString);
+		return isNaN(date.getTime()) ? undefined : date;
+	}
+</script>
+
+<script lang="ts">
+	import { key, type DateOrRange, type FormDatepickerProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Label from '../label/Label.svelte';
+	import Datepicker from '../datepicker/Datepicker.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		range,
+		locale,
+		dateFormat,
+		onchange,
+		...otherProps
+		// onchange,
+	}: FormDatepickerProps & { onchange?: (value: DateOrRange) => void } = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? '';
+	const value = $derived($data[name] ? stringToDate($data[name]) : undefined);
+	const rangeDate = $derived(getRange());
+
+	function getRange() {
+		if (!range) return { from: undefined, to: undefined };
+		const splits = $data[name].split(' - ');
+		return {
+			from: stringToDate(splits[0]),
+			to: stringToDate(splits[1])
+		};
+	}
+
+	function handleChange(e: DateOrRange) {
+		if (!range) {
+			setData({ ...$data, [name]: formatDate(e as Date) });
+		} else if (typeof e === 'object' && 'from' in e && 'to' in e) {
+			const d = `${formatDate(e.from)} - ${formatDate(e.to)}`;
+			setData({ ...$data, [name]: d });
+		}
+		if (onchange) onchange(e);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Datepicker
+		{disabled}
+		{range}
+		{value}
+		onselect={handleChange}
+		rangeFrom={rangeDate.from}
+		rangeTo={rangeDate.to}
+		{name}
+		{...otherProps}
+	/>
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>

package/dist/forms/FormInput/FormInput.svelte

@@ -1,87 +1,87 @@
-<script lang="ts" module>
-	function formatInput(value: string, type: string | null, pattern: string | null) {
-		if (!value) return '';
-		if (!type) return value;
-		switch (type) {
-			case 'number':
-				const v = +value;
-				if (isNaN(v)) return '';
-				return v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-			default:
-				return value;
-		}
-	}
-
-	function getNestedValue<T extends Record<string, any>>(obj: T, path: string): any {
-		return path
-			.split('.')
-			.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj);
-	}
-</script>
-
-<script lang="ts">
-	import { key, type FormInputProps } from '../../index.js';
-	import { getContext } from 'svelte';
-	import Input from '../input/Input.svelte';
-	import { nanoid } from 'nanoid';
-	import Label from '../label/Label.svelte';
-
-	let {
-		name = '',
-		label = '',
-		required,
-		readonly,
-		contextKey = null,
-		type = 'text',
-		pattern = null,
-		placeholder,
-		...otherProps
-	}: FormInputProps = $props();
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	const hasError = $derived($touched[name] && $errors[name]?.length);
-	const error = $derived($errors[name]?.join(', '));
-	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
-	let id = nanoid();
-</script>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-	{#if readonly}
-		<div class="min-h-[42px] rounded-md border border-gray-300 bg-gray-100 p-2">
-			<span>{formatInput(getNestedValue($data, name) || '', type, pattern)}</span>
-		</div>
-	{:else}
-		<Input
-			{name}
-			{type}
-			{id}
-			{placeholder}
-			{readonly}
-			color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
-			value={getNestedValue($data, name) || ''}
-			{...otherProps}
-		/>
-	{/if}
-
-	{#if hasError}
-		<Label
-			class="v-error-container absolute top-9 right-2 flex items-center gap-1 text-sm {hasError &&
-				'text-red-600'}"
-		>
-			<span class="v-error-message hidden backdrop-blur-sm">
-				{error}
-			</span>
-			<iconify-icon
-				icon="solar:danger-circle-bold-duotone"
-				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
-				style="font-size: 18px;"
-			></iconify-icon>
-		</Label>
-	{/if}
-</div>
+<script lang="ts" module>
+	function formatInput(value: string, type: string | null, pattern: string | null) {
+		if (!value) return '';
+		if (!type) return value;
+		switch (type) {
+			case 'number':
+				const v = +value;
+				if (isNaN(v)) return '';
+				return v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+			default:
+				return value;
+		}
+	}
+
+	function getNestedValue<T extends Record<string, any>>(obj: T, path: string): any {
+		return path
+			.split('.')
+			.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj);
+	}
+</script>
+
+<script lang="ts">
+	import { key, type FormInputProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Input from '../input/Input.svelte';
+	import { nanoid } from 'nanoid';
+	import Label from '../label/Label.svelte';
+
+	let {
+		name = '',
+		label = '',
+		required,
+		readonly,
+		contextKey = null,
+		type = 'text',
+		pattern = null,
+		placeholder,
+		...otherProps
+	}: FormInputProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
+	let id = nanoid();
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+	{#if readonly}
+		<div class="min-h-[42px] rounded-md border border-gray-300 bg-gray-100 p-2">
+			<span>{formatInput(getNestedValue($data, name) || '', type, pattern)}</span>
+		</div>
+	{:else}
+		<Input
+			{name}
+			{type}
+			{id}
+			{placeholder}
+			{readonly}
+			color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
+			value={getNestedValue($data, name) || ''}
+			{...otherProps}
+		/>
+	{/if}
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-9 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>