refactor(client): refactor admin/other-settings to use Composition API (#8667)

packages/client/src/pages/admin/other-settings.vue

@@ -6,52 +6,35 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+async function init() {
-	components: {
+	await os.api('admin/meta');
-		FormSwitch,
+}
-		FormInput,
-		FormSection,
-		FormSuspense,
-	},
 
-	emits: ['info'],
+function save() {
+	os.apiWithDialog('admin/update-meta').then(() => {
+		fetchInstance();
+	});
+}
 
-	data() {
+defineExpose({
-		return {
   [symbols.PAGE_INFO]: {
-				title: this.$ts.other,
+		title: i18n.ts.other,
 		icon: 'fas fa-cogs',
 		bg: 'var(--bg)',
 		actions: [{
 			asFullButton: true,
 			icon: 'fas fa-check',
-					text: this.$ts.save,
+			text: i18n.ts.save,
-					handler: this.save,
+			handler: save,
 		}],
-			},
-		}
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('admin/meta');
-		},
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-			}).then(() => {
-				fetchInstance();
-			});
-		}
 	}
 });
 </script>