update report submitted window (#42)

src/lib/components/Input/Textarea.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let value: string | null = null;
-	export let label: string | null = null;
-	export let notice: string | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let readonly = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let rows = 2;
-
-	const dispatch = createEventDispatcher();
+	let {
+		id,
+		name,
+		value = $bindable(),
+		label,
+		notice,
+		required,
+		disabled,
+		readonly,
+		size = 'md',
+		rows = 2
+	}: {
+		id?: string;
+		name?: string;
+		value?: string;
+		label?: string;
+		notice?: string;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		rows?: number;
+	} = $props();
 </script>
 
 <div>
@@ -27,12 +36,11 @@
 		</label>
 	{/if}
 	<textarea
-		class="textarea w-full"
+		class="textarea textarea-bordered w-full"
 		class:textarea-xs={size === 'xs'}
 		class:textarea-sm={size === 'sm'}
 		class:textarea-md={size === 'md'}
 		class:textarea-lg={size === 'lg'}
-		class:textarea-bordered={!readonly}
 		{id}
 		{name}
 		{required}
@@ -40,7 +48,6 @@
 		{readonly}
 		{rows}
 		bind:value
-		on:click={(e) => dispatch('click', e)}
 	></textarea>
 	{#if notice}
 		<label class="label" for={id}>