Migrate to Vue3 (#6587)

* Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160a. * 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
2020-10-17 20:12:00 +09:00
parent a40f38b2b5
commit 7199e6f4e0
357 changed files with 15053 additions and 12496 deletions
--- a/src/client/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.button.vue
@@ -1,24 +1,24 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>

 	<section class="xfhsjczc">
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></mk-input>
-		<mk-switch v-model="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></mk-switch>
-		<mk-select v-model="value.action">
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></MkInput>
+		<MkSwitch v-model:value="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></MkSwitch>
+		<MkSelect v-model:value="value.action">
 			<template #label>{{ $t('_pages.blocks._button.action') }}</template>
 			<option value="dialog">{{ $t('_pages.blocks._button._action.dialog') }}</option>
 			<option value="resetRandom">{{ $t('_pages.blocks._button._action.resetRandom') }}</option>
 			<option value="pushEvent">{{ $t('_pages.blocks._button._action.pushEvent') }}</option>
 			<option value="callAiScript">{{ $t('_pages.blocks._button._action.callAiScript') }}</option>
-		</mk-select>
+		</MkSelect>
 		<template v-if="value.action === 'dialog'">
-			<mk-input v-model="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></mk-input>
+			<MkInput v-model:value="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></MkInput>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<mk-input v-model="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></mk-input>
-			<mk-input v-model="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></mk-input>
-			<mk-select v-model="value.var">
+			<MkInput v-model:value="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></MkInput>
+			<MkInput v-model:value="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></MkInput>
+			<MkSelect v-model:value="value.var">
 				<template #label>{{ $t('_pages.blocks._button._action._pushEvent.variable') }}</template>
 				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
 				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
@@ -28,24 +28,25 @@
 				<optgroup :label="$t('_pages.script.enviromentVariables')">
 					<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
 				</optgroup>
-			</mk-select>
+			</MkSelect>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<mk-input v-model="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></mk-input>
+			<MkInput v-model:value="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></MkInput>
 		</template>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSelect from '../../../components/ui/select.vue';
-import MkInput from '../../../components/ui/input.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSelect, MkInput, MkSwitch
 	},
@@ -66,14 +67,14 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-		if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
-		if (this.value.content == null) Vue.set(this.value, 'content', null);
-		if (this.value.event == null) Vue.set(this.value, 'event', null);
-		if (this.value.message == null) Vue.set(this.value, 'message', null);
-		if (this.value.primary == null) Vue.set(this.value, 'primary', false);
-		if (this.value.var == null) Vue.set(this.value, 'var', null);
-		if (this.value.fn == null) Vue.set(this.value, 'fn', null);
+		if (this.value.text == null) this.value.text = '';
+		if (this.value.action == null) this.value.action = 'dialog';
+		if (this.value.content == null) this.value.content = null;
+		if (this.value.event == null) this.value.event = null;
+		if (this.value.message == null) this.value.message = null;
+		if (this.value.primary == null) this.value.primary = false;
+		if (this.value.var == null) this.value.var = null;
+		if (this.value.fn == null) this.value.fn = null;
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,22 +1,23 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>

 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></mk-input>
-		<mk-input v-model="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></mk-input>
-		<mk-input v-model="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></mk-input>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></MkInput>
+		<MkInput v-model:value="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></MkInput>
+		<MkInput v-model:value="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPaintBrush, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
@@ -34,9 +35,9 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-		if (this.value.width == null) Vue.set(this.value, 'width', 300);
-		if (this.value.height == null) Vue.set(this.value, 'height', 200);
+		if (this.value.name == null) this.value.name = '';
+		if (this.value.width == null) this.value.width = 300;
+		if (this.value.height == null) this.value.height = 200;
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.counter.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,22 +1,23 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>

 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></mk-input>
-		<mk-input v-model="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></mk-input>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></MkInput>
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></MkInput>
+		<MkInput v-model:value="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
@@ -34,7 +35,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.name == null) this.value.name = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.if.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.if.vue
@@ -1,14 +1,14 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faQuestion"/> {{ $t('_pages.blocks.if') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faQuestion"/> {{ $t('_pages.blocks.if') }}</template>
 	<template #func>
 		<button @click="add()" class="_button">
