wip

src/client/components/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal ref="modal" @closed="destroy" @click="onBgClick" :showing="showing">
+<x-modal ref="modal" @closed="$emit('closed')" @click="onBgClick" :showing="showing">
 	<div class="mk-dialog" :class="{ iconOnly }">
 		<template v-if="type == 'signin'">
 			<mk-signin/>
@@ -65,10 +65,7 @@ export default defineComponent({
 	},
 
 	props: {
-		destroy: {
+		showing: {
-			required: true
-		},
-		emit: {
 			required: true
 		},
 		type: {
@@ -121,9 +118,10 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
-			showing: true,
 			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,
@@ -162,8 +160,7 @@ export default defineComponent({
 
 	methods: {
 		done(canceled, result?) {
-			this.showing = false;
+			this.$emit('done', { canceled, result });
-			this.emit({ canceled, result });
 		},
 
 		async ok() {

src/client/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="destroy" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$emit('closed')" :showing="showing">
 	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
@@ -44,7 +44,7 @@ export default defineComponent({
 		XModal
 	},
 	props: {
-		destroy: {
+		showing: {
 			required: true
 		},
 		source: {
@@ -77,7 +77,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			showing: true,
 			faCircle
 		};
 	},
@@ -102,7 +101,7 @@ export default defineComponent({
 			this.close();
 		},
 		close() {
-			this.showing = false;
+			this.$emit('done');
 		},
 		focusUp() {
 			focusPrev(document.activeElement);

src/client/components/modal.vue

@@ -18,7 +18,6 @@ import * as os from '@/os';
 // memo: 旧popup.vueのfixedプロパティに相当するものはsource要素の祖先を辿るなどして自動で判定できるのでは
 
 export default defineComponent({
-	emits: ['click', 'esc', 'closed'],
 	props: {
 		showing: {
 			type: Boolean,
@@ -38,6 +37,7 @@ export default defineComponent({
 			required: false,
 		}
 	},
+	emits: ['click', 'esc', 'closed'],
 	data() {
 		return {
 			fixed: false,

src/client/os.ts

@@ -1,4 +1,4 @@
-import { Component, defineAsyncComponent } from 'vue';
+import { Component, defineAsyncComponent, ref } from 'vue';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
@@ -44,25 +44,29 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
 	return promise;
 }
 
-export function popup(component: Component, props: Record<string, any>, eventHandler?: Function, closedCallback?: Function) {
+export function popup(component: Component, props: Record<string, any>, callback?: Function) {
 	const id = Math.random().toString(); // TODO: uuidとか使う
-	const destroy = () => {
+	const showing = ref(true);
-		store.commit('removePopup', id);
-		if (closedCallback) closedCallback();
-	};
 	const popup = {
 		component,
 		props: {
 			...props,
-			destroy,
+			showing
-			emit: (...args) => {
+		},
-				if (eventHandler) eventHandler(...args);
+		showing,
-			}
+		done: (...args) => {
+			if (callback) callback(...args);
+			showing.value = false;
+		},
+		closed: () => {
+			store.commit('removePopup', id);
 		},
 		id,
 	};
 	store.commit('addPopup', popup);
-	return destroy;
+	return () => {
+		showing.value = false;
+	};
 }
 
 export function dialog(props: Record<string, any>) {

src/client/root.vue

@@ -2,7 +2,7 @@
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
 
-<component v-for="popup in $store.state.popups" :is="popup.component" v-bind="popup.props" :key="popup.id"/>
+<component v-for="popup in $store.state.popups" :is="popup.component" v-bind="popup.props" :key="popup.id" @done="popup.done" @closed="popup.closed"/>
 
 <div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
 </template>