O seu pacote de utilitários para formulários especialmente desenvolvidos para dev-brs! 🇧🇷
Neste pacote você vai encontrar:
- CPF
- CNPJ
- IPv4
- IPv6
- monetária
- telefone
- CEP
- CPF
- CNPJ
- CEP
npm i democrito88/deus-abencoe
<input type="checkbox" id="darkmode-toggle" class="botao-toggle" />
<label for="darkmode-toggle" class="espaco-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun sun" viewBox="0 0 16 16">
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zM4.636 4.636a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 1 1-.707.707L4.636 5.343a.5.5 0 0 1 0-.707zm6.364 6.364a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707L10.293 11.7a.5.5 0 0 1 0-.707zM0 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 0 8zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zM4.636 11.7a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 1 1-.707.707L4.636 12.407a.5.5 0 0 1 0-.707zm6.364-6.364a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 1 1-.707.707L10.293 5.343a.5.5 0 0 1 0-.707z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon moon" viewBox="0 0 16 16">
<path d="M6 .278a.77.77 0 0 1 1.08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277a7.277 7.277 0 0 0 2.77-.792.77.77 0 0 1 1.163.69A8 8 0 1 1 6 .278z"/>
</svg>
</label>
Chame a classe no input
<input type="text" class="nomeDaClasse">
| Máscara | Nome da classe |
|---|---|
| CPF | mascara-cpf |
| CNPJ | mascara-cnpj |
| IPv4 | mascara-ipv4 |
| IPv6 | mascara-ipv6 |
| CEP | mascara-cep |
| monetária | valor-monetario |
Use o seguinte formato
<!--Para chamar o input-->
<input type="text" class="classeInput" autocomplete="off">
<br>
<!--small para mostrar menssagem de erro.-->
<small id="classeSmall" class="invalid-feedback"></small>
| Validador | Classe do input | Classe do small |
|---|---|---|
| CPF | valida-cpf | cpf-message |
| CNPJ | valida-cnpj | cnpj-message |
Ferramenta para autocompletar endereço no formulário a partir de um CEP utilizando a API dos Correios ViaCEP.
<!--Para chamar o input-->
<label for="cep">Busca por CEP:</label>
<input type="text" size="60" class="busca-cep" id="cep" /><br />
<label for="rua">Rua:</label>
<input name="rua" type="text" id="rua" class="endereco rua" size="60" /><br />
<label for="bairro">Bairro:</label>
<input name="bairro" type="text" id="bairro" class="endereco bairro" size="40" /><br />
<label for="cidade">Cidade:</label>
<input name="cidade" type="text" id="cidade" class="endereco cidade" size="40" /><br />
<label for="uf">Estado:</label>
<input name="uf" type="text" id="uf" size="2" class="endereco uf" /><br />
<label for="ibge">Codigo Ibge:</label>
<input name="ibge" type="text" id="ibge" size="20" class="endereco ibge" /><br />
<br>
<!--small para mostrar menssagem de erro.-->
<small class="cep-message"></small>
| Nome | Descrição | Exemplo |
|---|---|---|
| Datetime Input | calendário Flatpickr de data e hora | <input type="datetime-local" class="data-hora"> |
| Removedor de máscaras | remove máscaras de cpf e cnpj, deixando apenas números | <input type="text" class="apenasNumeros"> |
| Seletor de cores | Ferramenta de seleção de cor. Uma implementação da ferramenta da Momo Bassit Coloris | <link rel="stylesheet" href="./../node_modules/@melloware/coloris/dist/coloris.min.css" /><script src="./../node_modules/@melloware/coloris/dist/esm/coloris.min.js"></script><script type="text/javascript">setInstance('.instance1', {theme: 'pill',formatToggle: true,closeButton: true,clearButton: true,swatches: ['#067bc2','#84bcda','#80e377','#ecc30b','#f37748','#d56062']});</script><div class="clr-field"><button type="button" aria-labelledby="clr-open-label"></button><input id="coloris" class="coloris instance1" type="text" data-coloris></div> |
Para mais dxetalhes, veja a página de exemplos
Special thanks to FlatPickr and Momo Bassit Coloris