wip

src/client/components/avatar.vue

@@ -13,6 +13,7 @@ import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { acct, userPage } from '../filters/user';
 
 export default defineComponent({
+	emits: ['click'],
 	props: {
 		user: {
 			type: Object,

src/client/components/dialog.vue

@@ -148,7 +148,7 @@ export default defineComponent({
 
 		if (this.autoClose) {
 			setTimeout(() => {
-				this.$emit('ok');
+				this.$emit('done');
 			}, 1000);
 		}
 
@@ -167,19 +167,19 @@ export default defineComponent({
 			if (this.user) {
 				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
 				if (user) {
-					this.$emit('ok', user);
+					this.$emit('done', { canceled: false, result: user });
 				}
 			} else {
 				const result =
 					this.input ? this.inputValue :
 					this.select ? this.selectedValue :
 					true;
-				this.$emit('ok', result);
+				this.$emit('done', { canceled: false, result });
 			}
 		},
 
 		cancel() {
-			this.$emit('cancel');
+			this.$emit('done', { canceled: true });
 		},
 
 		onBgClick() {

src/client/pages/test.vue

@@ -10,6 +10,9 @@
 			</mk-input>
 			<mk-button @click="showDialog()">Show</mk-button>
 		</div>
+		<div class="_content">
+			<span>Result: {{ dialogResult }}</span>
+		</div>
 	</div>
 </div>
 </template>
@@ -35,15 +38,16 @@ export default defineComponent({
 	data() {
 		return {
 			dialogTitle: 'Title',
+			dialogResult: null,
 			faExclamationTriangle
 		}
 	},
 
 	methods: {
-		showDialog() {
+		async showDialog() {
-			this.$root.showDialog({
+			this.dialogResult = await this.$store.dispatch('showDialog', {
 				title: this.dialogTitle,
-			})
+			});
 		}
 	}
 });

src/client/root.vue

@@ -2,7 +2,8 @@
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
 
-<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id" @ok="onDialogOk" @closed="onDialogClosed"/>
+<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id"
+	@done="onDialogDone" @closed="onDialogClosed"/>
 </template>
 
 <script lang="ts">
@@ -52,16 +53,12 @@ export default defineComponent({
 	},
 
 	methods: {
-		api(endpoint: string, data: { [x: string]: any } = {}, token?) {
+		api(endpoint: string, data: Record<string, any> = {}, token?) {
 			return this.$store.dispatch('api', { endpoint, data, token });
 		},
 
-		showDialog(opts) {
+		onDialogDone(result) {
-			this.$store.commit('showDialog', opts);
+			this.$store.commit('dialogDone', { id: this.dialog.id, result });
-		},
-
-		onDialogOk(result) {
-			this.$store.commit('requestDialogClose', this.dialog.id);
 		},
 
 		onDialogClosed() {

src/client/store.ts

@@ -1,3 +1,4 @@
+import { reactive, watch } from 'vue';
 import { createStore } from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import * as nestedProperty from 'nested-property';
@@ -262,15 +263,14 @@ export const store = createStore({
 			state.i[key] = value;
 		},
 
-		showDialog(state, dialog) {
+		addDialog(state, dialog) {
-			state.dialogs.push({
+			state.dialogs.push(dialog);
-				...dialog,
-				id: Math.random().toString() // TODO: uuidとか使う
-			});
 		},
 
-		requestDialogClose(state, dialogId) {
+		dialogDone(state, { id: dialogId, result }) {
-			state.dialogs.find(d => d.id === dialogId).closing = true;
+			const dialog = state.dialogs.find(d => d.id === dialogId);
+			dialog.result = result;
+			dialog.closing = true;
 		},
 
 		removeDialog(state, dialogId) {
@@ -372,6 +372,21 @@ export const store = createStore({
 			}
 		},
 
+		showDialog(ctx, opts) {
+			return new Promise((res, rej) => {
+				const dialog = reactive({
+					...opts,
+					result: null,
+					id: Math.random().toString() // TODO: uuidとか使う
+				});
+				ctx.commit('addDialog', dialog);
+				const unwatch = watch(() => dialog.result, result => {
+					unwatch();
+					res(result);
+				});
+			});
+		},
+
 		api(ctx, { endpoint, data, token }) {
 			if (++ctx.state.pendingApiRequestsCount === 1) {
 				// TODO: spinnerの表示はstoreでやらない