From 1d22ed6a7e5056263552739fb0ad87ae3bd47fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20S=C3=B6derlund?= <ciscoheat@gmail.com>
Date: Wed, 21 Feb 2024 16:21:54 +0100
Subject: [PATCH] Added test for onChange target

---
 src/routes/(v2)/v2/Navigation.svelte          |  3 +-
 .../(v2)/v2/onchange-target/+page.server.ts   | 23 ++++++++++
 .../(v2)/v2/onchange-target/+page.svelte      | 46 +++++++++++++++++++
 src/routes/(v2)/v2/onchange-target/schema.ts  |  5 ++
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/(v2)/v2/onchange-target/+page.server.ts
 create mode 100644 src/routes/(v2)/v2/onchange-target/+page.svelte
 create mode 100644 src/routes/(v2)/v2/onchange-target/schema.ts

diff --git a/src/routes/(v2)/v2/Navigation.svelte b/src/routes/(v2)/v2/Navigation.svelte
index d0674ca0..d89fe427 100644
--- a/src/routes/(v2)/v2/Navigation.svelte
+++ b/src/routes/(v2)/v2/Navigation.svelte
@@ -35,7 +35,8 @@
 		'validators-clear',
 		'submit-prog',
 		'modify-reset',
-		'index-errors'
+		'index-errors',
+		'onchange-target'
 	].sort();
 </script>
 
diff --git a/src/routes/(v2)/v2/onchange-target/+page.server.ts b/src/routes/(v2)/v2/onchange-target/+page.server.ts
new file mode 100644
index 00000000..39d07eeb
--- /dev/null
+++ b/src/routes/(v2)/v2/onchange-target/+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('POST', form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};
diff --git a/src/routes/(v2)/v2/onchange-target/+page.svelte b/src/routes/(v2)/v2/onchange-target/+page.svelte
new file mode 100644
index 00000000..4d3e069a
--- /dev/null
+++ b/src/routes/(v2)/v2/onchange-target/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+
+	export let data;
+
+	let changes = 0;
+
+	const { form, errors, enhance } = superForm(data.form, {
+		taintedMessage: null,
+		onChange(event) {
+			if (event.target) {
+				changes = changes + 1;
+			}
+		}
+	});
+</script>
+
+<div id="name">NAME:{$form.name}</div>
+
+<div id="changes">CHANGES:{changes}</div>
+
+<form method="POST" use:enhance>
+	Name: <div class="edit" contenteditable="true" bind:textContent={$form.name}></div>
+	{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+</form>
+
+<style lang="scss">
+	.edit {
+		display: inline-block;
+		min-width: 50%;
+		background-color: #ddd;
+		margin: 0.5rem;
+	}
+
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>
diff --git a/src/routes/(v2)/v2/onchange-target/schema.ts b/src/routes/(v2)/v2/onchange-target/schema.ts
new file mode 100644
index 00000000..fa492181
--- /dev/null
+++ b/src/routes/(v2)/v2/onchange-target/schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(1)
+});