2022-05-21 02:23:55 -05:00
|
|
|
<script lang="ts">
|
2023-07-01 00:50:47 -04:00
|
|
|
import { clickOutside } from '../../utils/click-outside';
|
|
|
|
|
import { fade } from 'svelte/transition';
|
2022-05-21 02:23:55 -05:00
|
|
|
|
2024-03-07 04:18:53 +01:00
|
|
|
export let onClose: (() => void) | undefined = undefined;
|
2022-05-21 02:23:55 -05:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<section
|
2023-07-01 00:50:47 -04:00
|
|
|
in:fade={{ duration: 100 }}
|
|
|
|
|
out:fade={{ duration: 100 }}
|
2023-12-04 17:32:33 -08:00
|
|
|
class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
|
2022-05-21 02:23:55 -05:00
|
|
|
>
|
2024-03-07 04:18:53 +01:00
|
|
|
<div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}>
|
2023-07-01 00:50:47 -04:00
|
|
|
<slot />
|
|
|
|
|
</div>
|
2022-05-21 02:23:55 -05:00
|
|
|
</section>
|