v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/components/modal.vue

@@ -0,0 +1,84 @@
+<template>
+<div class="mk-modal">
+	<transition name="bg-fade" appear>
+		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
+	</transition>
+	<transition name="modal" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
+		<div class="content" ref="content" v-if="show" @click.self="close()"><slot></slot></div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+	},
+	data() {
+		return {
+			show: true,
+		};
+	},
+	methods: {
+		close() {
+			this.show = false;
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			(this.$refs.content as any).style.pointerEvents = 'none';
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.modal-enter-active, .modal-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.modal-enter, .modal-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.bg-fade-enter-active, .bg-fade-leave-active {
+	transition: opacity 0.3s !important;
+}
+.bg-fade-enter, .bg-fade-leave-to {
+	opacity: 0;
+}
+
+.mk-modal {
+	> .bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10000;
+		width: 100%;
+		height: 100%;
+		background: var(--modalBg)
+	}
+
+	> .content {
+		position: fixed;
+		z-index: 10000;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		max-width: calc(100% - 16px);
+		max-height: calc(100% - 16px);
+		overflow: auto;
+		margin: auto;
+
+		::v-deep > * {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+			max-height: 100%;
+			max-width: 100%;
+		}
+	}
+}
+</style>