Pagination

src/components/pagination/pagination.vue

Navigation medium 1 uso

Componente de paginação custom que estende o vs-pagination do Vuesax com modo description (range de registros + seletor de itens/página). Suporta v-model, algoritmo de janela com ellipsis, cor customizável e input "ir para página".

Simples

Apenas botões prev/next e páginas numeradas. Layout centralizado. Variante padrão e único uso real no codebase — com :max="7" ao lado de uma ag-grid-vue.

Página 4 de 12 (com ellipsis)

Primeira página (prev desabilitado)

Última página (next desabilitado)

Poucas páginas (sem ellipsis, total ≤ max)

<pagination
  :max="7"
  class="mt-3"
  :total="ctsTotalPages"
  v-model="ctsCurrentPage"
/>

Com Descrição

Layout space-between: esquerda mostra range de registros + seletor de itens/página; direita mostra a navegação. @changeMaxItems emite o índice do item clicado — usar descriptionItems[index] para obter o valor.

Registros: 1 - 10 de 100 | Por página: 10 25 50

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<pagination
  v-model="currentPage"
  :total="totalPages"
  :description="true"
  :sizeArray="totalRecords"
  :maxItems="itemsPerPage"
  :descriptionItems="[10, 25, 50]"
  descriptionTitle="Registros"
  descriptionConnector="de"
  descriptionBody="Por página"
  @changeMaxItems="onChangePageSize"
/>

<!-- ATENÇÃO: @changeMaxItems emite ÍNDICE, não valor -->
<!-- methods: { onChangePageSize(index) { this.itemsPerPage = this.descriptionItems[index] } } -->

Com Input "Ir Para"

Prop :goto="true" adiciona um input numérico inline após os botões para navegar diretamente para uma página específica.

Ir para

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<pagination
  v-model="currentPage"
  :total="totalPages"
  :goto="true"
/>

Cores Customizadas

Prop color aceita tokens Vuesax ('success', 'danger', 'warning') ou hex. Aplica via CSS var --vs-color-pagination.

color="success"

color="danger"

<pagination v-model="currentPage" :total="totalPages" color="success" />
<pagination v-model="currentPage" :total="totalPages" color="danger" />
<pagination v-model="currentPage" :total="totalPages" color="#FF5E5E" />

API

<!-- :total = número de PÁGINAS (não de registros) -->
<!-- Para description: :sizeArray = total de registros -->
<pagination
  v-model="currentPage"
  :total="totalPages"
  :max="9"
  color="primary"
  :description="true"
  :sizeArray="totalRecords"
  :maxItems="itemsPerPage"
  :descriptionItems="[10, 25, 50]"
  descriptionTitle="Registros"
  descriptionConnector="de"
  descriptionBody="Por página"
  @change="onPageChange"
  @changeMaxItems="onChangePageSize"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`value`	Number	1	Sim	Página atual — v-model.
`total`	Number	—	Sim	Total de páginas (não de registros).
`max`	Number	9	—	Máximo de botões visíveis (inclui ellipsis).
`color`	String	`'primary'`	—	Cor dos elementos ativos. Token Vuesax ou hex/rgb.
`goto`	Boolean	—	—	Exibe input numérico "ir para página".
`description`	Boolean	false	—	Ativa modo com range de registros + seletor de itens/página.
`sizeArray`	Number	—	—	Total de registros. Necessário quando `description=true`.
`maxItems`	Number\|String	—	—	Itens por página atual. Usado para calcular minRows/maxRows.
`descriptionItems`	Array	`[]`	—	Opções de itens/página. Ex: `[10, 25, 50]`.
`descriptionTitle`	String	`'Registries'`	—	Label antes do range. Substituir por `'Registros'`.
`descriptionConnector`	String	`'of'`	—	Conector. Substituir por `'de'`.
`descriptionBody`	String	`'Pages'`	—	Label antes das opções. Substituir por `'Por página'`.
`prevIcon`	String	—	—	Ícone customizado para botão anterior.
`nextIcon`	String	—	—	Ícone customizado para botão próximo.
`iconPack`	String	`'material-icons'`	—	Pack de ícones para prev/next.

Eventos

Evento	Payload	Descrição
`@input`	Number	v-model. Página atual quando muda.
`@change`	Number	Emitido junto com `@input` quando a página muda.
`@changeMaxItems`	Number (índice)	Quando usuário clica em um item de `descriptionItems`. Emite o índice, não o valor — usar `descriptionItems[index]`.

⚠ Textos em inglês por default

Os defaults descriptionTitle='Registries', descriptionConnector='of' e descriptionBody='Pages' estão em inglês. Sempre sobrescrever quando usar description mode em PT-BR.

Onde é usado

src/views/customer-groups/CustomerCategoryForm.vue