1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 15:21:46 +09:00

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

This commit is contained in:
syuilo 2022-01-13 02:21:43 +09:00
parent 25f15677c3
commit f96d50bc07
5 changed files with 92 additions and 111 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<MkPagination ref="list" :pagination="pagination" class="mk-follow-requests"> <MkPagination ref="paginationComponent" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@ -8,6 +8,7 @@
</div> </div>
</template> </template>
<template v-slot="{items}"> <template v-slot="{items}">
<div class="mk-follow-requests">
<div v-for="req in items" :key="req.id" class="user _panel"> <div v-for="req in items" :key="req.id" class="user _panel">
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/> <MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body"> <div class="body">
@ -24,50 +25,45 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</MkPagination> </MkPagination>
</div> </div>
</template> </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 MkPagination from '@/components/ui/pagination.vue';
import { userPage, acct } from '@/filters/user'; import { userPage, acct } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; 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', endpoint: 'following/requests/list',
limit: 10, 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(() => {
this.$refs.list.reload(); paginationComponent.value.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> </script>

View File

@ -4,24 +4,18 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed } from 'vue';
import MkSample from '@/components/sample.vue'; import MkSample from '@/components/sample.vue';
import * as symbols from '@/symbols'; 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', icon: 'fas fa-eye',
}, bg: 'var(--bg)',
} })),
},
}); });
</script> </script>

View File

@ -6,31 +6,31 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import XNotes from '@/components/notes.vue'; import XNotes from '@/components/notes.vue';
import * as symbols from '@/symbols'; 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', endpoint: 'notes/search',
limit: 10, limit: 10,
params: computed(() => ({ 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> </script>

View File

@ -4,37 +4,28 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import XNotes from '@/components/notes.vue'; import XNotes from '@/components/notes.vue';
import * as symbols from '@/symbols'; 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', endpoint: 'notes/search-by-tag',
limit: 10, limit: 10,
params: computed(() => ({ params: computed(() => ({
tag: this.tag, tag: props.tag,
})) })),
}, };
};
}, defineExpose({
[symbols.PAGE_INFO]: computed(() => ({
title: props.tag,
icon: 'fas fa-hashtag',
bg: 'var(--bg)',
})),
}); });
</script> </script>

View File

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