Zustandsbewusster clientseitiger Formularmanager für statische HTML-Formulare. Verfolgt den Status jedes Feldes (neu, unverändert, geändert, ungültig, leer) und passt die Symbolleistenaktionen entsprechend an.

@hradigital/smartforms

Zustandsbewusster clientseitiger Formularmanager für statische HTML-Formulare. Er erweitert das vom Server gerenderte HTML um reaktives Verhalten, ausschließlich über Attribute – wird beispielsweise eine <form> mit der Klasse smartform versehen, übernimmt das System die Kontrolle. Felder, Schaltflächen in der Symbolleiste und HTTP-Aktionen folgen dann dem Formularzustand, ohne dass React oder Vue benötigt werden und ohne dass der vom Server gesendete Markup verändert wird.

• Status pro Feld - verfolgt new , unchanged , changed , invalid und empty und wendet eine passende CSS-Klasse für die Formatierung an.
• Zwei Layouts – eine Liste von Datensätzen ( smartformlist ) oder ein einzelner Datensatz ( smartformrecord ).
• Toolbar-Verkabelung – Aktiviert und deaktiviert die Schaltflächen Erstellen, Aktualisieren, Löschen und Abbrechen vom Gesamtstatus des Formulars aus.
• HTTP-Tasks – bindet eine Toolbar-Aktion an ein Verb und einen Endpunkt, die im Markup deklariert sind.
• formStateChange Ereignisse - ein Übergang von CustomEvent pro Zustand, für alles, was die Bibliothek nicht abdeckt.
• Kein Framework, kein Build-Schritt – ESM, CJS und ein UMD-Build, der direkt aus einem <script> Tag geladen werden kann.

Installation

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

Oder laden Sie den UMD-Build direkt im Browser:

<script src="https://unpkg.com/@hradigital/smartforms/dist/smartforms.umd.js"></script>
<script>
    SmartForms.autoInit();
</script>