Pagination

<template>
  <Pagination.Root :count="120" :default-page="4" aria-label="Labeled pages">
    <Pagination.Controls show-labels />
  </Pagination.Root>
</template>

<template>
  <Pagination.Root :count="120" :default-page="4" aria-label="Simple pages">
    <Pagination.Controls controls="simple" />
  </Pagination.Root>
</template>

<script setup>
import { DirectionProvider } from "@dicehub/kappa/components/direction-provider";
import { Pagination } from "@dicehub/kappa/components/pagination";
</script>

<template>
  <DirectionProvider locale="ar">
    <Pagination.Root :count="120" :default-page="4" aria-label="RTL pages">
      <Pagination.Controls page-label="رقم الصفحة" />
    </Pagination.Root>
  </DirectionProvider>
</template>

<script setup>
import { Pagination } from "@dicehub/kappa/components/pagination";

const getPageUrl = ({ page, pageSize }) => "/runs?page=" + page + "&pageSize=" + pageSize;
</script>

<template>
  <Pagination.Root
    :count="250"
    type="link"
    :get-page-url="getPageUrl"
    aria-label="Run history pages"
  >
    <ul>
      <li><Pagination.PrevTrigger as-child><a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg></a></Pagination.PrevTrigger></li>
      <Pagination.Context v-slot="pagination">
        <template v-for="(page, index) in pagination.pages" :key="page.type === 'page' ? page.value : 'ellipsis-' + index">
          <li v-if="page.type === 'page'">
            <Pagination.Item type="page" :value="page.value" as-child><a>{{ page.value }}</a></Pagination.Item>
          </li>
          <li v-else><Pagination.Ellipsis :index="index" /></li>
        </template>
      </Pagination.Context>
      <li><Pagination.NextTrigger as-child><a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg></a></Pagination.NextTrigger></li>
    </ul>
  </Pagination.Root>
</template>

<script setup>
import { Pagination } from "@dicehub/kappa/components/pagination";
import { ref } from "vue";

const page = ref(3);
</script>

<template>
  <Pagination.Root v-model:page="page" :count="80" aria-label="Jobs pages">
    <Pagination.Controls />
  </Pagination.Root>
  <output aria-live="polite">Page {{ page }}</output>
</template>

<template>
  <Pagination.Root :count="500" :sibling-count="2" aria-label="Large result set">
    <!-- Compose the same Context and navigation triggers as the usage example. -->
  </Pagination.Root>
</template>

<template>
  <Pagination.Root :count="80" :default-page="1" aria-label="Boundary states">
    <ul>
      <li><Pagination.FirstTrigger /></li>
      <li><Pagination.PrevTrigger /></li>
      <!-- Page items from Pagination.Context go here. -->
      <li><Pagination.NextTrigger /></li>
      <li><Pagination.LastTrigger /></li>
    </ul>
  </Pagination.Root>
</template>