zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: common paginator component (#9)

Browse source
This commit is contained in:
patak 2022-11-16 17:11:08 +01:00 • committed by GitHub
parent 7969b53747
commit e61f909f31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/account/AccountPaginator.client.vue
View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Account[]>
}>()
const { items: accounts, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: accounts, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<template v-for="account of accounts" :key="account.id">
<AccountCard :account="account" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
<CommonPaginator :state="state">
<template v-for="account of accounts" :key="account.id">
<AccountCard :account="account" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>

17
components/common/CommonPaginator.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
import type { PaginatorState } from '~/types'
defineProps<{
state: PaginatorState
}>()
</script>
<template>
<slot />
<div v-if="state === 'loading'" p5 color-gray-5>
Loading...
</div>
<div v-if="state === 'done'" p5 color-gray>
End of list
</div>
</template>

18
components/notification/NotificationPaginator.client.vue
View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Notification[]>
}>()
const { items: notifications, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: notifications, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<template v-for="notification of notifications" :key="notification.id">
<NotificationCard :notification="notification" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
<CommonPaginator :state="state">
<template v-for="notification of notifications" :key="notification.id">
<NotificationCard :notification="notification" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>

18
components/timeline/TimelinePaginator.client.vue
View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Status[]>
}>()
const { items: statuses, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: statuses, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<template v-for="status of statuses" :key="status.id">
<StatusCard :status="status" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
<CommonPaginator :state="state">
<template v-for="status of statuses" :key="status.id">
<StatusCard :status="status" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>