MePagination

Componente de paginação com navegação por páginas, ellipsis automático e seletor de linhas por página.

Playground

Importação

<script>
import { MePagination } from '@/components/global/utils/export/index'
</script>

Uso Básico

O componente é controlado externamente: o pai mantém currentPage e atualiza via evento @page-change.

102050100

1 - 10 de 100

<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const rowsPerPage = ref(10)
</script>

<template>
  <MePagination
    :current-page="currentPage"
    :total-items="100"
    :rows-per-page="rowsPerPage"
    @page-change="currentPage = $event"
    @rows-per-page-change="rowsPerPage = $event"
  />
</template>

Sem Seletor de Linhas

Use show-rows-per-page-select="false" para exibir apenas os botões de navegação.

<MePagination
  :current-page="currentPage"
  :total-items="50"
  :show-rows-per-page-select="false"
  @page-change="currentPage = $event"
/>

Ellipsis Automático

Quando o total de páginas ultrapassa 7, o componente aplica ellipsis (...) automaticamente para condensar a barra de navegação.

102050100

1 - 10 de 500

<MePagination
  :current-page="currentPage"
  :total-items="500"
  :rows-per-page="rowsPerPage"
  @page-change="currentPage = $event"
  @rows-per-page-change="rowsPerPage = $event"
/>

Lógica do ellipsis

• Início (currentPage ≤ 3): [1, 2, 3, 4, 5, ..., N]
• Fim (currentPage ≥ N - 3): [1, ..., N-4, N-3, N-2, N-1, N]
• Meio: [1, ..., P-1, P, P+1, ..., N]

Os botões ... são desabilitados e não emitem page-change.

Opções de Linhas Customizadas

Controle quais opções aparecem no seletor via rows-per-page-options.

51530

1 - 5 de 200

<MePagination
  :current-page="currentPage"
  :total-items="200"
  :rows-per-page="rowsPerPage"
  :rows-per-page-options="[5, 15, 30]"
  @page-change="currentPage = $event"
  @rows-per-page-change="rowsPerPage = $event"
/>

API

Props

Prop	Tipo	Padrão	Descrição
current-page	number	1	Página atual (1-based). Controla o botão ativo e o cálculo do intervalo exibido.
total-items	number	0	Total de itens da lista. Usado para calcular o número de páginas.
rows-per-page	number	10	Número de linhas por página. Sincronizado com o select interno via watch.
rows-per-page-options	number[]	[10, 20, 50, 100]	Opções disponíveis no seletor de linhas por página.
show-rows-per-page-select	boolean	true	Exibe o bloco com seletor de linhas e contador de registros.

Eventos

Evento	Payload	Descrição
page-change	number	Emitido ao clicar em um botão de página válido. Payload é o número da página selecionada.
rows-per-page-change	number	Emitido ao alterar o seletor de linhas por página. Payload é o novo valor.

Acessibilidade

• Botões de página são elementos <button> nativos, acessíveis por teclado (Tab, Enter)
• Botões desabilitados (anterior na primeira página, próximo na última) recebem o atributo disabled
• Botões de ellipsis são desabilitados e não interagem com o teclado

Controle externo

O MePagination é um componente controlado: o pai é responsável por manter currentPage e atualizar seu valor ao receber o evento page-change. O componente não altera currentPage internamente.