f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
4.0 KiB
4.0 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