@functionalcms/svelte-components 5.0.0-beta1 → 5.0.0-beta3

package/dist/components/form/SmartForm.svelte

@@ -1,251 +1,251 @@
-<script lang="ts">
-	import {
-		type Field,
-		type SelectField,
-		type CollectionField,
-		type TextareaField,
-		type FieldType,
-		type InputField,
-		type FilePickerField,
-		type PhoneInputField,
-		type TimePickerField,
-		SubmitResult,
-		type ButtonConfig
-	} from './form.js';
-	import {
-		Button,
-		Label,
-		Fileupload,
-		Select,
-		MultiSelect,
-		Textarea,
-		Toggle,
-		Input,
-		FloatingLabelInput,
-		Timepicker,
-		PhoneInput
-	} from 'flowbite-svelte';
-	import { fade } from 'svelte/transition';
-
-	interface Props {
-		action: string;
-		css?: string;
-		successMessage?: string;
-		fields?: Array<Field>;
-		onMessageSubmitted?: (result: SubmitResult) => void;
-		buttons: Array<ButtonConfig>;
-	}
-
-	let {
-		action,
-		fields = [],
-		css = '',
-		successMessage,
-		onMessageSubmitted,
-		buttons = [
-			{
-				label: 'Submit',
-				type: 'submit',
-				action: undefined
-			}
-		]
-	}: Props = $props();
-
-	let form: HTMLFormElement;
-	let showMessage = $state(false);
-	let isSendingMessage = $state(false);
-	let loading = $state(false);
-
-	const handleSubmit = async (event: Event) => {
-		event.preventDefault();
-		console.log('Submitting form to:', action);
-		loading = true;
-		try {
-			if (!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);
-			}
-		} catch (error) {
-			console.error('Error submitting form:', error);
-		} finally {
-			isSendingMessage = false;
-		}
-		loading = false;
-	};
-</script>
-
-{#snippet renderInput(field: InputField)}
-	{#if field.isFloat}
-		<FloatingLabelInput
-			id={field.id}
-			name={field.id}
-			required={field.required}
-			readonly={field.readonly}
-			disabled={field.disabled}
-			class={field.class}
-			size={field.size == 'sm' ? 'small' : 'default'}
-			type={field.type}
-			variant={field.floatVariant}
-			placeholder={field.placeholder}
-		>
-			{field.label}
-		</FloatingLabelInput>
-	{:else}
-		<Label for={field.id} class={field.labelClass}>{field.label}</Label>
-		<Input
-			id={field.id}
-			name={field.id}
-			required={field.required}
-			readonly={field.readonly}
-			disabled={field.disabled}
-			class={field.class}
-			size={field.size}
-			type={field.type}
-			placeholder={field.placeholder}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet renderTextarea(field: TextareaField)}
-	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
-	<Textarea
-		id={field.id}
-		name={field.id}
-		required={field.required}
-		readonly={field.readonly}
-		disabled={field.disabled}
-		class={field.class}
-		label={field.label}
-		rows={field.rows}
-		cols={field.cols}
-		placeholder={field.placeholder}
-	/>
-{/snippet}
-
-{#snippet renderSelect(field: SelectField)}
-	<Label class={field.labelClass}
-		>{field.label}
-		{#if field.type === 'single'}
-			<Select
-				id={field.id}
-				name={field.id}
-				required={field.required}
-				readonly={field.readonly}
-				disabled={field.disabled}
-				class={field.class}
-				items={field.options}
-				bind:value={field.value}
-			/>
-		{:else}
-			<MultiSelect class={field.class} items={field.options} bind:value={field.value} />
-		{/if}
-	</Label>
-{/snippet}
-
-{#snippet renderCollection(field: CollectionField)}
-	{#if field.type === 'checkbox'}{:else if field.type === 'radio'}{:else if field.type === 'toggle'}
-		<Toggle
-			id={field.id}
-			name={field.id}
-			required={field.required}
-			readonly={field.readonly}
-			disabled={field.disabled}
-			class={field.class}
-			checked={field.checked}
-		>
-			{field.label}
-		</Toggle>
-	{/if}
-{/snippet}
-
-{#snippet renderFile(field: FilePickerField)}
-	<Label class={field.labelClass}>{field.label}</Label>
-	<Fileupload
-		id={field.id}
-		name={field.id}
-		required={field.required}
-		readonly={field.readonly}
-		disabled={field.disabled}
-		class={field.class}
-	/>
-{/snippet}
-
-{#snippet renderPhoneInput(field: PhoneInputField)}
-	<PhoneInput
-		id={field.id}
-		name={field.id}
-		required={field.required}
-		readonly={field.readonly}
-		disabled={field.disabled}
-		class={field.class}
-		size={field.size}
-		placeholder={field.placeholder}
-	/>
-{/snippet}
-
-{#snippet renderTimePicker(field: TimePickerField)}
-	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
-	<Timepicker id={field.id} required={field.required} disabled={field.disabled} />
-{/snippet}
-
-{#if showMessage}
-	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
-		{successMessage}
-	</div>
-{:else}
-	<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)}
-				{/if}
-			{/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}
-				{/each}
-			</div>
-		</fieldset>
-	</form>
-{/if}
+<script lang="ts">
+	import {
+		type Field,
+		type SelectField,
+		type CollectionField,
+		type TextareaField,
+		type FieldType,
+		type InputField,
+		type FilePickerField,
+		type PhoneInputField,
+		type TimePickerField,
+		SubmitResult,
+		type ButtonConfig
+	} from './form.js';
+	import {
+		Button,
+		Label,
+		Fileupload,
+		Select,
+		MultiSelect,
+		Textarea,
+		Toggle,
+		Input,
+		FloatingLabelInput,
+		Timepicker,
+		PhoneInput
+	} from 'flowbite-svelte';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		action: string;
+		css?: string;
+		successMessage?: string;
+		fields?: Array<Field>;
+		onMessageSubmitted?: (result: SubmitResult) => void;
+		buttons: Array<ButtonConfig>;
+	}
+
+	let {
+		action,
+		fields = [],
+		css = '',
+		successMessage,
+		onMessageSubmitted,
+		buttons = [
+			{
+				label: 'Submit',
+				type: 'submit',
+				action: undefined
+			}
+		]
+	}: Props = $props();
+
+	let form: HTMLFormElement;
+	let showMessage = $state(false);
+	let isSendingMessage = $state(false);
+	let loading = $state(false);
+
+	const handleSubmit = async (event: Event) => {
+		event.preventDefault();
+		console.log('Submitting form to:', action);
+		loading = true;
+		try {
+			if (!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);
+			}
+		} catch (error) {
+			console.error('Error submitting form:', error);
+		} finally {
+			isSendingMessage = false;
+		}
+		loading = false;
+	};
+</script>
+
+{#snippet renderInput(field: InputField)}
+	{#if field.isFloat}
+		<FloatingLabelInput
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			size={field.size == 'sm' ? 'small' : 'default'}
+			type={field.type}
+			variant={field.floatVariant}
+			placeholder={field.placeholder}
+		>
+			{field.label}
+		</FloatingLabelInput>
+	{:else}
+		<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+		<Input
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			size={field.size}
+			type={field.type}
+			placeholder={field.placeholder}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet renderTextarea(field: TextareaField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Textarea
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+		label={field.label}
+		rows={field.rows}
+		cols={field.cols}
+		placeholder={field.placeholder}
+	/>
+{/snippet}
+
+{#snippet renderSelect(field: SelectField)}
+	<Label class={field.labelClass}
+		>{field.label}
+		{#if field.type === 'single'}
+			<Select
+				id={field.id}
+				name={field.id}
+				required={field.required}
+				readonly={field.readonly}
+				disabled={field.disabled}
+				class={field.class}
+				items={field.options}
+				bind:value={field.value}
+			/>
+		{:else}
+			<MultiSelect class={field.class} items={field.options} bind:value={field.value} />
+		{/if}
+	</Label>
+{/snippet}
+
+{#snippet renderCollection(field: CollectionField)}
+	{#if field.type === 'checkbox'}{:else if field.type === 'radio'}{:else if field.type === 'toggle'}
+		<Toggle
+			id={field.id}
+			name={field.id}
+			required={field.required}
+			readonly={field.readonly}
+			disabled={field.disabled}
+			class={field.class}
+			checked={field.checked}
+		>
+			{field.label}
+		</Toggle>
+	{/if}
+{/snippet}
+
+{#snippet renderFile(field: FilePickerField)}
+	<Label class={field.labelClass}>{field.label}</Label>
+	<Fileupload
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+	/>
+{/snippet}
+
+{#snippet renderPhoneInput(field: PhoneInputField)}
+	<PhoneInput
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+		size={field.size}
+		placeholder={field.placeholder}
+	/>
+{/snippet}
+
+{#snippet renderTimePicker(field: TimePickerField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Timepicker id={field.id} required={field.required} disabled={field.disabled} />
+{/snippet}
+
+{#if showMessage}
+	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
+		{successMessage}
+	</div>
+{:else}
+	<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)}
+				{/if}
+			{/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}
+				{/each}
+			</div>
+		</fieldset>
+	</form>
+{/if}

package/dist/components/integrations/EasyTools.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-	import { browser } from "$app/environment";
-
-	interface Props {
-		userId: number;
-        title?: string;
-	}
-
-	let { userId, title = "store" }: Props = $props();
-
-	if (browser) {
-        const handle = `ec_tenant_${userId}`;
-		window.addEventListener('message', (e) => {
-			!!e.data.frameHeight &&
-			 	e.data.pricingUuid ===  handle &&
-				(document.getElementById(handle).style.height = e.data.frameHeight);
-		});
-	}
-</script>
-	
-<iframe
-	id="ec_tenant_{userId}"
-    title={title}
-	width="100%"
-	src="https://app.easy.tools/ec/{userId}"
-	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-	allowfullscreen
-	frameborder="0"
-	scrolling="no"
-></iframe>
+<script lang="ts">
+	import { browser } from "$app/environment";
+
+	interface Props {
+		userId: number;
+        title?: string;
+	}
+
+	let { userId, title = "store" }: Props = $props();
+
+	if (browser) {
+        const handle = `ec_tenant_${userId}`;
+		window.addEventListener('message', (e) => {
+			!!e.data.frameHeight &&
+			 	e.data.pricingUuid ===  handle &&
+				(document.getElementById(handle).style.height = e.data.frameHeight);
+		});
+	}
+</script>
+	
+<iframe
+	id="ec_tenant_{userId}"
+    title={title}
+	width="100%"
+	src="https://app.easy.tools/ec/{userId}"
+	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+	allowfullscreen
+	frameborder="0"
+	scrolling="no"
+></iframe>