Pagination

Navegação entre páginas de uma lista ou tabela.

Regras de design: strip contínuo sem gap (bordas colapsadas), borda preta 2px sempre, célula ativa em preto/branco, hover em azul, fonte mono.

Uso

<script setup lang="ts">
import { Pagination } from '@halfbyte-labs/maka'
import { ref } from 'vue'

const pagina = ref(1)
</script>

<template>
  <Pagination v-model="pagina" :total="10" />
</template>

---

Tamanhos

Três tamanhos: sm (32px), md (40px, padrão) e lg (52px). Altura, largura e fonte escalam juntos.

<Pagination v-model="pagina" :total="10" size="sm" />
<Pagination v-model="pagina" :total="10" size="md" />
<Pagination v-model="pagina" :total="10" size="lg" />

---

Variantes

Quatro variantes visuais para diferentes contextos e fundos.

<Pagination v-model="pagina" :total="10" variant="default" />
<Pagination v-model="pagina" :total="10" variant="ghost"  />
<Pagination v-model="pagina" :total="10" variant="blue"   />

Variante	Borda	Célula ativa
default	2px #111114	Preto + branco
ghost	1px cinza	Preto + branco
blue	2px #111114	Azul + branco
compact	—	Ver seção Compacto

---

Truncamento

Com muitas páginas, o algoritmo exibe os limites (boundary) e os vizinhos da página atual (siblings) — o restante vira ….

siblings

siblings controla quantas páginas aparecem de cada lado da página ativa. Padrão: 1.

<Pagination v-model="pagina" :total="20" :siblings="1" />
<Pagination v-model="pagina" :total="20" :siblings="2" />
<Pagination v-model="pagina" :total="20" :siblings="3" />

boundary

boundary controla quantas páginas sempre aparecem nas extremidades (início e fim). Padrão: 1.

<Pagination v-model="pagina" :total="20" :boundary="1" />
<Pagination v-model="pagina" :total="20" :boundary="2" />

Sem truncamento

Quando o total de páginas cabe dentro do cálculo 2×siblings + 2×boundary + 1, todos os números aparecem sem ….

---

Navegação anterior / próxima

Os botões Anterior e Próxima mostram texto + ícone por padrão. Use icon-only para exibir apenas o chevron.

<Pagination v-model="pagina" :total="10" />
<Pagination v-model="pagina" :total="10" :icon-only="true" />
<Pagination v-model="pagina" :total="10" prev-label="Voltar" next-label="Avançar" />

Os botões de navegação ficam disabled automaticamente na primeira e última página.

---

Com botões first / last

show-first-last adiciona botões de salto direto para a primeira e última página.

<Pagination v-model="pagina" :total="20" :show-first-last="true" />

---

Compacto

variant="compact" substitui os números por [‹] [pág X/Y] [›]. O campo do meio é um input — clique e digite para saltar para qualquer página.

<Pagination v-model="pagina" :total="100" variant="compact" size="sm" />
<Pagination v-model="pagina" :total="100" variant="compact" />
<Pagination v-model="pagina" :total="100" variant="compact" size="lg" />

Ideal para tabelas com muitas páginas onde o espaço horizontal é limitado. O campo aceita Enter e blur para confirmar o salto.

---

Combinações de tamanho e variante

---

Props

Prop	Tipo	Padrão	Descrição
modelValue	number	—	Obrigatório. Página atual (base 1)
total	number	—	Obrigatório. Total de páginas
size	'sm' | 'md' | 'lg'	'md'	Tamanho das células
variant	'default' | 'ghost' | 'blue' | 'compact'	'default'	Estilo visual
siblings	number	1	Páginas exibidas de cada lado da ativa
boundary	number	1	Páginas sempre visíveis nas extremidades
showFirstLast	boolean	false	Adiciona botões de salto para primeira e última página
prevLabel	string	'Anterior'	Label do botão anterior
nextLabel	string	'Próxima'	Label do botão próxima
iconOnly	boolean	false	Oculta o texto nos botões de navegação
aria-label	string	'Paginação'	Label acessível do <nav>
pageLabel	(p: number, isActive: boolean) => string	—	Sobrescreve o aria-label de cada página

Events

Evento	Payload	Descrição
update:modelValue	number	Emitido ao mudar de página. O valor é sempre entre 1 e total

---

Acessibilidade

• O componente renderiza um <nav> com aria-label (padrão: 'Paginação').
• A página ativa usa <span aria-current="page"> — nunca um <button>.
• Os … são aria-hidden="true" — não aparecem para leitores de tela.
• Os botões de navegação ficam com disabled nativo nas extremidades.
• Use pageLabel para sobrescrever os labels das páginas quando o contexto exigir (ex: "Página 3 de 20").
• O compacto tem aria-label no input indicando a página atual e o total.