Filter Search
O overlay de busca e composição de filtros (base CommandPalette) — busca direta, filtros salvos e construção de critério em 3 passos.
groups/items/children). Enquanto não internaliza, as props e tipos canônicos são os do UCommandPalette. Não confundir com a Filter Bar — a barra é persistente; o Filter Search é o overlay que ela abre.Filtros salvos
Montar critério
O Filter Search é o overlay que abre a partir da Filter Bar (pelo + ou pela busca) para adicionar critérios — editar um critério já aplicado acontece inline na barra, sem este overlay. Unifica três intenções num só campo:
- Busca direta — encontrar um registro em qualquer lista digitando o termo.
- Filtros salvos — aplicar uma combinação pronta num clique.
- Construir um critério — em três passos: Critério → Operador → Valor.
Anatomia
| Zona | O que contém |
|---|---|
| Campo de busca | "Busca direta ou encontre um filtro", com Enter para confirmar e × para fechar. Ícone de busca à esquerda. |
| Filtros salvos | Chips de combinações prontas (ex.: "Pré-Pedido", "Meus processos", "Em 22/03/2026") logo abaixo do campo. |
| Lista de Critério | Os campos disponíveis (ex.: Aprovado por, Categoria, Criado por), cada um com chevron que faz o drill-down para operador e valor. |
Base CommandPalette
A árvore groups → items → children modela os três passos do critério, e a busca fuzzy (Fuse.js) acha campo ou registro por texto sem rolar a lista inteira.
| Recurso do CommandPalette | Papel no Filter Search |
|---|---|
Busca fuzzy (fuse) + icon de busca | Busca direta de registro e localização do campo por nome. |
groups / items | Os campos disponíveis (grupo "Critério") e os filtros salvos. |
children + botão back | Drill-down Critério → Operador → Valor; voltar um passo sem fechar. |
multiple | Valores múltiplos num mesmo critério (ex.: Status em N estados). |
loading | Opções de valor assíncronas (lista que vem da API). |
close | Fecha o overlay (× ou Esc). |
Responsividade
Por ser overlay, ancora-se no contexto e segue a régua de Foundations › Breakpoints:
| Largura | Comportamento |
|---|---|
| Desktop · ≥ 1024px | Overlay ancorado abaixo da barra (popover/modal centrado), largura contida. |
| Tablet · 640–1024px | Igual ao desktop, largura adaptada. |
| Mobile · < 640px | Abre como bottom-sheet ocupando a largura da tela; aplicar fecha a folha e devolve ao contexto. |
No código
Parte do <UCommandPalette> do Nuxt UI; a ficha técnica (props/slots/emits) está em ui.nuxt.com/docs/components/command-palette. A Filter Bar dispara o overlay e recebe de volta o critério composto.
Acessibilidade
Como overlay, precisa de foco gerenciado: ao abrir, o foco vai para o campo de busca; ao fechar (× ou Esc), volta ao gatilho na barra. O drill-down precisa do botão voltar (back) audível e navegação por teclado (setas + Enter). Anuncie o passo atual (Critério/Operador/Valor) para leitores de tela.