Rune Harlyk
53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { closeModal } from 'svelte-modals';
|
|
import { focusTrap } from 'svelte-focus-trap';
|
|
import { fly } from 'svelte/transition';
|
|
import Cancel from '~icons/tabler/x';
|
|
import Check from '~icons/tabler/check';
|
|
|
|
// provided by <Modals />
|
|
export let isOpen: boolean;
|
|
|
|
export let title: string;
|
|
export let message: string;
|
|
export let onConfirm: any;
|
|
export let labels = {
|
|
cancel: { label: 'Cancel', icon: Cancel },
|
|
confirm: { label: 'OK', icon: Check }
|
|
};
|
|
</script>
|
|
|
|
{#if isOpen}
|
|
<div
|
|
role="dialog"
|
|
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
|
|
transition:fly={{ y: 50 }}
|
|
on:introstart
|
|
on:outroend
|
|
use:focusTrap
|
|
>
|
|
<div
|
|
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
|
|
>
|
|
<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
|
|
<div class="divider my-2" />
|
|
<p class="text-base-content mb-1 text-start">{message}</p>
|
|
<div class="divider my-2" />
|
|
<div class="flex justify-end gap-2">
|
|
<button class="btn btn-primary inline-flex items-center" on:click={closeModal}
|
|
><svelte:component this={labels.cancel.icon} class="mr-2 h-5 w-5" /><span
|
|
>{labels?.cancel.label}</span
|
|
></button
|
|
>
|
|
<button
|
|
class="btn btn-warning text-warning-content inline-flex items-center"
|
|
on:click={onConfirm}
|
|
><svelte:component this={labels?.confirm.icon} class="mr-2 h-5 w-5" /><span
|
|
>{labels?.confirm.label}</span
|
|
></button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|