# busca

> Documentação do componente de Busca

Latest version **1.0.0** (published 2023-04-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install busca
pnpm add busca
yarn add busca
bun add busca
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-04-22 |
| First published | 2023-04-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | desenvolvimento-code |

## Links

- npm: https://www.npmjs.com/package/busca
- npm.io page: https://npm.io/package/busca

## Recent versions

- 1.0.0 (latest) — 2023-04-22

## README

# **Busca**

### **Sobre**

Um componente padrão para busca com container de sugestão de busca. Este componente possui recurso de preenchimento da pesquisa por microfone, porém é necessário configurar essa opção via prop, alguns navegadores pode não suportar esse recurso. Garanta também que as permissoes estão ativas, acesso por http é bloqueado o recurso de microfone pelos navegadores.

![Busca](http://www.codeblue.com.br/wap-docs/busca.png)

<br />

***

<br />

## **Dependências**

### **Store**

| Prop | Descrição | Tipo | Uso |
|---|---|---|---|
| screenWidth `1.2.0` | Variável encontrada no módulo principal da `$store`, responsável por conter o valor atualizado da largura da tela. | Variável da `$store`. | `$store.state.screenWidth` |

<br />

***

<br />

## **Instalação**

- Instale o app através do seu terminal

<br />

    npm install @wapstore/busca

<br />

- Valide se seu arquivo package.json possui a dependência

<br />

    "dependencies": {
      "@wapstore/busca": "^1.2.0"
    }

<br />

Agora a loja está apta para o uso da aplicação.

<br />

***

<br />

## **Uso**

Para seu perfeito funcionamento, este componente contém um módulo próprio na `$store` que deve ser vinculado a mesma, para isso basta inserir o trecho a seguir no arquivo `index.js` da pasta `store`.
Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

<br />

***

<br />

## **Exemplo**

-Este é um exemplo da aplicação de um arquivo padrão para uma **Newsletter na Home**:

    <template>
      <busca id="searchTopo" textPlaceholder="Buscar aqui..." :sugestoes="true" :limit="6">
        <template #contentBtBusca>
          <img src="~/static/img/header/search.svg" width="18px" height="18px" alt="Buscar">
        </template>
      </busca>
    </template>

    <script>
      import busca from '@wapstore/busca/store/busca.module.js';

      export const modules = {
        busca
      };
    </script>
    <style>
      ...
    </style>

<br />

***

<br />

## **Recursos**

### **Props**

| Prop | Descrição | Tipo | Valor padrão |
|---|---|---|---|
| closeOnMobile `1.2.0` | Ativa/desativa a ocultação da busca no mobile. | `Boolean` | `true` |
| sugestoes `1.2.0` | Ativa/desativa o box de sugestões. | `Boolean` | `false` |
| textPlaceholder `1.2.0` | Texto da barra de pesquisa. | `String` | Texto da barra de pesquisa |
| sugestoesDefaultBusca `1.2.0` | Array que recebe dados de produto para exibir nas sugestões quando não houver nada no box de pesquisa. | `Array` | - |
| limit `1.2.0` | Limite de itens que a sugestão terá. | `Number` | 5 |

<br />

### **Slots**

| Slot | Descrição | Name | Exemplo de uso |
|---|---|---|---|
| Botão de busca `1.2.0` | Slot para alteração do conteúdo do botão de busca. | `contentBtBusca` | `<busca><template #contentBtBusca><span>Buscar</span><img src="icone.png" alt="Busca"></template></busca>` |

<br />

***

<br />

## Estilização

Para a estilização, basta inserir os estilos sem escopos no componente pai ou em um arquivo CSS separado dentro de static/css/packages-styles/ com o nome do mesmo como nome do arquivo, utilizando sempre de um ID ou classe específica na tag do componente inserido para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivo CSS separado. Para estilos em arquivos separados, utilizar o import no componente pai do componente correspondente ao estilo.

---
_Source: https://npm.io/package/busca · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._