fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.7 KiB
3.7 KiB
category
| category |
|---|
| Utilities |
useOffsetPagination
Reactive offset pagination.
Usage
import { useOffsetPagination } from '@vueuse/core';
function fetchData({
currentPage,
currentPageSize,
}: {
currentPage: number;
currentPageSize: number;
}) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData;
});
}
const { currentPage, currentPageSize, pageCount, isFirstPage, isLastPage, prev, next } =
useOffsetPagination({
total: database.value.length,
page: 1,
pageSize: 10,
onPageChange: fetchData,
onPageSizeChange: fetchData,
});
Component Usage
<template>
<UseOffsetPagination
v-slot="{ currentPage, currentPageSize, next, prev, pageCount, isFirstPage, isLastPage }"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
>
<div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
<div opacity="50">total:</div>
<div>{{ database.length }}</div>
<div opacity="50">pageCount:</div>
<div>{{ pageCount }}</div>
<div opacity="50">currentPageSize:</div>
<div>{{ currentPageSize }}</div>
<div opacity="50">currentPage:</div>
<div>{{ currentPage }}</div>
<div opacity="50">isFirstPage:</div>
<div>{{ isFirstPage }}</div>
<div opacity="50">isLastPage:</div>
<div>{{ isLastPage }}</div>
</div>
<div>
<button :disabled="isFirstPage" @click="prev">prev</button>
<button :disabled="isLastPage" @click="next">next</button>
</div>
</UseOffsetPagination>
</template>
Component event supported props event callback and event listener.
event listener:
<template>
<UseOffsetPagination
v-slot="{ currentPage, currentPageSize, next, prev, pageCount, isFirstPage, isLastPage }"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
@page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
</template>
or props event callback:
<template>
<UseOffsetPagination
v-slot="{ currentPage, currentPageSize, next, prev, pageCount, isFirstPage, isLastPage }"
:total="database.length"
:on-page-change="fetchData"
:on-page-size-change="fetchData"
:on-page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
</template>
Type Declarations
export interface UseOffsetPaginationOptions {
/**
* Total number of items.
*/
total?: MaybeRefOrGetter<number>;
/**
* The number of items to display per page.
* @default 10
*/
pageSize?: MaybeRefOrGetter<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 declare function useOffsetPagination(
options: Omit<UseOffsetPaginationOptions, 'total'>,
): UseOffsetPaginationInfinityPageReturn;
export declare function useOffsetPagination(
options: UseOffsetPaginationOptions,
): UseOffsetPaginationReturn;