wip: refactor(client): migrate paging components to composition api

packages/client/src/pages/follow-requests.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination ref="list" :pagination="pagination" class="mk-follow-requests">
+	<MkPagination ref="paginationComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -8,6 +8,7 @@
 			</div>
 		</template>
 		<template v-slot="{items}">
+			<div class="mk-follow-requests">
 				<div v-for="req in items" :key="req.id" class="user _panel">
 					<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 					<div class="body">
@@ -24,50 +25,45 @@
 						</div>
 					</div>
 				</div>
+			</div>
 		</template>
 	</MkPagination>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref, computed } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import { userPage, acct } from '@/filters/user';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const paginationComponent = ref<InstanceType<typeof MkPagination>>();
-	components: {
-		MkPagination
-	},
 
-	data() {
+const pagination = {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.followRequests,
-				icon: 'fas fa-user-clock',
-			},
-			pagination: {
 	endpoint: 'following/requests/list',
 	limit: 10,
-			},
 };
-	},
 
-	methods: {
+function accept(user) {
-		accept(user) {
 	os.api('following/requests/accept', { userId: user.id }).then(() => {
-				this.$refs.list.reload();
+		paginationComponent.value.reload();
 	});
-		},
-		reject(user) {
-			os.api('following/requests/reject', { userId: user.id }).then(() => {
-				this.$refs.list.reload();
-			});
-		},
-		userPage,
-		acct
 }
+
+function reject(user) {
+	os.api('following/requests/reject', { userId: user.id }).then(() => {
+		paginationComponent.value.reload();
+	});
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: i18n.locale.followRequests,
+		icon: 'fas fa-user-clock',
+		bg: 'var(--bg)',
+	})),
 });
 </script>
 

packages/client/src/pages/preview.vue

@@ -4,24 +4,18 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
 import MkSample from '@/components/sample.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+defineExpose({
-	components: {
+	[symbols.PAGE_INFO]: computed(() => ({
-		MkSample,
+		title: i18n.locale.preview,
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.preview,
 		icon: 'fas fa-eye',
-			},
+		bg: 'var(--bg)',
-		}
+	})),
-	},
 });
 </script>
 

packages/client/src/pages/search.vue

@@ -6,31 +6,31 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	query: string;
-		XNotes
+	channel?: string;
-	},
+}>();
 
-	data() {
+const pagination = {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
-				icon: 'fas fa-search',
-			},
-			pagination: {
 	endpoint: 'notes/search',
 	limit: 10,
 	params: computed(() => ({
-					query: this.$route.query.q,
+		query: props.query,
-					channelId: this.$route.query.channel,
+		channelId: props.channel,
 	}))
-			},
 };
-	},
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: i18n.t('searchWith', { q: props.query }),
+		icon: 'fas fa-search',
+		bg: 'var(--bg)',
+	})),
 });
 </script>

packages/client/src/pages/tag.vue

@@ -4,37 +4,28 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	tag: string;
-		XNotes
+}>();
-	},
 
-	props: {
+const pagination = {
-		tag: {
-			type: String,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.tag,
-				icon: 'fas fa-hashtag'
-			},
-			pagination: {
 	endpoint: 'notes/search-by-tag',
 	limit: 10,
 	params: computed(() => ({
-					tag: this.tag,
+		tag: props.tag,
-				}))
+	})),
-			},
 };
-	},
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: props.tag,
+		icon: 'fas fa-hashtag',
+		bg: 'var(--bg)',
+	})),
 });
 </script>

packages/client/src/router.ts

@@ -33,7 +33,7 @@ const defaultRoutes = [
 	{ path: '/explore/tags/:tag', props: true, component: page('explore') },
 	{ path: '/federation', component: page('federation') },
 	{ path: '/emojis', component: page('emojis') },
-	{ path: '/search', component: page('search') },
+	{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
 	{ path: '/pages', name: 'pages', component: page('pages') },
 	{ path: '/pages/new', component: page('page-editor/page-editor') },
 	{ path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) },