Entrada de código de barras
Introdução
O tipo de entrada barcode é uma entrada independente publicada pelo FormKit. Ele é alimentado pela biblioteca zxing e permite a digitalização de uma variedade de tipos de códigos de barras 1D e 2D usando câmeras conectadas ao seu dispositivo de navegação.
Instalação
A entrada barcode tem uma dependência em @zxing/library que é bastante pesada (cerca de 100kb minificado + compactado). Você só deve incluir esta entrada em seu projeto se você especificamente precisa da capacidade de digitalização de código de barras através de câmeras conectadas. Para a entrada manual de código de barras, considere usar uma entrada mask ou text com regras de validação personalizadas.
Para instalar a entrada barcode adicione o pacote @formkit/barcode às dependências do seu projeto.
npm install @formkit/barcode
Em seguida, no arquivo de configuração do seu FormKit, importe a entrada e seus estilos. Depois, adicione a entrada à sua configuração global do FormKit.
// formkit.config
...
import { barcode } from '@formkit/barcode'
import '@formkit/barcode/genesis'
...
const config = defaultConfig({
inputs: {
barcode
}
})
...
Uso
Básico
Agora você pode usar o tipo de entrada barcode em seus componentes <FormKit />. Interagindo com o ícone de código de barras, você pode abrir uma sobreposição com um feed de vídeo de uma câmera conectada. Você precisará aprovar o acesso à câmera através do seu navegador.
Personalizando códigos de barras alvo
Por padrão, a entrada barcode irá digitalizar todos os tipos de códigos de barras suportados. A lista de formatos de códigos de barras alvo pode ser alterada usando a prop formats. Uma lista completa de formatos suportados pode ser vista na documentação zxing. Todos os nomes de formatos serão em maiúsculas com separadores _. Então QR Code se torna QR_CODE, UPC-A se torna UPC_A, etc.
Props & Atributos
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| formats | Array | [] | Um array de formatos disponíveis em maiúsculas com separadores _ (por exemplo, QR_CODE) do conjunto disponível na documentação zxing. Se nenhum array formats for fornecido, todos os formatos de código analisáveis serão considerados entradas válidas. |
| barcode-icon | String | código SVG inline | Especifica um ícone para colocar na seção barcodeIcon. A seção barcodeIcon fica oculta enquanto a interface da câmera está carregando. |
| loader-icon | String | spinner | Especifica um ícone para colocar na seção loaderIcon. A seção loaderIcon é exibida enquanto a interface da câmera está carregando. |
| close-icon | String | close | Especifica um ícone para colocar na seção closeIcon. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Seções
Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.
Entrada
Sobreposição
| Section-key | Descrição |
|---|---|
| barcodeIcon | Um elemento para exibir um ícone de código de barras que ativa a sobreposição da câmera. |
| loaderIcon | Um elemento para exibir um ícone de carregamento que aparece no lugar do barcodeIcon enquanto a interface da câmera está carregando. |
| dialog | O elemento de diálogo (por padrão um HTML nativo dialog) que contém a interface da câmera. |
| scannerContainer | Um invólucro em torno do ícone de fechar, fluxo de vídeo e sobreposição de varredura decorativa. |
| closeIcon | Um elemento para exibir um ícone de fechar para o diálogo. |
| video | Um elemento video HTML nativo que mostra o feed da câmera conectada. |
| overlay | Um elemento decorativo que sobrepõe uma parte do video para imitar uma interface de varredura. |
| overlayDecorators | Um contêiner para os decoradores de sobreposição que enquadram uma parte do feed de vídeo. |
| overlayDecoratorTopLeft | Um elemento decorativo para enquadrar uma parte do feed de vídeo. |
| overlayDecoratorTopRight | Um elemento decorativo para enquadrar uma parte do feed de vídeo. |
| overlayDecoratorBottomLeft | Um elemento decorativo para enquadrar uma parte do feed de vídeo. |
| overlayDecoratorBottomRight | Um elemento decorativo para enquadrar uma parte do feed de vídeo. |
| laser | Um elemento decorativo que imita um laser de varredura. |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |