GitHub

smartforms

smartforms

Gestionnaire de formulaires côté client prenant en compte l'état des champs pour les formulaires HTML statiques. Suit l'état de chaque champ (nouveau, inchangé, modifié, invalide, vide) et active/désactive les actions de la barre d'outils en conséquence.

@hradigital/smartforms

Gestionnaire de formulaires côté client prenant en compte l'état pour les formulaires HTML statiques. Il superpose un comportement réactif au HTML généré par une application rendue côté serveur, entièrement piloté par des attributs : associez la classe smartform à un <form> et le gestionnaire prend le relais. Les champs, les boutons de la barre d'outils et les actions HTTP s'adaptent alors à l'état du formulaire, sans React ni Vue, et sans réécriture du balisage déjà envoyé par le serveur.

  • État par champ - pistes new , unchanged , changed , invalid et empty , application d'une classe CSS correspondante pour le style.
  • Deux mises en page - une liste d'enregistrements ( smartformlist ) ou un seul enregistrement ( smartformrecord ).
  • Câblage de la barre d'outils : active et désactive les boutons créer, mettre à jour, supprimer et annuler à partir de l'état global du formulaire.
  • Tâches HTTP - associe une action de barre d'outils à un verbe et à un point de terminaison, déclarés dans le balisage.
  • formStateChange événements – soit CustomEvent par transition d'état, pour tout ce que la bibliothèque ne couvre pas.
  • Pas de framework, pas d'étape de compilation - ESM, CJS et une compilation UMD chargeable directement depuis une balise <script> .

Installation

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

Ou chargez directement la version UMD dans le navigateur :

<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

Voir le projet