forked from vueuse/vueuse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
114 lines (92 loc) · 2.76 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import type { ComputedRef, Ref, UnwrapNestedRefs } from 'vue-demi'
import { computed, isRef, reactive, unref, watch } from 'vue-demi'
import { noop, syncRef } from '@vueuse/shared'
import type { MaybeRef } from '@vueuse/shared'
import { useClamp } from '../../math/useClamp'
export interface UseOffsetPaginationOptions {
/**
* Total number of items.
*/
total?: MaybeRef<number>
/**
* The number of items to display per page.
* @default 10
*/
pageSize?: MaybeRef<number>
/**
* The current page number.
* @default 1
*/
page?: MaybeRef<number>
/**
* Callback when the `page` change.
*/
onPageChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
/**
* Callback when the `pageSize` change.
*/
onPageSizeChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
/**
* Callback when the `pageCount` change.
*/
onPageCountChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown
}
export interface UseOffsetPaginationReturn {
currentPage: Ref<number>
currentPageSize: Ref<number>
pageCount: ComputedRef<number>
isFirstPage: ComputedRef<boolean>
isLastPage: ComputedRef<boolean>
prev: () => void
next: () => void
}
export type UseOffsetPaginationInfinityPageReturn = Omit<UseOffsetPaginationReturn, 'isLastPage'>
export function useOffsetPagination(options: Omit<UseOffsetPaginationOptions, 'total'>): UseOffsetPaginationInfinityPageReturn
export function useOffsetPagination(options: UseOffsetPaginationOptions): UseOffsetPaginationReturn
export function useOffsetPagination(options: UseOffsetPaginationOptions): UseOffsetPaginationReturn {
const {
total = Infinity,
pageSize = 10,
page = 1,
onPageChange = noop,
onPageSizeChange = noop,
onPageCountChange = noop,
} = options
const currentPageSize = useClamp(pageSize, 1, Infinity)
const pageCount = computed(() => Math.max(
1,
Math.ceil((unref(total)) / unref(currentPageSize)),
))
const currentPage = useClamp(page, 1, pageCount)
const isFirstPage = computed(() => currentPage.value === 1)
const isLastPage = computed(() => currentPage.value === pageCount.value)
if (isRef(page))
syncRef(page, currentPage)
if (isRef(pageSize))
syncRef(pageSize, currentPageSize)
function prev() {
currentPage.value--
}
function next() {
currentPage.value++
}
const returnValue = {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
}
watch(currentPage, () => {
onPageChange(reactive(returnValue))
})
watch(currentPageSize, () => {
onPageSizeChange(reactive(returnValue))
})
watch(pageCount, () => {
onPageCountChange(reactive(returnValue))
})
return returnValue
}