59 lines
No EOL
1 KiB
Vue
59 lines
No EOL
1 KiB
Vue
<template>
|
|
<dialog ref="dialog" class="modal">
|
|
<h1 class="modal-title">{{ title }}</h1>
|
|
<slot />
|
|
</dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { ModalProps } from '~/types/interfaces';
|
|
|
|
|
|
const props = defineProps<ModalProps>();
|
|
const dialog = ref<HTMLDialogElement>();
|
|
|
|
onMounted(() => {
|
|
if (dialog) {
|
|
dialog.value?.showModal();
|
|
if (props.onClose) {
|
|
dialog.value?.addEventListener("close", props.onClose);
|
|
}
|
|
if (props.onCancel) {
|
|
dialog.value?.addEventListener("cancel", props.onCancel);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.modal {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
opacity: 100%;
|
|
padding: 1%;
|
|
background-color: var(--background-color);
|
|
color: var(--main-text-color);
|
|
}
|
|
|
|
.modal::backdrop {
|
|
background-color: rgb(50, 50, 50);
|
|
opacity: 70%;
|
|
}
|
|
|
|
.modal-top-container {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style> |