natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/client/src/pages/follow-requests.vue
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,19 +8,21 @@
</div> </div>
</template> </template>
<template v-slot="{items}"> <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> </div>
</div> </div>
@ -29,45 +31,39 @@
</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 { 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> </script>

24
packages/client/src/pages/preview.vue
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,
}, icon: 'fas fa-eye',
bg: 'var(--bg)',
data() { })),
return {
[symbols.PAGE_INFO]: {
title: this.$ts.preview,
icon: 'fas fa-eye',
},
}
},
}); });
</script> </script>

44
packages/client/src/pages/search.vue
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 { 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> </script>

45
packages/client/src/pages/tag.vue
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: { 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> </script>

2
packages/client/src/router.ts
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 }) },