mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-01 17:26:05 +02:00
Code Releases Activity

fix(frontend): ページネーションの進行方向を指定できるように (#16433)

Browse Source 
* fix(frontend): ページネーションの進行方向を指定できるように

* Update Changelog

* fix lint

* fix: directionをMkPaginationに移動

* fix

* fix

* fix

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり
2025-08-22 19:34:20 +09:00
committed by GitHub
parent 4d215bde10
commit ade603ff7a
5 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/components/MkNotesTimeline.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkPagination :paginator="paginator" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
<template #default="{ items: notes }">
@@ -50,11 +50,14 @@ import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-sep
const props = withDefaults(defineProps<{
paginator: T;
noGap?: boolean;
direction?: 'up' | 'down' | 'both';
autoLoad?: boolean;
pullToRefresh?: boolean;
withControl?: boolean;
}>(), {
autoLoad: true,
direction: 'down',
pullToRefresh: true,
withControl: true,
});

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

@@ -25,15 +25,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-else key="_root_" class="_gaps">
<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
<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()">
<div v-if="direction === 'up' || direction === 'both'" v-show="upButtonVisible">
<MkButton v-if="!upButtonLoading" :class="$style.more" primary rounded @click="upButtonClick">
{{ 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()">
<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
<div v-if="direction === 'down' || direction === 'both'" v-show="downButtonVisible">
<MkButton v-if="!downButtonLoading" :class="$style.more" primary rounded @click="downButtonClick">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup generic="T extends IPaginator">
import { isLink } from '@@/js/is-link.js';
import { onMounted, watch, unref } from 'vue';
import { onMounted, computed, watch, unref } from 'vue';
import type { UnwrapRef } from 'vue';
import type { IPaginator } from '@/utility/paginator.js';
import MkButton from '@/components/MkButton.vue';
@@ -58,11 +58,20 @@ import * as os from '@/os.js';
const props = withDefaults(defineProps<{
paginator: T;
// ページネーションを進める方向
// up: 上方向
// down: 下方向 (default)
// both: 双方向
// NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない
direction?: 'up' | 'down' | 'both';
autoLoad?: boolean;
pullToRefresh?: boolean;
withControl?: boolean;
}>(), {
autoLoad: true,
direction: 'down',
pullToRefresh: true,
withControl: false,
});
@@ -93,6 +102,36 @@ if (props.paginator.computedParams) {
}, { immediate: false, deep: true });
}
const upButtonVisible = computed(() => {
return props.paginator.order.value === 'oldest' ? props.paginator.canFetchOlder.value : props.paginator.canFetchNewer.value;
});
const upButtonLoading = computed(() => {
return props.paginator.order.value === 'oldest' ? props.paginator.fetchingOlder.value : props.paginator.fetchingNewer.value;
});
function upButtonClick() {
if (props.paginator.order.value === 'oldest') {
props.paginator.fetchOlder();
} else {
props.paginator.fetchNewer();
}
}
const downButtonVisible = computed(() => {
return props.paginator.order.value === 'oldest' ? props.paginator.canFetchNewer.value : props.paginator.canFetchOlder.value;
});
const downButtonLoading = computed(() => {
return props.paginator.order.value === 'oldest' ? props.paginator.fetchingNewer.value : props.paginator.fetchingOlder.value;
});
function downButtonClick() {
if (props.paginator.order.value === 'oldest') {
props.paginator.fetchNewer();
} else {
props.paginator.fetchOlder();
}
}
defineSlots<{
empty: () => void;
default: (props: { items: UnwrapRef<T['items']> }) => void;