req-071: Adição de Novos Tipos de Campos, Limites de Caracteres/Valores e Melhoria Progressiva de Interface no Módulo de Formulários

Descrição do Problema / Contexto

Este lote de trabalho visa expandir e robustecer o módulo de Formulários (forms) nas seguintes frentes:

1. Novos Tipos de Campos: Adicionar os tipos nativos HTML5 mais comuns ao construtor e renderizador:

   • password: Renderiza <input type="password"> (segurança ao preencher senhas).

   • date: Renderiza <input type="date"> (calendário nativo).

   • url: Renderiza <input type="url"> (links com validação automática).

   • hidden: Renderiza <input type="hidden"> (campos ocultos com valor padrão).

2. Melhoria Progressiva de Interface no Frontend (formulario.js): Em vez de forçar o uso de componentes visuais específicos (o que quebraria páginas públicas que utilizam Tailwind CSS em vez de Fomantic-UI), utilizaremos uma abordagem de Melhoria Progressiva (Progressive Enhancement):

   • Baseline/Universal: Elementos nativos do HTML5 (<input type="date">, <select> com estilo CSS do framework ativo) e funcionalidade Vanilla JS (alternador de senha universal).

   • Enhanced (Fomantic-UI): Se a página carregar Fomantic-UI ($.fn.calendar ou $.fn.dropdown), os campos de data e selects ganham a interface avançada e o autocomplete nativo.

3. Limites e Configurações via Campo "Opções" (options): Reaproveitar o campo "Opções" (options) do construtor de campos para configurar limites e diretivas de validação por tipo de dados, evitando a adição de novas colunas ao banco de dados:

   • Para text e textarea (Tamanho): Suportar as diretivas de tamanho de caracteres min:X e max:Y (ex: min:3\nmax:100).

   • Para number (Limites Numéricos): Suportar limite numérico de valores min:X, max:Y e incremento step:Z (ex: min:18\nmax:100\nstep:1 ou min:0\nmax:10\nstep:0.5).

   • Para date (Limites de Calendário): Suportar limites de data no formato ISO min:YYYY-MM-DD e max:YYYY-MM-DD (ex: min:2026-01-01\nmax:2026-12-31).

   • Para hidden (Valor Padrão): O texto digitado nas opções representará o valor constante e padrão enviado pelo campo oculto.

Mudanças Necessárias

1. Interface Administrativa do Construtor de Formulários (conn2flow)

1.1. Modificação do JavaScript do Construtor (gestor/modulos/forms/forms.js)

• Dropdown de Tipos: Na função buildFieldRow, adicionar as opções:

  • <option value="password">Password</option>

  • <option value="date">Date</option>

  • <option value="url">URL</option>

  • <option value="hidden">Hidden</option>

• Visibilidade e Placeholders da Caixa de Opções:

  • Habilitar a exibição da textarea de opções (.forms-field-options) se o tipo for select, radio, checkbox, hidden, text, textarea, number ou date.

  • Definir placeholders dinâmicos baseados no tipo de campo selecionado:

  • Se hidden: 'Valor padrão do campo' (en: 'Default field value').

  • Se text ou textarea: 'min:3\nmax:100' (en: 'min:3\nmax:100').

  • Se number: 'min:18\nmax:100\nstep:1' (en: 'min:18\nmax:100\nstep:1').

  • Se date: 'min:2026-01-01\nmax:2026-12-31' (en: 'min:2026-01-01\nmax:2026-12-31').

  • Se select/radio/checkbox: manter o placeholder de lista padrão (valor:Rótulo).

• Validação Estática: Rodar node --check no arquivo para garantir integridade.

2. Renderização do Widget Público (forms.widget.php em conn2flow)

2.1. Renderização de Inputs e Placeholders

