blob: ddd20a0cc7eb7a455ff35da3b2f87b8346e0464c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<script lang="ts">
import { fadeFast } from '$lib/Transitions';
import type { Snippet } from 'svelte';
import { fade } from 'svelte/transition';
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>
<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>
|
