Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

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

@@ -2,61 +2,61 @@
 <div class="shaynizk _card">
 	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
 	<div class="_content body">
-		<mk-input v-model="name">
+		<MkInput v-model:value="name">
 			<span>{{ $t('name') }}</span>
-		</mk-input>
-		<mk-select v-model="src">
+		</MkInput>
+		<MkSelect v-model:value="src">
 			<template #label>{{ $t('antennaSource') }}</template>
 			<option value="all">{{ $t('_antennaSources.all') }}</option>
 			<option value="home">{{ $t('_antennaSources.homeTimeline') }}</option>
 			<option value="users">{{ $t('_antennaSources.users') }}</option>
 			<option value="list">{{ $t('_antennaSources.userList') }}</option>
 			<option value="group">{{ $t('_antennaSources.userGroup') }}</option>
-		</mk-select>
-		<mk-select v-model="userListId" v-if="src === 'list'">
+		</MkSelect>
+		<MkSelect v-model:value="userListId" v-if="src === 'list'">
 			<template #label>{{ $t('userList') }}</template>
 			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
-		</mk-select>
-		<mk-select v-model="userGroupId" v-else-if="src === 'group'">
+		</MkSelect>
+		<MkSelect v-model:value="userGroupId" v-else-if="src === 'group'">
 			<template #label>{{ $t('userGroup') }}</template>
 			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
-		</mk-select>
-		<mk-textarea v-model="users" v-else-if="src === 'users'">
+		</MkSelect>
+		<MkTextarea v-model:value="users" v-else-if="src === 'users'">
 			<span>{{ $t('users') }}</span>
 			<template #desc>{{ $t('antennaUsersDescription') }} <button class="_textButton" @click="addUser">{{ $t('addUser') }}</button></template>
-		</mk-textarea>
-		<mk-switch v-model="withReplies">{{ $t('withReplies') }}</mk-switch>
-		<mk-textarea v-model="keywords">
+		</MkTextarea>
+		<MkSwitch v-model:value="withReplies">{{ $t('withReplies') }}</MkSwitch>
+		<MkTextarea v-model:value="keywords">
 			<span>{{ $t('antennaKeywords') }}</span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
-		</mk-textarea>
-		<mk-textarea v-model="excludeKeywords">
+		</MkTextarea>
+		<MkTextarea v-model:value="excludeKeywords">
 			<span>{{ $t('antennaExcludeKeywords') }}</span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
-		</mk-textarea>
-		<mk-switch v-model="caseSensitive">{{ $t('caseSensitive') }}</mk-switch>
-		<mk-switch v-model="withFile">{{ $t('withFileAntenna') }}</mk-switch>
-		<mk-switch v-model="notify">{{ $t('notifyAntenna') }}</mk-switch>
+		</MkTextarea>
+		<MkSwitch v-model:value="caseSensitive">{{ $t('caseSensitive') }}</MkSwitch>
+		<MkSwitch v-model:value="withFile">{{ $t('withFileAntenna') }}</MkSwitch>
+		<MkSwitch v-model:value="notify">{{ $t('notifyAntenna') }}</MkSwitch>
 	</div>
 	<div class="_footer">
-		<mk-button inline @click="saveAntenna()" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
-		<mk-button inline @click="deleteAntenna()" v-if="antenna.id != null"><fa :icon="faTrash"/> {{ $t('delete') }}</mk-button>
+		<MkButton inline @click="saveAntenna()" primary><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><Fa :icon="faTrash"/> {{ $t('delete') }}</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-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 MkButton from '@/components/ui/button.vue';
+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 getAcct from '../../../misc/acct/render';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
 	},
@@ -90,12 +90,12 @@ export default Vue.extend({
 	watch: {
 		async src() {
 			if (this.src === 'list' && this.userLists === null) {
-				this.userLists = await this.$root.api('users/lists/list');
+				this.userLists = await os.api('users/lists/list');
 			}
 
 			if (this.src === 'group' && this.userGroups === null) {
-				const groups1 = await this.$root.api('users/groups/owned');
-				const groups2 = await this.$root.api('users/groups/joined');
+				const groups1 = await os.api('users/groups/owned');
+				const groups2 = await os.api('users/groups/joined');
 
 				this.userGroups = [...groups1, ...groups2];
 			}
@@ -119,7 +119,7 @@ export default Vue.extend({
 	methods: {
 		async saveAntenna() {
 			if (this.antenna.id == null) {
-				await this.$root.api('antennas/create', {
+				await os.api('antennas/create', {
 					name: this.name,
 					src: this.src,
 					userListId: this.userListId,
@@ -134,7 +134,7 @@ export default Vue.extend({
 				});
 				this.$emit('created');
 			} else {
-				await this.$root.api('antennas/update', {
+				await os.api('antennas/update', {
 					antennaId: this.antenna.id,
 					name: this.name,
 					src: this.src,
@@ -150,33 +150,27 @@ export default Vue.extend({
 				});
 			}
 
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		async deleteAntenna() {
-			const { canceled } = await this.$root.dialog({
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			await this.$root.api('antennas/delete', {
+			await os.api('antennas/delete', {
 				antennaId: this.antenna.id,
 			});
 
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 			this.$emit('deleted');
 		},
 
 		addUser() {
-			this.$root.new(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-antennas/index.vue

@@ -1,32 +1,25 @@
 <template>
-<div class="ieepwinx">
-	<portal to="icon"><fa :icon="faSatellite"/></portal>
-	<portal to="title">{{ $t('manageAntennas') }}</portal>
+<div class="ieepwinx _section">
+	<MkButton @click="create" primary class="add"><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
 
-	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
+	<div class="_content">
+		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
 
-	<x-antenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
-
-	<mk-pagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
-		<x-antenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @created="onAntennaDeleted"/>
-	</mk-pagination>
+		<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
+			<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @created="onAntennaDeleted"/>
+		</MkPagination>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../../components/ui/pagination.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
 import XAntenna from './index.antenna.vue';
 
-export default Vue.extend({
-	metaInfo() {
-		return {
-			title: this.$t('manageAntennas') as string,
-		};
-	},
-
+export default defineComponent({
 	components: {
 		MkPagination,
 		MkButton,
@@ -35,6 +28,16 @@ export default Vue.extend({
 
 	data() {
 		return {
+			INFO: {
+				header: [{
+					title: this.$t('manageAntennas'),
+					icon: faSatellite
+				}],
+				action: {
+					icon: faPlus,
+					handler: this.create
+				}
+			},
 			pagination: {
 				endpoint: 'antennas/list',
 				limit: 10,