forked from profectus/Profectus
thepaperpilot
0afcd1cd3d
Oh man did this end up requiring a *ton* of other work as well. There's still a few typing issues I still can't quite work out, and others I'd like to improve when I have time. In fact, this version doesn't even really work, it has a stack overflow error caused by a tooltip for some reason have a tree inside it, which in turn has another tooltip, etc. There's also 17 errors that I *really* feel like shouldn't be there, but they are, and 113 warnings - mostly using ! to assert that things are non-null. Lots of work left to do, to sum up. The reason I'm committing this now is because I really need to get to work on my game jam, and since it won't use a tree or really many of TMT-X's features, I can get away with using a broken engine :)
145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<template>
|
|
<teleport to="#modal-root">
|
|
<transition
|
|
name="modal"
|
|
@before-enter="setAnimating(true)"
|
|
@after-leave="setAnimating(false)"
|
|
>
|
|
<div
|
|
class="modal-mask"
|
|
v-show="show"
|
|
v-on:pointerdown.self="$emit('close')"
|
|
v-bind="$attrs"
|
|
>
|
|
<div class="modal-wrapper">
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<slot name="header" :shown="isVisible">
|
|
default header
|
|
</slot>
|
|
</div>
|
|
<div class="modal-body">
|
|
<branches>
|
|
<slot name="body" :shown="isVisible">
|
|
default body
|
|
</slot>
|
|
</branches>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<slot name="footer" :shown="isVisible">
|
|
<div class="modal-default-footer">
|
|
<div class="modal-default-flex-grow"></div>
|
|
<button
|
|
class="button modal-default-button"
|
|
@click="$emit('close')"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "Modal",
|
|
data() {
|
|
return {
|
|
isAnimating: false
|
|
};
|
|
},
|
|
props: {
|
|
show: Boolean
|
|
},
|
|
emits: ["close"],
|
|
computed: {
|
|
isVisible(): boolean {
|
|
return this.show || this.isAnimating;
|
|
}
|
|
},
|
|
methods: {
|
|
setAnimating(isAnimating: boolean) {
|
|
this.isAnimating = isAnimating;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal-mask {
|
|
position: fixed;
|
|
z-index: 9998;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-wrapper {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.modal-container {
|
|
width: 640px;
|
|
max-width: 95vw;
|
|
max-height: 95vh;
|
|
background-color: var(--background);
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
text-align: left;
|
|
border: var(--modal-border);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-header {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-body {
|
|
margin: 20px 0;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.modal-footer {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-default-footer {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-default-flex-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.modal-enter-from {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-leave-active {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-enter-from .modal-container,
|
|
.modal-leave-active .modal-container {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
</style>
|