refactor(client): use css modules
This commit is contained in:
parent
efbec444e8
commit
9a78bbf0f1
1 changed files with 22 additions and 18 deletions
|
@ -1,5 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
<Transition
|
||||||
|
:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
|
||||||
|
:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
|
||||||
|
:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
|
||||||
|
:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
|
||||||
|
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()"/>
|
||||||
|
@ -14,15 +20,15 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else ref="rootEl">
|
<div v-else ref="rootEl">
|
||||||
<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
|
<div v-show="pagination.reversed && more" key="_more_" class="_margin">
|
||||||
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
|
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :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"/>
|
||||||
</div>
|
</div>
|
||||||
<slot :items="items" :fetching="fetching || moreFetching"></slot>
|
<slot :items="items" :fetching="fetching || moreFetching"></slot>
|
||||||
<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
|
<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
|
||||||
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
|
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :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"/>
|
||||||
|
@ -95,7 +101,7 @@ const isBackTop = ref(false);
|
||||||
const empty = computed(() => items.value.length === 0);
|
const empty = computed(() => items.value.length === 0);
|
||||||
const error = ref(false);
|
const error = ref(false);
|
||||||
const {
|
const {
|
||||||
enableInfiniteScroll
|
enableInfiniteScroll,
|
||||||
} = defaultStore.reactiveState;
|
} = defaultStore.reactiveState;
|
||||||
|
|
||||||
const contentEl = $computed(() => props.pagination.pageEl || rootEl);
|
const contentEl = $computed(() => props.pagination.pageEl || rootEl);
|
||||||
|
@ -292,7 +298,7 @@ const prepend = (item: MisskeyEntity): void => {
|
||||||
|
|
||||||
function unshiftItems(newItems: MisskeyEntity[]) {
|
function unshiftItems(newItems: MisskeyEntity[]) {
|
||||||
const length = newItems.length + items.value.length;
|
const length = newItems.length + items.value.length;
|
||||||
items.value = [ ...newItems, ...items.value ].slice(0, props.displayLimit);
|
items.value = [...newItems, ...items.value].slice(0, props.displayLimit);
|
||||||
|
|
||||||
if (length >= props.displayLimit) more.value = true;
|
if (length >= props.displayLimit) more.value = true;
|
||||||
}
|
}
|
||||||
|
@ -331,7 +337,7 @@ onActivated(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
onDeactivated(() => {
|
onDeactivated(() => {
|
||||||
isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl?.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
|
isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
function toBottom() {
|
function toBottom() {
|
||||||
|
@ -372,20 +378,18 @@ defineExpose({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.fade-enter-active,
|
.transition_fade_enterActive,
|
||||||
.fade-leave-active {
|
.transition_fade_leaveActive {
|
||||||
transition: opacity 0.125s ease;
|
transition: opacity 0.125s ease;
|
||||||
}
|
}
|
||||||
.fade-enter-from,
|
.transition_fade_enterFrom,
|
||||||
.fade-leave-to {
|
.transition_fade_leaveTo {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cxiknjgy {
|
.more {
|
||||||
> .button {
|
margin-left: auto;
|
||||||
margin-left: auto;
|
margin-right: auto;
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue