refactor modal

src/client/components/emoji-picker-dialog.vue

@@ -1,6 +1,6 @@
 <template>
-<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" v-slot="{ showing }">
+<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
-	<MkEmojiPicker v-show="showing !== false" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
 </MkModal>
 </template>
 

src/client/components/ui/modal.vue

@@ -1,14 +1,12 @@
 <template>
-<div class="mk-modal" v-hotkey.global="keymap" :style="{ display, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
-	<transition :name="$store.state.animation ? 'modal-bg' : ''" appear>
+	<div v-show="manualShowing != null ? manualShowing : showing" class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div>
+		<div class="bg _modalBg" @click="onBgClick"></div>
-	</transition>
 		<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
-		<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+			<slot></slot>
-			<slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot>
-		</transition>
 		</div>
-</div>
+	</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -52,7 +50,6 @@ export default defineComponent({
 			fixed: false,
 			transformOrigin: 'center',
 			contentClicking: false,
-			display: this.manualShowing == null ? 'block' : 'none',
 		};
 	},
 	computed: {
@@ -65,15 +62,6 @@ export default defineComponent({
 			return this.src != null;
 		}
 	},
-	watch: {
-		manualShowing: {
-			handler(v) {
-				console.log(v);
-				if (v) this.display = 'block';
-			},
-			immediate: true
-		}
-	},
 	mounted() {
 		this.$watch('src', () => {
 			this.fixed = getFixedContainer(this.src) != null;
@@ -95,6 +83,8 @@ export default defineComponent({
 
 			const popover = this.$refs.content as any;
 
+			if (popover == null) return;
+
 			const rect = this.src.getBoundingClientRect();
 			
 			const width = popover.offsetWidth;
@@ -177,43 +167,67 @@ export default defineComponent({
 
 		onClosed() {
 			this.$emit('closed');
-			this.display = 'none';
 		}
 	}
 });
 </script>
 
-<style>
+<style lang="scss">
-.modal-popup-content-enter-active, .modal-popup-content-leave-active,
+.modal-popup-enter-active, .modal-popup-leave-active,
-.modal-content-enter-from, .modal-content-leave-to {
+.modal-enter-from, .modal-leave-to {
+	> .content {
 		transform-origin: var(--transformOrigin);
+	}
 }
 </style>
 
 <style lang="scss" scoped>
-.modal-bg-enter-active, .modal-bg-leave-active {
+.modal-enter-active, .modal-leave-active {
-	transition: opacity 0.3s !important;
+	// CSS的には無意味だけどこれが無いとVueが認識しない
-}
-.modal-bg-enter-from, .modal-bg-leave-to {
-	opacity: 0;
-}
-
-.modal-content-enter-active, .modal-content-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
+
+	> .bg {
+		transition: opacity 0.3s !important;
+	}
+
+	> .content {
+		transition: opacity 0.3s, transform 0.3s !important;
+	}
 }
-.modal-content-enter-from, .modal-content-leave-to {
+.modal-enter-from, .modal-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
 		pointer-events: none;
 		opacity: 0;
 		transform: scale(0.9);
+	}
 }
 
-.modal-popup-content-enter-active, .modal-popup-content-leave-active {
+.modal-popup-enter-active, .modal-popup-leave-active {
+	// CSS的には無意味だけどこれが無いとVueが認識しない
 	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
+
+	> .bg {
+		transition: opacity 0.3s !important;
+	}
+
+	> .content {
+		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
+	}
 }
-.modal-popup-content-enter-from, .modal-popup-content-leave-to {
+.modal-popup-enter-from, .modal-popup-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
 		pointer-events: none;
 		opacity: 0;
 		transform: scale(0.9);
+	}
 }
 
 .mk-modal {
@@ -242,12 +256,12 @@ export default defineComponent({
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
 		}
 
-		> * {
+		> ::v-deep(*) {
 			margin: auto;
 		}
 
 		&.top {
-			> * {
+			> ::v-deep(*) {
 				margin-top: 0;
 			}
 		}