Piped/src/components/ModalComponent.vue

52 lines
1.2 KiB
Vue
Raw Normal View History

2022-08-28 17:40:35 +00:00
<template>
<div class="modal">
2022-09-08 20:47:06 +00:00
<div @click="handleClick">
2022-08-28 17:40:35 +00:00
<div class="modal-container">
2022-09-08 20:56:24 +00:00
<button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
2022-08-28 17:40:35 +00:00
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener("keydown", this.handleKeyDown);
},
unmounted() {
window.removeEventListener("keydown", this.handleKeyDown);
},
methods: {
handleKeyDown(event) {
if (event.code === "Escape") {
this.$emit("close");
} else return;
event.preventDefault();
},
2022-09-08 20:47:06 +00:00
handleClick(event) {
if (event.target !== event.currentTarget) return;
this.$emit("close");
},
2022-08-28 17:40:35 +00:00
},
};
</script>
<style scoped>
.modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
}
.modal > div {
@apply table-cell align-middle;
}
.modal-container {
2022-09-08 20:56:24 +00:00
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
}
.modal-container > button {
@apply absolute right-8 top-6;
2022-08-28 17:40:35 +00:00
}
</style>