Added array proxy example

Author: ciscoheat

src/routes/(v2)/v2/array-proxy/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/array-proxy/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import ArrayField from './ArrayField.svelte';
+	import { superForm } from '$lib/index.js';
+	import { zod } from '$lib/adapters/zod.js';
+	import { schema } from './schema.js';
+
+	export let data;
+
+	const form = superForm(data.form, {
+		validators: zod(schema)
+	});
+</script>
+
+<ArrayField {form} field="tags" newValue="new" />

src/routes/(v2)/v2/array-proxy/ArrayField.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+	type F = FormPathArrays<T>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, F extends FormPathArrays<T>">
+	import type { Writable } from 'svelte/store';
+	import { arrayProxy } from '$lib/index.js';
+	import type { SuperForm, FormPathArrays, FormPathType } from '$lib/index.js';
+
+	export let form: SuperForm<T>;
+	export let field: F;
+	export let newValue: FormPathType<T, F> extends (infer S)[] ? S : never;
+
+	const { values: v, errors, valueErrors } = arrayProxy(form, field);
+	const values = v as Writable<(typeof newValue)[]>;
+</script>
+
+<div>
+	<ol>
+		<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+		{#each $values as _, i}
+			<li>
+				<button type="button" title="Delete" on:click={() => ($values = $values.toSpliced(i, 1))}>
+					✖️
+				</button>
+				{#if $valueErrors && $valueErrors[i]}
+					<div role="alert">{$valueErrors[i]}</div>
+				{/if}
+			</li>
+		{/each}
+		<button type="button" on:click={() => ($values = [...$values, newValue])}> Add </button>
+	</ol>
+	{#if $errors}
+		<div role="alert">{$errors}</div>
+	{/if}
+</div>

src/routes/(v2)/v2/array-proxy/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	tags: z.array(z.string().min(1)).nonempty()
+});