From 30537cc49ea6af55d3facadc599bee324008bcab Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Jun 2024 15:16:53 +0200
Subject: [PATCH] Fixed closing modal
---
src/components/screens/Characters.vue | 2 +-
src/components/utilities/Modal.vue | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index a9a287a..6ef0ed4 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -18,7 +18,7 @@
</div>
</div>
-<Modal :isModalOpen="isModalOpen">
+<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header>
<h2 class="modal-title">Create your character</h2>
</template>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index b53b002..5c6198a 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,6 +1,6 @@
<template>
- <Teleport to="body" v-if="isModalOpen">
- <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }">
+ <Teleport to="body">
+ <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
<div class="modal-header" @mousedown="startDrag">
<slot name="modal-header"/>
<button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
@@ -23,10 +23,10 @@ const properties = defineProps({
});
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"]);
function close () {