update to svelte 5

2024-12-02 00:28:43 +01:00
parent abffa440a1
commit 95968148a6
53 changed files with 2199 additions and 2002 deletions
--- a/src/lib/components/Input/Badges.svelte
+++ b/src/lib/components/Input/Badges.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-	// eslint-disable-next-line no-undef
-	type T = $$Generic;
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let disabled = false;
-	export let available: string[] | { [key: string]: T } = {};
-	export let value: T[] = [];
+	let {
+		id,
+		name,
+		disabled = false,
+		available = {},
+		value = $bindable([])
+	}: {
+		id?: string;
+		name?: string;
+		disabled?: boolean;
+		available?: string[] | { [key: string]: any };
+		value: any[];
+	} = $props();
 </script>

 <div class="flex items-center gap-4">
@@ -15,7 +20,7 @@
 		{name}
 		class="select select-bordered select-xs"
 		disabled={disabled || available.length === 0}
-		on:change={(e) => {
+		onchange={(e) => {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			value.push(Object.values(available)[Object.keys(available).indexOf(e.target.value)]);
@@ -42,7 +47,7 @@
 						<button
 							{disabled}
 							class:pointer-events-none={disabled}
-							on:click={() => {
+							onclick={() => {
 								value.splice(i, 1);
 								value = value;
 							}}>✕</button
--- a/src/lib/components/Input/Input.svelte
+++ b/src/lib/components/Input/Input.svelte
@@ -1,30 +1,46 @@
 <script lang="ts">
 	import { Eye, EyeSlash } from 'svelte-heros-v2';
-	import { createEventDispatcher } from 'svelte';
+	import type { Snippet } from 'svelte';

-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let type = 'text';
-	export let value: string | null = null;
-	export let placeholder: string | null = null;
-	export let pattern: RegExp | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let readonly = false;
-	export let checked = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let pickyWidth = true;
-	export let containerClass = '';
-
-	export let inputElement: HTMLInputElement | undefined = undefined;
-
-	const dispatch = createEventDispatcher();
-	function input(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		dispatch('input', e);
-	}
-	function click(e: Event) {
-		dispatch('click', e);
-	}
+	let {
+		label,
+		notice,
+		id,
+		name,
+		type = 'text',
+		value = $bindable(),
+		placeholder,
+		pattern,
+		required = false,
+		disabled = false,
+		readonly = false,
+		checked = false,
+		size = 'md',
+		pickyWidth = true,
+		containerClass = '',
+		inputElement = $bindable(),
+		oninput,
+		onclick
+	}: {
+		label?: Snippet;
+		notice?: Snippet;
+		id?: string;
+		name?: string;
+		type?: string;
+		value?: string;
+		placeholder?: string;
+		pattern?: RegExp;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		checked?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		pickyWidth?: boolean;
+		containerClass?: string;
+		inputElement?: HTMLInputElement;
+		oninput?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
+		onclick?: (e: Event) => void;
+	} = $props();

 	let initialType = type;

@@ -50,15 +66,15 @@
 			{disabled}
 			bind:value
 			bind:this={inputElement}
-			on:input={input}
-			on:click={click}
+			{oninput}
+			{onclick}
 		/>
 	{:else}
 		<div>
-			{#if $$slots.label}
+			{#if label}
 				<label class="label" for={id}>
 					<span class="label-text">
-						<slot name="label" />
+						{@render label()}
 						{#if required}
 							<span class="text-red-700">*</span>
 						{/if}
@@ -93,31 +109,23 @@
 					{readonly}
 					bind:this={inputElement}
 					autocomplete="off"
-					on:input={(e) => {
-						value = e.target?.value;
-						if (pattern && !pattern.test(e.target?.value)) {
-							if (inputElement?.value.endsWith(e.data)) {
-								value = e.target?.value.substring(0, e.target?.value.length - e.data.length);
-							}
-							return;
-						}
-						return input(e);
+					oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+						value = e.currentTarget.value;
+						if (pattern && !pattern.test(value)) return;
+						oninput && oninput(e);
 					}}
-					on:paste={(e) => {
-						if (
-							pattern &&
-							!pattern.test((e.clipboardData || window.clipboardData).getData('text'))
-						) {
+					onpaste={(e) => {
+						if (pattern && e.clipboardData && !pattern.test(e.clipboardData.getData('text'))) {
 							e.preventDefault();
 						}
 					}}
-					on:click={click}
+					{onclick}
 				/>
 				{#if initialType === 'password'}
 					<button
 						class="absolute right-3"
 						type="button"
-						on:click={() => {
+						onclick={() => {
 							type = type === 'password' ? 'text' : 'password';
 						}}
 					>
@@ -129,9 +137,11 @@
 					</button>
 				{/if}
 			</div>
-			{#if $$slots.notice}
+			{#if notice}
 				<label class="label" for={id}>
-					<span class="label-text-alt"><slot name="notice" /></span>
+					<span class="label-text-alt">
+						{@render notice()}
+					</span>
 				</label>
 			{/if}
 		</div>
--- a/src/lib/components/Input/Search.svelte
+++ b/src/lib/components/Input/Search.svelte
@@ -1,23 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	let {
+		id,
+		value = $bindable(),
+		inputValue = $bindable(),
+		suggestionRequired = false,
+		emptyAllowed = false,
+		searchSuggestionFunc = () => Promise.resolve([]),
+		invalidMessage,
+		size = 'md',
+		label,
+		required = false,
+		onsubmit
+	}: {
+		id?: string;
+		value?: string;
+		inputValue?: string;
+		suggestionRequired?: boolean;
+		emptyAllowed?: boolean;
+		searchSuggestionFunc?: (input: string) => Promise<{ name: string; value: string }[]>;
+		invalidMessage?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		label?: string;
+		required?: boolean;
+		onsubmit?: (event: Event & { input: string; value: string }) => void;
+	} = $props();

-	export let id: string | null = null;
-	export let value = '';
-	export let inputValue = '';
-	export let suggestionRequired = false;
-	export let emptyAllowed = false;
-	export let searchSuggestionFunc: (
-		input: string
-	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
-	export let invalidMessage: string | null = null;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let label: string | null = null;
-	export let required = false;
-
-	const dispatch = createEventDispatcher();
-
-	let searchSuggestions: { name: string; value: string }[] = [];
-	$: if (!suggestionRequired) value = inputValue;
+	let searchSuggestions: { name: string; value: string }[] = $state([]);
+	$effect(() => {
+		if (!suggestionRequired) value = inputValue;
+	});
 </script>

 <div class="relative">
@@ -42,7 +53,7 @@
 			{id}
 			{required}
 			bind:value={inputValue}
-			on:input={(e) => {
+			oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
 				value = '';
 				searchSuggestionFunc(inputValue).then((v) => {
 					searchSuggestions = v;
@@ -51,15 +62,15 @@
 						inputValue = searchSuggestion.name;
 						value = searchSuggestion.value;
 						searchSuggestions = [];
-						e.target?.setCustomValidity('');
-						dispatch('submit', { input: inputValue, value: value });
+						e.currentTarget.setCustomValidity('');
+						onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 					} else if (inputValue === '' && emptyAllowed) {
-						dispatch('submit', { input: '', value: '' });
+						onsubmit && onsubmit(Object.assign(e, { input: '', value: '' }));
 					}
 				});
 			}}
-			on:invalid={(e) => {
-				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			oninvalid={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+				invalidMessage && e.currentTarget.setCustomValidity(invalidMessage);
 			}}
 			pattern={suggestionRequired
 				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
@@ -74,11 +85,11 @@
 					<button
 						class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
 						title="{searchSuggestion.name} ({searchSuggestion.value})"
-						on:click|preventDefault={() => {
+						onclick={(e) => {
 							inputValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
-							dispatch('submit', { input: inputValue, value: value });
+							onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -90,7 +101,8 @@
 <!-- close the search suggestions box when clicking outside -->
 {#if inputValue && searchSuggestions.length !== 0}
 	<button
+		aria-label=" "
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"
-		on:click={() => (searchSuggestions = [])}
-	/>
+		onclick={() => (searchSuggestions = [])}
+	></button>
 {/if}
--- a/src/lib/components/Input/Select.svelte
+++ b/src/lib/components/Input/Select.svelte
@@ -1,20 +1,31 @@
 <script lang="ts">
-	// eslint-disable-next-line no-undef
-	import { createEventDispatcher } from 'svelte';
+	import type { Snippet } from 'svelte';

-	type T = $$Generic;
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let value: T | null = null;
-	export let label: string | null = null;
-	export let notice: string | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let pickyWidth = true;
-
-	let dispatch = createEventDispatcher();
+	let {
+		children,
+		id,
+		name,
+		value = $bindable(),
+		label,
+		notice,
+		required = false,
+		disabled = false,
+		size = 'md',
+		pickyWidth = true,
+		onChange
+	}: {
+		children: Snippet;
+		id?: string;
+		name?: string;
+		value?: any;
+		label?: string;
+		notice?: string;
+		required?: boolean;
+		disabled?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		pickyWidth?: boolean;
+		onChange?: ({ value }: { value: any }) => void;
+	} = $props();
 </script>

 <div>
@@ -40,9 +51,9 @@
 		{required}
 		{disabled}
 		bind:value
-		on:change={(e) => dispatch('change', { value: value })}
+		onchange={() => onChange && onChange({ value: value })}
 	>
-		<slot />
+		{@render children()}
 	</select>
 	{#if notice}
 		<label class="label" for={id}>
--- a/src/lib/components/Input/Textarea.svelte
+++ b/src/lib/components/Input/Textarea.svelte
@@ -41,7 +41,7 @@
 		{rows}
 		bind:value
 		on:click={(e) => dispatch('click', e)}
-	/>
+	></textarea>
 	{#if notice}
 		<label class="label" for={id}>
 			<span class="label-text-alt">{notice}</span>