VxAutoSuggest

src/components/vx-auto-suggest/VxAutoSuggest.vue

Form Medium 1 uso

Campo de busca com dropdown de sugestões agrupadas. Suporta múltiplos grupos de resultados, navegação por teclado (↑↓ Enter Esc), seleção por mouse, limite de resultados e slots dinâmicos por grupo para renderização customizada de cada item. Utilizado exclusivamente no Bookmarks da navbar.

Typos no código fonte: initalData (não initialData) e inputClassses (3 s's). Usar exatamente como documentado. @selected retorna { [groupName]: suggestion }, não o item diretamente.

Busca com Auto-Foco

Uso padrão na navbar — autoFocus=true foca o input ao montar. hideGroupTitle oculta o cabeçalho de grupo. Slot dinâmico v-slot:pages renderiza cada item com ícone Feather + título + estrela de bookmark.

Fechado

Aberto com resultados

<vx-auto-suggest
  ref="bookmarkAutoSuggest"
  :autoFocus="true"
  :data="navbarSearchAndPinList"
  :searchLimit="5"
  placeholder="Explore Vuexy..."
  inputClassses="w-full"
  hideGroupTitle
  @input="hnd_search_query_update"
  @selected="selected"
>
  <template v-slot:pages="{ suggestion }">
    <div class="flex items-center leading-none py-1">
      <feather-icon :icon="suggestion.icon" svgClasses="h-5 w-5" class="mr-4" />
      <span class="mt-1">{{ suggestion.title }}</span>
    </div>
  </template>
</vx-auto-suggest>

Com Dados Iniciais (initalData)

initalData (typo intencional — sem segundo 'i') define itens exibidos quando o input está vazio, como starred pages. Mesmo formato do prop data: { groupName: [...] }.

<vx-auto-suggest
  :data="navbarSearchAndPinList"
  :initalData="{ pages: starredPagesLimited.concat(starredPagesMore) }"
  :searchLimit="5"
  placeholder="Explore Vuexy..."
  @selected="selected"
>
  <template v-slot:pages="{ suggestion }">
    <div class="flex items-center leading-none py-1">
      <feather-icon :icon="suggestion.icon" svgClasses="h-5 w-5" class="mr-4" />
      <span class="mt-1">{{ suggestion.title }}</span>
    </div>
  </template>
</vx-auto-suggest>

Multi-grupo com Header Customizado

Múltiplos grupos no prop data. Slot group personaliza o cabeçalho de cada seção. Um slot dinâmico por grupo. Sem uso real — o admin usa apenas um grupo (pages).

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-auto-suggest
  :data="{ pedidos: { key: 'number', data: pedidosList }, clientes: { key: 'name', data: clientesList } }"
  placeholder="Buscar..."
  @selected="onSelect"
>
  <template v-slot:group="{ group_name }">
    <p class="font-semibold text-primary text-sm uppercase">{{ group_name }}</p>
  </template>

  <template v-slot:pedidos="{ suggestion }">
    <span>#{{ suggestion.number }} — {{ suggestion.status }}</span>
  </template>

  <template v-slot:clientes="{ suggestion }">
    <span>{{ suggestion.name }}</span>
  </template>
</vx-auto-suggest>

Sem Resultados (slot noResult)

Slot noResult personaliza a mensagem quando o grupo não retorna resultados. Recebe group_name para mensagens contextuais.

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-auto-suggest
  :data="{ clientes: { key: 'name', data: clientesList } }"
  placeholder="Buscar clientes..."
  @selected="onSelectCliente"
>
  <template v-slot:clientes="{ suggestion }">
    <span>{{ suggestion.name }}</span>
  </template>

  <template v-slot:noResult="{ group_name }">
    <p class="text-sm text-grey py-3 px-4">Nenhum {{ group_name }} encontrado.</p>
  </template>
</vx-auto-suggest>

API

<!-- data: { groupName: { key: 'fieldToSearch', data: [...] } } — estrutura obrigatória -->
<!-- Slot dinâmico: nome = chave do grupo. Recebe 'suggestion' (o objeto do item) -->
<vx-auto-suggest
  :data="{ pages: { key: 'title', data: pagesList } }"
  :initalData="{ pages: starredPages }"
  :searchLimit="5"
  :autoFocus="true"
  :hideGroupTitle="false"
  placeholder="Buscar..."
  inputClassses="w-full"
  @input="onQueryChange"
  @selected="onSelect"
  @closeSearchbar="onClose"
>
  <template v-slot:pages="{ suggestion }">
    <span>{{ suggestion.title }}</span>
  </template>
</vx-auto-suggest>

Props

Nome	Tipo	Default	Obrig.	Descrição
`data`	Object	—	Sim	Dados para busca. `{ groupName: { key: 'campo', data: [...] } }`. Cada grupo gera uma seção e requer slot com o mesmo nome.
`placeholder`	String	`"Search.."`	—	Placeholder do input.
`initalData`	Object	`{}`	—	Dados exibidos com input vazio (starred/pinned). Typo intencional: `initalData` (sem segundo 'i').
`inputClassses`	String\|Object\|Array	`null`	—	Classes CSS extras para o vs-input. Typo intencional: `inputClassses` (3 s's).
`autoFocus`	Boolean	`false`	—	Foca o input ao montar. Quando muda para `false`, limpa o query.
`searchLimit`	Number	`4`	—	Máximo de sugestões por grupo. Resultados `startsWith` aparecem antes dos `indexOf`.
`hideGroupTitle`	Boolean	`false`	—	Oculta o cabeçalho de grupo. Útil com um único grupo.
`showPinned`	Boolean	`false`	—	Declarada mas sem implementação — reservada para uso futuro.

Slots

Nome	Scope	Descrição
`group`	`{ group_name }`	Header de cada grupo (quando `hideGroupTitle=false`).
`[groupName]`	`{ suggestion }`	Slot dinâmico — nome = chave do grupo no `data`. Renderiza cada item. Obrigatório por grupo.
`noResult`	`{ group_name }`	Exibido quando grupo sem resultados. Default: "No Results Found."

Eventos

Nome	Payload	Descrição
`input`	String	A cada caractere digitado — valor atual do query.
`selected`	`{ [groupName]: suggestion }`	Ao selecionar um item (click ou Enter). Payload: objeto com a chave do grupo e o item selecionado.
`closeSearchbar`	—	Ao pressionar Esc — pai deve fechar/ocultar o componente.

Navegação por teclado

Tecla	Ação
↓	Próximo item (atravessa grupos)
↑	Item anterior (atravessa grupos)
Enter	Seleciona o item atual e fecha dropdown
Esc	Limpa query e emite `closeSearchbar`

Onde é usado

src/layouts/components/navbar/components/Bookmarks.vue