> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Filters

> Container que agrupa e exibe todos os filtros disponíveis na página de categoria (preço, marca, categoria, promoções e atributos customizados).

Componente container que renderiza automaticamente os filtros disponíveis para a categoria ou busca atual: faixa de preço, marcas, categorias, promoções e atributos customizados (como cor, tamanho, etc.). Os filtros ativos são aplicados via Vuex.

## Uso

```vue theme={"system"}
<Filters
  :show-brand="true"
  :show-price="true"
  :show-categories="true"
  :show-promotions="false"
  active-category="camisetas"
  :products-per-page="24"
/>
```

## Propriedades

| Propriedade       |        Tipo        | Obrigatória | Valor padrão | Descrição                                                                               |
| :---------------- | :----------------: | :---------: | :----------: | :-------------------------------------------------------------------------------------- |
| `showBrand`       |      `Boolean`     |      ❌      |    `true`    | Exibe o filtro de marcas.                                                               |
| `showPrice`       |      `Boolean`     |      ❌      |    `true`    | Exibe o filtro de faixa de preço.                                                       |
| `showCategories`  |      `Boolean`     |      ❌      |    `true`    | Exibe o filtro de categorias.                                                           |
| `showPromotions`  |      `Boolean`     |      ❌      |    `false`   | Exibe o filtro de promoções.                                                            |
| `activeCategory`  |      `String`      |      ❌      |     `''`     | Slug da categoria atualmente ativa (usado para pré-selecionar no filtro de categorias). |
| `activePromotion` |      `String`      |      ❌      |     `''`     | Slug da promoção atualmente ativa.                                                      |
| `productsPerPage` | `Number \| String` |      ❌      |     `10`     | Número de produtos por página (afeta a paginação após filtrar).                         |

## Comportamentos automáticos

* Os filtros disponíveis são carregados automaticamente a partir dos dados da busca/categoria via Vuex.
* Ao selecionar um filtro, os produtos da página são atualizados automaticamente sem recarregar a página.
* Atributos customizados (variações do produto como "Cor", "Tamanho") são exibidos automaticamente quando disponíveis.