# paginacao-moderna

> Documentação do Componente de Paginação Moderna

Latest version **1.0.3** (published 2023-04-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install paginacao-moderna
pnpm add paginacao-moderna
yarn add paginacao-moderna
bun add paginacao-moderna
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-04-24 |
| First published | 2023-04-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | desenvolvimento-code |

## Links

- npm: https://www.npmjs.com/package/paginacao-moderna
- npm.io page: https://npm.io/package/paginacao-moderna

## Recent versions

- 1.0.3 (latest) — 2023-04-24
- 1.0.2 — 2023-04-24
- 1.0.1 — 2023-04-24
- 1.0.0 — 2023-04-24

## README

# **Paginação Moderna**

### **Sobre**

Componente usado para a paginação de uma listagem de produtos, contém próximo, anterior, primeira página e ultima página fixados.

![Paginação Moderna](http://www.codeblue.com.br/wap-docs/paginacao.png)

<br />

***

<br />

### **Dependências**

- **prod**

  - **Descrição:** Dados do produto (suporta somente a estrutura de dados recebida da API da Wap.store).

  - **Tipo:** `Object`

<br />

***

<br />

## **Instalação**

- Instale o app através do seu terminal

<br />

    npm i @wapstore/paginacao-morderna

<br />

- Valide se seu arquivo package.json possui a dependência

<br />

    "dependencies": {
      "@wapstore/paginacao-morderna": "^0.0.4"
    }

<br />

Agora a loja está apta para o uso da aplicação.

<br />

***

<br />

## **Uso**

O componente de Paginação Moderna pode ser inserido em qualquer lugar da pasta "components".
Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

<br />

***

<br />

## **Exemplo**

-Este é um exemplo da aplicação de um arquivo padrão para a **paginação de busca e departamento**:

    <template>
      
    </template>
    <script>
      ...
    </script>
    <style>
      ...
    </style>

<br />

***

<br />

## **Recursos**

### **Props**

| Prop | Descrição | Tipo |
|---|---|---|
| currentPage `0.0.4` | Página atual da listagem `(parseInt(this.$route.query.page)`. | - |
| productTotal `0.0.4` | Total de produtos (nas listagens, `response.data.info.total`). | `Number` |
| productPerPage `0.0.4` | Limite de produtos por página (nas listagens, `response.data.info.limit`). | `Number` |
| range `0.0.4` | Quantidade de elementos da paginação visivel desconsiderando as arrows. O range deve ser um número impar para garantir o balanceamento. | `Number` |

<br />

### **Slots**

| Slot | Descrição | Name | Exemplo |
|---|---|---|---|
| Ícone primeira página `0.0.4` | Campo para inserção do ícone do botão de primeira página. | `iconePrimeiraPagina` | `<paginacao><template #iconePrimeiraPagina>/*...*/</template></paginacao>` |
| Ícone página anterior `0.0.4` | Campo para inserção do ícone do botão de página anterior. | `iconePaginaAnterior` | `<paginacao><template #iconePaginaAnterior>/*...*/</template></paginacao>` |
| Ícone próxima página `0.0.4` | Campo para inserção do ícone do botão de próxima página. | `iconeProximaPagina` | `<paginacao><template #iconeProximaPagina>/*...*/</template></paginacao>` |
| Ícone última página `0.0.4` | Campo para inserção do ícone do botão de última página. | `iconeUltimaPagina` | `<paginacao><template #iconeUltimaPagina>/*...*/</template></paginacao>` |
| Ícone de primeira página extra `0.0.4` | Campo para inserção de um ícone extra, esse icone por padrão não possui eventos. | `iconePaginaDecoracaoFirst` | `<paginacao><template #iconePaginaDecoracaoFirst>/*...*/</template></paginacao>` |
| Ícone de primeira página extra `0.0.4` | Campo para inserção de um ícone extra, esse icone por padrão não possui eventos. | `iconePaginaDecoracaoLast` | `<paginacao><template #iconePaginaDecoracaoLast>/*...*/</template></paginacao>` |

<br />

***

<br />

### **Eventos**

| Evento | Descrição | Argumentos |
|---|---|---|
| changePage `0.0.4` | Uma função de callback que é chamada em toda alteração de página. | **currentPagina** Descrição: Número da página atual. Tipo: `Number` |
| initPagination `0.0.4` | Primeira renderização do componente no DOM. | **element** Descrição: Referencia do HTML do slide da vitrine no DOM. Tipo: `HTMLDivElement` |
| updatePagination `0.0.4` | Toda atualização do componente no DOM. | **element** Descrição: Referencia do HTML do slide da vitrine no DOM. Tipo: `HTMLDivElement` |

<br />

***

<br />

## Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.

---
_Source: https://npm.io/package/paginacao-moderna · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._