Pagination

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-pagination> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-pagination.js';   // registers <aha-pagination> (+ <aha-icon>)
</script>

<!-- total + page-size (the page count is total ÷ page-size); ellipsis appears for long ranges -->
<aha-pagination id="pager" total="248" page-size="20" current="3"></aha-pagination>

<!-- pages="12" — pass a direct page count instead of total+page-size -->
<aha-pagination pages="12" current="3"></aha-pagination>

<!-- size="small" — the compact 24px scale for dense tables -->
<aha-pagination pages="12" current="3" size="small"></aha-pagination>

<!-- simple — prev · n / total · next, for tight widths -->
<aha-pagination pages="12" current="3" simple></aha-pagination>

<!-- disabled — the whole control -->
<aha-pagination pages="12" current="3" disabled></aha-pagination>

<script>
  // `current` reflects as it changes; each step emits a composed `change` event.
  document.getElementById('pager').addEventListener('change', (e) => console.log('page', e.detail.page));
</script>

import '@ahaslides-product/design/aha-pagination';   // registers <aha-pagination> (+ <aha-icon>)
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `change` event; React 19 can bind onChange directly.
function AhaPagination({ total, pageSize, pages, current, size, simple, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onChange?.(e.detail.page);
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return (
    <aha-pagination
      ref={ref}
      total={total}
      page-size={pageSize}
      pages={pages}
      current={current}
      size={size}            // 'default' | 'small'
      simple={simple ? '' : undefined}
      disabled={disabled ? '' : undefined}
    />
  );
}

// usage — total+page-size (or pass pages instead), size, simple, disabled
<AhaPagination total={248} pageSize={20} current={page} onChange={setPage} />
<AhaPagination pages={12} current={page} size="small" onChange={setPage} />
<AhaPagination pages={12} current={page} simple onChange={setPage} />

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-pagination';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const page = ref(3);
function onChange(e) { page.value = e.detail.page; }
</script>

<template>
  <!-- total + page-size (the page count is total ÷ page-size) -->
  <aha-pagination :total="248" :page-size="20" :current="page" @change="onChange" />

  <!-- pages="12" — a direct page count; size="small" | simple | disabled -->
  <aha-pagination :pages="12" :current="page" size="small" @change="onChange" />
  <aha-pagination :pages="12" :current="page" simple @change="onChange" />
  <aha-pagination :pages="12" :current="page" disabled @change="onChange" />
</template>