refactor(client): use composition api

This commit is contained in:
syuilo 2022-01-07 16:34:11 +09:00
parent 295752f4ad
commit 44cd849e54
4 changed files with 41 additions and 77 deletions

View file

@ -1,9 +1,7 @@
<template> <template>
<div class="jmelgwjh"> <MkSpacer :content-max="800">
<div class="body"> <XNotes :pagination="pagination" :detail="true" :prop="'note'"/>
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'"/> </MkSpacer>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -15,7 +13,7 @@ const pagination = {
endpoint: 'i/favorites', endpoint: 'i/favorites',
limit: 10, limit: 10,
params: () => ({ params: () => ({
}) }),
}; };
defineExpose({ defineExpose({
@ -26,16 +24,3 @@ defineExpose({
}, },
}); });
</script> </script>
<style lang="scss" scoped>
.jmelgwjh {
background: var(--bg);
> .body {
box-sizing: border-box;
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
}
</style>

View file

@ -4,29 +4,22 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } 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 pagination = {
components: {
XNotes
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.featured,
icon: 'fas fa-fire-alt',
bg: 'var(--bg)',
},
pagination: {
endpoint: 'notes/featured', endpoint: 'notes/featured',
limit: 10, limit: 10,
offsetMode: true, offsetMode: true,
},
}; };
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.featured,
icon: 'fas fa-fire-alt',
bg: 'var(--bg)',
}, },
}); });
</script> </script>

View file

@ -4,28 +4,21 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } 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 pagination = {
components: { endpoint: 'notes/mentions',
XNotes limit: 10,
}, };
data() { defineExpose({
return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.mentions, title: i18n.locale.mentions,
icon: 'fas fa-at', icon: 'fas fa-at',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
pagination: {
endpoint: 'notes/mentions',
limit: 10,
},
};
},
}); });
</script> </script>

View file

@ -4,31 +4,24 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } 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 pagination = {
components: {
XNotes
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.directNotes,
icon: 'fas fa-envelope',
bg: 'var(--bg)',
},
pagination: {
endpoint: 'notes/mentions', endpoint: 'notes/mentions',
limit: 10, limit: 10,
params: () => ({ params: () => ({
visibility: 'specified' visibility: 'specified'
}) }),
},
}; };
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.directNotes,
icon: 'fas fa-envelope',
bg: 'var(--bg)',
}, },
}); });
</script> </script>