wip

src/client/components/autocomplete.vue

@@ -33,7 +33,6 @@ import { emojilist } from '../../misc/emojilist';
 import contains from '@/scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import MkUserSelect from '@/components/user-select.vue';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
 
@@ -378,7 +377,7 @@ export default defineComponent({
 
 		chooseUser() {
 			this.close();
-			os.modal(MkUserSelect, {}).then(user => {
+			os.selectUser().then(user => {
 				this.complete('user', user);
 				this.textarea.focus();
 			});

src/client/components/page/page.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
-	<x-block v-for="child in page.content" :value="child" @onUpdate:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
+	<x-block v-for="child in page.content" :value="child" @update:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
 </div>
 </template>
 

src/client/components/poll-editor.vue

@@ -5,7 +5,7 @@
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<mk-input class="input" :value="choice" @onUpdate:value="onInput(i, $event)">
+			<mk-input class="input" :value="choice" @update:value="onInput(i, $event)">
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
 			</mk-input>
 			<button @click="remove(i)" class="_button">

src/client/components/post-form.vue

@@ -58,7 +58,6 @@ import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode';
-import MkUserSelect from './user-select.vue';
 import XNotePreview from './note-preview.vue';
 import { parse } from '../../mfm/parse';
 import { host, url } from '@/config';
@@ -442,7 +441,7 @@ export default defineComponent({
 		},
 
 		addVisibleUser() {
-			os.modal(MkUserSelect, {}).then(user => {
+			os.selectUser().then(user => {
 				this.visibleUsers.push(user);
 			});
 		},
@@ -605,7 +604,7 @@ export default defineComponent({
 		},
 
 		insertMention() {
-			os.modal(MkUserSelect, {}).then(user => {
+			os.selectUser().then(user => {
 				insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
 			});
 		},

src/client/components/sidebar.vue

@@ -280,7 +280,8 @@ export default defineComponent({
 		},
 
 		async addAcount() {
-			os.modal(await import('./signin-dialog.vue')).$once('login', res => {
+			os.modal(await import('./signin-dialog.vue')).then(res => {
+				if (res == null) return;
 				this.$store.dispatch('addAcount', res);
 				os.dialog({
 					type: 'success',
@@ -290,7 +291,8 @@ export default defineComponent({
 		},
 
 		async createAccount() {
-			os.modal(await import('./signup-dialog.vue')).$once('signup', res => {
+			os.modal(await import('./signup-dialog.vue')).then(res => {
+				if (res == null) return;
 				this.$store.dispatch('addAcount', res);
 				this.switchAccountWithToken(res.i);
 			});

src/client/components/signin.vue

@@ -2,7 +2,7 @@
 <form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<div class="normal-signin" v-if="!totpLogin">
-		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @onUpdate:value="onUsernameChange">
+		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>

src/client/components/signup.vue

@@ -5,7 +5,7 @@
 			<span>{{ $t('invitationCode') }}</span>
 			<template #prefix><fa :icon="faKey"/></template>
 		</mk-input>
-		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @onUpdate:value="onChangeUsername">
+		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
@@ -19,7 +19,7 @@
 				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span>
 			</template>
 		</mk-input>
-		<mk-input v-model:value="password" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePassword">
+		<mk-input v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
 			<span>{{ $t('password') }}</span>
 			<template #prefix><fa :icon="faLock"/></template>
 			<template #desc>
@@ -28,7 +28,7 @@
 				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p>
 			</template>
 		</mk-input>
-		<mk-input v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePasswordRetype">
+		<mk-input v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
 			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
 			<template #prefix><fa :icon="faLock"/></template>
 			<template #desc>

src/client/components/user-select.vue

@@ -1,10 +1,10 @@
 <template>
-<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="selected == null" @ok="ok()">
+<x-window @close="$emit('done')" :with-ok-button="true" :ok-button-disabled="selected == null" @ok="ok()">
 	<template #header>{{ $t('selectUser') }}</template>
 	<div class="tbhwbxda">
 		<div class="inputs">
-			<mk-input v-model:value="username" class="input" @onUpdate:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
-			<mk-input v-model:value="host" class="input" @onUpdate:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model:value="host" class="input" @update:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
 		</div>
 		<div class="users">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
@@ -35,6 +35,8 @@ export default defineComponent({
 	props: {
 	},
 
+	emits: ['done'],
+
 	data() {
 		return {
 			username: '',
@@ -73,13 +75,8 @@ export default defineComponent({
 			this.$refs.username.focus();
 		},
 
-		close() {
-			this.$refs.window.close();
-		},
-
 		ok() {
-			this.$emit('selected', this.selected);
-			this.close();
+			this.$emit('done', this.selected);
 		},
 	}
 });

src/client/os.ts

@@ -143,9 +143,21 @@ export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick:
 	});
 }
 
-export function selectDriveFile(multiple) {
-	return new Promise(async (res, rej) => {
-		modal(await import('@/components/drive-window.vue'), {
+export async function selectUser() {
+	const component = await import('@/components/user-select.vue');
+	return new Promise((res, rej) => {
+		modal(component, {}).then(user => {
+			if (user) {
+				res(user);
+			}
+		});
+	});
+}
+
+export async function selectDriveFile(multiple: boolean) {
+	const component = await import('@/components/drive-window.vue');
+	return new Promise((res, rej) => {
+		modal(component, {
 			type: 'file',
 			multiple
 		}).then(files => {
@@ -156,16 +168,16 @@ export function selectDriveFile(multiple) {
 	});
 }
 
-export function selectDriveFolder(multiple) {
+export async function selectDriveFolder(multiple: boolean) {
+	const component = await import('@/components/drive-window.vue');
 	return new Promise((res, rej) => {
-		import('@/components/drive-window.vue').then(dialog => {
-			const w = $root.new(dialog, {
-				type: 'folder',
-				multiple
-			});
-			w.$once('selected', folders => {
-				res(multiple ? folders : (folders.length === 0 ? null : folders[0]));
-			});
+		modal(component, {
+			type: 'folder',
+			multiple
+		}).then(folders => {
+			if (folders) {
+				res(folders[0]);
+			}
 		});
 	});
 }

src/client/pages/instance/settings.vue

@@ -242,7 +242,6 @@ import MkInput from '@/components/ui/input.vue';
 import MkTextarea from '@/components/ui/textarea.vue';
 import MkSwitch from '@/components/ui/switch.vue';
 import MkInfo from '@/components/ui/info.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import { url } from '@/config';
 import getAcct from '../../../misc/acct/render';
 import * as os from '@/os';
@@ -452,8 +451,7 @@ export default defineComponent({
 		},
 
 		addPinUser() {
-			os.modal(MkUserSelect, {}).then(user => {
-				if (user == null) return;
+			os.selectUser().then(user => {
 				this.pinnedUsers = this.pinnedUsers.trim();
 				this.pinnedUsers += '\n@' + getAcct(user);
 				this.pinnedUsers = this.pinnedUsers.trim();
@@ -461,8 +459,7 @@ export default defineComponent({
 		},
 
 		chooseProxyAccount() {
-			os.modal(MkUserSelect, {}).then(user => {
-				if (user == null) return;
+			os.selectUser().then(user => {
 				this.proxyAccount = user;
 				this.proxyAccountId = user.id;
 				this.save(true);

src/client/pages/instance/users.vue

@@ -43,10 +43,10 @@
 				</mk-select>
 			</div>
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<mk-input v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()">
+				<mk-input v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
 					<span>{{ $t('username') }}</span>
 				</mk-input>
-				<mk-input v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+				<mk-input v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
 					<span>{{ $t('host') }}</span>
 				</mk-input>
 			</div>
@@ -90,7 +90,6 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/ui/input.vue';
 import MkSelect from '@/components/ui/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import { acct } from '../../filters/user';
 import * as os from '@/os';
 
@@ -180,7 +179,7 @@ export default defineComponent({
 		},
 
 		searchUser() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				this.show(user);
 			});
 		},

src/client/pages/messaging/index.vue

@@ -42,7 +42,6 @@ import { defineComponent } from 'vue';
 import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
 import getAcct from '../../../misc/acct/render';
 import MkButton from '@/components/ui/button.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import { acct } from '../../filters/user';
 import * as os from '@/os';
 
@@ -132,7 +131,7 @@ export default defineComponent({
 		},
 
 		async startUser() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				this.$router.push(`/my/messaging/${getAcct(user)}`);
 			});
 		},

src/client/pages/my-antennas/index.antenna.vue

@@ -53,7 +53,6 @@ import MkInput from '@/components/ui/input.vue';
 import MkTextarea from '@/components/ui/textarea.vue';
 import MkSelect from '@/components/ui/select.vue';
 import MkSwitch from '@/components/ui/switch.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import getAcct from '../../../misc/acct/render';
 import * as os from '@/os';
 
@@ -177,7 +176,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				this.users = this.users.trim();
 				this.users += '\n@' + getAcct(user);
 				this.users = this.users.trim();

src/client/pages/my-groups/group.vue

@@ -42,7 +42,6 @@ import { defineComponent } from 'vue';
 import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -89,7 +88,7 @@ export default defineComponent({
 		},
 
 		invite() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				os.api('users/groups/invite', {
 					groupId: this.group.id,
 					userId: user.id
@@ -134,7 +133,7 @@ export default defineComponent({
 		},
 
 		transfer() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				os.api('users/groups/transfer', {
 					groupId: this.group.id,
 					userId: user.id

src/client/pages/my-lists/list.vue

@@ -41,7 +41,6 @@ import { defineComponent } from 'vue';
 import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
-import MkUserSelect from '@/components/user-select.vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -88,7 +87,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			os.modal(MkUserSelect, {}).$once('selected', user => {
+			os.selectUser().then(user => {
 				os.api('users/lists/push', {
 					listId: this.list.id,
 					userId: user.id

src/client/pages/page-editor/page-editor.blocks.vue

@@ -1,6 +1,6 @@
 <template>
 <x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @onUpdate:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
+	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
 </x-draggable>
 </template>
 

src/client/pages/page-editor/page-editor.vue

@@ -59,7 +59,7 @@
 				<x-variable v-for="variable in variables"
 					:value="variable"
 					:removable="true"
-					@onUpdate:value="v => updateVariable(v)"
+					@update:value="v => updateVariable(v)"
 					@remove="() => removeVariable(variable)"
 					:key="variable.name"
 					:hpml="hpml"

src/client/pages/room/room.vue

@@ -39,7 +39,7 @@
 			<mk-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('_rooms.addFurniture') }}</mk-button>
 		</div>
 		<div class="_content">
-			<mk-select :value="roomType" @onUpdate:value="updateRoomType($event)">
+			<mk-select :value="roomType" @update:value="updateRoomType($event)">
 				<template #label>{{ $t('_rooms.roomType') }}</template>
 				<option value="default">{{ $t('_rooms._roomType.default') }}</option>
 				<option value="washitsu">{{ $t('_rooms._roomType.washitsu') }}</option>

src/client/pages/test.vue

@@ -48,6 +48,27 @@
 
 		</div>
 	</div>
+
+	<div class="_card _vMargin">
+		<div class="_title">selectDriveFolder</div>
+		<div class="_content">
+			<mk-button @click="selectDriveFolder()">selectDriveFolder</mk-button>
+		</div>
+		<div class="_content">
+
+		</div>
+	</div>
+
+
+	<div class="_card _vMargin">
+		<div class="_title">selectUser</div>
+		<div class="_content">
+			<mk-button @click="selectUser()">selectUser</mk-button>
+		</div>
+		<div class="_content">
+			<span>Result: {{ user }}</span>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -83,6 +104,7 @@ export default defineComponent({
 			dialogInput: false,
 			dialogResult: null,
 			mfm: '',
+			user: null,
 			faExclamationTriangle
 		}
 	},
@@ -101,7 +123,15 @@ export default defineComponent({
 
 		async selectDriveFile() {
 			const files = await os.selectDriveFile();
-		}
+		},
+
+		async selectDriveFolder() {
+			const folder = await os.selectDriveFolder();
+		},
+
+		async selectUser() {
+			this.user = await os.selectUser();
+		},
 	}
 });
 </script>

src/client/pages/theme-editor.vue

@@ -30,7 +30,7 @@
 							<!-- color -->
 							<div v-else-if="typeof v === 'string'" class="color">
 								<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
-								<mk-input class="select" :value="v" @onUpdate:value="colorChanged($event, i)"/>
+								<mk-input class="select" :value="v" @update:value="colorChanged($event, i)"/>
 							</div>
 							<!-- ref const -->
 							<mk-input v-else-if="v.type === 'refConst'" v-model:value="v.key">

src/client/pages/user/index.vue

@@ -171,9 +171,10 @@ export default defineComponent({
 
 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
-		this.$once('hook:beforeUnmount', () => {
-			window.cancelAnimationFrame(this.parallaxAnimationId);
-		});
+	},
+
+	beforeUnmount() {
+		window.cancelAnimationFrame(this.parallaxAnimationId);
 	},
 
 	methods: {