30 lines
915 B
Svelte
30 lines
915 B
Svelte
<script lang="ts">
|
|
import { slide, fade } from 'svelte/transition';
|
|
import type { Snippet } from "svelte";
|
|
|
|
let { show = $bindable(), closable = true, children }: {
|
|
show: boolean,
|
|
closable: boolean
|
|
children: Snippet<[{ closeOverlay: () => void }]>
|
|
} = $props();
|
|
|
|
function closeOverlay() {
|
|
if (!closable) return;
|
|
show = false;
|
|
}
|
|
</script>
|
|
|
|
{#if show}
|
|
<div class="fixed inset-0 h-screen w-screen z-20 pointer-events-auto flex flex-col justify-end items-center">
|
|
<button type="button" class="bg-base-100/50 w-full grow z-20"
|
|
transition:fade={{duration:200}}
|
|
onclick={closeOverlay}
|
|
aria-label="Close Overlay"
|
|
></button>
|
|
<div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2 z-20"
|
|
data-theme="light"
|
|
transition:slide>
|
|
{@render children({ closeOverlay })}
|
|
</div>
|
|
</div>
|
|
{/if} |