Refactor: Switch Settings index page to setup sugar (#8374)

* refactor(client): Make Settings index page use <script setup>

* chore(client): address review comments

packages/client/src/pages/settings/index.vue

@@ -22,8 +22,8 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkInfo from '@/components/ui/info.vue';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
@@ -34,33 +34,23 @@ import * as symbols from '@/symbols';
 import { instance } from '@/instance';
 import { $i } from '@/account';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+  initialPage?: string
-		MkInfo,
+}>();
-		MkSuperMenu,
-	},
 
-	props: {
+const indexInfo = {
-		initialPage: {
-			type: String,
-			required: false
-		}
-	},
-
-	setup(props, context) {
-		const indexInfo = {
 	title: i18n.ts.settings,
 	icon: 'fas fa-cog',
 	bg: 'var(--bg)',
 	hideHeader: true,
-		};
+};
-		const INFO = ref(indexInfo);
+const INFO = ref(indexInfo);
-		const page = ref(props.initialPage);
+const page = ref(props.initialPage);
-		const narrow = ref(false);
+const narrow = ref(false);
-		const view = ref(null);
+const view = ref(null);
-		const el = ref(null);
+const el = ref<HTMLElement | null>(null);
-		const childInfo = ref(null);
+const childInfo = ref(null);
-		const menuDef = computed(() => [{
+const menuDef = computed(() => [{
 	title: i18n.ts.basicSettings,
 	items: [{
 		icon: 'fas fa-user',
@@ -103,7 +93,7 @@ export default defineComponent({
 		to: '/settings/security',
 		active: page.value === 'security',
 	}],
-		}, {
+}, {
 	title: i18n.ts.clientSettings,
 	items: [{
 		icon: 'fas fa-cogs',
@@ -131,7 +121,7 @@ export default defineComponent({
 		to: '/settings/plugin',
 		active: page.value === 'plugin',
 	}],
-		}, {
+}, {
 	title: i18n.ts.otherSettings,
 	items: [{
 		icon: 'fas fa-boxes',
@@ -164,7 +154,7 @@ export default defineComponent({
 		to: '/settings/other',
 		active: page.value === 'other',
 	}],
-		}, {
+}, {
 	items: [{
 		type: 'button',
 		icon: 'fas fa-trash',
@@ -183,10 +173,10 @@ export default defineComponent({
 		},
 		danger: true,
 	},],
-		}]);
+}]);
 
-		const pageProps = ref({});
+const pageProps = ref({});
-		const component = computed(() => {
+const component = computed(() => {
 	if (page.value == null) return null;
 	switch (page.value) {
 		case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
@@ -220,17 +210,17 @@ export default defineComponent({
 		case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
 	}
 	return null;
-		});
+});
 
-		watch(component, () => {
+watch(component, () => {
 	pageProps.value = {};
 
 	nextTick(() => {
 		scroll(el.value, { top: 0 });
 	});
-		}, { immediate: true });
+}, { immediate: true });
 
-		watch(() => props.initialPage, () => {
+watch(() => props.initialPage, () => {
 	if (props.initialPage == null && !narrow.value) {
 		page.value = 'profile';
 	} else {
@@ -239,36 +229,24 @@ export default defineComponent({
 			INFO.value = indexInfo;
 		}
 	}
-		});
+});
 
-		onMounted(() => {
+onMounted(() => {
 	narrow.value = el.value.offsetWidth < 800;
 	if (!narrow.value) {
 		page.value = 'profile';
 	}
-		});
+});
 
-		const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
-		const pageChanged = (page) => {
+const pageChanged = (page) => {
 	if (page == null) return;
 	childInfo.value = page[symbols.PAGE_INFO];
-		};
+};
 
-		return {
+defineExpose({
 	[symbols.PAGE_INFO]: INFO,
-			page,
-			menuDef,
-			narrow,
-			view,
-			el,
-			pageProps,
-			component,
-			emailNotConfigured,
-			pageChanged,
-			childInfo,
-		};
-	},
 });
 </script>