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

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