From c8e5daf6cffb862b13990a4950dd659545ef7ad7 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 9 Jun 2024 22:32:36 +0200
Subject: [PATCH] Hide modal footer when empty, changed slot names for good
 code practice

---
 src/components/screens/Characters.vue | 8 ++------
 src/components/utilities/Modal.vue    | 9 +++++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 730d6bb..3b711ec 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -34,11 +34,11 @@
   </div>
 
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
-    <template #modal-header>
+    <template #modalHeader>
       <h3 class="modal-title">Create your character</h3>
     </template>
 
-    <template #modal-body>
+    <template #modalBody>
       <form method="post" @submit.prevent="create" class="modal-form">
         <div class="form-fields">
           <label for="name">Name</label>
@@ -50,10 +50,6 @@
       </form>
       <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
     </template>
-
-    <template #modal-footer>
-      <button class="btn-cyan">Test</button>
-    </template>
   </Modal>
 </template>
 
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 5637ba7..9a55f61 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -2,14 +2,14 @@
   <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" />
+        <slot name="modalHeader" />
         <button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
       </div>
       <div class="modal-body">
-        <slot name="modal-body" />
+        <slot name="modalBody" />
       </div>
-      <div class="modal-footer">
-        <slot name="modal-footer" />
+      <div v-if="$slots.modalFooter" class="modal-footer">
+        <slot name="modalFooter" />
       </div>
     </div>
   </Teleport>
@@ -88,6 +88,7 @@ onUnmounted(() => {
   removeEventListener('mousemove', drag)
   removeEventListener('mouseup', stopDrag)
 })
+
 </script>
 
 <style lang="scss">