wip

src/client/components/emoji-picker.vue

@@ -1,5 +1,5 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
+<XModal :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
 	<div class="omfetrab">
 		<header>
 			<button v-for="(category, i) in categories"
@@ -59,7 +59,7 @@
 			</template>
 		</div>
 	</div>
-</x-popup>
+</XModal>
 </template>
 
 <script lang="ts">
@@ -69,11 +69,11 @@ import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
-import XPopup from './popup.vue';
+import XModal from './modal.vue';
 
 export default defineComponent({
 	components: {
-		XPopup,
+		XModal,
 	},
 
 	props: {

src/client/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal :source="source" :no-center="noCenter" ref="popup" @click="" @closed="$store.commit('removeMenu', id)" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$store.commit('removeMenu', id)" :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>
@@ -43,6 +43,9 @@ export default defineComponent({
 		XModal
 	},
 	props: {
+		id: {
+			required: true
+		},
 		source: {
 			required: true
 		},
@@ -98,7 +101,8 @@ export default defineComponent({
 			this.close();
 		},
 		close() {
-			this.$refs.popup.close();
+			this.showing = false;
+			this.$store.commit('menuDone', { id: this.id });
 		},
 		focusUp() {
 			focusPrev(document.activeElement);

src/client/components/reaction-picker.vue

@@ -1,23 +1,23 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
+<XModal :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
 	<div class="rdfaahpb">
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
 			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
 		</div>
 		<input class="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
 	</div>
-</x-popup>
+</XModal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
 import XReactionIcon from './reaction-icon.vue';
-import XPopup from './popup.vue';
+import XModal from './modal.vue';
 
 export default defineComponent({
 	components: {
-		XPopup,
+		XModal,
 		XReactionIcon,
 	},
 

src/client/components/visibility-chooser.vue

@@ -1,5 +1,5 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="closed">
+<XModal :source="source" ref="popup" @closed="closed">
 	<div class="gqyayizv">
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
 			<div><fa :icon="faGlobe"/></div>
@@ -39,18 +39,18 @@
 			<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
 		</button>
 	</div>
-</x-popup>
+</XModal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import XPopup from './popup.vue';
+import XModal from './modal.vue';
 
 export default defineComponent({
 	components: {
-		XPopup
+		XModal
 	},
 	props: {
 		source: {

src/client/store.ts

@@ -282,6 +282,15 @@ export const store = createStore({
 			state.menus.push(menu);
 		},
 
+		menuDone(state, { id: menuId }) {
+			const menu = state.menus.find(d => d.id === menuId);
+			menu.result = 'hoge';
+		},
+
+		removeMenu(state, menuId) {
+			state.menus = state.menus.filter(d => d.id !== menuId);
+		},
+
 		setPostForm(state, postForm) {
 			if (state.postForm != null && postForm != null) return;
 			state.postForm = postForm;