Filtros rápidos

AlpopQuickFilters é um painel de filtros expansível com chips de filtros ativos. É desacoplado de i18n (todos os rótulos são props traduzíveis; veja Chaves de tradução) e, por padrão, do roteador: o host é dono da query e reage ao evento applied. Os campos vão no slot fields, que expõe a query de rascunho para os campos ligarem com v-model.

A sincronização com a URL é opcional via get-route-query/set-route-query: quando fornecidas, a query aplicada é espelhada na URL e lida de volta ao montar. O componente nunca toca no roteador diretamente: o host decide como ler/escrever a URL, então funciona com qualquer roteador (ou nenhum).

Filtros

Status

Selecione…AtivoInativo

Aplicado: Nenhum filtro

alpop-quick-filters(
  :definitions="[{ key: 'status', label: 'Status' }]",
  :default-query="() => ({ status: '' })",
  @applied="onApplied"
)
  template(#fields="{ query }")
    alpop-select-field(name="status", label="Status", v-model="query.status", :options="statuses")

Sincronização com a URL

Com get-route-query/set-route-query, a query aplicada é espelhada na URL e lida de volta ao montar, útil para filtros compartilháveis por link. O host passa as duas funções (tipicamente usando vue-router, mas pode ser qualquer coisa), por isso não há demo interativo aqui:

alpop-quick-filters(
  :definitions="definitions",
  :default-query="defaultQuery",
  :get-route-query="() => $route.query",
  :set-route-query="(query) => $router.replace({ query })",
  @applied="onApplied"
)
  template(#fields="{ query }")
    alpop-select-field(name="status", label="Status", v-model="query.status", :options="statuses")

Sem essas props (o padrão), o componente funciona normalmente sem tocar na URL, e nunca acessa $router/$route diretamente, então não depende de vue-router estar instalado.

Como funciona

• O host fornece defaultQuery (estado inicial) e, opcionalmente, emptyQuery (estado ao limpar). Internamente o componente mantém um rascunho (draftQuery) e a query aplicada.
• Ao clicar em Aplicar, o rascunho vira a query aplicada e o evento applied é emitido com uma cópia dela.
• Os chips de filtros ativos são derivados de definitions (rótulo e formatação). Remover um chip emite applied com aquele filtro zerado.

Props

Prop	Tipo	Padrão	Descrição
definitions	Array	[]	[{ key, label, hasValue?, formatValue? }]
defaultQuery	Function	() => ({})	Retorna o estado inicial da query
emptyQuery	Function	null	Retorna o estado ao limpar (se diferente)
defaultExpanded	Boolean	false	Inicia com o painel aberto
getRouteQuery	Function	null	Retorna a query atual da URL (opt-in, ver acima)
setRouteQuery	Function	null	Escreve a query aplicada na URL (opt-in, ver acima)
title	String	"Filtros"*	Título (*traduzível)
description	String	null	Subtítulo opcional
activeLabel	String	"ativos"*	Sufixo do contador de filtros (*traduzível)
activeFiltersTitle	String	"Filtros ativos"*	Título da área de chips (*traduzível)
applyLabel	String	"Aplicar"*	Rótulo do botão aplicar (*traduzível)
clearLabel	String	"Limpar"*	Rótulo do botão limpar (*traduzível)
showLabel	String	"Mostrar filtros"*	Rótulo ao expandir (*traduzível)
hideLabel	String	"Ocultar filtros"*	Rótulo ao recolher (*traduzível)

Eventos

Evento	Payload	Descrição
applied	query	Query aplicada (ao aplicar/limpar/remover)
initialized	query	Query inicial, emitida ao montar

Slots

Slot	Props	Descrição
fields	{ query }	Campos do filtro, ligados ao rascunho