wip

src/client/root.vue

@@ -1,11 +1,12 @@
 <template>
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
-<!-- Render modals here -->
+
+<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id" @ok="onDialogOk" @closed="onDialogClosed"/>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import DefaultUI from './default.vue';
 import DeckUI from './deck.vue';
 import { instanceName, deckmode } from './config';
@@ -14,6 +15,7 @@ export default defineComponent({
 	components: {
 		DefaultUI,
 		DeckUI,
+		XDialog: defineAsyncComponent(() => import('./components/dialog.vue')),
 	},
 
 	metaInfo: {
@@ -39,13 +41,31 @@ export default defineComponent({
 		};
 	},
 
+	computed: {
+		dialog() {
+			if (this.$store.state.dialogs.length === 0) return null;
+
+			// what: ダイアログが複数ある場合は、一番最後に追加されたダイアログを表示する
+			// why: ダイアログが一度に複数表示されるとユーザビリティが悪いため。
+			return this.$store.state.dialogs[this.$store.state.dialogs.length - 1];
+		}
+	},
+
 	methods: {
 		api(endpoint: string, data: { [x: string]: any } = {}, token?) {
 			return this.$store.dispatch('api', { endpoint, data, token });
 		},
 
-		dialog(opts) {
+		showDialog(opts) {
 			this.$store.commit('showDialog', opts);
+		},
+
+		onDialogOk(result) {
+			this.$store.commit('requestDialogClose', this.dialog.id);
+		},
+
+		onDialogClosed() {
+			this.$store.commit('removeDialog', this.dialog.id);
 		}
 	}
 });