32 lines
No EOL
788 B
Vue
32 lines
No EOL
788 B
Vue
<template>
|
|
<div
|
|
class="fixed top-0 left-0 w-100vw h-100vh backdrop-filter bg-black transition p-10 flex items-center justify-center"
|
|
:class="isActive ? 'bg-opacity-30 backdrop-blur-5' : 'pointer-events-none bg-opacity-0'"
|
|
@click.passive.self="emit('close-request')"
|
|
>
|
|
<div
|
|
class="transform transition rounded-lg max-h-full max-w-full shadow-lg bg-dark-500"
|
|
:class="isActive ? 'opacity-100' : 'opacity-0 scale-90'"
|
|
>
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { onKeyDown } from "@vueuse/core"
|
|
|
|
const props = defineProps<{
|
|
isActive: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits(["close-request"])
|
|
|
|
onKeyDown("Escape", () => {
|
|
if (props.isActive) emit("close-request")
|
|
}, { passive: true })
|
|
</script> |