diff options
Diffstat (limited to 'packages/frontend/src/components/MkNotesTimeline.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNotesTimeline.vue | 24 |
1 files changed, 11 insertions, 13 deletions
diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue index 401cef62bb..1ae97fd0c0 100644 --- a/packages/frontend/src/components/MkNotesTimeline.vue +++ b/packages/frontend/src/components/MkNotesTimeline.vue @@ -4,17 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl"> +<MkPagination :paginator="paginator" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl"> <template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template> <template #default="{ items: notes }"> <div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap }]"> <template v-for="(note, i) in notes" :key="note.id"> - <div v-if="i > 0 && isSeparatorNeeded(pagingComponent.paginator.items.value[i -1].createdAt, note.createdAt)" :data-scroll-anchor="note.id"> + <div v-if="i > 0 && isSeparatorNeeded(paginator.items.value[i -1].createdAt, note.createdAt)" :data-scroll-anchor="note.id"> <div :class="$style.date"> - <span><i class="ti ti-chevron-up"></i> {{ getSeparatorInfo(pagingComponent.paginator.items.value[i -1].createdAt, note.createdAt).prevText }}</span> + <span><i class="ti ti-chevron-up"></i> {{ getSeparatorInfo(paginator.items.value[i -1].createdAt, note.createdAt).prevText }}</span> <span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span> - <span>{{ getSeparatorInfo(pagingComponent.paginator.items.value[i -1].createdAt, note.createdAt).nextText }} <i class="ti ti-chevron-down"></i></span> + <span>{{ getSeparatorInfo(paginator.items.value[i -1].createdAt, note.createdAt).nextText }} <i class="ti ti-chevron-down"></i></span> </div> <MkNote :class="$style.note" :note="note" :withHardMute="true"/> </div> @@ -31,9 +31,8 @@ SPDX-License-Identifier: AGPL-3.0-only </MkPagination> </template> -<script lang="ts" setup generic="T extends PagingCtx"> -import { useTemplateRef } from 'vue'; -import type { PagingCtx } from '@/composables/use-pagination.js'; +<script lang="ts" setup generic="T extends Paginator"> +import type { Paginator } from '@/utility/paginator.js'; import MkNote from '@/components/MkNote.vue'; import MkPagination from '@/components/MkPagination.vue'; import { i18n } from '@/i18n.js'; @@ -41,24 +40,23 @@ import { globalEvents, useGlobalEvent } from '@/events.js'; import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js'; const props = withDefaults(defineProps<{ - pagination: T; + paginator: T; noGap?: boolean; - disableAutoLoad?: boolean; + autoLoad?: boolean; pullToRefresh?: boolean; withControl?: boolean; }>(), { + autoLoad: true, pullToRefresh: true, withControl: true, }); -const pagingComponent = useTemplateRef('pagingComponent'); - useGlobalEvent('noteDeleted', (noteId) => { - pagingComponent.value?.paginator.removeItem(noteId); + props.paginator.removeItem(noteId); }); function reload() { - return pagingComponent.value?.paginator.reload(); + return props.paginator.reload(); } defineExpose({ |