avalynx-form 0.0.2 → 1.0.1

package/README.md

@@ -15,6 +15,7 @@ Here's a simple example of how to use AvalynxForm in your project:
 * [Overview](https://avalynx-form.jbs-newmedia.de/examples/index.html)
 * [Form](https://avalynx-form.jbs-newmedia.de/examples/form.html)
 * [Form with slow response](https://avalynx-form.jbs-newmedia.de/examples/form-slow-response.html)
+* [Form with AvalynxSelect](https://avalynx-form.jbs-newmedia.de/examples/form-with-avalynx-select.html)
 
 ## Installation
 
@@ -41,7 +42,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@0.0.2/dist/js/avalynx-form.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.1/dist/js/avalynx-form.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
@@ -76,6 +77,16 @@ import { AvalynxForm } from 'avalynx-form';
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
 
+## Installation via Symfony AssetComposer
+
+More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).
+
+```twig
+{% do addAssetComposer('avalynx/avalynx-form/dist/js/avalynx-form.js') %}
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
 ## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-form))
 
 AvalynxForm is also available as a Composer package. You can add it to your project with the following command:

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 0.0.2
+ * @version 1.0.0
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -19,6 +19,8 @@
  *
  */
 
+import * as bootstrap from 'bootstrap';
+
 export class AvalynxForm {
     constructor(id, options = {}) {
         this.form = document.getElementById(id);
@@ -120,7 +122,7 @@ export class AvalynxForm {
     }
 
     showInvalidFeedback(key, value) {
-        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}\\["]`);
         elements.forEach(element => {
             const parentElement = element.closest('.form-group') || element.parentElement;
             if (parentElement !== null) {
@@ -135,7 +137,7 @@ export class AvalynxForm {
     }
 
     clearInvalidFeedback(key) {
-        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}\\["]`);
         elements.forEach(element => {
             const parentElement = element.closest('.form-group') || element.parentElement;
             if (parentElement !== null) {
@@ -174,4 +176,4 @@ export class AvalynxForm {
             this.form.appendChild(overlay);
         }
     }
-}
+}

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 0.0.2
+ * @version 1.0.0
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -120,7 +120,7 @@ class AvalynxForm {
     }
 
     showInvalidFeedback(key, value) {
-        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}\\["]`);
         elements.forEach(element => {
             const parentElement = element.closest('.form-group') || element.parentElement;
             if (parentElement !== null) {
@@ -135,7 +135,7 @@ class AvalynxForm {
     }
 
     clearInvalidFeedback(key) {
-        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}["]`);
+        const elements = document.querySelectorAll(`#${key}, [name="${key}"], [name="${key}[]"], [name^="${key}\\["]`);
         elements.forEach(element => {
             const parentElement = element.closest('.form-group') || element.parentElement;
             if (parentElement !== null) {
@@ -175,3 +175,7 @@ class AvalynxForm {
         }
     }
 }
+
+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": "0.0.2",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/js/avalynx-form.js",
   "module": "dist/js/avalynx-form.esm.js",