@functionalcms/svelte-components 5.4.4 → 5.5.1

package/dist/components/form/SmartForm.svelte

@@ -1,269 +1,268 @@
-<script lang="ts">
-	import {
-		type Field,
-		type SelectField,
-		type CollectionField,
-		type TextareaField,
-		type InputField,
-		type FilePickerField,
-		type PhoneInputField,
-		type TimePickerField,
-		type ButtonConfig,
-		type HiddenField,
-		type DatePickerField,
-		SubmitResult,
-	} from './form.js';
-	import {
-		Button,
-		Label,
-		Fileupload,
-		Select,
-		MultiSelect,
-		Textarea,
-		Toggle,
-		Input,
-		FloatingLabelInput,
-		Timepicker,
-		PhoneInput,
-		Datepicker
-	} from 'flowbite-svelte';
-	import { fade } from 'svelte/transition';
-
-	interface Props {
-		action: string;
-		class?: string;
-		successMessage?: string;
-		fields?: Array<Field>;
-		onMessageSubmitted?: (result: SubmitResult) => void;
-		buttons: Array<ButtonConfig>;
-	}
-
-	let {
-		action,
-		fields = [],
-		class: 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();
-		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}
-			bind:value={field.value}
-		>
-			{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}
-			bind:value={field.value}
-		/>
-	{/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}
-		rows={field.rows}
-		cols={field.cols}
-		placeholder={field.placeholder}
-		bind:value={field.value}
-	/>
-{/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}
-		multiple={field.multiple}
-	/>
-{/snippet}
-
-{#snippet renderPhoneInput(field: PhoneInputField)}
-	<Label class={field.labelClass}>{field.label}</Label>
-	<PhoneInput
-		id={field.id}
-		name={field.id}
-		required={field.required}
-		readonly={field.readonly}
-		disabled={field.disabled}
-		class={field.class}
-		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}
-
-{#snippet renderDatePicker(field: DatePickerField)}
-	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
-	<Datepicker required={field.required} bind:value={field.value} />
-	<input type="hidden" name={field.id} bind:value={field.value} />
-{/snippet}
-
-{#snippet renderHidden(field: HiddenField)}
-	<input type="hidden" id={field.id} name={field.id} bind:value={field.value} />
-{/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)}
-				{:else if field.typeOfField === 'hidden'}
-					{@render renderHidden(field)}
-				{:else if field.typeOfField === 'date'}
-					{@render renderDatePicker(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 InputField,
+		type FilePickerField,
+		type PhoneInputField,
+		type TimePickerField,
+		type ButtonConfig,
+		type HiddenField,
+		type DatePickerField,
+		SubmitResult,
+	} from './form.js';
+	import {
+		Button,
+		Label,
+		Fileupload,
+		Select,
+		MultiSelect,
+		Textarea,
+		Toggle,
+		Input,
+		FloatingLabelInput,
+		Timepicker,
+		PhoneInput,
+		Datepicker
+	} from 'flowbite-svelte';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		action: string;
+		class?: string;
+		successMessage?: string;
+		fields?: Array<Field>;
+		onMessageSubmitted?: (result: SubmitResult) => void;
+		buttons: Array<ButtonConfig>;
+	}
+
+	let {
+		action,
+		fields = [],
+		class: 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();
+		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}
+			bind:value={field.value}
+		>
+			{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}
+			bind:value={field.value}
+		/>
+	{/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}
+		rows={field.rows}
+		cols={field.cols}
+		placeholder={field.placeholder}
+		bind:value={field.value}
+	/>
+{/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}
+				disabled={field.disabled}
+				class={field.class}
+				items={field.options.map(option => ({ name: option.label, value: option.value }))}
+				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}
+		multiple={field.multiple}
+	/>
+{/snippet}
+
+{#snippet renderPhoneInput(field: PhoneInputField)}
+	<Label class={field.labelClass}>{field.label}</Label>
+	<PhoneInput
+		id={field.id}
+		name={field.id}
+		required={field.required}
+		readonly={field.readonly}
+		disabled={field.disabled}
+		class={field.class}
+		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}
+
+{#snippet renderDatePicker(field: DatePickerField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Datepicker required={field.required} bind:value={field.value} />
+	<input type="hidden" name={field.id} bind:value={field.value} />
+{/snippet}
+
+{#snippet renderHidden(field: HiddenField)}
+	<input type="hidden" id={field.id} name={field.id} bind:value={field.value} />
+{/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)}
+				{:else if field.typeOfField === 'hidden'}
+					{@render renderHidden(field)}
+				{:else if field.typeOfField === 'date'}
+					{@render renderDatePicker(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/head/Font.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	interface Props {
-		fonts: Array<{ name: string; values: string }>;
-	}
-
-	let { fonts = [] }: Partial<Props> = $props();
-
-	const fontQuery = $derived(() =>
-		fonts.map((font) => `family=${font.name}:${font.values}`).join('&')
-	);
-</script>
-
-<svelte:head>
-	<link rel="preconnect" href="https://fonts.googleapis.com" />
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
-	<link
-		rel="stylesheet"
-		href={`https://fonts.googleapis.com/css2?${fontQuery}&display=swap`}
-	/>
-</svelte:head>
+<script lang="ts">
+	interface Props {
+		fonts: Array<{ name: string; values: string }>;
+	}
+
+	let { fonts = [] }: Partial<Props> = $props();
+
+	const fontQuery = $derived(() =>
+		fonts.map((font) => `family=${font.name}:${font.values}`).join('&')
+	);
+</script>
+
+<svelte:head>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+	<link
+		rel="stylesheet"
+		href={`https://fonts.googleapis.com/css2?${fontQuery}&display=swap`}
+	/>
+</svelte:head>

package/dist/components/head/Meta.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	interface MetaProps {
-		title: string;
-		description: string;
-		keywords: string;
-		robots: string;
-		charset: string;
-		viewport: string;
-	}
-
-	let {
-		title = '',
-		description = '',
-		keywords = '',
-		robots = 'index, follow',
-		charset = 'UTF-8',
-		viewport = 'width=device-width, initial-scale=1.0'
-	}: Partial<MetaProps> = $props();
-</script>
-
-<svelte:head>
-	<title>{title}</title>
-	<meta name="description" content={description} />
-	<meta name="keywords" content={keywords} />
-	<meta name="robots" content={robots} />
-	<meta name="viewport" content={viewport} />
-	<meta {charset} />
-</svelte:head>
+<script lang="ts">
+	interface MetaProps {
+		title: string;
+		description: string;
+		keywords: string;
+		robots: string;
+		charset: string;
+		viewport: string;
+	}
+
+	let {
+		title = '',
+		description = '',
+		keywords = '',
+		robots = 'index, follow',
+		charset = 'UTF-8',
+		viewport = 'width=device-width, initial-scale=1.0'
+	}: Partial<MetaProps> = $props();
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<meta name="robots" content={robots} />
+	<meta name="viewport" content={viewport} />
+	<meta {charset} />
+</svelte:head>