37 lines
No EOL
787 B
Svelte
37 lines
No EOL
787 B
Svelte
<script lang="ts">
|
|
import clsx from 'clsx';
|
|
import type { Snippet } from 'svelte';
|
|
import type { SvelteHTMLElements } from 'svelte/elements';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
type Props = SvelteHTMLElements['dialog'] & {
|
|
actions?: Snippet;
|
|
backdrop?: boolean;
|
|
dialog?: HTMLDialogElement;
|
|
};
|
|
|
|
let {
|
|
actions,
|
|
backdrop,
|
|
dialog = $bindable(),
|
|
children,
|
|
class: className,
|
|
...props
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
|
|
<div class="modal-box">
|
|
{@render children?.()}
|
|
{#if actions}
|
|
<div class="modal-action">
|
|
{@render actions()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if backdrop}
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
{/if}
|
|
</dialog> |