@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/forms/FormRadio/FormRadio.svelte

@@ -1,53 +1,53 @@
-<script lang="ts">
-	import { Checkbox, key, Label } from '../../index.js';
-	import type { FormCheckboxProps, FormRadioProps, FormSelectProps } from '../../types/index.js';
-	import { getContext } from 'svelte';
-	import Radio from '../radio/Radio.svelte';
-
-	let {
-		label = '',
-		required,
-		name,
-		disabled,
-		contextKey = null,
-		placeholder,
-		multiple = false,
-		onchange,
-		...otherProps
-	}: FormRadioProps<any> = $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).value;
-		setData({ ...$data, [name]: value });
-		if (onchange) onchange(e as any);
-	}
-</script>
-
-<div class="relative space-y-1">
-	<Radio {disabled} onchange={handleChange} {...otherProps} group={value}
-		>{label}
-		{#if required}
-			<span class="pt-1 pl-1 text-red-500">*</span>
-		{/if}
-		{#if hasError}
-			<Label
-				class="v-error-container absolute top-0 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}
-	</Radio>
-</div>
+<script lang="ts">
+	import { Checkbox, key, Label } from '../../index.js';
+	import type { FormCheckboxProps, FormRadioProps, FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+	import Radio from '../radio/Radio.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onchange,
+		...otherProps
+	}: FormRadioProps<any> = $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).value;
+		setData({ ...$data, [name]: value });
+		if (onchange) onchange(e as any);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Radio {disabled} onchange={handleChange} {...otherProps} group={value}
+		>{label}
+		{#if required}
+			<span class="pt-1 pl-1 text-red-500">*</span>
+		{/if}
+		{#if hasError}
+			<Label
+				class="v-error-container absolute top-0 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}
+	</Radio>
+</div>

package/dist/forms/FormSelect/FormSelect.svelte

@@ -1,86 +1,86 @@
-<script lang="ts">
-	import { key, Label } from '../../index.js';
-	import type { FormSelectProps } from '../../types/index.js';
-	import { getContext } from 'svelte';
-	import Select from '../select/Select.svelte';
-
-	let {
-		label = '',
-		required,
-		name = '',
-		disabled,
-		contextKey = null,
-		placeholder,
-		multiple = false,
-		onChange,
-		...otherProps
-		// onchange,
-	}: FormSelectProps = $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]);
-	const isSuccess = $derived(!disabled && !hasError && $touched[name]);
-
-	let renderId = $state(0);
-
-	function handleChange(e: any) {
-		if (!e) return;
-		if (!multiple) {
-			setData({ ...$data, [name]: e.value });
-		} else {
-			const d = e.map((a: any) => a.value);
-			setData({ ...$data, [name]: d });
-		}
-		if (onChange) onChange(e);
-	}
-
-	// $effect(() => {
-	// 	if (hasError) renderId++;
-	// 	if (isSuccess) {
-	// 		alert(isSuccess);
-	// 		renderId++;
-	// 		alert('herr');
-	// 	}
-	// });
-</script>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<!-- {#key renderId} -->
-	<Select
-		{name}
-		{multiple}
-		{value}
-		{disabled}
-		onChange={handleChange}
-		{hasError}
-		minHeight={40}
-		hasSuccess={isSuccess}
-		{...otherProps}
-	/>
-	<!-- {/key} -->
-
-	{#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 { key, Label } from '../../index.js';
+	import type { FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+	import Select from '../select/Select.svelte';
+
+	let {
+		label = '',
+		required,
+		name = '',
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onChange,
+		...otherProps
+		// onchange,
+	}: FormSelectProps = $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]);
+	const isSuccess = $derived(!disabled && !hasError && $touched[name]);
+
+	let renderId = $state(0);
+
+	function handleChange(e: any) {
+		if (!e) return;
+		if (!multiple) {
+			setData({ ...$data, [name]: e.value });
+		} else {
+			const d = e.map((a: any) => a.value);
+			setData({ ...$data, [name]: d });
+		}
+		if (onChange) onChange(e);
+	}
+
+	// $effect(() => {
+	// 	if (hasError) renderId++;
+	// 	if (isSuccess) {
+	// 		alert(isSuccess);
+	// 		renderId++;
+	// 		alert('herr');
+	// 	}
+	// });
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<!-- {#key renderId} -->
+	<Select
+		{name}
+		{multiple}
+		{value}
+		{disabled}
+		onChange={handleChange}
+		{hasError}
+		minHeight={40}
+		hasSuccess={isSuccess}
+		{...otherProps}
+	/>
+	<!-- {/key} -->
+
+	{#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/FormTextarea/FormTextarea.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-	import { key, type FormTextareaProps } from '../../index.js';
-	import { getContext } from 'svelte';
-	import Label from '../label/Label.svelte';
-	import Textarea from '../textarea/Textarea.svelte';
-
-	let {
-		label = '',
-		required,
-		name,
-		readonly,
-		contextKey = null,
-		placeholder,
-		onchange,
-		...otherProps
-		// onchange,
-	}: FormTextareaProps = $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]);
-	const isTouched = $derived(!readonly && $touched[name]);
-
-	function handeleChange(e: Event) {
-		const value = (e.target as HTMLTextAreaElement).value;
-		// console.log({ value });
-		setData({ ...$data, [name]: value });
-		if (onchange) onchange(e as any);
-	}
-
-	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>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<Textarea
-		color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
-		{readonly}
-		value={getNestedValue($data, name) || ''}
-		onchange={handeleChange}
-		class="flex w-full"
-		{...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>
-
-<!-- <style>
-	.v-error-container:hover .v-error-message {
-		display: block !important;
-	}
-</style> -->
+<script lang="ts">
+	import { key, type FormTextareaProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Label from '../label/Label.svelte';
+	import Textarea from '../textarea/Textarea.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		readonly,
+		contextKey = null,
+		placeholder,
+		onchange,
+		...otherProps
+		// onchange,
+	}: FormTextareaProps = $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]);
+	const isTouched = $derived(!readonly && $touched[name]);
+
+	function handeleChange(e: Event) {
+		const value = (e.target as HTMLTextAreaElement).value;
+		// console.log({ value });
+		setData({ ...$data, [name]: value });
+		if (onchange) onchange(e as any);
+	}
+
+	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>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Textarea
+		color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
+		{readonly}
+		value={getNestedValue($data, name) || ''}
+		onchange={handeleChange}
+		class="flex w-full"
+		{...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>
+
+<!-- <style>
+	.v-error-container:hover .v-error-message {
+		display: block !important;
+	}
+</style> -->

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,82 +1,82 @@
-<script lang="ts">
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import clsx from 'clsx';
-	import { checkbox } from './index.js';
-	import { Label, type CheckboxItem, type CheckboxProps } from '../../index.js';
-
-	let {
-		children,
-		color = 'primary',
-		custom,
-		inline,
-		tinted,
-		rounded,
-		group = $bindable([]),
-		choices = [],
-		checked = $bindable(false),
-		indeterminate,
-		classes,
-		class: className,
-		divClass,
-		disabled = false,
-		value,
-		labelProps = {},
-		...restProps
-	}: CheckboxProps = $props();
-
-	warnThemeDeprecation('Checkbox', { divClass }, { divClass: 'div' });
-	const styling = $derived(classes ?? { div: divClass });
-
-	const theme = getTheme('checkbox');
-
-	const disabledValue = $derived(disabled === null ? undefined : disabled);
-	const { base, div: divStyle } = $derived(
-		checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue })
-	);
-
-	// Separate label rendering logic
-	function renderLabel(choice?: CheckboxItem) {
-		if (!choice) return '';
-
-		if (children) {
-			return children(choice);
-		}
-		return choice.label || '';
-	}
-</script>
-
-{#if choices.length > 0}
-	{#each choices as choice, i}
-		<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-			<Label show={true} {...labelProps}>
-				<input
-					type="checkbox"
-					value={choice.value}
-					checked={choice.checked ?? false}
-					{disabled}
-					bind:group
-					{...restProps}
-					class={base({ class: clsx(theme?.base, className) })}
-				/>
-				{renderLabel(choice)}
-			</Label>
-		</div>
-	{/each}
-{:else}
-	<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-		<Label show={true} {...labelProps}>
-			<input
-				type="checkbox"
-				{value}
-				bind:checked
-				{indeterminate}
-				{disabled}
-				{...restProps}
-				class={base({ class: clsx(theme?.base, className) })}
-			/>
-			{#if children}
-				{@render children({ value, checked, disabled })}
-			{/if}
-		</Label>
-	</div>
-{/if}
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx from 'clsx';
+	import { checkbox } from './index.js';
+	import { Label, type CheckboxItem, type CheckboxProps } from '../../index.js';
+
+	let {
+		children,
+		color = 'primary',
+		custom,
+		inline,
+		tinted,
+		rounded,
+		group = $bindable([]),
+		choices = [],
+		checked = $bindable(false),
+		indeterminate,
+		classes,
+		class: className,
+		divClass,
+		disabled = false,
+		value,
+		labelProps = {},
+		...restProps
+	}: CheckboxProps = $props();
+
+	warnThemeDeprecation('Checkbox', { divClass }, { divClass: 'div' });
+	const styling = $derived(classes ?? { div: divClass });
+
+	const theme = getTheme('checkbox');
+
+	const disabledValue = $derived(disabled === null ? undefined : disabled);
+	const { base, div: divStyle } = $derived(
+		checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue })
+	);
+
+	// Separate label rendering logic
+	function renderLabel(choice?: CheckboxItem) {
+		if (!choice) return '';
+
+		if (children) {
+			return children(choice);
+		}
+		return choice.label || '';
+	}
+</script>
+
+{#if choices.length > 0}
+	{#each choices as choice, i}
+		<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+			<Label show={true} {...labelProps}>
+				<input
+					type="checkbox"
+					value={choice.value}
+					checked={choice.checked ?? false}
+					{disabled}
+					bind:group
+					{...restProps}
+					class={base({ class: clsx(theme?.base, className) })}
+				/>
+				{renderLabel(choice)}
+			</Label>
+		</div>
+	{/each}
+{:else}
+	<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+		<Label show={true} {...labelProps}>
+			<input
+				type="checkbox"
+				{value}
+				bind:checked
+				{indeterminate}
+				{disabled}
+				{...restProps}
+				class={base({ class: clsx(theme?.base, className) })}
+			/>
+			{#if children}
+				{@render children({ value, checked, disabled })}
+			{/if}
+		</Label>
+	</div>
+{/if}