Zeev Binder
[](https://www.jsdelivr.com/package/gh/pedbernardo/zeev-binder)
[](https://www.npmjs.com/package/zeev-binder)
[](https://opensource.org/licenses/MIT)
Biblioteca não-oficial para data binding em campos de formulário no Zeev.
Construa views com base nos valores dos campos de formulário, atualize os valores automaticamente e combine com funções de filtro, aplicando facilmente máscaras e outras transformações aos dados.
Instalação |
Como Utilizar |
Configuração |
Métodos |
Roadmap
Veja o código do exemplo acima
#### Formulário
```html
🎭 Zeev Binder
O que é data-binding?
O valor do campo aparecerá aqui:
{{ campoTexto | cnpj }}
Mas pode aparecer em outros lugares
{{ campoTexto | cnpj }}
```
#### Javascript
```js
import Binder from 'zeev-binder'
Binder().init()
```
## Instalação
### Usar via NPM
```bash
npm install zeev-binder
# ou com yarn
yarn add zeev-binder
```
### Usar via CDN
Apenas adicione a script tag ao cabeçalho do processo e inicialize o binder através do _construtor_ Binder
```html
```
## Como Utilizar
```js
// importe todas as funções com namespace
import Binder from 'zeev-binder'
// utilizando apenas as configurações padrão
Binder().init()
// utilizando o objeto de configurações
Binder({
root: '#my-root-element' // redefina o elemento raíz a partir de onde será aplicado o binder
filters: {} // defina novas funções de filtro
}).init()
```
### Víncule o Binder a campos de formulário através do HTML
```html
somente o trecho {{ idDoCampo }} será atualizado com o valor do campo de formulário
```
### Faça uso de filtros para aplicar transformações aos valores
```html
basta indicar o filtro com uso do caracter "|" {{ meuCampoCnpj | cnpj }}
```
### Utilizando via script tag e CDN
```js
// basta utilizar o construtor Global Binder
Binder().init()
```
## Configuração
**Configuração Padrão**
```js
const config = {
root: document.getElementById('BoxFrmExecute') || document.body,
filters: { ... } // ver seção sobre filtros
}
```
### Construtor
### `Binder`
Cria uma nova instância do Binder com as configurações informadas
> _Binder( Object )_
**Exemplo de uso**
```js
const binder = Binder({
root: '#my-custom-root-element',
filters: {}
})
binder.init()
// ou simplesmente
Binder().init()
```
#### Parâmetros
> _BinderConfig (Object)_
- _BinderConfig.root ( HTMLElement )_
**Default:** document.getElementById('BoxFrmExecute') || document.body
Elemento raíz a partir de onde será aplicado o binder
- _BinderConfig.filters ( Ojbect )_
Objeto com funções / métodos customizados para serem consumidas como filtros
### Filtros
Existem alguns filtros pré-definidos que podem ser utilizados sem nenhum configuração extra, veja as funções em [filters.js](./src/utils/filters.js).
#### `cnpj`
Adiciona máscara de CNPJ a um número de 14 caracteres
> 59539586000100 => 59.539.586.0001-00
**Exemplo de uso**
```html
{{ meuCampo | cnpj}}
```
#### `capitalize`
Capitalize um texto, tornando todas as letras iniciais em maiúsculas
> minha frase EXEMPLO => Minha Frase Exemplo
**Exemplo de uso**
```html
{{ meuCampo | capitalize}}
```
#### `firstWord`
Extrai apenas a primeira palavra de um texto
> João da Silva Sauro => João
**Exemplo de uso**
```html
{{ meuCampo | firstWord}}
```
#### `empty`
Quando o texto for vazio, preenche com o caractere "-"
**Exemplo de uso**
```html
{{ umCampoMonetario | empty}}
```
#### `hour`
Apenas adiciona ao final do texto a letra "h"
> 120 => 120h
**Exemplo de uso**
```html
{{ meuCampo | hour}}
```
#### `currency`
Formata um número para o formato monetário em pt-BR, quando o campo for vazio ou 0 retorna apenas "-"
> 1500 => 1.500,00
> 1511500.2 => 1.511.500,20
> 0 => -
**Exemplo de uso**
```html
{{ meuCampo | currency}}
```
#### Criando Novos Filtros
Para criar novos filtros é simples, basta criar novas funções dentro na propridade `filters` do parâmetro de configuração do método construtor.
As funções presentes no filter sempre recebem do Binder como parâmetro o valor atual do campo, e devem retornar o valor que será apresentado nos binds do formulário (no html).
**Exemplo**
```js
Binder({
filters: {
nomeDoMeuFiltro (valorDoCampo) {
// faça as transformações desejadas
// e então retone o valor transformado
return valorDoCampo * 2
},
outroFiltro (valor) {
return `R$ ${valor}`
},
tagCriticidade (valor) {
// com o uso do `data-bind` é possível
// retornar uma string html que será adicionada
// ao formulário (DOM) e ainda combinar com
// condicionais
if (valor === 'Crítico') {
return `${valor}`
} else {
return `${valor}`
}
}
}
}).init()
```
Após definidos os filtros, basta utilizá-los assim como os filtros padrão, veja no exemplo a utilização dos filtros criados no exemplo acima.
```html
{{ meuCampo | nomeDoMeuFiltro }}
{{ meuOutroCampo | outroFiltro }}
```
## Métodos
- [init](#init)
- [update](#update) _TODO_
- [destroy](#destroy) _TODO_
### `init`
Inicializa a instância do Binder, adicionando event listeners aos campos para observar mudanças, aplicando o estado inicial dos campos de formulário as referências do binder presentes no formulário
> _Binder.init()_
**Exemplo de uso**
```js
const binder = Binder()
binder.init()
```
### `update`
_TODO_
> _Binder.update()_
**Exemplo de uso**
```js
const binder = Binder()
binder.update()
```
### `destroy`
_TODO_
> _Binder.destroy()_
**Exemplo de uso**
```js
const binder = Binder()
binder.destroy()
```
## Roadmap
**Versão 1.0.0**
- Alterar definição de tipos de JSDocs para TypeScript
- Adicionar testes unitários
- Implementar métodos update e destroy
- Implementar adição de propriedade ao finalizar inicialização (facilitar criação de loaders)
- Avaliar implementação de skeletons com uso de {{ }}
- Finalizar documentação no README
- Construir documentação utilizando Vitepress
- Automatizar build com uso de Github Actions