@lemonadejs/dropdown 3.0.12 → 3.0.13

package/README.md

@@ -0,0 +1,89 @@
+# LemonadeJS Dropdown
+
+[Official website and documentation is here](https://lemonadejs.net/components/dropdown)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.
+
+## Features
+
+-   Lightweight: The JavaScript Dropdown is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/dropdown
+```
+
+### CDN
+
+To use Dropdown via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+import Dropdown from '@lemonadejs/dropdown';
+import '@lemonadejs/dropdown/dist/style.css'
+import '@lemonadejs/modal/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    self.data = [
+        { text: "Red", value: 1 },
+        { text: "Blue", value: 2 },
+        { text: "Green", value: 3 },
+        { text: "Yellow", value: 4 },
+        { text: "Purple", value: 5 },
+        { text: "Gray", value: 6 },
+    ]
+
+    return `<div>
+        <Dropdown :data="self.data" :value="1" />
+    </div>`
+}
+```
+
+### Settings
+
+| Attribute | Description |
+|-----------|-------------|
+| data: Item[]  | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section. |
+| multiple?: boolean | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously. |
+| autocomplete?: boolean | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown. |
+| value?: string | Represents the current value or selected option in the Dropdown. |
+| type?: string | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance. |
+
+### Item Details
+
+| Attribute | Description |
+| --------- | ----------- |
+| value?: number or string | Represents the identifier or unique value associated with the option. |
+| group?: string | Indicates the group to which the option belongs, allowing for segregation and organization. |
+| text?: string | Displays the label or text associated with the option. |
+| image?: string | Specifies the image URL to be displayed alongside the option. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) LemonadeJS Dropdown is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -42,15 +42,15 @@ declare namespace Dropdown {
         /** Placeholder text for the dropdown */
         placeholder?: string;
         /** Event handler for value changes */
-        onchange?: (el: HTMLElement, obj: object, oldValue: string, newValue: string) => void;
+        onchange?: (obj: object, newValue: string|number) => void;
         /** Event handler for when the dropdown is ready */
-        onload?: (el: HTMLElement, obj: object, data: any, val: any) => void;
+        onload?: (obj: object) => void;
         /** Event handler for when the dropdown opens */
-        onopen?: (el: HTMLElement) => void;
+        onopen?: (obj: object) => void;
         /** Event handler for when the dropdown closes */
-        onclose?: (el: HTMLElement) => void;
+        onclose?: (obj: object) => void;
         /** Event handler for when a new option is added to the dropdown */
-        oninsert?: (obj: object, item: Item, newItem: Item) => void;
+        oninsert?: (obj: object, item: Item) => void;
         /** Event handler for just before a new option is added to the dropdown */
         onbeforeinsert?: (obj: object, item: Item) => void;
         /** Event handler for before a search on autocomplete is performed */

package/dist/index.js

@@ -238,6 +238,9 @@ if (!Modal && typeof (require) === 'function') {
         // Lazy loading global instance
         let lazyloading = null;
 
+        let onload = self.load;
+        let onchange = self.onchange;
+
         const setData = function() {
             // Estimate width
             let width = self.width;
@@ -392,6 +395,11 @@ if (!Modal && typeof (require) === 'function') {
 
             // Update label
             updateLabel();
+
+            // Component onchange
+            if (typeof(onchange) === 'function') {
+                onchange(self, self.value);
+            }
         }
 
         const getValue = function() {
@@ -427,6 +435,10 @@ if (!Modal && typeof (require) === 'function') {
             self.value = getValue();
             // Identify the new state of the dropdown
             self.state = false;
+
+            if (typeof(self.onclose) === 'function') {
+                self.onclose(self);
+            }
         }
 
         const onopen = function() {
@@ -452,6 +464,10 @@ if (!Modal && typeof (require) === 'function') {
                 // Focus on the item
                 self.input.focus();
             }
+
+            if (typeof(self.onopen) === 'function') {
+                self.onopen(self);
+            }
         }
 
         self.search = function() {
@@ -619,6 +635,10 @@ if (!Modal && typeof (require) === 'function') {
                     e.stopImmediatePropagation();
                 }
             });
+
+            if (typeof(onload) === 'function') {
+                onload(self);
+            }
         }
 
         self.onchange = function(prop) {
@@ -633,7 +653,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
+        return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value">
             <div class="lm-dropdown-header">
                 <div class="lm-dropdown-input" oninput="self.search" onfocus="self.open" onclick="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
                 <button onclick="self.close" class="lm-dropdown-done">Done</button>

package/package.json

@@ -15,9 +15,9 @@
     ],
     "dependencies": {
         "lemonadejs": "^4.0.7",
-        "@lemonadejs/modal": "^2.4.6"
+        "@lemonadejs/modal": "^2.4.9"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.0.12"
+    "version": "3.0.13"
 }