wip

package.json

@@ -188,6 +188,7 @@
 		"nprogress": "0.2.0",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
+		"p-cancelable": "2.0.0",
 		"parse5": "6.0.1",
 		"parsimmon": "1.15.0",
 		"pg": "8.3.2",

src/client/os.ts

@@ -1,8 +1,8 @@
 import { Component, defineAsyncComponent, markRaw, ref } from 'vue';
+import * as PCancelable from 'p-cancelable';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
-import * as EventEmitter from 'eventemitter3';
 
 const ua = navigator.userAgent.toLowerCase();
 export const isMobile = /mobile|iphone|ipad|android/.test(ua);
@@ -45,90 +45,92 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
 	return promise;
 }
 
-export function popup(component: Component, props: Record<string, any>, callback?: Function, option?) {
+export function popup(component: Component, props: Record<string, any>, events = {}, option?) {
-	markRaw(component);
+	return new PCancelable((resolve, reject, onCancel) => {
-	const id = Math.random().toString(); // TODO: uuidとか使う
+		markRaw(component);
-	const showing = ref(true);
+		const id = Math.random().toString(); // TODO: uuidとか使う
-	const close = (...args) => {
+		const showing = ref(true);
-		if (callback) callback(...args);
+		const close = (...args) => {
-		showing.value = false;
+			resolve(...args);
-	};
+			showing.value = false;
-	const modal = {
+		};
-		type: 'popup',
+		const modal = {
-		component,
+			type: 'popup',
-		props,
+			component,
-		showing,
+			props,
-		source: option?.source,
+			showing,
-		done: close,
+			events,
-		bgClick: () => close(),
+			source: option?.source,
-		closed: () => {
+			done: close,
-			store.commit('removePopup', id);
+			bgClick: () => close(),
-		},
+			closed: () => {
-		id,
+				store.commit('removePopup', id);
-	};
+			},
-	store.commit('addPopup', modal);
+			id,
-	return close;
+		};
-}
+		store.commit('addPopup', modal);
 
-export function modal(component: Component, props: Record<string, any>, callback?: Function, option?) {
+		onCancel.shouldReject = false;
-	//const controller = new EventEmitter();
+		onCancel(() => {
-	//markRaw(controller);
-	markRaw(component);
-	const id = Math.random().toString(); // TODO: uuidとか使う
-	const showing = ref(true);
-	const close = (...args) => {
-		if (callback) callback(...args);
-		showing.value = false;
-	};
-	const modal = {
-		type: 'modal',
-		component,
-		props,
-		showing,
-		source: option?.source,
-		done: close,
-		bgClick: () => {
-			if (option?.cancelableByBgClick === false) return;
 			close();
-		},
-		closed: () => {
-			store.commit('removePopup', id);
-		},
-		id,
-	};
-	store.commit('addPopup', modal);
-	return close;
-}
-
-export function dialog(props: Record<string, any>) {
-	const cancelableByBgClick = props.cancelableByBgClick;
-	return new Promise((res, rej) => {
-		modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, result => {
-			if (result) {
-				res(result);
-			} else {
-				res({ canceled: true });
-			}
-		}, {
-			cancelableByBgClick
 		});
 	});
 }
 
-export function menu(props: Record<string, any>) {
+export function modal(component: Component, props: Record<string, any>, events = {}, option?: { source?: any; position?: any; cancelableByBgClick?: boolean; }) {
-	const source = props.source; // TODO: sourceはpropsの外に出して追加の引数として受け取るようにする
+	return new PCancelable((resolve, reject, onCancel) => {
-	return new Promise((res, rej) => {
+		markRaw(component);
-		modal(defineAsyncComponent(() => import('@/components/menu.vue')), props, res, {
+		const id = Math.random().toString(); // TODO: uuidとか使う
-			position: 'source',
+		const showing = ref(true);
-			source
+		const close = (...args) => {
+			resolve(...args);
+			showing.value = false;
+		};
+		const modal = {
+			type: 'modal',
+			component,
+			props,
+			showing,
+			events,
+			source: option?.source,
+			done: close,
+			bgClick: () => {
+				if (option?.cancelableByBgClick === false) return;
+				close();
+			},
+			closed: () => {
+				store.commit('removePopup', id);
+			},
+			id,
+		};
+		store.commit('addPopup', modal);
+
+		onCancel.shouldReject = false;
+		onCancel(() => {
+			close();
 		});
 	});
 }
 
+export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick: boolean; }) {
+	return modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {}, { cancelableByBgClick: opts?.cancelableByBgClick }).then(result => {
+		if (result) {
+			return result;
+		} else {
+			return { canceled: true };
+		}
+	});
+}
+
+export function menu(props: Record<string, any>, opts?: { source: any; }) {
+	return modal(defineAsyncComponent(() => import('@/components/menu.vue')), props, {}, {
+		position: 'source',
+		source: opts?.source
+	});
+}
+
 export function post(props: Record<string, any>) {
-	return new Promise((res, rej) => {
+	return modal(defineAsyncComponent(() => import('@/components/post-form.vue')), props);
-		modal(defineAsyncComponent(() => import('@/components/post-form.vue')), props, res);
-	});
 }
 
 export function sound(type: string) {

src/client/root.vue

@@ -3,10 +3,10 @@
 <DefaultUI v-else/>
 
 <XModal v-for="modal in $store.state.popups.filter(x => x.type === 'modal')" :key="modal.id" @closed="modal.closed" @click="modal.bgClick" :showing="modal.showing" :source="modal.source">
-	<component :is="modal.component" v-bind="modal.props" @done="modal.done"/>
+	<component :is="modal.component" v-bind="modal.props" v-on="modal.events" @done="modal.done"/>
 </XModal>
 
-<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')" :key="popup.id" :is="popup.component" v-bind="popup.props" @done="popup.done" @closed="popup.closed"/>
+<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')" :key="popup.id" :is="popup.component" v-bind="popup.props" v-on="modal.events" @done="popup.done" @closed="popup.closed"/>
 
 <div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
 </template>

yarn.lock

@@ -6803,6 +6803,11 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-cancelable@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.0.0.tgz#4a3740f5bdaf5ed5d7c3e34882c6fb5d6b266a6e"
+  integrity sha512-wvPXDmbMmu2ksjkB4Z3nZWTSkJEb9lqVdMaCKpZUGJG9TMiNp9XcbG3fn9fPKjem04fJMJnXoyFPk2FmgiaiNg==
+
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -10291,10 +10296,10 @@ webpack-sources@^1.0.1, webpack-sources@^1.4.3:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@5.0.0-beta.29:
+webpack@5.0.0-beta.30:
-  version "5.0.0-beta.29"
+  version "5.0.0-beta.30"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-beta.29.tgz#73ee7eb4a8603ade49f37c7417a1560871a79c90"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-beta.30.tgz#11cf2d4ed1ec78eb836da2a7be7809e5e074e3eb"
-  integrity sha512-uBVX3gDHTN3FnIqlrGmav5FRW7CujSN4aybLbAd8Uc1hTk+zXDmZAFJFa0pCzzWv7FkKyhdv0+q8BRL2OK7+xg==
+  integrity sha512-pOAAo71m6icygRrOPn/lQM4Ky8MN+9dDBwEU9Get285VBbmuZE6AFqizEEV692mYgUit/0+7vnjsnUr8xX2puA==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.45"
@@ -10304,7 +10309,6 @@ webpack@5.0.0-beta.29:
     "@webassemblyjs/wasm-parser" "1.9.0"
     acorn "^7.4.0"
     chrome-trace-event "^1.0.2"
-    core-js "^3.6.5"
     enhanced-resolve "5.0.0-beta.10"
     eslint-scope "^5.1.0"
     events "^3.2.0"