> ## 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.

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# CategoryOptions

> Barra de controles mobile para ordenação, alternância de layout (mosaico/lista) e abertura de filtros.

Exibe os controles de usabilidade da página de categoria em mobile: dropdown de ordenação, toggle de layout (grade/lista) e botão para abrir o painel de filtros. Em desktop, esses controles geralmente ficam na sidebar.

## Uso

```vue theme={"system"}
<CategoryOptions
  :is-mosaic="isMosaicLayout"
  :show-sort="true"
  :show-filters="true"
  selected-order="relevance"
  @change="handleSortChange"
  @change-grid="handleGridChange"
/>
```

## Propriedades

| Propriedade     |    Tipo   | Obrigatória |  Valor padrão | Descrição                                                                                               |
| :-------------- | :-------: | :---------: | :-----------: | :------------------------------------------------------------------------------------------------------ |
| `isMosaic`      | `Boolean` |      ✅      |       —       | Estado atual do layout. `true` para grade (mosaico), `false` para lista.                                |
| `showSort`      | `Boolean` |      ✅      |       —       | Exibe ou oculta o dropdown de ordenação.                                                                |
| `showFilters`   | `Boolean` |      ✅      |       —       | Exibe ou oculta o botão de abertura dos filtros.                                                        |
| `selectedOrder` |  `String` |      ❌      | `'relevance'` | Ordenação atualmente ativa. Valores comuns: `'relevance'`, `'price_asc'`, `'price_desc'`, `'name_asc'`. |

## Eventos

| Evento        | Payload   | Descrição                                                                |
| :------------ | :-------- | :----------------------------------------------------------------------- |
| `change`      | `String`  | Emitido com o novo valor de ordenação ao alterar o select.               |
| `change-grid` | `Boolean` | Emitido com o novo estado do layout (`true` = mosaico, `false` = lista). |