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

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

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-09 22:32:36 +02:00
parent daa469d5e5
commit c8e5daf6cf
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,11 +34,11 @@
</div> </div>
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false"> <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
<template #modal-header> <template #modalHeader>
<h3 class="modal-title">Create your character</h3> <h3 class="modal-title">Create your character</h3>
</template> </template>
<template #modal-body> <template #modalBody>
<form method="post" @submit.prevent="create" class="modal-form"> <form method="post" @submit.prevent="create" class="modal-form">
<div class="form-fields"> <div class="form-fields">
<label for="name">Name</label> <label for="name">Name</label>
@ -50,10 +50,6 @@
</form> </form>
<button class="btn-cyan" @click="isModalOpen = false">CANCEL</button> <button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
</template> </template>
<template #modal-footer>
<button class="btn-cyan">Test</button>
</template>
</Modal> </Modal>
</template> </template>

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

@ -2,14 +2,14 @@
<Teleport to="body"> <Teleport to="body">
<div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef"> <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="modalHeader" />
<button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button> <button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<slot name="modal-body" /> <slot name="modalBody" />
</div> </div>
<div class="modal-footer"> <div v-if="$slots.modalFooter" class="modal-footer">
<slot name="modal-footer" /> <slot name="modalFooter" />
</div> </div>
</div> </div>
</Teleport> </Teleport>
@ -88,6 +88,7 @@ onUnmounted(() => {
removeEventListener('mousemove', drag) removeEventListener('mousemove', drag)
removeEventListener('mouseup', stopDrag) removeEventListener('mouseup', stopDrag)
}) })
</script> </script>
<style lang="scss"> <style lang="scss">