From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/lib/forms/NamespaceForm.svelte | 39 ++++++++++++++++-------------
 1 file changed, 21 insertions(+), 18 deletions(-)

(limited to 'frontend/src/lib/forms/NamespaceForm.svelte')

diff --git a/frontend/src/lib/forms/NamespaceForm.svelte b/frontend/src/lib/forms/NamespaceForm.svelte
index c05b6d8..3631d84 100644
--- a/frontend/src/lib/forms/NamespaceForm.svelte
+++ b/frontend/src/lib/forms/NamespaceForm.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
-	import { type NamespaceInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Namespace } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddNamespaceInput, Namespace } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { namespacePending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: NamespaceInput }>();
+	let { initial, submit, children }: FormProps<Namespace, AddNamespaceInput> = $props();
 
-	export let namespace: OmitIdentifiers<Namespace>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && namespacePending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: namespace.name, sortName: namespace.sortName });
+	function onsubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		submit({ ...input });
 	}
 </script>
 
-<form on:submit|preventDefault={submit}>
+<form {onsubmit}>
 	<div class="grid-labels">
-		<Labelled label="Name" let:id>
-			<!-- svelte-ignore a11y-autofocus -->
-			<input required autofocus {id} bind:value={namespace.name} />
-		</Labelled>
-		<Labelled label="Sort name" let:id>
-			<input {id} bind:value={namespace.sortName} />
-		</Labelled>
+		<label class="self-center" for="name">Name</label>
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus required id="name" bind:value={input.name} />
+		<label class="self-center" for="sort-name">Sort name</label>
+		<input id="name" bind:value={input.sortName} />
+	</div>
+	<div class="flex gap-4">
+		{@render children?.()}
+		<div class="grow"></div>
+		<SubmitButton {pending} />
 	</div>
-	<slot />
 </form>
-- 
cgit v1.2.3-2-gb3c3