Release version 0.0.2 with new features and fixes

Updated AvalynxSelect to version 0.0.2, adding `onChange` and `onLoaded` callback options. Fixed dropdown width resizing issue and included `assetscomposer.json`. Updated examples, documentation, and changelog to reflect these changes.

Author: jschwind

CHANGELOG.md

@@ -1,8 +1,12 @@
 # AvalynxSelect Changelog
 
-## 0.0.2 (not yet released)
+## 0.0.2
 - [x] Template renamed from `avalynx-select` to `avalynx-select-template`
 - [x] Duplicate `id` fixed
+- [x] Dropdown width after resize fixed
+- [x] assetscomposer.json added
+- [x] `onChange` event added
+- [x] `onLoaded` event added
 
 ## 0.0.1
 - [x] Initial release

README.md

@@ -43,7 +43,7 @@ Replace `path/to/avalynx-select.js` with the actual path to the file in your pro
 AvalynxSelect 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-select@0.0.1/dist/js/avalynx-select.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.2/dist/js/avalynx-select.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.

dist/js/avalynx-select.esm.js

@@ -3,7 +3,7 @@
  *
  * AvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-select/graphs/contributors
  * @website https://github.com/avalynx/
@@ -21,6 +21,8 @@ export class name for the loader element (default: '').
  * @param {boolean} options.scrollList - Enable scrollable list (default: true).
  * @param {number} options.scrollItems - Number of items to display before scrolling (default: 8).
  * @param {boolean} options.noDefaultSelection - Do not select any option by default (default: false).
+ * @param {function} options.onChange - Callback function to be executed when an option is selected (default: null).
+ * @param {function} options.onLoaded - Callback function to be executed when the component is loaded (default: null).
  * @param {object} language - An object containing the following keys:
  * @param {string} language.searchPlaceholder - Placeholder text for the search input (default: 'Search...').
  * @param {string} language.selectPlaceholder - Placeholder text for the select dropdown (default: 'Please select...').
@@ -51,14 +53,21 @@ export class AvalynxSelect {
             scrollList: true,
             scrollItems: 8,
             noDefaultSelection: false,
+            onChange: options.onChange || null,
+            onLoaded: options.onLoaded || null,
             ...options
         };
         this.language = {
             searchPlaceholder: 'Search...',
             selectPlaceholder: 'Please select...',
             ...language
         };
+        this.initialized = false;
         this.elements.forEach(select => this.init(select));
+        this.initialized = true;
+        if (this.options.onLoaded) {
+            this.options.onLoaded();
+        }
     }
 
     init(select) {
@@ -218,39 +227,10 @@ export class AvalynxSelect {
             this.filterDropdown(dropdown, '');
             const dropdownMenu = new bootstrap.Dropdown(button);
             dropdownMenu.hide();
-        }
-    }
-
-    reset(button, dropdown, select) {
-        button.textContent = this.language.selectPlaceholder;
-        select.value = '';
-        dropdown.querySelectorAll('.dropdown-item.active').forEach(activeItem => {
-            activeItem.classList.remove('active');
-        });
-        const emptyOption = dropdown.querySelector('.dropdown-item[data-value=""]');
-        if (emptyOption) {
-            emptyOption.classList.add('active');
-        }
-        this.filterDropdown(dropdown, '');
-    }
-
-    get value() {
-        return Array.from(this.elements).map(select => select.value);
-    }
-
-    set value(vals) {
-        if (!Array.isArray(vals)) vals = [vals];
-        this.elements.forEach((select, index) => {
-            const val = vals[index] || '';
-            const option = Array.from(select.options).find(opt => opt.value === val);
-            const button = select.nextElementSibling;
-            if (option) {
-                button.textContent = option.textContent;
-                select.value = val;
-            } else {
-                button.textContent = this.language.selectPlaceholder;
-                select.value = '';
+            if (this.initialized && this.options.onChange) {
+                this.options.onChange(select.value);
             }
-        });
+        }
     }
 }
+

dist/js/avalynx-select.js

@@ -3,7 +3,7 @@
  *
  * AvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-select/graphs/contributors
  * @website https://github.com/avalynx/
