Pagination

#Basic usage

pagination/basic.vue

<script setup lang="ts">
import { Pagination } from "@bysages/vue";

function chevron(direction: "left" | "right") {
  return direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6";
}
</script>

<template>
  <Pagination.Root :count="5000" :page-size="10" :sibling-count="2">
    <Pagination.PrevTrigger aria-label="Previous page">
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        aria-hidden="true"
      >
        <path :d="chevron('left')" />
      </svg>
    </Pagination.PrevTrigger>
    <Pagination.Context v-slot="{ pages }">
      <template v-for="(page, index) in pages" :key="index">
        <Pagination.Ellipsis v-if="page.type === 'ellipsis'" :index="index">…</Pagination.Ellipsis>
        <Pagination.Item v-else :value="page.value">{{ page.value }}</Pagination.Item>
      </template>
    </Pagination.Context>
    <Pagination.NextTrigger aria-label="Next page">
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        aria-hidden="true"
      >
        <path :d="chevron('right')" />
      </svg>
    </Pagination.NextTrigger>
  </Pagination.Root>
</template>

#Props

#Ellipsis

Prop	Type	Default	Description
`index`	`number`		—

#FirstTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`type`	`"page"`		—
`value`	`number`		—

#LastTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#NextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#PrevTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder every page seal shares.
`count`	`number`		Total number of data items
`defaultPage`	`number`	`1`	The initial active page when rendered. Use when you don't need to control the active page of the pagination.
`defaultPageSize`	`number`	`10`	The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination.
`getPageUrl`	`(details: pagination.PageUrlDetails) => string`		Function to generate href attributes for pagination links. Only used when `type` is set to "link".
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }>`		The ids of the elements in the accordion. Useful for composition.
`page`	`number`		The controlled active page
`pageSize`	`number`		The controlled number of data items per page
`siblingCount`	`number`	`1`	Number of pages to show beside active page
`translations`	`pagination.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`type`	`'button' \| 'link'`	`"button"`	The type of the trigger element