noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed closing modal

Browse Source
This commit is contained in:
Dennis Postma 2024-06-01 15:16:53 +02:00
parent 5c60fadaa3
commit 30537cc49e
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/screens/Characters.vue
View File

@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<Modal :isModalOpen="isModalOpen"> <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header> <template #modal-header>
<h2 class="modal-title">Create your character</h2> <h2 class="modal-title">Create your character</h2>
</template> </template>

8
src/components/utilities/Modal.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Teleport to="body" v-if="isModalOpen"> <Teleport to="body">
<div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }"> <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
<div class="modal-header" @mousedown="startDrag"> <div class="modal-header" @mousedown="startDrag">
<slot name="modal-header"/> <slot name="modal-header"/>
<button @click="close"><img src="/assets/icons/close-button-white.svg"></button> <button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
@ -23,10 +23,10 @@ const properties = defineProps({
}); });
watch(() => properties.isModalOpen, (value) => { watch(() => properties.isModalOpen, (value) => {
isModalOpen.value = value; isModalOpenRef.value = value;
}); });
const isModalOpen = ref(properties.isModalOpen); const isModalOpenRef = ref(properties.isModalOpen);
const emit = defineEmits(["modal:close", "character:create"]); const emit = defineEmits(["modal:close", "character:create"]);
function close () { function close () {