From 225cd3caef6ff0f26c70aa5c69d7fd69c3b445e3 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 31 Jul 2022 14:31:30 +0200
Subject: [PATCH] refactor pages/page-editor/page-editor.container.vue to
 composition API

---
 .../page-editor/page-editor.container.vue     | 71 ++++++++-----------
 1 file changed, 28 insertions(+), 43 deletions(-)

diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 6927e5586..921c15ac8 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -4,7 +4,7 @@
 		<div class="title"><slot name="header"></slot></div>
 		<div class="buttons">
 			<slot name="func"></slot>
-			<button v-if="removable" class="_button" @click="remove()">
+			<button v-if="removable" class="_button" @click="emit('remove')">
 				<i class="fas fa-trash-alt"></i>
 			</button>
 			<button v-if="draggable" class="drag-handle _button">
@@ -16,56 +16,41 @@
 			</button>
 		</div>
 	</header>
-	<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
+	<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
+	<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
 	<div v-show="showBody" class="body">
 		<slot></slot>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		expanded: {
-			type: Boolean,
-			default: true
-		},
-		removable: {
-			type: Boolean,
-			default: true
-		},
-		draggable: {
-			type: Boolean,
-			default: false
-		},
-		error: {
-			required: false,
-			default: null
-		},
-		warn: {
-			required: false,
-			default: null
-		}
-	},
-	emits: ['toggle', 'remove'],
-	data() {
-		return {
-			showBody: this.expanded,
-		};
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			this.showBody = show;
-			this.$emit('toggle', show);
-		},
-		remove() {
-			this.$emit('remove');
-		}
-	}
+const emit = defineEmits<{
+	(ev: 'toggle', v: boolean): void;
+	(ev: 'remove"): void;
+}>();
+
+const props = withDefaults(defineProps<{
+	expanded?: boolean;
+	removable?: boolean;
+	draggable?: boolean;
+	error?: { arg: integer; expect: string; actual: string; };
+	warn?: { slot: integer; };
+}>(), {
+	expanded: true,
+	removable: true,
+	draggable: false,
 });
+
+let showBody = $ref(props.expanded);
+
+function toggleContent(show: boolean) {
+	showBody = show;
+	emit('toggle', show);
+}
 </script>
 
 <style lang="scss" scoped>