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({
+withDefaults(defineProps<{
-	components: {
+	value: any,
-		XContainer, MkSelect, MkInput, MkSwitch
+	hpml: any
-	},
+}>(), {
-
+	value: {
-	props: {
+		text: '',
-		value: {
+		action: 'dialog',
-			required: true
+		content: null,
-		},
+		event: null,
-		hpml: {
+		message: null,
-			required: true,
+		primary: false,
-		},
+		var: null,
-	},
+		fn: null
-
+	}
-	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;
-	},
 });
 </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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkInput
+}>(), {
-	},
+	value: {
-
+		name: '',
-	props: {
+		width: 300,
-		value: {
+		height: 200
-			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;
-	},
 });
 </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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkInput
+}>(), {
-	},
+	value: {
-
+		name: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.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({
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-	components: {
-		XContainer, MkSelect,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
 
-	inject: ['getPageBlockList'],
+const props = withDefaults(defineProps<{
-
+	value: any,
-	props: {
+	hpml: any
-		value: {
+}>(), {
-			required: true
+	value: {
-		},
+		children: [],
-		hpml: {
+		var: null
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		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 os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
-			});
-			if (canceled) return;
-
-			const id = uuid();
-			this.value.children.push({ id, type });
-		},
 	}
 });
+
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: getPageBlockList()
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	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({
+const props = withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkDriveFileThumbnail
+}>(), {
-	},
+	value: {
+		fileId: null
+	}
+});
 
-	props: {
+let file: any = $ref(null);
-		value: {
-			required: true
-		},
-	},
 
-	data() {
+async function choose() {
-		return {
+	os.selectDriveFile(false).then((fileResponse: any) => {
-			file: null,
+		file = fileResponse;
-		};
+		props.value.fileId = fileResponse.id;
-	},
+	});
+}
 
-	created() {
+onMounted(async () => {
-		if (this.value.fileId === undefined) this.value.fileId = null;
+	if (props.value.fileId == null) {
-	},
+		await choose();
-
+	} else {
-	mounted() {
+		os.api('drive/files/show', {
-		if (this.value.fileId == null) {
+			fileId: props.value.fileId
-			this.choose();
+		}).then(fileResponse => {
-		} else {
+			file = fileResponse;
-			os.api('drive/files/show', {
+		});
-				fileId: this.value.fileId
-			}).then(file => {
-				this.file = file;
-			});
-		}
-	},
-
-	methods: {
-		async choose() {
-			os.selectDriveFile(false).then(file => {
-				this.file = file;
-				this.value.fileId = file.id;
-			});
-		},
 	}
 });
 </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({
+const props = withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkInput, MkSwitch, XNote, XNoteDetailed,
+}>(), {
-	},
+	value: {
+		note: null,
+		detailed: false
+	}
+});
 
-	props: {
+let id: any = $ref(props.value.note);
-		value: {
+let note: any = $ref(null);
-			required: true
-		},
-	},
 
-	data() {
+watch(id, async () => {
-		return {
+	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-			id: this.value.note,
+		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
-			note: null,
+	} else {
-		};
+		props.value.note = id;
-	},
+	}
 
-	watch: {
+	note = await os.api('notes/show', { noteId: props.value.note });
-		id: {
+}, {
-			async handler() {
+	immediate: true
-				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();
-				} else {
-					this.value.note = this.id;
-				}
-
-				this.note = await os.api('notes/show', { noteId: this.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkInput
+}>(), {
-	},
+	value: {
-
+		name: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkTextarea, MkInput, MkSwitch
+}>(), {
-	},
+	value: {
-
+		text: '',
-	props: {
+		attachCanvasImage: false,
-		value: {
+		canvasId: ''
-			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 = '';
-	},
 });
 </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({
+const props = withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkTextarea, MkInput
+}>(), {
-	},
+	value: {
-	props: {
+		name: '',
-		value: {
+		title: '',
-			required: true
+		values: []
-		},
+	}
-	},
+});
-	data() {
+
-		return {
+let values: string = $ref(props.value.values.join('\n'));
-			values: '',
+
-		};
+watch(values, () => {
-	},
+	props.value.values = values.split('\n')
-	watch: {
+}, {
-		values: {
+	deep: true
-			handler() {
-				this.value.values = this.values.split('\n');
-			},
-			deep: true
-		}
-	},
-	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');
-	},
 });
 </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({
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-	components: {
-		XContainer,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
 
-	inject: ['getPageBlockList'],
+const props = withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
+	value: {
+		title: null,
+		children: []
+	}
+});
 
-	props: {
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
-		value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
 
-	data() {
+async function rename() {
-		return {
+	const { canceled, result: title } = await os.inputText({
-		};
+		title: 'Enter title',
-	},
+		default: props.value.title
+	});
+	if (canceled) return;
+	props.value.title = title;
+}
 
-	created() {
+async function add() {
-		if (this.value.title == null) this.value.title = null;
+	const { canceled, result: type } = await os.select({
-		if (this.value.children == null) this.value.children = [];
+		title: i18n.ts._pages.chooseBlock,
-	},
+		groupedItems: getPageBlockList()
+	});
+	if (canceled) return;
 
-	mounted() {
+	const id = uuid();
-		if (this.value.title == null) {
+	props.value.children.push({ id, type });
-			this.rename();
+}
-		}
-	},
 
-	methods: {
+onMounted(() => {
-		async rename() {
+	if (props.value.title == null) {
-			const { canceled, result: title } = await os.inputText({
+		rename();
-				title: 'Enter title',
-				default: this.value.title
-			});
-			if (canceled) return;
-			this.value.title = title;
-		},
-
-		async add() {
-			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
-			});
-			if (canceled) return;
-
-			const id = uuid();
-			this.value.children.push({ id, type });
-		},
 	}
 });
 </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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkSwitch, MkInput
+}>(), {
-	},
+	value: {
-
+		name: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkInput
+}>(), {
-	},
+	value: {
-
+		name: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer
+}>(), {
-	},
+	value: {
-
+		text: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer, MkTextarea, MkInput
+}>(), {
-	},
+	value: {
-
+		name: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.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({
+withDefaults(defineProps<{
-	components: {
+	value: any
-		XContainer
+}>(), {
-	},
+	value: {
-
+		text: ''
-	props: {
+	}
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-	},
 });
 </script>