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/components/Dropdown.svelte | 43 +++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 12 deletions(-)

(limited to 'frontend/src/lib/components/Dropdown.svelte')

diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index 9e935e4..ddd20a0 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -1,18 +1,37 @@
 <script lang="ts">
-	import { clickOutside } from '$lib/Actions';
 	import { fadeFast } from '$lib/Transitions';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	export let visible: boolean;
-	export let parent: HTMLElement;
+	interface Props {
+		button: Snippet<[() => void]>;
+		children?: Snippet;
+	}
+
+	let { button, children }: Props = $props();
+
+	let visible = $state(false);
+
+	function onfocusout(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		if (
+			event.relatedTarget instanceof HTMLElement &&
+			event.currentTarget.contains(event.relatedTarget)
+		) {
+			return;
+		}
+
+		visible = false;
+	}
 </script>
 
-{#if visible}
-	<div
-		class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
-		transition:fade={fadeFast}
-		use:clickOutside={{ handler: () => (visible = false), ignore: parent }}
-	>
-		<slot />
-	</div>
-{/if}
+<div class="relative" {onfocusout}>
+	{@render button(() => (visible = !visible))}
+	{#if visible}
+		<div
+			class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
+			transition:fade={fadeFast}
+		>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>
-- 
cgit v1.2.3-2-gb3c3