From 5f3f9e2f8ff6e80f17303a56de1b24670c8112a7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 5 Sep 2020 16:53:27 +0900
Subject: [PATCH] wip

---
 src/client/components/dialog.vue           | 25 ++++++++++++----------
 src/client/components/post-form-dialog.vue |  4 ++--
 src/client/root.vue                        | 12 +++--------
 src/client/store.ts                        |  1 -
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 32610c2915..e04a55ef98 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -3,7 +3,7 @@
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
 		<div class="bg _modalBg" @click="onBgClick" v-if="!closing"></div>
 	</transition>
-	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="$emit('closed')">
+	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="$store.commit('removeDialog', id)">
 		<div class="main" v-if="!closing">
 			<template v-if="type == 'signin'">
 				<mk-signin/>
@@ -59,8 +59,6 @@ import MkSignin from './signin.vue';
 import parseAcct from '../../misc/acct/parse';
 
 export default defineComponent({
-	emits: ['done', 'closed'],
-
 	components: {
 		MkButton,
 		MkInput,
@@ -69,6 +67,9 @@ export default defineComponent({
 	},
 
 	props: {
+		id: {
+			required: true
+		},
 		type: {
 			type: String,
 			required: false,
@@ -117,14 +118,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false
 		},
-		closing: {
-			type: Boolean,
-			default: false
-		},
 	},
 
 	data() {
 		return {
+			closing: false,
 			inputValue: this.input && this.input.default ? this.input.default : null,
 			userInputValue: null,
 			selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
@@ -150,7 +148,7 @@ export default defineComponent({
 
 		if (this.autoClose) {
 			setTimeout(() => {
-				this.$emit('done');
+				this.done(false);
 			}, 1000);
 		}
 
@@ -162,6 +160,11 @@ export default defineComponent({
 	},
 
 	methods: {
+		done(canceled, result?) {
+			this.closing = true;
+			this.$store.commit('dialogDone', { id: this.id, result: { canceled, result } });
+		},
+
 		async ok() {
 			if (!this.canOk) return;
 			if (!this.showOkButton) return;
@@ -169,19 +172,19 @@ export default defineComponent({
 			if (this.user) {
 				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
 				if (user) {
-					this.$emit('done', { canceled: false, result: user });
+					this.done(false, user);
 				}
 			} else {
 				const result =
 					this.input ? this.inputValue :
 					this.select ? this.selectedValue :
 					true;
-				this.$emit('done', { canceled: false, result });
+				this.done(false, result);
 			}
 		},
 
 		cancel() {
-			this.$emit('done', { canceled: true });
+			this.done(true);
 		},
 
 		onBgClick() {
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index 96142867df..e6f69300dd 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -107,7 +107,7 @@ export default defineComponent({
 .form-enter-active, .form-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.form-enter, .form-leave-to {
+.form-enter-from, .form-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
@@ -115,7 +115,7 @@ export default defineComponent({
 .form-fade-enter-active, .form-fade-leave-active {
 	transition: opacity 0.3s !important;
 }
-.form-fade-enter, .form-fade-leave-to {
+.form-fade-enter-from, .form-fade-leave-to {
 	opacity: 0;
 }
 
diff --git a/src/client/root.vue b/src/client/root.vue
index 6c4bf23c05..b2370c6bc0 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -2,8 +2,10 @@
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
 
-<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id"
+<XPostFormDialog v-if="$store.state.postForm" v-bind="$store.state.postForm"
 	@done="onDialogDone" @closed="onDialogClosed"/>
+
+<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id"/>
 </template>
 
 <script lang="ts">
@@ -56,14 +58,6 @@ export default defineComponent({
 		api(endpoint: string, data: Record<string, any> = {}, token?) {
 			return this.$store.dispatch('api', { endpoint, data, token });
 		},
-
-		onDialogDone(result) {
-			this.$store.commit('dialogDone', { id: this.dialog.id, result });
-		},
-
-		onDialogClosed() {
-			this.$store.commit('removeDialog', this.dialog.id);
-		}
 	}
 });
 </script>
diff --git a/src/client/store.ts b/src/client/store.ts
index fcb3e44fa0..ac4ea6b283 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -270,7 +270,6 @@ export const store = createStore({
 		dialogDone(state, { id: dialogId, result }) {
 			const dialog = state.dialogs.find(d => d.id === dialogId);
 			dialog.result = result;
-			dialog.closing = true;
 		},
 
 		removeDialog(state, dialogId) {