Hide modal footer when empty, changed slot names for good code practice

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>
 

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">