mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-12 11:44:05 +02:00
Code Releases Activity

refactor(frontend): improve pagination implementation

Browse Source
This commit is contained in:
syuilo
2025-06-29 15:11:25 +09:00
parent 8bc822d829
commit f1deb89e34
68 changed files with 1067 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/frontend/src/components/MkPagination.vue
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()" @contextmenu.prevent.stop="onContextmenu">
<div>
<MkPaginationControl v-if="props.withControl" v-model:order="order" v-model:date="date" style="margin-bottom: 10px" @reload="paginator.reload()"/>
<MkPaginationControl v-if="props.withControl" :paginator="paginator" style="margin-bottom: 10px"/>
<!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 -->
<Transition
@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else key="_root_" class="_gaps">
<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
<div v-if="order === 'oldest'">
<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer">
<div v-if="paginator.order.value === 'oldest'">
<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer()">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
</div>
<div v-else v-show="paginator.canFetchOlder.value">
<MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder">
<MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder()">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
@@ -44,49 +44,29 @@ SPDX-License-Identifier: AGPL-3.0-only
</component>
</template>
<script lang="ts" setup generic="T extends PagingCtx">
<script lang="ts" setup generic="T extends Paginator, I = UnwrapRef<T['items']>">
import { isLink } from '@@/js/is-link.js';
import { ref, watch } from 'vue';
import { onMounted, watch } from 'vue';
import type { UnwrapRef } from 'vue';
import type { PagingCtx } from '@/composables/use-pagination.js';
import type { Paginator } from '@/utility/paginator.js';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { usePagination } from '@/composables/use-pagination.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import MkPaginationControl from '@/components/MkPaginationControl.vue';
import * as os from '@/os.js';
type Paginator = ReturnType<typeof usePagination<T['endpoint']>>;
const props = withDefaults(defineProps<{
pagination: T;
disableAutoLoad?: boolean;
displayLimit?: number;
paginator: T;
autoLoad?: boolean;
pullToRefresh?: boolean;
withControl?: boolean;
}>(), {
displayLimit: 20,
autoLoad: true,
pullToRefresh: true,
withControl: false,
});
const order = ref<'newest' | 'oldest'>(props.pagination.order ?? 'newest');
const date = ref<number | null>(null);
const paginator: Paginator = usePagination({
ctx: props.pagination,
});
watch([order, date], () => {
paginator.updateCtx({
...props.pagination,
order: order.value,
initialDirection: order.value === 'oldest' ? 'newer' : 'older',
initialDate: date.value,
});
}, { immediate: false });
function onContextmenu(ev: MouseEvent) {
if (ev.target && isLink(ev.target as HTMLElement)) return;
if (window.getSelection()?.toString() !== '') return;
@@ -96,19 +76,27 @@ function onContextmenu(ev: MouseEvent) {
icon: 'ti ti-refresh',
text: i18n.ts.reload,
action: () => {
paginator.reload();
props.paginator.reload();
},
}], ev);
}
if (props.autoLoad) {
onMounted(() => {
props.paginator.init();
});
}
if (props.paginator.computedParams) {
watch(props.paginator.computedParams, () => {
props.paginator.reload();
}, { immediate: false, deep: true });
}
defineSlots<{
empty: () => void;
default: (props: { items: UnwrapRef<Paginator['items']> }) => void;
default: (props: { items: I }) => void;
}>();
defineExpose({
paginator: paginator,
});
</script>
<style lang="scss" module>