80 lines
1.4 KiB
Vue
80 lines
1.4 KiB
Vue
<template>
|
|
<div class="overlay center" @click="usePopup().close()">
|
|
<div class="popup" :class="size" @click.stop>
|
|
<div class="popup__header">
|
|
<h2>{{ heading }}</h2>
|
|
<UiButton icon="close" @click="usePopup().close()" class="square"></UiButton>
|
|
</div>
|
|
<div class="popup__body">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {PopupSize, usePopup} from "~/components/ui/popup/Popup";
|
|
|
|
defineProps<{
|
|
heading: string,
|
|
size: PopupSize
|
|
}>()
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === 'Escape')
|
|
{
|
|
usePopup().close();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.overlay {
|
|
background-color: rgba(54, 54, 54, 0.514);
|
|
backdrop-filter: blur(0.1rem);
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.popup {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
align-content: flex-start;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.popup__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.popup__body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.medium {
|
|
height: auto;
|
|
width: 740px;
|
|
}
|
|
.small {
|
|
height: auto;
|
|
width: 540px;
|
|
}
|
|
.large {
|
|
height: auto;
|
|
width: 740px;
|
|
}
|
|
.full {
|
|
height: auto;
|
|
width: 540px;
|
|
}
|
|
</style> |