Component example.

Author: ciscoheat

src/routes/(v1)/proxies/ProxyField.svelte

@@ -7,7 +7,7 @@
 	import type { FormPathLeaves } from '$lib/index.js';
 	import { dateProxy, formFieldProxy, type SuperForm } from '$lib/client/index.js';
 
-	export let form: SuperForm<T, unknown>;
+	export let form: SuperForm<T>;
 	export let field: FormPathLeaves<T>;
 	export let type:
 		| 'text'

src/routes/(v2)/v2/Navigation.svelte

@@ -4,6 +4,7 @@
 		'array-proxy',
 		'boolean-same-union',
 		'catchall',
+		'components',
 		'custom-tainted-dialog',
 		'defaults-fail',
 		'dynamic-validators',

src/routes/(v2)/v2/components/+page.server.ts

@@ -0,0 +1,35 @@
+import { superValidate, message } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { registerSchema, profileSchema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types.js';
+
+export const load = async () => {
+	// Server API:
+	const regForm = await superValidate(zod(registerSchema));
+	const profileForm = await superValidate(zod(profileSchema));
+
+	return { regForm, profileForm };
+};
+
+export const actions = {
+	register: async ({ request }) => {
+		const regForm = await superValidate(request, zod(registerSchema));
+
+		console.log('register', regForm);
+
+		if (!regForm.valid) return fail(400, { regForm });
+
+		return message(regForm, { text: 'Form "register" posted successfully!' });
+	},
+
+	edit: async ({ request }) => {
+		const profileForm = await superValidate(request, zod(profileSchema));
+
+		console.log('edit', profileForm);
+
+		if (!profileForm.valid) return fail(400, { profileForm });
+
+		return message(profileForm, { text: 'Form "profile" posted successfully!' });
+	}
+} satisfies Actions;

src/routes/(v2)/v2/components/+page.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Form from './Form.svelte';
+	import TextField from './TextField.svelte';
+
+	export let data;
+</script>
+
+<h3>Multiple componentized Forms</h3>
+<hr />
+
+<h4>Register Form</h4>
+
+<!-- Form with dataType 'form' -->
+<Form action="?/register" data={data.regForm} invalidateAll={false} let:form let:message>
+	{#if message}
+		<div
+			class="status"
+			class:error={message.status >= 400}
+			class:success={!message.status || message.status < 300}
+		>
+			{message.text}
+		</div>
+	{/if}
+
+	<TextField type="text" {form} field="name" label="Name"></TextField>
+	<TextField type="text" {form} field="email" label="E-Mail"></TextField>
+	<p>
+		<button type="submit">submit</button>
+	</p>
+</Form>
+
+<hr />
+
+<h4>Another Form</h4>
+
+<!-- Form with dataType 'json' -->
+<Form
+	action="?/edit"
+	data={data?.profileForm}
+	dataType="json"
+	invalidateAll={false}
+	let:form
+	let:message
+>
+	{#if message}
+		<div
+			class="status"
+			class:error={message.status >= 400}
+			class:success={!message.status || message.status < 300}
+		>
+			{message.text}
+		</div>
+	{/if}
+	<TextField type="text" {form} field="name" label="Name"></TextField>
+	<TextField type="number" {form} field="age" label="Age"></TextField>
+	<p>
+		<button type="submit">submit</button>
+	</p>
+</Form>
+
+<hr />
+<p>
+	<a target="_blank" href="https://Forms.rocks/components"
+		>Documentation about componentization here</a
+	>
+</p>
+
+<style>
+	.status {
+		color: white;
+		padding: 6px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+		margin-block: 0.75em;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	hr {
+		margin: 2rem 0;
+	}
+</style>

src/routes/(v2)/v2/components/Form.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+	type M = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, M">
+	import SuperDebug, { type SuperValidated } from '$lib/index.js';
+	import { superForm } from '$lib/index.js';
+
+	export let data: SuperValidated<T, M>;
+	export let dataType: 'form' | 'json' = 'form';
+	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
+
+	export const theForm = superForm(data, {
+		dataType,
+		invalidateAll,
+		onUpdated({ form }) {
+			if (form.valid) {
+				// Successful post! Do some more client-side stuff.
+			}
+		}
+	});
+
+	const { form, message, delayed, errors, allErrors, enhance } = theForm;
+</script>
+
+<form method="POST" use:enhance {...$$restProps}>
+	<slot
+		form={theForm}
+		message={$message}
+		errors={$errors}
+		allErrors={$allErrors}
+		delayed={$delayed}
+	/>
+</form>
+
+<SuperDebug data={$form}></SuperDebug>

src/routes/(v2)/v2/components/TextField.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import { formFieldProxy, type SuperForm, type FormPathLeaves } from '$lib/index.js';
+
+	let _class = '';
+	export { _class as class };
+
+	export let label = '';
+	export let field: FormPathLeaves<T>;
+	export let form: SuperForm<T>;
+
+	const { value, errors, constraints } = formFieldProxy(form, field);
+</script>
+
+{#if label}
+	<label class="label" for={field}>{label}</label>
+{/if}
+<div class="control">
+	<input
+		class={'input ' + _class}
+		name={field}
+		aria-invalid={$errors ? 'true' : undefined}
+		placeholder=""
+		bind:value={$value}
+		{...$constraints}
+		{...$$restProps}
+	/>
+</div>
+{#if $errors}
+	<p class="help is-danger">{$errors}</p>
+{/if}
+
+<style>
+	.is-danger {
+		color: red;
+	}
+
+	input {
+		background-color: #e7e7e7;
+	}
+
+	input:not(:placeholder-shown):invalid {
+		box-shadow: inset 0px 0px 3px 1px #f00;
+	}
+</style>

src/routes/(v2)/v2/components/schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const registerSchema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});
+
+export const profileSchema = z.object({
+	name: z.string().min(2),
+	age: z.number().gte(16).default(18)
+});