Spaces:
Running
Running
<script lang="ts"> | |
import { onMount, getContext, createEventDispatcher } from 'svelte'; | |
import { fade } from 'svelte/transition'; | |
const i18n = getContext('i18n'); | |
import { flyAndScale } from '$lib/utils/transitions'; | |
const dispatch = createEventDispatcher(); | |
export let title = $i18n.t('Confirm your action'); | |
export let message = $i18n.t('This action cannot be undone. Do you wish to continue?'); | |
export let cancelLabel = $i18n.t('Cancel'); | |
export let confirmLabel = $i18n.t('Confirm'); | |
export let show = false; | |
let modalElement = null; | |
let mounted = false; | |
const handleKeyDown = (event: KeyboardEvent) => { | |
if (event.key === 'Escape') { | |
console.log('Escape'); | |
show = false; | |
} | |
}; | |
onMount(() => { | |
mounted = true; | |
}); | |
$: if (mounted) { | |
if (show) { | |
window.addEventListener('keydown', handleKeyDown); | |
document.body.style.overflow = 'hidden'; | |
} else { | |
window.removeEventListener('keydown', handleKeyDown); | |
document.body.style.overflow = 'unset'; | |
} | |
} | |
</script> | |
{#if show} | |
<!-- svelte-ignore a11y-click-events-have-key-events --> | |
<!-- svelte-ignore a11y-no-static-element-interactions --> | |
<div | |
bind:this={modalElement} | |
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain" | |
in:fade={{ duration: 10 }} | |
on:mousedown={() => { | |
show = false; | |
}} | |
> | |
<div | |
class=" m-auto rounded-2xl max-w-full w-[32rem] mx-2 bg-gray-50 dark:bg-gray-950 shadow-3xl border border-gray-850" | |
in:flyAndScale | |
on:mousedown={(e) => { | |
e.stopPropagation(); | |
}} | |
> | |
<div class="px-[1.75rem] py-6"> | |
<div class=" text-lg font-semibold dark:text-gray-200 mb-2.5">{title}</div> | |
<slot> | |
<div class=" text-sm text-gray-500"> | |
{message} | |
</div> | |
</slot> | |
<div class="mt-6 flex justify-between gap-1.5"> | |
<button | |
class="bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white font-medium w-full py-2.5 rounded-lg transition" | |
on:click={() => { | |
show = false; | |
}} | |
type="button" | |
> | |
{cancelLabel} | |
</button> | |
<button | |
class="bg-gray-900 hover:bg-gray-850 text-gray-100 dark:bg-gray-100 dark:hover:bg-white dark:text-gray-800 font-medium w-full py-2.5 rounded-lg transition" | |
on:click={() => { | |
show = false; | |
dispatch('confirm'); | |
}} | |
type="button" | |
> | |
{confirmLabel} | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
{/if} | |
<style> | |
.modal-content { | |
animation: scaleUp 0.1s ease-out forwards; | |
} | |
@keyframes scaleUp { | |
from { | |
transform: scale(0.985); | |
opacity: 0; | |
} | |
to { | |
transform: scale(1); | |
opacity: 1; | |
} | |
} | |
</style> | |