gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

feat: simplify base modal and close it by clicking outside of it

Browse source
This commit is contained in:
Twig 2025-08-11 02:24:58 +02:00
parent 395dd6cf9b
commit e7b69d7065
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
1 changed files with 25 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

82
components/Modal/Base.vue
View file

@ -1,18 +1,11 @@
<template> <template>
<dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'"> <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
<Button text="✕" variant="stealth" :callback="onCloseButton" />
</span>
<div class="modal-content">
<h1 class="modal-title">{{ title }}</h1>
<slot /> <slot />
</div>
</dialog> </dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { ModalProps } from '~/types/interfaces'; import type { ModalProps } from '~/types/interfaces';
import Button from '~/components/UserInterface/Button.vue';
const props = defineProps<ModalProps>(); const props = defineProps<ModalProps>();
const dialog = ref<HTMLDialogElement>(); const dialog = ref<HTMLDialogElement>();
@ -20,75 +13,46 @@ const dialog = ref<HTMLDialogElement>();
onMounted(() => { onMounted(() => {
if (dialog.value) { if (dialog.value) {
dialog.value.showModal(); dialog.value.showModal();
if (props.onClose) {
dialog.value.addEventListener("close", props.onClose); // close the modal if you click outside of it
} dialog.value.addEventListener('click', (event) => {
if (props.onCancel) { if (event.target === dialog.value) {
dialog.value.addEventListener("cancel", props.onCancel); dialog.value.close();
} }
});
if (props.onClose) dialog.value.addEventListener("close", props.onClose);
if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
} }
}); });
function onCloseButton () {
if (dialog.value) {
if (props.onCloseButton) {
props.onCloseButton()
}
dialog.value.remove
}
}
</script> </script>
<style> <style scoped>
.modal { .modal {
display: flex; left: 0;
justify-content: center; top: 0;
align-items: center; right: 0;
flex-direction: column; bottom: 0;
gap: 1em;
opacity: 100%; /* preferably set these to 70dvh and 70dvw in your components, this is a failsafe if you forget */
max-height: 90dvh;
max-width: 90dvw;
padding: var(--standard-radius);
border-radius: var(--standard-radius); border-radius: var(--standard-radius);
background-color: var(--chat-highlighted-background-color); border-width: 0;
color: var(--text-color); padding: 0;
overflow: hidden; /* completely transparent colour, fixes weird border radius stuff */
background-color: #b00b1e00;
} }
.modal-regular::backdrop { .modal-regular::backdrop {
background-color: var(--chat-background-color); background-color: var(--chat-background-color);
opacity: 0%; opacity: 10%;
} }
.modal-obscure::backdrop { .modal-obscure::backdrop {
background-color: var(--chat-background-color); background-color: var(--chat-background-color);
opacity: 80%; opacity: 80%;
} }
.modal-top-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.modal-title {
font-size: 1.5rem;
padding: 0;
}
.modal-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin: 1em;
width: 100%;
}
</style> </style>