QuickActionBar

O QuickActionBar é um componente de busca e ação rápida que permite ao usuário pesquisar informações em diferentes áreas do sistema, como usuários cadastrados, métricas e palavras-chave. Além da busca, ele oferece a capacidade de tomar ações, funcionando como uma barra de ação rápida que retorna as opções disponíveis, possibilitando o acesso em situações nas quais essas ações podem ser realizadas.

---

Quando usar

• Quando o usuário precisar de uma busca completa e integrada que abranja diversas áreas e informações do sistema;
• Quando é importante apresentar rapidamente resultados consolidados de várias origens sem que o usuário precise navegar entre diferentes seções;
• Para simplificar o acesso a registros específicos, independentemente de onde estejam no sistema, como pessoas, dados analíticos, documentos e palavras-chave;
• Quando ações rápidas, como a criação de novos registros ou métricas, puderem estar acessíveis diretamente da barra de busca.

Quando não usar

• Quando o usuário necessita de um filtro ou busca específica dentro de uma seção restrita do sistema. Nesse caso, considere usar filtros ou campos de busca locais;
• Para ações que requerem pouca atenção do usuário, como buscas triviais que não exigem visibilidade em tela cheia.

---

Uso

<CdsQuickActionBar
	v-bind="args"
	v-model="showSearchBar"
	:groups="filteredItems"
	:recents="recents"
	@search="filterItems"
	@onItemClick="console.log('Item clicado: ', $event)"
	@onSeeMoreClick="console.log('Ver mais clicado: ', $event)"
	@onRemoveRecent="console.log('Item removido:', $event)"
	@onEnterPress="console.log('Enter clicado:', $event)"
/>

---

Preview

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* modelValue (required)	boolean	false	--	Controla a exibição da barra de busca.
* loading (required)	boolean	false	--	Informa ao componente se a requisição ainda está em curso ou já foi finalizada.
* groups (required)	array	[]	--	Resultados da busca a serem mostrados. Os objetos da lista devem ter, obrigatoriamente, uma chave "category" e uma lista "results". Os itens de results devem ter, obrigatoriamente, uma key chamada "title".
recents	array	[]	--	Itens de buscas recentes a serem mostrados no estado inicial do componente. Os itens devem ter, obrigatoriamente, uma key chamada "title".
numRecents	number	5	--	Define a quantidade máxima de itens recentes que serão exibidos. O mínimo de itens é 1 e o máximo é 10.
numResults	number	5	--	Define a quantidade máxima de itens de busca que serão exibidos.
placeholder	string	'Buscar por nome, CPF ou CNS...'	--	Define o texto que será exibido placeholder do componente.
initialStateText	string	'Ainda não há nada aqui. Experimente fazer uma busca!'	--	Define o texto que será exibido no estado inicial quando não houver itens recentes.
emptyStateText	string	'Nenhum resultado encontrado'	--	Define o texto que será exibido quando não houver resultados.

Eventos

Nome	Descrição
@update:modelValue	Evento que indica se a variável de controle de exibição foi alterada.
@search	Evento disparado quando há uma pausa na digitação e retorna o texto da busca.
@onItemClick	Evento que indica qual item da lista de resultados foi clicado.
@onSeeMoreClick	Evento que indica que o botão de "Ver mais" foi clicado.
@close	Evento que indica que a barra de busca foi fechada.
@onRemoveRecent	Evento que retorna o item a ser removido.
@onEnterPress	Evento que indica se a tecla enter foi pressionada no campo de busca.

Slots

Nome	Descrição
#recent-item	Slot usado para renderizar itens personalizados para os itens recentes. Dados do item podem ser acessados através da propriedade `recentItem`.
#result-item	Slot usado para renderizar itens personalizados para os resultados da busca. Dados do item podem ser acessados através da propriedade `item`.
#footer	Slot usado para renderizar o footer da barra de busca.

---