93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()">
|
|
<Transition
|
|
:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
|
|
:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
|
|
:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
|
|
:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
|
|
:css="prefer.s.animation"
|
|
mode="out-in"
|
|
>
|
|
<MkLoading v-if="paginator.fetching.value"/>
|
|
|
|
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
|
|
|
|
<div v-else-if="paginator.items.value.length === 0" key="_empty_">
|
|
<slot name="empty"><MkResult type="empty"/></slot>
|
|
</div>
|
|
|
|
<div v-else ref="rootEl" class="_gaps">
|
|
<div v-show="pagination.reversed && paginator.canFetchOlder.value" key="_more_">
|
|
<MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchNewer">
|
|
{{ i18n.ts.loadMore }}
|
|
</MkButton>
|
|
<MkLoading v-else/>
|
|
</div>
|
|
<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
|
|
<div v-show="!pagination.reversed && paginator.canFetchOlder.value" key="_more_">
|
|
<MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder">
|
|
{{ i18n.ts.loadMore }}
|
|
</MkButton>
|
|
<MkLoading v-else/>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</component>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { PagingCtx } from '@/use/use-pagination.js';
|
|
import MkButton from '@/components/MkButton.vue';
|
|
import { i18n } from '@/i18n.js';
|
|
import { prefer } from '@/preferences.js';
|
|
import { usePagination } from '@/use/use-pagination.js';
|
|
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
pagination: PagingCtx;
|
|
disableAutoLoad?: boolean;
|
|
displayLimit?: number;
|
|
pullToRefresh?: boolean;
|
|
}>(), {
|
|
displayLimit: 20,
|
|
pullToRefresh: true,
|
|
});
|
|
|
|
const paginator = usePagination({
|
|
ctx: props.pagination,
|
|
});
|
|
|
|
function appearFetchMoreAhead() {
|
|
paginator.fetchNewer();
|
|
}
|
|
|
|
function appearFetchMore() {
|
|
paginator.fetchOlder();
|
|
}
|
|
|
|
defineExpose({
|
|
paginator: paginator,
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.transition_fade_enterActive,
|
|
.transition_fade_leaveActive {
|
|
transition: opacity 0.125s ease;
|
|
}
|
|
.transition_fade_enterFrom,
|
|
.transition_fade_leaveTo {
|
|
opacity: 0;
|
|
}
|
|
|
|
.more {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|