@functionalcms/svelte-components 4.19.5 → 4.19.6

package/dist/components/form/SmartForm.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { type Field, FieldType, Input } from './form.ts';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		action: string;
+		css?: string;
+		successMessage?: string;
+		submitButonText?: string;
+		fields?: Array<Field>;
+	}
+
+	let {
+		action,
+		fields = [],
+		css = '',
+		submitButonText = 'Submit',
+		successMessage = 'Your message has been delivered'
+	}: Props = $props();
+
+	let form: any;
+	let showMessage = $state(false);
+	let isSendingMessage = $state(false);
+
+	const submitContactForm = async (event: Event) => {
+		try {
+			if (isSendingMessage) {
+				return;
+			}
+			isSendingMessage = true;
+			event.preventDefault();
+			const formData = new FormData(form);
+			const response = await fetch(action, {
+				method: 'POST',
+				body: formData
+			});
+			showMessage = response.status === 200;
+			isSendingMessage = false;
+		} catch (error) {
+			console.error('Error submitting form:', error);
+		}
+	};
+</script>
+
+{#if showMessage}
+	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
+		{successMessage}
+	</div>
+{:else}
+	<form method="POST" bind:this={form} class={css}>
+		<fieldset>
+			{#each fields as field}
+				{#if field.type === FieldType.Input}
+					<Input
+						name={field.name}
+						id={field.name}
+						placeholder={field.placeholder}
+						type={field.subType}
+						isRequired={field.isRequired || false}
+					/>
+				{:else if field.type === FieldType.Textarea}
+					<Input
+						name={field.name}
+						id={field.name}
+						placeholder={field.placeholder}
+						isRequired={field.isRequired || false}
+					/>
+				{:else if field.type === FieldType.Radio}
+					<label>
+						<input type="radio" name={field.name} value={field.label} required={field.isRequired} />
+						{field.label}
+					</label>
+				{:else if field.type === FieldType.Checkbox}
+					<label>
+						<input type="checkbox" name={field.name} required={field.isRequired} />
+						{field.label}
+					</label>
+				{/if}
+			{/each}
+
+			<div class="buttons">
+				<button onclick={submitContactForm} class="btn btn-primary">{submitButonText}</button>
+			</div>
+		</fieldset>
+	</form>
+{/if}

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

@@ -0,0 +1,11 @@
+import { type Field } from './form.ts';
+interface Props {
+    action: string;
+    css?: string;
+    successMessage?: string;
+    submitButonText?: string;
+    fields?: Array<Field>;
+}
+declare const SmartForm: import("svelte").Component<Props, {}, "">;
+type SmartForm = ReturnType<typeof SmartForm>;
+export default SmartForm;

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { InputType, FieldType, LabelSize, type Field } from './components/form/f
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -46,6 +46,7 @@ export { InputType, FieldType, LabelSize } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as SmartForm } from './components/form/SmartForm.svelte';
 /*
  * Content
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.19.5",
+	"version": "4.19.6",
 	"watch": {
 		"build": {
 			"patterns": [

package/dist/components/form/Form.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import ChoiceInput from './ChoiceInput.svelte';
-	import type { Field } from './form.js';
-	import Input from './Input.svelte';
-	import Select from './Select.svelte';
-	import Switch from './Switch.svelte';
-
-	interface Props {
-		action: string;
-		css?: string;
-		successMessage?: string;
-		submitButonText?: string;
-		fields?: Array<Field>;
-	}
-
-	let {
-		action,
-		fields = [],
-		css = '',
-		submitButonText = 'Submit',
-		successMessage = 'Your message has been delivered'
-	}: Props = $props();
-
-	let form: any;
-
-	const showMessage = $state(false);
-
-	const submitContactForm = async (event: Event) => {
-		event.preventDefault();
-		const formData = new FormData(form);
-		const response = await fetch('/contact', {
-			method: 'POST',
-			body: formData
-		});
-		console.log('Form submitted', response);
-	};
-</script>
-
-<form method="POST" {action} class={css}>
-	<fieldset>
-		{#each fields as field}
-			<div>
-				<Input
-					name={field.name}
-					id={field.name}
-					label={field.name}
-					type={field.subType}
-					isRequired={field.isRequired}
-				/>
-			</div>
-		{/each}
-		<button onclick={submitContactForm}>{submitButonText}</button>
-	</fieldset>
-</form>

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

@@ -1,11 +0,0 @@
-import type { Field } from './form.js';
-interface Props {
-    action: string;
-    css?: string;
-    successMessage?: string;
-    submitButonText?: string;
-    fields?: Array<Field>;
-}
-declare const Form: import("svelte").Component<Props, {}, "">;
-type Form = ReturnType<typeof Form>;
-export default Form;