@functionalcms/svelte-components 5.24.1 → 5.24.2

package/dist/components/form/SmartForm.svelte

@@ -12,12 +12,8 @@
 		type HiddenField,
 		type DatePickerField,
 		SubmitResult,
-
 		type MarkdownEditorField,
-
 		type HtmlEditorField
-
-
 	} from './form.js';
 	import {
 		Button,
@@ -42,6 +38,7 @@
 		class?: string;
 		successMessage?: string;
 		fields?: Array<Field>;
+		errors?: Map<string, string>;
 		onMessageSubmitted?: (result: SubmitResult) => void;
 		buttons: Array<ButtonConfig>;
 	}
@@ -49,6 +46,7 @@
 	let {
 		action,
 		fields = [],
+		errors = new Map(),
 		class: css = '',
 		successMessage,
 		onMessageSubmitted,
@@ -63,8 +61,6 @@
 
 	let form: HTMLFormElement;
 	let showMessage = $state(false);
-	let isSendingMessage = $state(false);
-	let loading = $state(false);
 
 	const isValid = (event: Event) => {
 		debugger;
@@ -78,36 +74,16 @@
 		return allValid;
 	};
 
-	const handleSubmit = async (event: Event) => {
-		console.log('SmartForm submit processing');
-		event.preventDefault();
-		loading = true;
-		debugger;
-		try {
-			if (isValid(event) && !isSendingMessage) {
-				isSendingMessage = true;
-				const formData = new FormData(form);
-				const response = await fetch(action, {
-					method: 'POST',
-					body: formData
-				});
-				showMessage = response.status === 200;
-				onMessageSubmitted?.(showMessage ? SubmitResult.Success : SubmitResult.Error);
-				setTimeout(() => {
-					showMessage = false;
-				}, 3000);
-			}else {
-				console.warn('Form is invalid or already sending message');
-			}
-		} catch (error) {
-			console.error('Error submitting form:', error);
-		} finally {
-			isSendingMessage = false;
-		}
-		loading = false;
-	};
+	function hasErrors(field: any, errors: Map<string, string>) {
+		return errors.has(fields?.id) ? 'error' : '';
+	}
 </script>
 
+{#snippet showErrors(fields: InputField, errors: Map<string, string>)}
+	{#if errors.has(fields.id)}
+		<div>errors.get(fields.id)</div>
+	{/if}
+{/snippet}
 {#snippet renderInput(field: InputField)}
 	{#if field.isFloat}
 		<FloatingLabelInput
@@ -255,53 +231,44 @@
 	<form method="POST" {action} class={css} bind:this={form}>
 		<fieldset>
 			{#each fields as field}
-				{#if field.typeOfField === 'input'}
-					{@render renderInput(field)}
-				{:else if field.typeOfField === 'textarea'}
-					{@render renderTextarea(field)}
-				{:else if field.typeOfField === 'select'}
-					{@render renderSelect(field)}
-				{:else if field.typeOfField === 'collection'}
-					{@render renderCollection(field)}
-				{:else if field.typeOfField === 'file'}
-					{@render renderFile(field)}
-				{:else if field.typeOfField === 'phoneInput'}
-					{@render renderPhoneInput(field)}
-				{:else if field.typeOfField === 'timepicker'}
-					{@render renderTimePicker(field)}
-				{:else if field.typeOfField === 'hidden'}
-					{@render renderHidden(field)}
-				{:else if field.typeOfField === 'date'}
-					{@render renderDatePicker(field)}
-				{:else if field.typeOfField === 'markdown'}
-					{@render renderMdEditory(field)}
-				{:else if field.typeOfField === 'html'}
-					{@render renderHtmlEditory(field)}
-				{/if}
+				<div class={hasErrors(field, errors)}>
+					{#if field.typeOfField === 'input'}
+						{@render renderInput(field)}
+					{:else if field.typeOfField === 'textarea'}
+						{@render renderTextarea(field)}
+					{:else if field.typeOfField === 'select'}
+						{@render renderSelect(field)}
+					{:else if field.typeOfField === 'collection'}
+						{@render renderCollection(field)}
+					{:else if field.typeOfField === 'file'}
+						{@render renderFile(field)}
+					{:else if field.typeOfField === 'phoneInput'}
+						{@render renderPhoneInput(field)}
+					{:else if field.typeOfField === 'timepicker'}
+						{@render renderTimePicker(field)}
+					{:else if field.typeOfField === 'hidden'}
+						{@render renderHidden(field)}
+					{:else if field.typeOfField === 'date'}
+						{@render renderDatePicker(field)}
+					{:else if field.typeOfField === 'markdown'}
+						{@render renderMdEditory(field)}
+					{:else if field.typeOfField === 'html'}
+						{@render renderHtmlEditory(field)}
+					{/if}
+					{@render showErrors(field, errors)}
+				</div>
 			{/each}
 
 			<div class="buttons">
 				{#each buttons as button}
-					<!-- {#if button.type === 'submit'}
-						<Button
-							type="button"
-							class={button.class}
-							color={button.color}
-							onclick={handleSubmit}
-							{loading}
-						>
-							{button.label}
-						</Button>
-					{:else} -->
-						<Button
-							type={button.type}
-							class={button.class}
-							color={button.color}
-							onclick={button.action}
-						>
-							{button.label}
-						</Button>
-					<!-- {/if} -->
+					<Button
+						type={button.type}
+						class={button.class}
+						color={button.color}
+						onclick={button.action}
+					>
+						{button.label}
+					</Button>
 				{/each}
 			</div>
 		</fieldset>

package/dist/components/form/form.d.ts

@@ -128,4 +128,4 @@ export type ButtonConfig = {
     class?: string;
     action?: (event: Event) => Promise<void>;
 };
-export declare function convertResponseToFields(fields: Array<Field>, form: FormData): any;
+export declare function convertResponseToFields(fields: Array<Field>, request: any): Promise<any>;

package/dist/components/form/form.js

@@ -124,10 +124,11 @@ export function createEditorField(id, label, type, value) {
         typeOfField: type,
     };
 }
-export function convertResponseToFields(fields, form) {
+export async function convertResponseToFields(fields, request) {
+    const formData = await request.formData();
     let result = {};
     for (const field of fields) {
-        const value = form.get(field.id);
+        const value = formData.get(field.id);
         result[field.id] = value;
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.24.1",
+	"version": "5.24.2",
 	"license": "MIT",
 	"watch": {
 		"build": {