Demonstração da Macro field()

Como Usar a Macro

Importe a macro no topo do seu template:

{% from "macros/form_fields.html" import field %}

Exemplos de uso:

{{ field(name='email', label='E-mail', type='email', required=true) }}

{{ field(name='senha', label='Senha', type='password',
         append_icon='bi-eye', append_button_onclick="togglePassword('senha')") }}

{{ field(name='perfil', label='Perfil', type='select',
         options={'Admin': 'Administrador', 'Cliente': 'Cliente'}) }}

{{ field(name='ativo', label='Ativo', type='checkbox', checkbox_style='switch') }}

{{ field(name='tipo', label='Tipo', type='radio', radio_style='buttons',
         options={'1': 'Opção 1', '2': 'Opção 2'}) }}

{# Radio horizontal #}
{{ field(name='tamanho', label='Tamanho', type='radio', radio_layout='horizontal',
         options={'P': 'Pequeno', 'M': 'Médio', 'G': 'Grande'}) }}

{# Radio com ícones #}
{{ field(name='perfil', label='Perfil', type='radio', radio_style='buttons',
         options={'Cliente': 'Comprador', 'Vendedor': 'Vendedor'},
         radio_icons={'Cliente': 'bi-cart3', 'Vendedor': 'bi-shop'}) }}

{# Máscaras de digitação #}
{{ field(name='cpf', label='CPF', mask='000.000.000-00') }}

{{ field(name='telefone', label='Telefone', mask='(00) 00000-0000', unmask=true) }}

{{ field(name='cep', label='CEP', mask='00000-000',
         onblur='buscarEndereco(this.value)') }}

{# Campos decimais #}
{{ field(name='preco', label='Preço', type='decimal', decimal_prefix='R$ ') }}

{{ field(name='peso', label='Peso', type='decimal', decimal_suffix=' kg', decimal_places=3) }}

{{ field(name='temperatura', label='Temperatura', type='decimal',
         decimal_suffix=' °C', allow_negative=true) }}

{{ field(name='valor_simples', label='Valor', type='decimal', show_thousands=false) }}

A macro busca automaticamente:

• Erros: de erros[name] (se disponível no contexto)
• Valores: de dados[name] (se value não for fornecido)

Máscaras Disponíveis

Padrões de máscara:

• 0 = dígito numérico (0-9)
• A = letra maiúscula (A-Z)
• a = letra minúscula (a-z)
• Qualquer outro caractere = literal (inserido automaticamente)

Máscaras comuns:

• CPF: 000.000.000-00
• CNPJ: 00.000.000/0000-00
• Telefone: (00) 00000-0000
• Telefone Fixo: (00) 0000-0000
• CEP: 00000-000
• Data: 00/00/0000
• Hora: 00:00
• Placa Antiga: AAA-0000
• Placa Mercosul: AAA-0A00
• Cartão: 0000 0000 0000 0000
• CVV: 000 ou 0000
• Validade Cartão: 00/00

Parâmetros da Macro

Parâmetros básicos:

• name - Nome do campo (obrigatório)
• label - Texto do label (obrigatório)
• type - Tipo do campo (text, email, password, textarea, select, checkbox, radio, etc.)
• value - Valor inicial (se não fornecido, busca de dados[name])
• required - Campo obrigatório (padrão: false)
• disabled - Campo desabilitado (padrão: false)
• readonly - Campo somente leitura (padrão: false)

Radio buttons:

• radio_style - Estilo dos radio: 'default' ou 'buttons'
• radio_layout - Layout para radio default: 'vertical' (padrão) ou 'horizontal'
• radio_icons - Dict com ícones Bootstrap para radio buttons: {'valor': 'bi-icon'}

Checkbox:

• checkbox_style - Estilo do checkbox: 'default' ou 'switch'

Máscaras de digitação:

• mask - Padrão da máscara (ex: '000.000.000-00')
• unmask - Se true, envia valor sem formatação (padrão: false)

Campos decimais (type='decimal'):

• decimal_places - Número de casas decimais (padrão: 2)
• show_thousands - Exibir separador de milhares (padrão: true)
• allow_negative - Permitir valores negativos (padrão: false)
• decimal_prefix - Prefixo (ex: 'R$ ')
• decimal_suffix - Sufixo (ex: ' kg', ' %')

Eventos JavaScript:

• oninput, onchange, onblur, onfocus, onkeyup, onkeydown, onpaste - Eventos JavaScript

Outros:

• attributes - Dict com atributos HTML extras (minlength, maxlength, pattern, data-*, etc.)
• append_icon - Ícone Bootstrap para botão anexado (ex: 'bi-eye')
• help_text - Texto de ajuda abaixo do campo
• class_extra - Classes CSS adicionais
• wrapper_class - Classes para o wrapper do campo