@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/forms/FormFileUpload/FormFileUplad.svelte

@@ -1,134 +1,134 @@
-<script lang="ts" module>
-	import { registerPlugin, supported } from 'svelte-filepond';
-	import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
-	import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
-	import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
-	registerPlugin(
-		FilePondPluginImageExifOrientation,
-		FilePondPluginImagePreview,
-		FilePondPluginFileValidateType
-	);
-</script>
-
-<script lang="ts">
-	import { key, Label } from '../../index.js';
-	import type { FormFileUploadProps } from '../../types/index.js';
-	import { nanoid } from 'nanoid';
-	import { getContext } from 'svelte';
-	import FilePond from 'svelte-filepond';
-
-	let {
-		title = 'Click Browse or drop the file to upload',
-		subTitle = '',
-		url = '',
-		name = 'file',
-		allowMultiple = false,
-		acceptedFileTypes = [
-			'image/png',
-			'image/jpeg',
-			'application/pdf',
-			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-		],
-		files = [],
-		label = '',
-		required = false,
-		showError = false,
-		imageOnly = false,
-		contextKey = null,
-		onChange
-	}: FormFileUploadProps = $props();
-
-	// State
-	let pond = $state<any>();
-
-	// Context
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	// Derived state
-	let id = nanoid();
-	let hasError = $derived($touched[name] && $errors[name]?.length);
-	let error = $derived($errors[name]?.join(', '));
-
-	// Constants
-	const uploadServerConfig = {};
-
-	// Effects
-	$effect(() => {
-		if (imageOnly && acceptedFileTypes?.length === 3) {
-			acceptedFileTypes = ['image/png', 'image/jpeg'];
-		}
-	});
-
-	function checkFiles(files: any) {
-		if (files.length > 1) {
-			const newFiles = files.map((x: any) => x.file);
-			setData({ ...$data, [name]: newFiles });
-			onChange?.({ name, value: newFiles });
-		} else if (files.length === 1) {
-			const { file } = files[0];
-			setData({ ...$data, [name]: file });
-			onChange?.({ name, value: file });
-		} else if (files.length == 0) {
-			onChange?.(null);
-		}
-	}
-
-	function customFileTypeDetection(source: File, type: string) {
-		return new Promise((resolve, reject) => {
-			const fileName = source.name;
-			if (fileName.endsWith('.frx')) {
-				resolve('.frx');
-			} else {
-				resolve(type);
-			}
-		});
-	}
-</script>
-
-<div class="relative my-2 flex flex-grow flex-col">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<FilePond
-		{name}
-		required={true}
-		allowReplace={true}
-		instantUpload={false}
-		server={uploadServerConfig}
-		{allowMultiple}
-		allowRevert={true}
-		allowImagePreview={true}
-		allowImageResize={true}
-		bind:this={pond}
-		onupdatefiles={checkFiles}
-		{files}
-		{acceptedFileTypes}
-		fileValidateTypeDetectType={customFileTypeDetection}
-		credits={false}
-	/>
-
-	{#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>
-
-<style>
-	@import 'filepond/dist/filepond.css';
-	@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
-</style>
+<script lang="ts" module>
+	import { registerPlugin, supported } from 'svelte-filepond';
+	import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
+	import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+	import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+	registerPlugin(
+		FilePondPluginImageExifOrientation,
+		FilePondPluginImagePreview,
+		FilePondPluginFileValidateType
+	);
+</script>
+
+<script lang="ts">
+	import { key, Label } from '../../index.js';
+	import type { FormFileUploadProps } from '../../types/index.js';
+	import { nanoid } from 'nanoid';
+	import { getContext } from 'svelte';
+	import FilePond from 'svelte-filepond';
+
+	let {
+		title = 'Click Browse or drop the file to upload',
+		subTitle = '',
+		url = '',
+		name = 'file',
+		allowMultiple = false,
+		acceptedFileTypes = [
+			'image/png',
+			'image/jpeg',
+			'application/pdf',
+			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+		],
+		files = [],
+		label = '',
+		required = false,
+		showError = false,
+		imageOnly = false,
+		contextKey = null,
+		onChange
+	}: FormFileUploadProps = $props();
+
+	// State
+	let pond = $state<any>();
+
+	// Context
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	// Derived state
+	let id = nanoid();
+	let hasError = $derived($touched[name] && $errors[name]?.length);
+	let error = $derived($errors[name]?.join(', '));
+
+	// Constants
+	const uploadServerConfig = {};
+
+	// Effects
+	$effect(() => {
+		if (imageOnly && acceptedFileTypes?.length === 3) {
+			acceptedFileTypes = ['image/png', 'image/jpeg'];
+		}
+	});
+
+	function checkFiles(files: any) {
+		if (files.length > 1) {
+			const newFiles = files.map((x: any) => x.file);
+			setData({ ...$data, [name]: newFiles });
+			onChange?.({ name, value: newFiles });
+		} else if (files.length === 1) {
+			const { file } = files[0];
+			setData({ ...$data, [name]: file });
+			onChange?.({ name, value: file });
+		} else if (files.length == 0) {
+			onChange?.(null);
+		}
+	}
+
+	function customFileTypeDetection(source: File, type: string) {
+		return new Promise((resolve, reject) => {
+			const fileName = source.name;
+			if (fileName.endsWith('.frx')) {
+				resolve('.frx');
+			} else {
+				resolve(type);
+			}
+		});
+	}
+</script>
+
+<div class="relative my-2 flex flex-grow flex-col">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<FilePond
+		{name}
+		required={true}
+		allowReplace={true}
+		instantUpload={false}
+		server={uploadServerConfig}
+		{allowMultiple}
+		allowRevert={true}
+		allowImagePreview={true}
+		allowImageResize={true}
+		bind:this={pond}
+		onupdatefiles={checkFiles}
+		{files}
+		{acceptedFileTypes}
+		fileValidateTypeDetectType={customFileTypeDetection}
+		credits={false}
+	/>
+
+	{#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>
+
+<style>
+	@import 'filepond/dist/filepond.css';
+	@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
+</style>

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>

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>