• Na função forms_widget_render_field($template, $field):

  • Identificar os novos tipos (password, date, url, hidden) e direcioná-los para o bloco de inputs simples (type !== 'select' && type !== 'textarea' && type !== 'radio' && type !== 'checkbox').

  • Para o tipo hidden, obter o valor padrão cadastrado nas opções e substituí-lo no placeholder [[item#value]]. Para os demais inputs, inicializar [[item#value]] como vazio.

  • Para os tipos text, textarea, number e date, extrair os limites das opções (ex: linhas contendo min:X, max:Y, step:Z):

  • text / textarea: Adicionar atributos minlength="X" e maxlength="Y".

  • number: Adicionar atributos min="X", max="Y" e step="Z".

  • date: Adicionar atributos min="YYYY-MM-DD" e max="YYYY-MM-DD".

  • Mascaramento e Toggle de Senha (Vanilla): Se o tipo for password, envelopar o input em uma estrutura que inclua o botão de alternar visibilidade com a classe .forms-password-toggle contendo o ícone <i class="eye link icon"></i> (compatível com Fomantic e com CSS customizado Vanilla).

3. Validações e Processamento no Backend (formulario.php em conn2flow)

3.1. Validações de Comprimento e Formato

• Na biblioteca gestor/bibliotecas/formulario.php:

  • Limites Universais: Adicionar password e url na lista de campos limitados a 254 caracteres.

  • Validação de URL: Se o tipo de campo for url e estiver preenchido, validar usando filter_var($value, FILTER_VALIDATE_URL). Se inválido, disparar erro (análogo a e-mail inválido).

  • Validações Customizadas via Opções:

  • Parsear o campo options para encontrar padrões min:X, max:Y e step:Z.

  • Se text ou textarea: Validar o comprimento de caracteres. Se menor que min ou maior que max, retornar erro correspondente.

  • Se number: Validar o valor numérico. Se $value < min ou $value > max, retornar erro correspondente (ex: "O campo {label} deve ter valor entre X e Y.").

  • Se date: Validar a data. Se $value < min ou $value > max, retornar erro correspondente (ex: "O campo {label} deve ter uma data entre X e Y.").

4. Validações e Interface no Frontend (formulario.js em conn2flow)

4.1. Melhoria Progressiva de Componentes (Fomantic-UI / Tailwind)

• Ao inicializar o formulário (initFormController):

  • Date Picker: Verificar se a biblioteca do calendário Fomantic está disponível (typeof $.fn.calendar !== 'undefined'). Em caso positivo, inicializar o date picker sobre elementos .forms-date-picker formatando a saída para ISO YYYY-MM-DD. Caso contrário, manter o comportamento nativo do navegador para <input type="date">.

  • Dropdowns: Se typeof $.fn.dropdown !== 'undefined', inicializar dropdowns interativos nos selects com a classe .ui.dropdown. Caso contrário, manter <select> nativo.

  • Password Toggle (Vanilla): Ligar um event listener genérico no formulário para escutar cliques em .forms-password-toggle. Quando clicado, buscar o input de senha adjacente e inverter o atributo type entre password e text, alternando a classe do ícone de olho (eye / eye slash).

4.2. Validações Customizadas no Cliente

• Parsear propriedades min, max e step e impedir a submissão do formulário caso as regras de limite (comprimento, valor numérico ou data) sejam violadas, exibindo mensagens apropriadas na interface.

Validação e Testes

1. Verificação Estática:

   • Executar node --check nos arquivos JS e php -l nos arquivos PHP modificados.

2. Execução de Testes Unitários:

   • Rodar composer test e confirmar aprovação total (sem regressões).

3. Validação Manual:

   • Criar formulário com os novos tipos e limites:

     • Campo text com min:5\nmax:15.

     • Campo number com min:18\nmax:120\nstep:1.

     • Campo date com min:2026-06-01\nmax:2026-06-30.

     • Campo hidden com valor padrão.

   • Abrir o formulário em ambiente com Tailwind CSS e outro com Fomantic-UI:

     • Validar que o comportamento de calendário, dropdown e alternador de senha são funcionais em ambos.

     • Tentar submeter valores menores ou maiores que os limites configurados e checar se o sistema barra e exibe as mensagens de erro correspondentes (tamanho, limite de valores ou faixa de datas) tanto no frontend quanto no backend.