Filtrar
Filtragem estruturada no ME usa dois componentes com papéis opostos: a Filter Bar exibe os critérios ativos na barra entre toolbar e tabela; o Filter Search guia a criação de novos critérios em um overlay.
Boas Práticas
A filtragem reduz o esforço de busca ao limitar os resultados a critérios relevantes. O estado dos filtros deve ser transparente e permanecer visível durante toda a navegação.
Filter Bar
Barra persistente entre a toolbar e o conteúdo. Nunca abre overlay — é sempre visível e reflete em tempo real os critérios ativos. Tem CRUD inline sobre os critérios: clicar num critério edita-o direto na barra; o Filter Search só adiciona novos.
LeadingSlot
Dois DropdownMenu fixos à esquerda. Restringem o escopo da busca (processo, período) sem criar critérios no Filter Bar.
CriterionArea
Área de scroll horizontal com os MeCriterionInput ativos. Cada critério exibe campo + operador + valor com botão × para remoção individual.
ActionButtonsArea
Fixo à direita: i-lucide-plus abre o Filter Search, i-lucide-save salva a combinação como favorito, i-lucide-trash limpa todos os critérios (ButtonError), e i-lucide-ellipsis-vertical abre as configurações da tabela.
É das configurações que sai Editar colunas: um seletor de duas listas (disponíveis ↔ exibidas) para escolher e reordenar quais colunas aparecem. A pessoa molda a tabela à decisão que está tomando — vê só o que importa pra tarefa, sem coluna sobrando.
Filter Search
CommandPaletteOverlay implementado com o CommandPalette do Nuxt UI. Unifica três intenções: busca direta em qualquer registro, aplicação de filtros salvos e construção de filtros em 3 passos (Critério → Operador → Valor).
Header
Campo de busca livre + FieldGroup com ações de contexto (⏎ aplicar · × fechar). Aceita texto para busca direta ou para localizar um critério pelo nome.
Slot Filters
Faixa de DropdownMenu para filtrar os próprios critérios disponíveis (por processo, período, módulo) antes de selecionar.
Body
Área principal scrollável. Busca unificada: valor direto de documento, item ou usuário (por ID, nome ou número); filtro salvo; critério para iniciar o fluxo de 3 passos (CommandPaletteItem por linha).
Formas de filtrar
Filtrar no ME não acontece num lugar só. Cada superfície atende uma intenção diferente, e elas são camadas independentes que se somam: o resultado é a lista que satisfaz a sidebar e a Filter Bar e a busca ativos ao mesmo tempo. A Filter Bar e o Filter Search (abaixo) são a forma estruturada; as demais convivem com elas.
Filter Bar
persistenteCritérios estruturados (campo · operador · valor) visíveis e editáveis na barra entre toolbar e tabela. Ficam até serem removidos.
Filter Search
overlayA entrada que adiciona um critério em 3 passos, busca um registro direto ou aplica um filtro salvo. Fecha ao confirmar.
Facetas da sidebar
recorteDimensões prontas num clique: checkbox com contagem, faixas (sliders), pastas em árvore (País/Estado/Cidade — a pasta abre numa lista de checkboxes com contagem) e por status. Listas longas truncam com «Ver mais». Recortam o conjunto sem montar critério.
Favoritos & filtros salvos
pessoalRecortes que o usuário fixa na sidebar — combinações reaplicáveis num clique, persistentes entre sessões.
Busca rápida
efêmeraCampo textual da toolbar para localizar um registro pelo termo. Não cria critério e é descartada ao sair.
Busca no menu
navegaçãoCampo "Busque neste menu" no topo da sidebar — filtra os itens do próprio menu (favoritos, gráficos, painéis, filtros salvos), não a lista. Escopo: só o menu lateral.
Escopo de contexto
universoDropdowns do LeadingSlot (processo, período) e o switcher (Meu catálogo ↔ Marketplace) restringem o universo antes de qualquer filtro.
Que superfície para cada intenção
Filter Bar
Base dos filtros no EPROC. Aqui ela aparece no contexto da ação de filtrar; a ficha do componente — anatomia, slots, estados e responsividade — vive em Componentes › Filter Bar.
Mesmo background da toolbar (guide-surface). Separada da tabela por border-b. Apenas a CriterionArea tem scroll horizontal quando excede a largura disponível.
LeadingSlot — dropdowns de contexto
Definição
- Dois DropdownMenu fixos à esquerda da barra — sempre visíveis
- Não são critérios — narrowam o escopo de busca sem criar MeCriterionInputs
- Valor selecionado substitui o label padrão (ex: "Pré-Pedido" em vez de "Todos processos")
Os dois slots
- Todos os processos — limita ao módulo/processo selecionado
- Todo período — limita por janela temporal; aceita atalhos de data
Critério
Um critério é uma regra de filtragem composta por três partes obrigatórias. O Campo define qual atributo do registro será avaliado. O Operador define a condição lógica aplicada. O Valor define o parâmetro de comparação. O Filter Search guia a composição nessa ordem, em 3 passos sequenciais.
MeCriterionInput
Representa um critério ativo na Filter Bar. Cada instância exibe de forma legível o que está sendo filtrado: o campo (ex.: "Aprovado por"), o operador (ex.: "=") e o valor selecionado — com badge +N quando há múltiplas seleções. Qualquer segmento é clicável e abre a edição inline na própria barra (sem reabrir o Filter Search). O botão × remove o critério diretamente, sem confirmação.
Variantes (por tipo de valor), tamanhos e estados do componente: ver Componentes › MeCriterionInput.
ActionButtonsArea — ações globais
Definição
- FieldGroup de 3 botões fixo à direita da barra
- Sempre visível, independente do número de critérios
- O botão Limpar é ButtonError — borda vermelha por ser ação destrutiva
Os 3 botões
- + — abre Filter Search para criar novo MeCriterionInput
- i-lucide-save — salva a combinação atual como favorito no sidebar
- i-lucide-trash — remove todos os critérios ativos (ButtonError)
Operadores disponíveis
Filter Search
A outra base dos filtros no EPROC. Aqui no contexto de criar um critério; a ficha do componente — overlay, base CommandPalette, estados e responsividade — vive em Componentes › Filter Search.
Overlay de 672 × 448 px sobre fundo semi-transparente. Header com busca + FieldGroup de ações, Slot Filters com 3 dropdowns, body com grupos Busca Recente e Critério, scrollbar vertical.
Zonas do overlay
filter-header (48px fixo)
InputNone com placeholder de busca livre. Aceita texto para busca direta ou para localizar um critério. FieldGroup trailing: ↵ confirma o passo atual, × fecha o overlay.
Slot Filters
3 DropdownMenu que restringem o escopo de busca (processo, período, módulo). Não criam MeCriterionInput na Filter Bar — apenas filtram o que aparece no body.
filter-body (flex-1, scrollável)
Área principal de busca. Cada linha é um CommandPaletteItem (ícone + label + chevron opcional). O conteúdo muda dinamicamente conforme o que o usuário digita:
Filtro anterior — caminho completo critério › operador › valor. Clicar reaplicar sem refazer o fluxo.
Busca direta anterior — número, ID ou nome buscado anteriormente. Navega diretamente para o registro.
Encontra documentos, itens ou usuários por ID, número ou nome. Clicar navega diretamente para o registro — sem criar um filtro.
Lista de campos filtrável por texto. Selecionar inicia o fluxo de 3 passos (Critério → Operador → Valor).
Fluxo de criação — 3 passos
Passo 1 — Critério
Escolhe o campo a filtrar na lista de critérios disponíveis.
Passo 2 — Operador
Escolhe a condição lógica. Header mostra breadcrumb do critério.
Passo 3 — Valor
Seleção e usuário: lista de checkboxes no overlay. Texto e número: o overlay fecha e o valor é digitado inline na Filter Bar.
Edição inline na Filter Bar
A Filter Bar tem CRUD completo sobre os critérios aplicados — tudo acontece inline, sem reabrir o Filter Search. Clicar em qualquer segmento de um critério ativo expande a edição direto na barra: trocar o campo, mudar o operador, editar o valor, ou remover. O Filter Search é usado apenas para adicionar novos critérios.
Digitando o valor (campos de texto / número)
O overlay fecha após o Passo 2. O chip mostra "Insira" e um input flutuante aparece logo abaixo da Filter Bar para receber o valor.
Editando critério existente — tudo inline na Filter Bar
Clicar no operador abre um dropdown direto na barra. O mesmo vale para campo e valor — cada segmento tem sua própria edição inline.
Quando a busca não encontra nenhum resultado, o body exibe mensagem contextual com os 2 botões de saída. O texto da descrição é dinâmico e repete o termo buscado.
Tipos de valor
O passo Valor adapta sua interface ao tipo do campo selecionado. Cada tipo tem uma forma de entrada diferente — sempre otimizada para o que faz sentido naquele contexto.
Lista de opções com checkboxes. Permite múltipla seleção — o critério exibe a primeira opção + badge +N quando há mais de uma escolha.
Atalhos de período pré-definidos eliminam a digitação manual. Período Específico abre um seletor de intervalo para datas exatas.
Campo de digitação livre. Usado para campos como nome, descrição ou código — o usuário digita qualquer valor e confirma com ↵.
Input numérico. Combinado com operadores como Maior que ou Menor que para filtros como quantidade mínima ou valor máximo.
Lista de usuários com avatar e busca por nome. Múltipla seleção — exibe o nome do primeiro + +N no critério.
Campos que existem ou não — como "Emergencial" ou "Urgente". O valor é implícito: os únicos operadores disponíveis são Está Preenchido e Está Vazio. Não há passo Valor.
Variantes
O filtro não tem o mesmo formato em todo lugar. Na listagem principal de um módulo, a Filter Bar com Filter Search é o padrão completo — critérios persistentes que ficam visíveis durante toda a navegação — e a sidebar oferece, em paralelo, recortes prontos por faceta. Em outros contextos, como dentro de um documento ou num painel lateral, o filtro é mais simples: uma busca direta, sem criar critérios permanentes.
Filtro pela sidebar (facetas)
Na index, a sidebar oferece recortes prontos por dimensão — checkbox com contagem, faixas (sliders), pastas em árvore (a pasta País/Estado/Cidade abre numa lista de checkboxes com contagem, com «Ver mais» quando há muitas opções) e por status — além de Favoritos e Filtros salvos, e o switcher de escopo no topo. Os filtros ativos aparecem na Filter Bar, acima da grid de cards, e o resultado exibido é a interseção do que está aplicado.
Ficha dos tipos de faceta e da sidebar em Estrutura de Index. O recorte persiste durante a navegação; Filtros salvos persistem entre sessões.
Filtro em linhas de documento
Em documentos com muitas linhas — como uma Ordem de Compra com dezenas de itens — o usuário precisa localizar rapidamente uma linha específica sem sair da tela. Aqui o filtro é local e temporário: funciona como uma busca direta dentro do documento.
UInput com i-lucide-search inline na toolbar, ao lado das ações da grid. Sem MeFilterBar — busca textual simples, local e descartada ao fechar o documento.
Filtro em modal de seleção
Quando o usuário precisa escolher um registro dentro de um modal — como selecionar um fornecedor, um produto ou um responsável — a busca acontece diretamente no campo do modal. Não há Filter Bar nem overlay adicional: o objetivo é localizar e confirmar a seleção com o mínimo de passos.
CommandPalette para listas longas com busca ativa. UInput com lista renderizada abaixo quando a seleção é simples. Prefira o CommandPalette quando a busca é o fluxo principal.
Filtro em painel lateral
Painéis laterais — como drawers e sidebars — frequentemente listam registros relacionados: documentos vinculados, histórico de aprovações, itens de uma categoria. Quando essa lista cresce, um campo de busca compacto no topo do painel resolve a navegação sem empilhar um novo overlay sobre outro.
UInput com size="sm" e leading icon de busca. Sem Filter Bar. A filtragem é local ao painel e não persiste entre sessões.
Feedback
Estados de feedback
Use para confirmar que o filtro foi salvo — curto, imediato e sem interromper o fluxo do usuário.
Ex: "Filtro salvo."
Use quando o filtro salvo deve ser imediatamente acessível — oferece atalho direto para o painel lateral sem navegar.
Ex: "Filtro salvo. Ver filtros →"
Quando a busca não encontra resultados, o CommandPalette exibe empty state contextual com 2 saídas obrigatórias.
Ex: "Não encontramos nenhuma correspondência exata"
Quando os critérios ativos não retornam nenhum registro, a listagem exibe um empty state com ação para limpar os filtros ou ajustar os critérios.
Diferente do empty state do overlay — aqui os filtros já foram aplicados e o problema está nos dados, não na busca.