Spaces:
Running
Running
<script lang="ts"> | |
import { onMount } from 'svelte'; | |
import { fade } from 'svelte/transition'; | |
import { flyAndScale } from '$lib/utils/transitions'; | |
export let show = true; | |
export let size = 'md'; | |
let modalElement = null; | |
let mounted = false; | |
const sizeToWidth = (size) => { | |
if (size === 'xs') { | |
return 'w-[16rem]'; | |
} else if (size === 'sm') { | |
return 'w-[30rem]'; | |
} else if (size === 'md') { | |
return 'w-[48rem]'; | |
} else { | |
return 'w-[56rem]'; | |
} | |
}; | |
const handleKeyDown = (event: KeyboardEvent) => { | |
if (event.key === 'Escape') { | |
console.log('Escape'); | |
show = false; | |
} | |
}; | |
onMount(() => { | |
mounted = true; | |
}); | |
$: if (show && modalElement) { | |
document.body.appendChild(modalElement); | |
window.addEventListener('keydown', handleKeyDown); | |
document.body.style.overflow = 'hidden'; | |
} else if (modalElement) { | |
document.body.removeChild(modalElement); | |
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 {sizeToWidth( | |
size | |
)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl" | |
in:flyAndScale | |
on:mousedown={(e) => { | |
e.stopPropagation(); | |
}} | |
> | |
<slot /> | |
</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> | |