wip

src/client/os.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent } from 'vue';
+import { Component, defineAsyncComponent } from 'vue';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
@@ -8,8 +8,6 @@ export const isMobile = /mobile|iphone|ipad|android/.test(ua);
 
 export const stream = new Stream();
 
-export const dialogCallbacks = {};
-
 export function api(endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) {
 	store.commit('beginApiRequest');
 
@@ -46,17 +44,36 @@ 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) {
+	const id = Math.random().toString(); // TODO: uuidとか使う
+	const destroy = () => {
+		store.commit('removePopup', id);
+		if (closedCallback) closedCallback();
+	};
+	const popup = {
+		component,
+		props: {
+			...props,
+			destroy,
+			emit: (...args) => {
+				if (eventHandler) eventHandler(...args);
+			}
+		},
+		id,
+	};
+	store.commit('addPopup', popup);
+	return destroy;
+}
+
 export function dialog(props: Record<string, any>) {
-	return store.dispatch('popup', {
-		component: defineAsyncComponent(() => import('@/components/dialog.vue')),
-		props
+	return new Promise((res, rej) => {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, res);
 	});
 }
 
 export function menu(props: Record<string, any>) {
-	return store.dispatch('popup', {
-		component: defineAsyncComponent(() => import('@/components/menu.vue')),
-		props
+	return new Promise((res, rej) => {
+		return popup(defineAsyncComponent(() => import('@/components/menu.vue')), props, res);
 	});
 }