avalynx-form 1.0.3 → 1.0.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Juergen Schwind an the Avalynx-Form Authors
+Copyright (c) 2024 Juergen Schwind an the AvalynxForm Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.de.md

@@ -0,0 +1,164 @@
+# AvalynxForm
+
+[![npm version](https://img.shields.io/npm/v/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-form)](https://www.jsdelivr.com/package/npm/avalynx-form)
+[![License](https://img.shields.io/npm/l/avalynx-form)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-form/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-form)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-form?style=flat&logo=github)](https://github.com/avalynx/avalynx-form)
+
+AvalynxForm ist eine leichtgewichtige, anpassbare Formular-Handling-Bibliothek für Webanwendungen. Basierend auf Bootstrap >=5.3 ohne jegliche Framework-Abhängigkeiten.
+
+## Funktionen
+
+- **Formular-Handling**: Vereinfacht den Prozess der Erstellung und Verwaltung von Formularen in Ihren Webanwendungen.
+- **Bootstrap-Integration**: Entwickelt für die nahtlose Integration mit Bootstrap >= 5.3.
+- **Einfach zu bedienen**: Einfache API zur Erstellung und Verwaltung von Formularen in Ihren Webanwendungen.
+
+## Beispiel
+
+Hier ist ein einfaches Beispiel für die Verwendung von AvalynxForm in Ihrem Projekt:
+
+* [Übersicht](https://avalynx-form.jbs-newmedia.de/examples/index.html)
+* [Formular](https://avalynx-form.jbs-newmedia.de/examples/form.html)
+* [Formular mit langsamer Antwort](https://avalynx-form.jbs-newmedia.de/examples/form-slow-response.html)
+* [Formular mit AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-with-avalynx-select.html)
+
+## Installation
+
+Um AvalynxForm in Ihrem Projekt zu verwenden, können Sie es direkt in Ihre HTML-Datei einbinden. Stellen Sie sicher, dass Sie Bootstrap 5.3 oder höher in Ihrem Projekt eingebunden haben, damit AvalynxForm korrekt funktioniert.
+
+Zuerst Bootstrap einbinden:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Dann AvalynxForm einbinden:
+
+```html
+<script src="pfad/zu/avalynx-form.js"></script>
+```
+
+Ersetzen Sie `pfad/zu/avalynx-form.js` durch den tatsächlichen Pfad zur Datei in Ihrem Projekt.
+
+## Installation über jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-form/))
+
+AvalynxForm ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.5/dist/js/avalynx-form.js"></script>
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über NPM ([Link](https://www.npmjs.com/package/avalynx-form))
+
+AvalynxForm ist auch als npm-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+npm install avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Symfony AssetComposer
+
+Weitere Informationen zum Symfony AssetComposer Bundle finden Sie [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
+
+```twig
+{% do addAssetComposer('avalynx/avalynx-form/dist/js/avalynx-form.js') %}
+```
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Installation über Composer ([Link](https://packagist.org/packages/avalynx/avalynx-form))
+
+AvalynxForm ist auch als Composer-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+composer require avalynx/avalynx-form
+```
+
+Nach der Installation können Sie AvalynxForm wie folgt in Ihre HTML-Datei einbinden:
+
+```html
+<script src="vendor/avalynx/avalynx-form/dist/js/avalynx-form.js"></script>
+``` 
+
+Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxForm zu gewährleisten.
+
+## Verwendung
+
+Um AvalynxForm in Ihrem Projekt zu verwenden, binden Sie die JavaScript-Datei von AvalynxForm in Ihr Projekt ein und initialisieren Sie die Klasse mit dem entsprechenden Selektor.
+
+```javascript
+new AvalynxForm("myForm", {
+    apiParams: {
+        extraData1: 'wert1',
+        extraData2: 'wert2'
+    },
+    onSuccess: function(response) {
+        console.log('Formularübermittlung war erfolgreich:', response);
+    },
+    onError: function(response) {
+        console.error('Formularübermittlung fehlgeschlagen:', response);
+    }
+});
+```
+
+## Optionen
+
+AvalynxForm ermöglicht die folgenden Optionen zur Anpassung:
+
+- `id`: (string) Die ID des Elements, an das das Formular angehängt werden soll.
+- `options`: Ein Objekt, das die folgenden Schlüssel enthält:
+  - `apiParams`: (object) Zusätzliche Parameter, die mit den Formulardaten gesendet werden sollen (Standard: `{}`).
+  - `loader`: (object) Eine Instanz von AvalynxLoader, die als Loader für das Modal verwendet werden soll (Standard: `null`).
+  - `onSuccess`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn die Formularübermittlung erfolgreich ist (Standard: `null`).
+  - `onError`: (function) Eine Callback-Funktion, die ausgeführt wird, wenn die Formularübermittlung fehlschlägt (Standard: `null`).
+  - `onBeforeSubmit`: (function) Eine Callback-Funktion, die vor der Formularübermittlung ausgeführt wird (Standard: `null`).
+  - `onAfterSubmit`: (function) Eine Callback-Funktion, die nach der Formularübermittlung ausgeführt wird (Standard: `null`).
+
+## Mitwirken
+
+Beiträge sind willkommen! Wenn Sie einen Beitrag leisten möchten, erstellen Sie bitte einen Fork des Repositorys und senden Sie einen Pull-Request mit Ihren Änderungen oder Verbesserungen. Wir suchen nach Beiträgen in den folgenden Bereichen:
+
+- Fehlerbehebungen
+- Funktionserweiterungen
+- Verbesserungen der Dokumentation
+
+Bevor Sie Ihren Pull-Request absenden, stellen Sie bitte sicher, dass Ihre Änderungen gut dokumentiert sind und dem bestehenden Codierungsstil des Projekts entsprechen.
+
+## Lizenz
+
+AvalynxForm ist quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
+
+## Kontakt
+
+Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-form/issues) oder senden Sie einen Pull-Request.
+
+Vielen Dank, dass Sie AvalynxForm für Ihr Projekt in Betracht ziehen!

package/README.md

@@ -1,5 +1,13 @@
 # AvalynxForm
 
+[![npm version](https://img.shields.io/npm/v/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-form)](https://www.npmjs.com/package/avalynx-form)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-form)](https://www.jsdelivr.com/package/npm/avalynx-form)
+[![License](https://img.shields.io/npm/l/avalynx-form)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-form/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-form/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-form)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-form?style=flat&logo=github)](https://github.com/avalynx/avalynx-form)
+
 AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
 
 ## Features
@@ -42,7 +50,7 @@ Replace `path/to/avalynx-form.js` with the actual path to the file in your proje
 AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.3/dist/js/avalynx-form.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.5/dist/js/avalynx-form.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.

package/dist/js/avalynx-form.esm.js

@@ -3,7 +3,7 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.3
+ * @version 1.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
@@ -119,7 +119,7 @@ export class AvalynxForm {
             }
 
             if (response.redirect !== undefined) {
-                window.location.href = response.redirect;
+                this.redirect(response.redirect);
             }
         } else {
             if (response.invalid !== undefined) {
@@ -147,6 +147,10 @@ export class AvalynxForm {
             if (parentElement !== null) {
                 const spanElement = parentElement.querySelector('.invalid-feedback');
                 element.classList.add('is-invalid');
+                const inputContainer = element.closest('[class*="-input-container"]');
+                if (inputContainer) {
+                    inputContainer.classList.add('is-invalid');
+                }
                 if (spanElement !== null) {
                     spanElement.innerHTML = value;
                     spanElement.style.display = 'block';
@@ -162,6 +166,10 @@ export class AvalynxForm {
             if (parentElement !== null) {
                 const spanElement = parentElement.querySelector('.invalid-feedback');
                 element.classList.remove('is-invalid');
+                const inputContainer = element.closest('[class*="-input-container"]');
+                if (inputContainer) {
+                    inputContainer.classList.remove('is-invalid');
+                }
                 if (spanElement !== null) {
                     spanElement.innerHTML = " ";
                     spanElement.style.display = 'none';
@@ -195,4 +203,13 @@ export class AvalynxForm {
             this.form.appendChild(overlay);
         }
     }
-}
+
+    redirect(url) {
+        window.location.href = url;
+    }
+}
+
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AvalynxForm;
+}

package/dist/js/avalynx-form.js

@@ -3,7 +3,7 @@
  *
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.3
+ * @version 1.0.5
  * @license MIT
  * @author https://github.com/avalynx/avalynx-form/graphs/contributors
  * @website https://github.com/avalynx/
@@ -117,7 +117,7 @@ class AvalynxForm {
             }
 
             if (response.redirect !== undefined) {
-                window.location.href = response.redirect;
+                this.redirect(response.redirect);
             }
         } else {
             if (response.invalid !== undefined) {
@@ -145,6 +145,10 @@ class AvalynxForm {
             if (parentElement !== null) {
                 const spanElement = parentElement.querySelector('.invalid-feedback');
                 element.classList.add('is-invalid');
+                const inputContainer = element.closest('[class*="-input-container"]');
+                if (inputContainer) {
+                    inputContainer.classList.add('is-invalid');
+                }
                 if (spanElement !== null) {
                     spanElement.innerHTML = value;
                     spanElement.style.display = 'block';
@@ -160,6 +164,10 @@ class AvalynxForm {
             if (parentElement !== null) {
                 const spanElement = parentElement.querySelector('.invalid-feedback');
                 element.classList.remove('is-invalid');
+                const inputContainer = element.closest('[class*="-input-container"]');
+                if (inputContainer) {
+                    inputContainer.classList.remove('is-invalid');
+                }
                 if (spanElement !== null) {
                     spanElement.innerHTML = " ";
                     spanElement.style.display = 'none';
@@ -193,8 +201,13 @@ class AvalynxForm {
             this.form.appendChild(overlay);
         }
     }
+
+    redirect(url) {
+        window.location.href = url;
+    }
 }
 
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxForm;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-form",
   "title": "AvalynxForm",
   "description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "main": "dist/js/avalynx-form.js",
   "module": "dist/js/avalynx-form.esm.js",
@@ -23,7 +23,7 @@
     "package.json"
   ],
   "author": {
-    "name": "Juergen Schwind an the Avalynx-Form Team",
+    "name": "Juergen Schwind an the AvalynxForm Authors",
     "url": "https://github.com/avalynx/avalynx-form/graphs/contributors"
   },
   "homepage": "https://github.com/avalynx/",
@@ -42,12 +42,12 @@
     "bootstrap": ">=5.3"
   },
   "devDependencies": {
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "babel-jest": "^29",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29",
-    "shelljs": "^0",
-    "shx": "^0"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "shelljs": "^0.10.0",
+    "shx": "^0.4.0"
   }
 }