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>
<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">
import { defineComponent } from 'vue';
<script lang="ts" setup>
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({
components: {
MkPagination
},
const paginationComponent = ref<InstanceType<typeof MkPagination>>();
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.followRequests,
icon: 'fas fa-user-clock',
},
pagination: {
const pagination = {
endpoint: 'following/requests/list',
limit: 10,
},
};
},
};
methods: {
accept(user) {
function accept(user) {
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(() => {
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>

View file

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

View file

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

View file

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

View file

@ -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 }) },