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

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

@ -1,34 +1,37 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching" />
<MkError v-else-if="error" @retry="init()"/> <MkError v-else-if="error" @retry="init()" />
<div v-else-if="empty" key="_empty_" class="empty"> <div v-else-if="empty" key="_empty_" class="empty">
<slot name="empty"> <slot name="empty">
<div class="_fullinfo"> <div class="_fullinfo">
<img src="/static-assets/badges/info.png" class="_ghost" alt="Error"/> <img src="/static-assets/badges/info.png" class="_ghost" alt="Error" />
<div>{{ i18n.ts.nothing }}</div> <div>{{ i18n.ts.nothing }}</div>
</div>
</slot>
</div>
<div v-else ref="rootEl">
<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">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else class="loading" />
</div>
<slot :items="items"></slot>
<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">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else class="loading" />
</div> </div>
</slot>
</div>
<div v-else ref="rootEl">
<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">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else class="loading"/>
</div> </div>
<slot :items="items"></slot> </transition>
<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">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else class="loading"/>
</div>
</div>
</transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -74,7 +77,7 @@ const emit = defineEmits<{
(ev: 'queue', count: number): void; (ev: 'queue', count: number): void;
}>(); }>();
type Item = { id: string; [another: string]: unknown; }; type Item = { id: string;[another: string]: unknown; };
const rootEl = ref<HTMLElement>(); const rootEl = ref<HTMLElement>();
const items = ref<Item[]>([]); const items = ref<Item[]>([]);
@ -112,7 +115,7 @@ const init = async (): Promise<void> => {
items.value = props.pagination.reversed ? [...res].reverse() : res; items.value = props.pagination.reversed ? [...res].reverse() : res;
more.value = false; more.value = false;
} }
if(props.externalItemArray) { if (props.externalItemArray) {
props.externalItemArray.value = items.value; props.externalItemArray.value = items.value;
} }
offset.value = res.length; offset.value = res.length;
@ -126,7 +129,7 @@ const init = async (): Promise<void> => {
const reload = (): void => { const reload = (): void => {
items.value = []; items.value = [];
if(props.externalItemArray) { if (props.externalItemArray) {
props.externalItemArray.value = []; props.externalItemArray.value = [];
} }
init(); init();
@ -193,7 +196,7 @@ const fetchMore = async (): Promise<void> => {
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 = false; more.value = false;
} }
if(props.externalItemArray) { if (props.externalItemArray) {
props.externalItemArray.value = items.value; props.externalItemArray.value = items.value;
} }
offset.value += res.length; offset.value += res.length;
@ -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 {
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 = false; more.value = false;
} }
if(props.externalItemArray) {
props.externalItemArray.value = items.value;
}
offset.value += res.length; offset.value += res.length;
moreFetching.value = false; moreFetching.value = false;
}, err => { }, err => {
@ -254,7 +260,7 @@ const prepend = (item: Item): void => {
//items.value = items.value.slice(-props.displayLimit); //items.value = items.value.slice(-props.displayLimit);
while (items.value.length >= props.displayLimit) { while (items.value.length >= props.displayLimit) {
items.value.shift(); items.value.shift();
if(props.externalItemArray) props.externalItemArray.value.shift(); if (props.externalItemArray) props.externalItemArray.value.shift();
} }
more.value = true; more.value = true;
} }
@ -262,13 +268,13 @@ const prepend = (item: Item): void => {
} }
} }
items.value.push(item); items.value.push(item);
if(props.externalItemArray) props.externalItemArray.value.push(item); if (props.externalItemArray) props.externalItemArray.value.push(item);
// TODO // TODO
} else { } else {
// 初回表示時はunshiftだけでOK // 初回表示時はunshiftだけでOK
if (!rootEl.value) { if (!rootEl.value) {
items.value.unshift(item); items.value.unshift(item);
if(props.externalItemArray) props.externalItemArray.value.unshift(item); if (props.externalItemArray) props.externalItemArray.value.unshift(item);
return; return;
} }
@ -277,7 +283,7 @@ const prepend = (item: Item): void => {
if (isTop) { if (isTop) {
// Prepend the item // Prepend the item
items.value.unshift(item); items.value.unshift(item);
if(props.externalItemArray) props.externalItemArray.value.unshift(item); if (props.externalItemArray) props.externalItemArray.value.unshift(item);
} else { } else {
queue.value.push(item); queue.value.push(item);
onScrollTop(rootEl.value, () => { onScrollTop(rootEl.value, () => {
@ -292,7 +298,7 @@ const prepend = (item: Item): void => {
const append = (item: Item): void => { const append = (item: Item): void => {
items.value.push(item); items.value.push(item);
if(props.externalItemArray) props.externalItemArray.value.push(item); if (props.externalItemArray) props.externalItemArray.value.push(item);
}; };
const removeItem = (finder: (item: Item) => boolean): boolean => { const removeItem = (finder: (item: Item) => boolean): boolean => {
@ -303,7 +309,7 @@ const removeItem = (finder: (item: Item) => boolean): boolean => {
} }
items.value.splice(i, 1); items.value.splice(i, 1);
if(props.externalItemArray) props.externalItemArray.value.splice(i, 1); if (props.externalItemArray) props.externalItemArray.value.splice(i, 1);
return true; return true;
}; };
@ -315,7 +321,7 @@ const updateItem = (id: Item['id'], replacer: (old: Item) => Item): boolean => {
} }
items.value[i] = replacer(items.value[i]); items.value[i] = replacer(items.value[i]);
if(props.externalItemArray) props.externalItemArray.value[i] = items.value[i]; if (props.externalItemArray) props.externalItemArray.value[i] = items.value[i];
return true; return true;
}; };
@ -356,13 +362,14 @@ 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;
} }
.cxiknjgy { .cxiknjgy {
> .button { >.button {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }