Refactor page-editor elements to use Composition API (#8721)

* refactor(client): refactor page-editor elements to use Composition API

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/pages/page-editor/els/page-editor.el.button.vue

@@ -38,44 +38,28 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSelect, MkInput, MkSwitch
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
 	value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		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;
-	},
+		text: '',
+		action: 'dialog',
+		content: null,
+		event: null,
+		message: null,
+		primary: false,
+		var: null,
+		fn: null
+	}
 });
 </script>
 

packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue

@@ -20,33 +20,19 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		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;
-	},
+		name: '',
+		width: 300,
+		height: 200
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.counter.vue

@@ -18,31 +18,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+		name: ''
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.if.vue

@@ -25,54 +25,39 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, inject } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '@/components/form/select.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSelect,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
-	inject: ['getPageBlockList'],
-
-	props: {
+const props = withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
 	value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
+		children: [],
+		var: null
+	}
+});
 
-	data() {
-		return {
-		};
-	},
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
 
-	created() {
-		if (this.value.children == null) this.value.children = [];
-		if (this.value.var === undefined) this.value.var = null;
-	},
-
-	methods: {
-		async add() {
+async function add() {
 	const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: getPageBlockList()
 	});
 	if (canceled) return;
 
 	const id = uuid();
-			this.value.children.push({ id, type });
-		},
+	props.value.children.push({ id, type });
 }
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/page-editor/els/page-editor.el.image.vue

@@ -14,53 +14,39 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { onMounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkDriveFileThumbnail
-	},
-
-	props: {
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
+		fileId: null
+	}
+});
 
-	data() {
-		return {
-			file: null,
-		};
-	},
+let file: any = $ref(null);
 
-	created() {
-		if (this.value.fileId === undefined) this.value.fileId = null;
-	},
-
-	mounted() {
-		if (this.value.fileId == null) {
-			this.choose();
-		} else {
-			os.api('drive/files/show', {
-				fileId: this.value.fileId
-			}).then(file => {
-				this.file = file;
+async function choose() {
+	os.selectDriveFile(false).then((fileResponse: any) => {
+		file = fileResponse;
+		props.value.fileId = fileResponse.id;
 	});
 }
-	},
 
-	methods: {
-		async choose() {
-			os.selectDriveFile(false).then(file => {
-				this.file = file;
-				this.value.fileId = file.id;
+onMounted(async () => {
+	if (props.value.fileId == null) {
+		await choose();
+	} else {
+		os.api('drive/files/show', {
+			fileId: props.value.fileId
+		}).then(fileResponse => {
+			file = fileResponse;
 		});
-		},
 	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.note.vue

@@ -16,9 +16,9 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { watch } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
@@ -26,42 +26,27 @@ import XNote from '@/components/note.vue';
 import XNoteDetailed from '@/components/note-detailed.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput, MkSwitch, XNote, XNoteDetailed,
-	},
-
-	props: {
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			id: this.value.note,
 		note: null,
-		};
-	},
+		detailed: false
+	}
+});
 
-	watch: {
-		id: {
-			async handler() {
-				if (this.id && (this.id.startsWith('http://') || this.id.startsWith('https://'))) {
-					this.value.note = this.id.endsWith('/') ? this.id.substr(0, this.id.length - 1).split('/').pop() : this.id.split('/').pop();
+let id: any = $ref(props.value.note);
+let note: any = $ref(null);
+
+watch(id, async () => {
+	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
+		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
 	} else {
-					this.value.note = this.id;
+		props.value.note = id;
 	}
 
-				this.note = await os.api('notes/show', { noteId: this.value.note });
-			},
+	note = await os.api('notes/show', { noteId: props.value.note });
+}, {
 	immediate: true
-		},
-	},
-
-	created() {
-		if (this.value.note == null) this.value.note = null;
-		if (this.value.detailed == null) this.value.detailed = false;
-	},
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue

@@ -18,31 +18,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+		name: ''
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.post.vue

@@ -11,35 +11,21 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput, MkSwitch
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		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 = '';
-	},
+		text: '',
+		attachCanvasImage: false,
+		canvasId: ''
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue

@@ -12,41 +12,28 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { watch } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput
-	},
-	props: {
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-	data() {
-		return {
-			values: '',
-		};
-	},
-	watch: {
-		values: {
-			handler() {
-				this.value.values = this.values.split('\n');
-			},
-			deep: true
+		name: '',
+		title: '',
+		values: []
 	}
-	},
-	created() {
-		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');
-	},
+});
+
+let values: string = $ref(props.value.values.join('\n'));
+
+watch(values, () => {
+	props.value.values = values.split('\n')
+}, {
+	deep: true
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.section.vue

@@ -17,66 +17,51 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, inject, onMounted } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XContainer,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
-	inject: ['getPageBlockList'],
-
-	props: {
+const props = withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
 	value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.title == null) this.value.title = null;
-		if (this.value.children == null) this.value.children = [];
-	},
-
-	mounted() {
-		if (this.value.title == null) {
-			this.rename();
+		title: null,
+		children: []
 	}
-	},
+});
 
-	methods: {
-		async rename() {
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
+
+async function rename() {
 	const { canceled, result: title } = await os.inputText({
 		title: 'Enter title',
-				default: this.value.title
+		default: props.value.title
 	});
 	if (canceled) return;
-			this.value.title = title;
-		},
+	props.value.title = title;
+}
 
-		async add() {
+async function add() {
 	const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: getPageBlockList()
 	});
 	if (canceled) return;
 
 	const id = uuid();
-			this.value.children.push({ id, type });
-		},
+	props.value.children.push({ id, type });
+}
+
+onMounted(() => {
+	if (props.value.title == null) {
+		rename();
 	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.switch.vue

@@ -11,33 +11,19 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSwitch, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+		name: ''
+	}
 });
 </script>
 

packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue

@@ -11,31 +11,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+		name: ''
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.text.vue

@@ -9,31 +9,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-	},
+		text: ''
+	}
 });
 </script>
 

packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue

@@ -11,32 +11,18 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+		name: ''
+	}
 });
 </script>

packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue

@@ -9,31 +9,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer
-	},
-
-	props: {
+withDefaults(defineProps<{
+	value: any
+}>(), {
 	value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-	},
+		text: ''
+	}
 });
 </script>