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,19 +8,21 @@
 			</div>
 		</template>
 		<template v-slot="{items}">
-			<div v-for="req in items" :key="req.id" class="user _panel">
+			<div class="mk-follow-requests">
-				<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
+				<div v-for="req in items" :key="req.id" class="user _panel">
-				<div class="body">
+					<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
-					<div class="name">
+					<div class="body">
-						<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
+						<div class="name">
-						<p class="acct">@{{ acct(req.follower) }}</p>
+							<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
-					</div>
+							<p class="acct">@{{ acct(req.follower) }}</p>
-					<div v-if="req.follower.description" class="description" :title="req.follower.description">
+						</div>
-						<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
+						<div v-if="req.follower.description" class="description" :title="req.follower.description">
-					</div>
+							<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
-					<div class="actions">
+						</div>
-						<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
+						<div class="actions">
-						<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
+							<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
+							<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -29,45 +31,39 @@
 </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 {
+	endpoint: 'following/requests/list',
-			[symbols.PAGE_INFO]: {
+	limit: 10,
-				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(() => {
-			os.api('following/requests/accept', { userId: user.id }).then(() => {
+		paginationComponent.value.reload();
-				this.$refs.list.reload();
+	});
-			});
+}
-		},
+
-		reject(user) {
+function reject(user) {
-			os.api('following/requests/reject', { userId: user.id }).then(() => {
+	os.api('following/requests/reject', { userId: user.id }).then(() => {
-				this.$refs.list.reload();
+		paginationComponent.value.reload();
-			});
+	});
-		},
+}
-		userPage,
+
-		acct
+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,
-	},
+		icon: 'fas fa-eye',
-
+		bg: 'var(--bg)',
-	data() {
+	})),
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.preview,
-				icon: 'fas fa-eye',
-			},
-		}
-	},
 });
 </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 {
+	endpoint: 'notes/search',
-			[symbols.PAGE_INFO]: {
+	limit: 10,
-				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
+	params: computed(() => ({
-				icon: 'fas fa-search',
+		query: props.query,
-			},
+		channelId: props.channel,
-			pagination: {
+	}))
-				endpoint: 'notes/search',
+};
-				limit: 10,
+
-				params: computed(() => ({
+defineExpose({
-					query: this.$route.query.q,
+	[symbols.PAGE_INFO]: computed(() => ({
-					channelId: this.$route.query.channel,
+		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: {
+	endpoint: 'notes/search-by-tag',
-			type: String,
+	limit: 10,
-			required: true
+	params: computed(() => ({
-		}
+		tag: props.tag,
-	},
+	})),
+};
 
-	data() {
+defineExpose({
-		return {
+	[symbols.PAGE_INFO]: computed(() => ({
-			[symbols.PAGE_INFO]: {
+		title: props.tag,
-				title: this.tag,
+		icon: 'fas fa-hashtag',
-				icon: 'fas fa-hashtag'
+		bg: 'var(--bg)',
-			},
+	})),
-			pagination: {
-				endpoint: 'notes/search-by-tag',
-				limit: 10,
-				params: computed(() => ({
-					tag: this.tag,
-				}))
-			},
-		};
-	},
 });
 </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 }) },