@@ -19,6 +19,8 @@
  * @param {boolean} options.scrollList - Enable scrollable list (default: true).
  * @param {number} options.scrollItems - Number of items to display before scrolling (default: 8).
  * @param {boolean} options.noDefaultSelection - Do not select any option by default (default: false).
+ * @param {function} options.onChange - Callback function to be executed when an option is selected (default: null).
+ * @param {function} options.onLoaded - Callback function to be executed when the component is loaded (default: null).
  * @param {object} language - An object containing the following keys:
  * @param {string} language.searchPlaceholder - Placeholder text for the search input (default: 'Search...').
  * @param {string} language.selectPlaceholder - Placeholder text for the select dropdown (default: 'Please select...').
@@ -47,14 +49,21 @@ class AvalynxSelect {
             scrollList: true,
             scrollItems: 8,
             noDefaultSelection: false,
+            onChange: options.onChange || null,
+            onLoaded: options.onLoaded || null,
             ...options
         };
         this.language = {
             searchPlaceholder: 'Search...',
             selectPlaceholder: 'Please select...',
             ...language
         };
+        this.initialized = false;
         this.elements.forEach(select => this.init(select));
+        this.initialized = true;
+        if (this.options.onLoaded) {
+            this.options.onLoaded();
+        }
     }
 
     init(select) {
@@ -214,39 +223,10 @@ class AvalynxSelect {
             this.filterDropdown(dropdown, '');
             const dropdownMenu = new bootstrap.Dropdown(button);
             dropdownMenu.hide();
-        }
-    }
-
-    reset(button, dropdown, select) {
-        button.textContent = this.language.selectPlaceholder;
-        select.value = '';
-        dropdown.querySelectorAll('.dropdown-item.active').forEach(activeItem => {
-            activeItem.classList.remove('active');
-        });
-        const emptyOption = dropdown.querySelector('.dropdown-item[data-value=""]');
-        if (emptyOption) {
-            emptyOption.classList.add('active');
-        }
-        this.filterDropdown(dropdown, '');
-    }
-
-    get value() {
-        return Array.from(this.elements).map(select => select.value);
-    }
-
-    set value(vals) {
-        if (!Array.isArray(vals)) vals = [vals];
-        this.elements.forEach((select, index) => {
-            const val = vals[index] || '';
-            const option = Array.from(select.options).find(opt => opt.value === val);
-            const button = select.nextElementSibling;
-            if (option) {
-                button.textContent = option.textContent;
-                select.value = val;
-            } else {
-                button.textContent = this.language.selectPlaceholder;
-                select.value = '';
+            if (this.initialized && this.options.onChange) {
+                this.options.onChange(select.value);
             }
-        });
+        }
     }
 }
+

examples/simple-select-event-listeners.html

@@ -16,8 +16,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
     <script>hljs.highlightAll();</script>
 
-    <!-- AvalynxSelect 0.0.1 -->
-    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.1/dist/js/avalynx-select.js"></script>
+    <!-- AvalynxSelect 0.0.2 -->
+    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.2/dist/js/avalynx-select.js"></script>
 
     <!-- Example helper -->
     <link href="./css/helper.css" rel="stylesheet">

examples/simple-select-livesearch.html

@@ -16,8 +16,8 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxSelect 0.0.1 -->
-    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.1/dist/js/avalynx-select.js"></script>
+	<!-- AvalynxSelect 0.0.2 -->
+    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.2/dist/js/avalynx-select.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

examples/simple-select-responsive.html

@@ -16,8 +16,8 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxSelect 0.0.1 -->
-    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.1/dist/js/avalynx-select.js"></script>
+	<!-- AvalynxSelect 0.0.2 -->
+    <script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.2/dist/js/avalynx-select.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

examples/simple-select.html

@@ -16,8 +16,8 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxSelect 0.0.1 -->
-	<script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.1/dist/js/avalynx-select.js"></script>
+	<!-- AvalynxSelect 0.0.2 -->
+	<script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.2/dist/js/avalynx-select.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-select",
   "title": "AvalynxSelect",
   "description": "AvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "main": "dist/js/avalynx-select.js",
   "module": "dist/js/avalynx-select.esm.js",

src/js/avalynx-select.js

@@ -3,7 +3,7 @@
  *
  * AvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-select/graphs/contributors
  * @website https://github.com/avalynx/