Pagination

---
import Pagination from "../pagination.astro";
---

<div data-demo="pagination-default">
  <Pagination itemsTotal={120} itemsPerPage={10} />
  <p data-pagination-readout aria-live="polite" style="margin-top: 0.75rem;">
    On page 1
  </p>
</div>

<script>
  // The component is interactive out of the box (it self-syncs disabled state,
  // the summary, and the selects). It also emits `pindoba:change` so consumers
  // can react — here we reflect the current page into a readout.
  function boot() {
    const root = document.querySelector<HTMLElement>(
      '[data-demo="pagination-default"]',
    );
    if (!root) return;
    const readout = root.querySelector<HTMLElement>(
      "[data-pagination-readout]",
    );
    root.addEventListener("pindoba:change", (event) => {
      const detail = (event as CustomEvent).detail as {
        page: number;
        itemsPerPage: number;
      };
      if (readout) {
        readout.textContent = `On page ${detail.page + 1} (showing ${detail.itemsPerPage} per page)`;
      }
    });
  }

  boot();
  document.addEventListener("astro:page-load", boot);
</script>

import { useState } from "react";
import { Pagination } from "../Pagination";

export default function DefaultDemo() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  return (
    <Pagination
      itemsTotal={1000}
      itemsPerPage={itemsPerPage}
      page={page}
      onChangePage={(next) => setPage(next)}
      onChangeItemsPerPage={(next) => setItemsPerPage(next)}
    />
  );
}

<script lang="ts">
  import Pagination from "../pagination.svelte";

  let page = $state(0);
</script>

<Pagination itemsTotal={1000} itemsPerPage={10} bind:page />

<script setup lang="ts">
import { ref } from "vue";
import { Pagination } from "@pindoba/vue-pagination";

const page = ref(0);
const itemsPerPage = ref(10);
</script>

<template>
  <Pagination
    :itemsTotal="1000"
    :itemsPerPage="itemsPerPage"
    :page="page"
    :onChangePage="(next: number) => (page = next)"
    :onChangeItemsPerPage="(next: number) => (itemsPerPage = next)"
  />
</template>

---
import Pagination from "../pagination.astro";

// Unhiding a label turns the icon-only step buttons into labelled ones.
const labels = {
  first: { visuallyHidden: false },
  previous: { visuallyHidden: false },
  next: { visuallyHidden: false },
  last: { visuallyHidden: false },
};
---

<Pagination itemsTotal={100} itemsPerPage={10} labels={labels} />

import { useState } from "react";
import { Pagination } from "../Pagination";

export default function LabelsDemo() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  return (
    <Pagination
      itemsTotal={100}
      itemsPerPage={itemsPerPage}
      page={page}
      onChangePage={(next) => setPage(next)}
      onChangeItemsPerPage={(next) => setItemsPerPage(next)}
      labels={{
        first: { visuallyHidden: false },
        previous: { visuallyHidden: false },
        next: { visuallyHidden: false },
        last: { visuallyHidden: false },
      }}
    />
  );
}

<script lang="ts">
  import Pagination from "../pagination.svelte";

  let page = $state(0);
</script>

<Pagination
  itemsTotal={100}
  itemsPerPage={10}
  bind:page
  labels={{
    first: { visuallyHidden: false },
    previous: { visuallyHidden: false },
    next: { visuallyHidden: false },
    last: { visuallyHidden: false },
  }}
/>

<script setup lang="ts">
import { ref } from "vue";
import { Pagination } from "@pindoba/vue-pagination";

const page = ref(0);
const itemsPerPage = ref(10);

// Unhiding a label turns the icon-only step buttons into labelled ones.
const labels = {
  first: { visuallyHidden: false },
  previous: { visuallyHidden: false },
  next: { visuallyHidden: false },
  last: { visuallyHidden: false },
};
</script>

<template>
  <Pagination
    :itemsTotal="100"
    :itemsPerPage="itemsPerPage"
    :page="page"
    :onChangePage="(next: number) => (page = next)"
    :onChangeItemsPerPage="(next: number) => (itemsPerPage = next)"
    :labels="labels"
  />
</template>