GitHub

smartforms

smartforms

Gestor de formulários do lado do cliente com reconhecimento de estado para formulários HTML estáticos. Monitoriza o estado de cada campo (novo, inalterado, alterado, inválido, vazio) e alterna as ações da barra de ferramentas em conformidade.

@hradigital/formulários inteligentes

Gestor de formulários do lado do cliente com reconhecimento de estado para formulários HTML estáticos. Adiciona comportamento reativo ao HTML já gerado por uma aplicação renderizada no servidor, controlado inteiramente por atributos — marque um <form> com a classe smartform e ele assume o controlo. Os campos, botões da barra de ferramentas e acções HTTP passam a seguir o estado do formulário, sem React ou Vue e sem reescrever a marcação já enviada pelo servidor.

  • Estado a campo - acompanha new , unchanged , changed , invalid e empty , aplicando uma classe CSS correspondente para estilização.
  • Dois layouts - uma lista de registos ( smartformlist ) ou um único registo ( smartformrecord ).
  • A configuração da barra de ferramentas permite ativar e desativar os botões de criar, atualizar, eliminar e cancelar no estado geral do formulário.
  • Tarefas HTTP - associa uma ação da barra de ferramentas a um verbo e a um ponto final, declarados na marcação.
  • formStateChange eventos - uma transição de CustomEvent por estado, para tudo o que a biblioteca não cubra.
  • Sem framework, sem passo de compilação - ESM, CJS e uma compilação UMD carregáveis diretamente de uma etiqueta <script> .

Instalação

npm install @hradigital/smartforms
# or
yarn add @hradigital/smartforms
# or
pnpm add @hradigital/smartforms

Ou carregue a versão UMD diretamente no browser:

<script src="https://unpkg.com/@hradigital/smartforms/dist/smartforms.umd.js"></script>
<script>
    SmartForms.autoInit();
</script>
  • Forms
  • JavaScript
  • Client-side
  • Client-side-validation
  • Es
  • Form-state
  • Form-validation
  • Form-validator
  • Html-forms
  • Makefile
  • No-framework
  • Shell
  • State-management
  • Toolbar
  • Vanilla-js
  • Zero-dependencies

Visitar projeto