-			<fa :icon="faPlus"/>
+			<Fa :icon="faPlus"/>
 		</button>
 	</template>

 	<section class="romcojzs">
-		<mk-select v-model="value.var">
+		<MkSelect v-model:value="value.var">
 			<template #label>{{ $t('_pages.blocks._if.variable') }}</template>
 			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
 			<optgroup :label="$t('_pages.script.pageVariables')">
@@ -17,21 +17,22 @@
 			<optgroup :label="$t('_pages.script.enviromentVariables')">
 				<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
 			</optgroup>
-		</mk-select>
+		</MkSelect>

-		<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
+		<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSelect from '../../../components/ui/select.vue';
+import MkSelect from '@/components/ui/select.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSelect
 	},
@@ -58,13 +59,13 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.children == null) Vue.set(this.value, 'children', []);
-		if (this.value.var === undefined) Vue.set(this.value, 'var', null);
+		if (this.value.children == null) this.value.children = [];
+		if (this.value.var === undefined) this.value.var = null;
 	},

 	methods: {
 		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
+			const { canceled, result: type } = await os.dialog({
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
--- a/src/client/pages/page-editor/els/page-editor.el.image.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.image.vue
@@ -1,29 +1,29 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faImage"/> {{ $t('_pages.blocks.image') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faImage"/> {{ $t('_pages.blocks.image') }}</template>
 	<template #func>
 		<button @click="choose()">
-			<fa :icon="faFolderOpen"/>
+			<Fa :icon="faFolderOpen"/>
 		</button>
 	</template>

 	<section class="oyyftmcf">
-		<mk-file-thumbnail class="preview" v-if="file" :file="file" fit="contain" @click="choose()"/>
+		<MkDriveFileThumbnail class="preview" v-if="file" :file="file" fit="contain" @click="choose()"/>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkFileThumbnail from '../../../components/drive-file-thumbnail.vue';
-import { selectDriveFile } from '../../../scripts/select-drive-file';
+import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XContainer, MkFileThumbnail
+		XContainer, MkDriveFileThumbnail
 	},

 	props: {
@@ -40,14 +40,14 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
+		if (this.value.fileId === undefined) this.value.fileId = null;
 	},

 	mounted() {
 		if (this.value.fileId == null) {
 			this.choose();
 		} else {
-			this.$root.api('drive/files/show', {
+			os.api('drive/files/show', {
 				fileId: this.value.fileId
 			}).then(file => {
 				this.file = file;
@@ -57,7 +57,7 @@ export default Vue.extend({

 	methods: {
 		async choose() {
-			selectDriveFile(this.$root, false).then(file => {
+			os.selectDriveFile(false).then(file => {
 				this.file = file;
 				this.value.fileId = file.id;
 			});
--- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,22 +1,23 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>

 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></mk-input>
-		<mk-input v-model="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></mk-input>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></MkInput>
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></MkInput>
+		<MkInput v-model:value="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
@@ -34,7 +35,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.name == null) this.value.name = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.post.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.post.vue
@@ -1,24 +1,25 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>

 	<section style="padding: 16px;">
-		<mk-textarea v-model="value.text">{{ $t('_pages.blocks._post.text') }}</mk-textarea>
-		<mk-switch v-model="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></mk-switch>
-		<mk-input v-if="value.attachCanvasImage" v-model="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></mk-input>
+		<MkTextarea v-model:value="value.text">{{ $t('_pages.blocks._post.text') }}</MkTextarea>
+		<MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></MkSwitch>
+		<MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput, MkSwitch
 	},
@@ -36,9 +37,9 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-		if (this.value.attachCanvasImage == null) Vue.set(this.value, 'attachCanvasImage', false);
-		if (this.value.canvasId == null) Vue.set(this.value, 'canvasId', '');
+		if (this.value.text == null) this.value.text = '';
+		if (this.value.attachCanvasImage == null) this.value.attachCanvasImage = false;
+		if (this.value.canvasId == null) this.value.canvasId = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,24 +1,25 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>

 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></mk-input>
-		<mk-input v-model="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></mk-input>
-		<mk-textarea v-model="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></mk-textarea>
-		<mk-input v-model="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></mk-input>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></MkInput>
+		<MkInput v-model:value="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></MkInput>
+		<MkTextarea v-model:value="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></MkTextarea>
+		<MkInput v-model:value="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput
 	},
@@ -34,14 +35,17 @@ export default Vue.extend({
 		};
 	},
 	watch: {
-		values() {
-			Vue.set(this.value, 'values', this.values.split('\n'));
+		values: {
+			handler() {
+				this.value.values = this.values.split('\n');
+			},
+			deep: true
 		}
 	},
 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-		if (this.value.title == null) Vue.set(this.value, 'title', '');
-		if (this.value.values == null) Vue.set(this.value, 'values', []);
+		if (this.value.name == null) this.value.name = '';
+		if (this.value.title == null) this.value.title = '';
+		if (this.value.values == null) this.value.values = [];
 		this.values = this.value.values.join('\n');
 	},
 });
--- a/src/client/pages/page-editor/els/page-editor.el.section.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.section.vue
@@ -1,29 +1,30 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faStickyNote"/> {{ value.title }}</template>
 	<template #func>
 		<button @click="rename()" class="_button">
-			<fa :icon="faPencilAlt"/>
+			<Fa :icon="faPencilAlt"/>
 		</button>
 		<button @click="add()" class="_button">
-			<fa :icon="faPlus"/>
+			<Fa :icon="faPlus"/>
 		</button>
 	</template>

 	<section class="ilrvjyvi">
-		<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
+		<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
@@ -50,8 +51,8 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.title == null) Vue.set(this.value, 'title', null);
-		if (this.value.children == null) Vue.set(this.value, 'children', []);
+		if (this.value.title == null) this.value.title = null;
+		if (this.value.children == null) this.value.children = [];
 	},

 	mounted() {
@@ -62,7 +63,7 @@ export default Vue.extend({

 	methods: {
 		async rename() {
-			const { canceled, result: title } = await this.$root.dialog({
+			const { canceled, result: title } = await os.dialog({
 				title: 'Enter title',
 				input: {
 					type: 'text',
@@ -75,7 +76,7 @@ export default Vue.extend({
 		},

 		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
+			const { canceled, result: type } = await os.dialog({
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
--- a/src/client/pages/page-editor/els/page-editor.el.switch.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,23 +1,24 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>

 	<section class="kjuadyyj">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></mk-input>
-		<mk-switch v-model="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></mk-switch>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></MkInput>
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></MkInput>
+		<MkSwitch v-model:value="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></MkSwitch>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSwitch, MkInput
 	},
@@ -35,7 +36,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.name == null) this.value.name = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,22 +1,23 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>

 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></mk-input>
-		<mk-input v-model="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></mk-input>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></MkInput>
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></MkInput>
+		<MkInput v-model:value="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></MkInput>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
@@ -34,7 +35,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.name == null) this.value.name = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.text.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text.vue
@@ -1,19 +1,20 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.text') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.text') }}</template>

 	<section class="vckmsadr">
 		<textarea v-model="value.text"></textarea>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
@@ -31,7 +32,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
+		if (this.value.text == null) this.value.text = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,23 +1,24 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>

 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></mk-input>
-		<mk-textarea v-model="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></mk-textarea>
+		<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></MkInput>
+		<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></MkInput>
+		<MkTextarea v-model:value="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></MkTextarea>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput
 	},
@@ -35,7 +36,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
+		if (this.value.name == null) this.value.name = '';
 	},
 });
 </script>
--- a/src/client/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,19 +1,20 @@
 <template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.textarea') }}</template>
+<XContainer @remove="() => $emit('remove')" :draggable="true">
+	<template #header><Fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.textarea') }}</template>

 	<section class="ihymsbbe">
 		<textarea v-model="value.text"></textarea>
 	</section>
-</x-container>
+</XContainer>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
@@ -31,7 +32,7 @@ export default Vue.extend({
 	},

 	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
+		if (this.value.text == null) this.value.text = '';
 	},
 });
 </script>