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/ArtistForm.svelte | 34 ++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 15 deletions(-)

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

diff --git a/frontend/src/lib/forms/ArtistForm.svelte b/frontend/src/lib/forms/ArtistForm.svelte
index 7df5e8b..663c3ae 100644
--- a/frontend/src/lib/forms/ArtistForm.svelte
+++ b/frontend/src/lib/forms/ArtistForm.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { type ArtistInput } from '$gql/Mutations';
-	import { type OmitIdentifiers } from '$gql/Utils';
-	import { type Artist } from '$gql/graphql';
-	import Labelled from '$lib/components/Labelled.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import type { AddArtistInput, Artist } from '$gql/graphql';
+	import SubmitButton from '$lib/components/SubmitButton.svelte';
+	import { itemPending, type FormProps } from '$lib/Form';
 
-	const dispatch = createEventDispatcher<{ submit: ArtistInput }>();
+	let { initial, submit, children }: FormProps<Artist, AddArtistInput> = $props();
 
-	export let artist: OmitIdentifiers<Artist>;
+	let input = $state(initial);
+	let pending = $derived(input.name.length > 0 && itemPending(initial, input));
 
-	function submit() {
-		dispatch('submit', { name: artist.name });
+	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 autofocus required {id} bind:value={artist.name} />
-		</Labelled>
+		<label class="self-center" for="name">Name</label>
+		<!-- svelte-ignore a11y_autofocus -->
+		<input autofocus required id="name" bind:value={input.name} />
+	</div>
+	<div class="flex gap-4">
+		{@render children?.()}
+		<div class="grow"></div>
+		<SubmitButton {pending} />
 	</div>
-	<slot />
 </form>
-- 
cgit v1.2.3-2-gb3c3