natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: reformat MkPagination

This commit is contained in:
cutestnekoaqua 2023-01-18 23:54:59 +01:00
parent 86bb42b529
commit f85f072b4b
No known key found for this signature in database
GPG Key ID: 6BF0964A5069C1E0
1 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/client/src/components/MkPagination.vue
View File

@ -15,14 +15,17 @@
<div v-else ref="rootEl"> <div v-else ref="rootEl">
<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap"> <div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead"> <MkButton v-if="!moreFetching" class="button" :disabled="moreFetching"
:style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </MkButton>
<MkLoading v-else class="loading" /> <MkLoading v-else class="loading" />
</div> </div>
<slot :items="items"></slot> <slot :items="items"></slot>
<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap"> <div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> <MkButton v-if="!moreFetching"
v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button"
:disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </MkButton>
<MkLoading v-else class="loading" /> <MkLoading v-else class="loading" />
@ -220,15 +223,18 @@ const fetchMoreAhead = async (): Promise<void> => {
}).then(res => { }).then(res => {
if (res.length > SECOND_FETCH_LIMIT) { if (res.length > SECOND_FETCH_LIMIT) {
res.pop(); res.pop();
if (props.externalItemArray) {
props.externalItemArray.value = items.value;
}
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res); items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
more.value = true; more.value = true;
} else { } else {
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
more.value = false;
}
if (props.externalItemArray) { if (props.externalItemArray) {
props.externalItemArray.value = items.value; props.externalItemArray.value = items.value;
} }
items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
more.value = false;
}
offset.value += res.length; offset.value += res.length;
moreFetching.value = false; moreFetching.value = false;
}, err => { }, err => {
@ -356,6 +362,7 @@ defineExpose({
.fade-leave-active { .fade-leave-active {
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;