@lemonadejs/dropdown 3.6.2 → 5.2.0

package/README.md

@@ -1,8 +1,8 @@
-# LemonadeJS Dropdown
+# JavaScript Dropdown
 
-[Official website and documentation is here](https://lemonadejs.net/components/dropdown)
+[The Dropdown Documentation](https://lemonadejs.com/docs/plugins/dropdown)
 
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS 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.
 

package/dist/index.d.ts

@@ -7,6 +7,7 @@
 declare function Dropdown(el: HTMLElement, options?: Dropdown.Options): Dropdown.Instance;
 
 declare namespace Dropdown {
+
     interface Item {
         /** Value of the selected item. */
         value?: string | number;
@@ -35,8 +36,8 @@ declare namespace Dropdown {
         multiple?: boolean;
         /** Enables the autocomplete feature for user input */
         autocomplete?: boolean;
-        /** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
-        type?: 'default' | 'picker' | 'searchbar' | 'inline',
+        /** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline. auto will render picker or searchbar based on screensize */
+        type?: 'default' | 'auto' | 'picker' | 'searchbar' | 'inline',
         /** Defines the dropdown width */
         width?: number;
         /** The initial value of the dropdown */
@@ -45,18 +46,20 @@ declare namespace Dropdown {
         placeholder?: string;
         /** Allow insert new items */
         insert?: boolean;
-        /** Specifies the URL for fetching the data. */
+        /** Specifies the URL for fetching the data */
         url?: string;
+        /** Enables another ways to option insert */
+        prompt?: boolean | string | (() => string);
         /** Allow empty. Default: true */
-        allowempty?: boolean;
+        allowEmpty?: boolean;
         /** Event handler for value changes */
-        onchange?: (obj: object, newValue: string|number) => void;
+        onchange?: (self: object, newValue: string|number) => void;
         /** Event handler for when the dropdown is ready */
-        onload?: (obj: object) => void;
+        onload?: (self: object) => void;
         /** Event handler for when the dropdown opens */
-        onopen?: (obj: object) => void;
+        onopen?: (self: object) => void;
         /** Event handler for when the dropdown closes */
-        onclose?: (obj: object) => void;
+        onclose?: (self: object) => void;
         /**
          * Event handler for just before a new option is added to the dropdown. This is an async function to handle ajax requests.
          *     Example:
@@ -69,20 +72,38 @@ declare namespace Dropdown {
          *     }
          *
          * */
-        onbeforeinsert?: (obj: object, item: Item) => void;
+        onbeforeinsert?: (self: object, item: Item) => boolean | void;
         /** Event handler for when a new option is added to the dropdown */
-        oninsert?: (obj: object, item: Item) => void;
+        oninsert?: (self: object, item: Item) => void;
         /** Before the search happens */
-        onbeforesearch?: (obj: object, ajaxRequest: object) => boolean | null;
+        onbeforesearch?: (self: object, query: string, result: object[]) => boolean | null;
         /** Event handler for processing search results */
-        onsearch?: (obj: object, result: object) => void;
+        onsearch?: (self: object, query: string, result: object[]) => void;
     }
 
     interface Instance {
         /** Internal type */
-        type: 'dropdown';
-        /** Current internal value */
-        value: Record<number, string>;
+        type: 'default' | 'auto' | 'picker' | 'searchbar' | 'inline';
+        /** The initial value of the dropdown */
+        value?: string | string[] | number | number[];
+        /** Existing data */
+        data: Item[];
+        /** Add a new item */
+        add: (item: Item) => void;
+        /** Open dropdown */
+        open: () => void;
+        /** Close Dropdown */
+        close: () => void;
+        /** Dropdown state */
+        isClosed: () => boolean;
+        /** Get current value */
+        getValue: () => number | string | number[] | string[];
+        /** Get current value */
+        setValue: (value: number | string | number[] | string[]) => void;
+        /** Get current data */
+        getData: () => Item[];
+        /** Set current data */
+        setData: (data: Item[]) => void;
     }
 }
 

package/dist/index.js

@@ -17,36 +17,80 @@ if (!Modal && typeof (require) === 'function') {
     global.Dropdown = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
     // Default row height
     let defaultRowHeight = 24;
 
+    // Translations
+    const T = function(t) {
+        if (typeof(document) !== "undefined" && document.dictionary) {
+            return document.dictionary[t] || t;
+        } else {
+            return t;
+        }
+    }
+
+    const isEmpty = function(v) {
+        return v === '' || v === null || v === undefined || (Array.isArray(v) && v.length === 0);
+    }
+
     /**
-     * Compare two arrays to see if contains exact the same elements
-     * @param {number|number[]} a1
-     * @param {number|number[]} a2
+     * Compare two values (arrays, strings, numbers, etc.)
+     * Returns true if both are equal or empty
+     * @param {*} a1
+     * @param {*} a2
      */
-    const compareValues = function (a1, a2) {
+    const compareValues = function(a1, a2) {
+        if (a1 === a2 || (isEmpty(a1) && isEmpty(a2))) {
+            return true;
+        }
+
         if (!a1 || !a2) {
             return false;
         }
-        if (!Array.isArray(a1) || !Array.isArray(a2)) {
-            if (a1 === a2) {
-                return true;
-            } else {
-                return false;
-            }
-        } else {
-            let i = a1.length;
-            if (i !== a2.length) {
+
+        if (Array.isArray(a1) && Array.isArray(a2)) {
+            if (a1.length !== a2.length) {
                 return false;
             }
-            while (i--) {
+            for (let i = 0; i < a1.length; i++) {
                 if (a1[i] !== a2[i]) {
                     return false;
                 }
             }
+            return true;
         }
-        return true;
+
+        return a1 === a2;
     }
 
     const lazyLoading = function (self) {
@@ -303,7 +347,24 @@ if (!Modal && typeof (require) === 'function') {
         return data;
     }
 
-    const Dropdown = function (children) {
+    const isDOM = function(o) {
+        return (o instanceof Element || o instanceof HTMLDocument || o instanceof DocumentFragment);
+    }
+
+    const compatibilityMapping = function(s) {
+        const props = {
+            newOptions: 'insert',
+            allowempty: 'allowEmpty'
+        }
+        Object.keys(props).forEach((k) => {
+            if (typeof(s[k]) !== 'undefined') {
+                s[props[k]] = s[k];
+                delete s[k];
+            }
+        });
+    }
+
+    const Dropdown = function (children, { onchange, onload }) {
         let self = this;
         // Data
         let data = [];
@@ -313,12 +374,13 @@ if (!Modal && typeof (require) === 'function') {
         let cursor = null;
         // Control events
         let ignoreEvents = false;
-        // Default width
-        if (! self.width) {
-            self.width = 260;
-        }
         // Lazy loading global instance
         let lazyloading = null;
+        // Tracking changes
+        let changesDetected = false;
+
+        // Compatibility with jSuites
+        compatibilityMapping(self);
 
         // Data
         if (! Array.isArray(self.data)) {
@@ -332,16 +394,20 @@ if (!Modal && typeof (require) === 'function') {
             })
         }
 
+        // Decide the type based on the size of the screen
+        let autoType = self.type === 'auto';
+
         // Custom events defined by the user
-        let onload = self.onload;
-        let onchange = self.onchange;
+        let load = self.onload;
+        self.onload = null;
+        let change = self.onchange;
+        self.onchange = null;
 
         // Cursor controllers
         const setCursor = function (index, force) {
             let item = self.rows[index];
-
             if (typeof (item) !== 'undefined') {
-                // Set cursor number
+                // Set the cursor number
                 cursor = index;
                 // Set visual indication
                 item.cursor = true;
@@ -405,13 +471,36 @@ if (!Modal && typeof (require) === 'function') {
             setCursor(cursor);
         }
 
-        const setData = function () {
+        const adjustDimensions = function(data) {
             // Estimate width
-            let width = self.width;
+            let width = self.width ?? 0;
+            // Adjust the width
+            let w = getInput().offsetWidth;
+            if (width < w) {
+                width = w;
+            }
+            // Width && values
+            data.map(function (s) {
+                // Estimated width of the element
+                if (s.text) {
+                    let w = Math.max(width, s.text.length * 7.5);
+                    if (width < w) {
+                        width = w;
+                    }
+                }
+            });
+            // Min width for the container
+            self.container.parentNode.style.width = (width - 2) + 'px';
+        }
+
+        const setData = function () {
             // Data
             data = JSON.parse(JSON.stringify(self.data));
             // Re-order to make sure groups are in sequence
             if (data && data.length) {
+                // Adjust width and height
+                adjustDimensions(data);
+                // Groups
                 data.sort((a, b) => {
                     // Compare groups
                     if (a.group && b.group) {
@@ -428,33 +517,6 @@ if (!Modal && typeof (require) === 'function') {
                         group = v.group;
                     }
                 });
-                // Width && values
-                data.map(function (s) {
-                    // Estimated width of the element
-                    if (s.text) {
-                        width = Math.max(width, s.text.length * 8);
-                    }
-                });
-            }
-            // Adjust the width
-            if (typeof(self.width) === 'undefined') {
-                let w = self.input.offsetWidth;
-                if (width < w) {
-                    width = w;
-                }
-                // Estimated with based on the text
-                if (self.width < width) {
-                    self.width = width;
-                }
-                self.el.style.width = self.width + 'px';
-            }
-            // Min width for the container
-            self.container.parentNode.style.minWidth = self.width + 'px';
-            // Height
-            self.height = 400;
-            // Animation for mobile
-            if (document.documentElement.clientWidth < 800) {
-                self.animation = true;
             }
             // Data to be listed
             self.rows = data;
@@ -462,18 +524,18 @@ if (!Modal && typeof (require) === 'function') {
 
         const updateLabel = function () {
             if (value && value.length) {
-                self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
+                getInput().textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
             } else {
-                self.input.textContent = '';
+                getInput().textContent = '';
             }
         }
 
         const setValue = function (v, ignoreEvent) {
             // Values
             let newValue;
-            if (!Array.isArray(v)) {
-                if (typeof (v) === 'string') {
-                    newValue = v.split(';');
+            if (! Array.isArray(v)) {
+                if (typeof(v) === 'string') {
+                    newValue = v.split(self.divisor ?? ';');
                 } else {
                     newValue = [v];
                 }
@@ -486,12 +548,9 @@ if (!Modal && typeof (require) === 'function') {
 
             if (Array.isArray(data)) {
                 data.map(function (s) {
-                    // Select values
-                    if (newValue.indexOf(s.value) !== -1) {
-                        s.selected = true;
+                    s.selected = newValue.some(v => v == s.value);
+                    if (s.selected) {
                         value.push(s);
-                    } else {
-                        s.selected = false;
                     }
                 });
             }
@@ -500,8 +559,11 @@ if (!Modal && typeof (require) === 'function') {
             updateLabel();
 
             // Component onchange
-            if (! ignoreEvent && typeof(onchange) === 'function') {
-                onchange.call(self, self, getValue());
+            if (! ignoreEvent) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: getValue(),
+                });
             }
         }
 
@@ -520,38 +582,6 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const onclose = function () {
-            // Cursor
-            removeCursor(true);
-            // Reset search
-            if (self.autocomplete) {
-                // Go to begin of the data
-                self.rows = data;
-                // Remove editable attribute
-                self.input.removeAttribute('contenteditable');
-                // Clear input
-                self.input.textContent = '';
-            }
-
-            // Current value
-            let newValue = getValue();
-
-            // If that is different from the component value
-            if (!compareValues(newValue, self.value)) {
-                self.value = newValue;
-            } else {
-                // Update label
-                updateLabel();
-            }
-
-            // Identify the new state of the dropdown
-            self.state = false;
-
-            if (typeof (self.onclose) === 'function') {
-                self.onclose(self);
-            }
-        }
-
         const onopen = function () {
             self.state = true;
             // Value
@@ -567,17 +597,64 @@ if (!Modal && typeof (require) === 'function') {
             }
             // Prepare search field
             if (self.autocomplete) {
-                // Clear input
-                self.input.textContent = '';
+                // Get the input
+                let input = getInput();
                 // Editable
-                self.input.setAttribute('contenteditable', true);
+                input.setAttribute('contenteditable', true);
+                // Clear input
+                input.textContent = '';
                 // Focus on the item
-                self.input.focus();
+                input.focus();
+            }
+            // Adjust width and height
+            adjustDimensions(self.data);
+            // Open event
+            Dispatch.call(self, self.onopen, 'open', {
+                instance: self
+            });
+        }
+
+        const onclose = function (options, origin) {
+            // Cursor
+            removeCursor(true);
+            // Reset search
+            if (self.autocomplete) {
+                // Go to begin of the data
+                self.rows = data;
+                // Get the input
+                let input = getInput();
+                if (input) {
+                    // Remove editable attribute
+                    input.removeAttribute('contenteditable');
+                    // Clear input
+                    input.textContent = '';
+                }
             }
 
-            if (typeof (self.onopen) === 'function') {
-                self.onopen(self);
+            if (origin === 'escape') {
+                // Cancel operation and keep the same previous value
+                setValue(self.value, true);
+            } else {
+                // Current value
+                let newValue = getValue();
+
+                // If that is different from the component value
+                if (changesDetected === true && ! compareValues(newValue, self.value)) {
+                    self.value = newValue;
+                } else {
+                    // Update label
+                    updateLabel();
+                }
             }
+
+            // Identify the new state of the dropdown
+            self.state = false;
+
+            // Close event
+            Dispatch.call(self, self.onclose, 'close', {
+                instance: self,
+                ...options
+            });
         }
 
         const loadData = function(result) {
@@ -595,31 +672,210 @@ if (!Modal && typeof (require) === 'function') {
             if (typeof(self.value) !== 'undefined') {
                 setValue(self.value, true);
             }
-            // Custom event by the developer
-            if (typeof(onload) === 'function') {
-                onload(self);
+            // Onload method
+            Dispatch.call(self, load, 'load', {
+                instance: self
+            });
+            // Remove loading spin
+            self.el.classList.remove('lm-dropdown-loading');
+        }
+
+        const getInput = function() {
+            return self.input;
+        }
+
+        const search = function(str) {
+            if (! self.isClosed() && self.autocomplete) {
+                // Filter options
+                let temp;
+
+                const find = (prop) => {
+                    return prop && prop.toString().toLowerCase().includes(str);
+                }
+
+                if (! str) {
+                    temp = data;
+                } else {
+                    temp = data.filter(item => {
+                        return item.selected === true || find(item.text) || find(item.group) || find(item.keywords);
+                    });
+                }
+
+                let ret = Dispatch.call(self, self.onbeforesearch, 'beforesearch', {
+                    instance: self,
+                    query: str,
+                    result: temp,
+                });
+
+                if (typeof(ret) !== 'undefined') {
+                    if (ret === false) {
+                    } else if (Array.isArray(ret)) {
+                        temp = ret;
+                    }
+                }
+
+                // Cursor
+                removeCursor(true);
+                // Update the data from the dropdown
+                self.rows = temp;
+                // Event
+                Dispatch.call(self, self.onsearch, 'search', {
+                    instance: self,
+                    query: str,
+                    result: temp,
+                });
             }
         }
 
-        self.add = async function (e) {
-            if (!self.input.textContent) {
-                return false;
+        const events = {
+            focusout: (e) => {
+                if (self.modal) {
+                    if (! (e.relatedTarget && self.el.contains(e.relatedTarget))) {
+                        if (! self.isClosed()) {
+                            self.close({ origin: 'focusout '});
+                        }
+                    }
+                }
+            },
+            keydown: (e) => {
+                if (! self.isClosed()) {
+                    let prevent = false;
+                    if (e.code === 'ArrowUp') {
+                        moveCursor(-1);
+                        prevent = true;
+                    } else if (e.code === 'ArrowDown') {
+                        moveCursor(1);
+                        prevent = true;
+                    } else if (e.code === 'Home') {
+                        moveCursor(-1, true);
+                        if (!self.autocomplete) {
+                            prevent = true;
+                        }
+                    } else if (e.code === 'End') {
+                        moveCursor(1, true);
+                        if (!self.autocomplete) {
+                            prevent = true;
+                        }
+                    } else if (e.code === 'Enter') {
+                        if (e.target.tagName === 'BUTTON') {
+                            e.target.click();
+                            let input = getInput();
+                            input.focus();
+                        } else {
+                            select(e, self.rows[cursor]);
+                        }
+                        prevent = true;
+                    } else if (e.code === 'Escape') {
+                        self.close({ origin: 'escape'});
+                        prevent = true;
+                    } else {
+                        if (e.keyCode === 32 && !self.autocomplete) {
+                            select(e, self.rows[cursor]);
+                        }
+                    }
+
+                    if (prevent) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                } else {
+                    if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'Enter') {
+                        self.open();
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                }
+            },
+            mousedown: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    if (self.autocomplete) {
+                        let x;
+                        if (e.changedTouches && e.changedTouches[0]) {
+                            x = e.changedTouches[0].clientX;
+                        } else {
+                            x = e.clientX;
+                        }
+                        if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
+                            toggle();
+                        } else {
+                            self.open();
+                        }
+                    } else {
+                        toggle();
+                    }
+                }
+            },
+            paste: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    let text;
+                    if (e.clipboardData || e.originalEvent.clipboardData) {
+                        text = (e.originalEvent || e).clipboardData.getData('text/plain');
+                    } else if (window.clipboardData) {
+                        text = window.clipboardData.getData('Text');
+                    }
+                    text = text.replace(/(\r\n|\n|\r)/gm, "");
+                    document.execCommand('insertText', false, text)
+                    e.preventDefault();
+                }
+            },
+            input: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    search(e.target.textContent.toLowerCase());
+                }
+            },
+        }
+
+        const selectItem = function(s) {
+            if (self.multiple === true) {
+                let position = value.indexOf(s);
+                if (position === -1) {
+                    value.push(s);
+                    s.selected = true;
+                } else {
+                    value.splice(position, 1);
+                    s.selected = false;
+                }
+            } else {
+                if (value[0] === s) {
+                    if (self.allowEmpty === false) {
+                        s.selected = true;
+                    } else {
+                        s.selected = !s.selected;
+                    }
+                } else {
+                    if (value[0]) {
+                        value[0].selected = false;
+                    }
+                    s.selected = true;
+                }
+                if (s.selected) {
+                    value = [s];
+                } else {
+                    value = [];
+                }
             }
 
-            e.preventDefault();
+            changesDetected = true;
+        }
+
+        const add = async function (e) {
+            let input = getInput();
+            let text = input.textContent;
+            if (! text) {
+                return false;
+            }
 
             // New item
             let s = {
-                text: self.input.textContent,
-                value: self.input.textContent,
+                text: text,
+                value: text,
             }
 
             // Event
-            if (typeof (self.onbeforeinsert) === 'function') {
-                let elClass = self.el.classList;
-                elClass.add('lm-dropdown-loading');
+            if (typeof(self.onbeforeinsert) === 'function') {
+                self.el.classList.add('lm-dropdown-loading');
                 let ret = await self.onbeforeinsert(self, s);
-                elClass.remove('lm-dropdown-loading');
+                self.el.classList.remove('lm-dropdown-loading');
                 if (ret === false) {
                     return;
                 } else if (ret) {
@@ -627,125 +883,117 @@ if (!Modal && typeof (require) === 'function') {
                 }
             }
 
-            // Process the data
-            data.unshift(s);
-            // Select the new item
-            self.select(e, s);
-            // Close dropdown
-            self.search();
+            self.add(s);
 
-            // Event
-            if (typeof (self.oninsert) === 'function') {
-                self.oninsert(self, s);
+            e.preventDefault();
+        }
+
+        const select = function (e, s) {
+            if (s) {
+                selectItem(s);
+                // Close the modal
+                if (self.multiple !== true) {
+                    self.close({ origin: 'button' });
+                }
             }
         }
 
-        self.search = function () {
-            if (self.state && self.autocomplete) {
-                // Filter options
-                let temp;
-                let value = self.input.textContent.toLowerCase()
-                if (! value) {
-                    temp = data;
+        const toggle = function () {
+            if (self.modal) {
+                if (self.isClosed()) {
+                    self.open();
                 } else {
-                    temp = data.filter(item => {
-                        return item.selected === true ||
-                            (item.text.toLowerCase().includes(value)) ||
-                            (item.group && item.group.toLowerCase().includes(value)) ||
-                            (item.keywords.toLowerCase().includes(value));
-                    });
+                    self.close({ origin: 'button' });
                 }
-                // Cursor
-                removeCursor(true);
-                // Update the data from the dropdown
-                self.rows = temp;
             }
         }
 
-        self.open = function () {
-            if (self.modal && self.modal.closed) {
-                // Open the modal
-                self.modal.closed = false;
-            }
+        self.add = function (newItem) {
+            // Process the data
+            data.unshift(newItem);
+
+            // Refresh screen
+            self.result.unshift(newItem);
+            self.rows.unshift(newItem);
+            self.refresh('result');
+
+            Dispatch.call(self, self.oninsert, 'insert', {
+                instance: self,
+                item: newItem,
+            });
         }
 
-        self.close = function () {
-            // Close the modal
+        self.open = function () {
             if (self.modal) {
-                self.modal.closed = true;
+                if (self.isClosed()) {
+                    if (autoType) {
+                        self.type = window.innerWidth > 640 ? self.type = 'default' : (self.autocomplete ? 'searchbar' : 'picker');
+                    }
+                    // Track
+                    changesDetected = false;
+                    // Open the modal
+                    self.modal.open();
+                }
             }
         }
 
-        self.toggle = function () {
+        self.close = function (options) {
             if (self.modal) {
-                if (self.modal.closed) {
-                    self.open();
+                if (options?.origin) {
+                    self.modal.close(options)
                 } else {
-                    self.close();
+                    self.modal.close({ origin: 'button' })
                 }
             }
         }
 
-        self.click = function (e) {
-            if (self.autocomplete) {
-                let x;
-                if (e.changedTouches && e.changedTouches[0]) {
-                    x = e.changedTouches[0].clientX;
-                } else {
-                    x = e.clientX;
-                }
-                if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
-                    self.toggle();
-                } else {
-                    self.open();
-                }
-            } else {
-                self.toggle();
+        self.isClosed = function() {
+            if (self.modal) {
+                return self.modal.isClosed();
             }
         }
 
-        self.select = function (e, s) {
-            if (s) {
-                if (self.multiple === true) {
-                    let position = value.indexOf(s);
-                    if (position === -1) {
-                        value.push(s);
-                        s.selected = true;
-                    } else {
-                        value.splice(position, 1);
-                        s.selected = false;
-                    }
-                } else {
-                    if (value[0] === s) {
-                        if (self.allowempty === false) {
-                            s.selected = true;
-                        } else {
-                            s.selected = !s.selected;
-                        }
-                    } else {
-                        if (value[0]) {
-                            value[0].selected = false;
-                        }
-                        s.selected = true;
-                    }
-                    if (s.selected) {
-                        value = [s];
-                    } else {
-                        value = [];
-                    }
-                    // Close the modal
-                    self.close();
-                }
+        self.setData = function(data) {
+            self.data = data;
+        }
+
+        self.getData = function() {
+            return self.data;
+        }
+
+        self.getValue = function() {
+            return self.value;
+        }
+
+        self.setValue = function(v) {
+            self.value = v;
+        }
+
+        self.reset = function() {
+            self.value = null;
+            self.close({ origin: 'button' });
+        }
+
+        self.onevent = function(e) {
+            if (events[e.type]) {
+                events[e.type](e);
             }
         }
 
-        self.onload = function () {
-            if (self.type !== "inline") {
+        // Init with a
+        let input = self.input;
+
+        onload(() => {
+            if (self.type === "inline") {
+                // For inline dropdown
+                self.el.setAttribute('tabindex', 0);
+                // Remove search
+                self.input.remove();
+            } else {
                 // Create modal instance
                 self.modal = {
                     closed: true,
                     focus: false,
-                    width: self.width,
                     onopen: onopen,
                     onclose: onclose,
                     position: 'absolute',
@@ -754,74 +1002,50 @@ if (!Modal && typeof (require) === 'function') {
                 };
                 // Generate modal
                 Modal(self.el.children[1], self.modal);
-            } else {
-                // For inline dropdown
-                self.el.setAttribute('tabindex', 0);
+            }
+
+            // Autocomplete will be forced to be true when insert action is active
+            if ((self.insert || self.type === 'searchbar') && ! self.autocomplete) {
+                self.autocomplete = true;
+            }
+
+            if (typeof(input) !== 'undefined') {
+                // Remove the native element
+                if (isDOM(input)) {
+                    input.classList.add('lm-dropdown-input');
+                }
                 // Remove search
                 self.input.remove();
+                // New input
+                self.input = input;
             }
 
             // Default width
-            self.el.style.width = self.width + 'px';
-            // Container
-            self.container.parentNode.style.minWidth = self.width + 'px';
+            if (self.width) {
+                // Dropdown
+                self.el.style.width = self.width + 'px';
+            }
 
-            // Focus out of the component
-            self.el.addEventListener('focusout', function (e) {
-                if (self.modal) {
-                    if (!(e.relatedTarget && self.el.contains(e.relatedTarget)) && !self.el.contains(e.relatedTarget)) {
-                        if (!self.modal.closed) {
-                            self.modal.closed = true;
-                        }
-                    }
-                }
-            });
+            // Height
+            self.height = 400;
 
-            // Key events
-            self.el.addEventListener('keydown', function (e) {
-                if (! self.modal.closed) {
-                    let prevent = false;
-                    if (e.key === 'ArrowUp') {
-                        moveCursor(-1);
-                        prevent = true;
-                    } else if (e.key === 'ArrowDown') {
-                        moveCursor(1);
-                        prevent = true;
-                    } else if (e.key === 'Home') {
-                        moveCursor(-1, true);
-                        if (!self.autocomplete) {
-                            prevent = true;
-                        }
-                    } else if (e.key === 'End') {
-                        moveCursor(1, true);
-                        if (!self.autocomplete) {
-                            prevent = true;
-                        }
-                    } else if (e.key === 'Enter') {
-                        self.select(e, self.rows[cursor]);
-                        prevent = true;
-                    } else if (e.key === 'Escape') {
-                        self.modal.closed = true;
-                        prevent = true;
-                    } else {
-                        if (e.keyCode === 32 && !self.autocomplete) {
-                            self.select(e, self.rows[cursor]);
-                        }
-                    }
+            // Animation for mobile
+            if (document.documentElement.clientWidth < 800) {
+                self.animation = true;
+            }
 
-                    if (prevent) {
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                    }
-                } else {
-                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') {
-                        self.modal.closed = false;
-                    }
-                }
-            });
+            // Events
+            self.el.addEventListener('focusout', events.focusout);
+            self.el.addEventListener('keydown', events.keydown);
+            self.el.addEventListener('mousedown', events.mousedown);
+            self.el.addEventListener('paste', events.paste);
+            self.el.addEventListener('input', events.input);
 
             // Load remote data
             if (self.url) {
+                // Loading spin
+                self.el.classList.add('lm-dropdown-loading');
+                // Load remote data
                 fetch(self.url, {
                     headers: {
                         'Content-Type': 'text/json',
@@ -830,9 +1054,9 @@ if (!Modal && typeof (require) === 'function') {
             } else {
                 loadData();
             }
-        }
+        });
 
-        self.onchange = function (prop) {
+        onchange(prop => {
             if (prop === 'value') {
                 setValue(self.value);
             } else if (prop === 'data') {
@@ -843,36 +1067,21 @@ if (!Modal && typeof (require) === 'function') {
             if (typeof (lazyloading) === 'function') {
                 lazyloading(prop);
             }
-        }
-
-        /**
-         * Sanitize any HTML from be paste on the search
-         * @param e
-         */
-        self.onpaste = function (e) {
-            let text;
-            if (e.clipboardData || e.originalEvent.clipboardData) {
-                text = (e.originalEvent || e).clipboardData.getData('text/plain');
-            } else if (window.clipboardData) {
-                text = window.clipboardData.getData('Text');
-            }
-            text = text.replace(/(\r\n|\n|\r)/gm, "");
-            document.execCommand('insertText', false, text)
-            e.preventDefault();
-        }
+        });
 
-        return `<div class="lm-dropdown" data-insert="{{self.insert}}" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value" :data="self.data">
+        return render => render`<div class="lm-dropdown" data-state="{{self.state}}" data-insert="{{self.insert}}" data-type="{{self.type}}" :value="self.value" :data="self.data">
             <div class="lm-dropdown-header">
-                <div class="lm-dropdown-input" onpaste="self.onpaste" oninput="self.search" onmousedown="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
-                <div class="lm-dropdown-add" onmousedown="self.add"></div>
+                <div class="lm-dropdown-input" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+                <button class="lm-dropdown-add" onclick="${add}" tabindex="0"></button>
                 <div class="lm-dropdown-header-controls">
-                    <button onclick="self.close" class="lm-dropdown-done">Done</button>
+                    <button onclick="self.reset" class="lm-dropdown-done">${T('Reset')}</button>
+                    <button onclick="self.close" class="lm-dropdown-done">${T('Done')}</button>
                 </div>
             </div>
             <div class="lm-dropdown-content">
                 <div>
                     <div :loop="self.result" :ref="self.container" :rows="self.rows">
-                        <div class="lm-dropdown-item" onclick="self.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.header}}">
+                        <div class="lm-dropdown-item" onclick="${select}" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.header}}">
                             <div><img :src="self.image" /> <div>{{self.text}}</div></div>
                         </div>
                     </div>

package/dist/style.css

@@ -1,9 +1,9 @@
 .lm-dropdown {
-    display: inline-block;
     user-select: none;
     cursor: pointer;
     box-sizing: border-box;
     outline-offset: 1px;
+    vertical-align: top;
 }
 
 .lm-dropdown-header {
@@ -23,18 +23,19 @@
     cursor: pointer;
     padding: 15px;
     font-weight: bold;
-    outline: 0;
     border: 0;
     color: var(--lm-main-color);
+    margin: 1px;
 }
 
 .lm-dropdown-content {
     position: relative;
+    margin-top: 1px;
 }
 
 .lm-dropdown .lm-modal {
     padding: 0;
-    min-width: initial;
+    min-width: 100%;
     min-height: 5px;
     border: 1px solid var(--lm-border-color, #ccc);
     border-radius: 0;
@@ -50,9 +51,17 @@
     box-sizing: border-box;
     width: 100%;
     background: var(--lm-background-color, #fff);
-    border: 1px solid var(--lm-border-color, #ccc);
-    min-height: 1em;
-    border-radius: 2px;
+    border: 1px solid var(--lm-border-color, #767676);
+    border-radius: var(--lm-border-radius, 2px);
+    position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+    .lm-dropdown-input {
+        background: var(--lm-background-color, #3b3b3b);
+        border: 1px solid var(--lm-border-color, #858585);
+        color: var(--lm-text-color, #fff);
+    }
 }
 
 .lm-dropdown-input > br {
@@ -77,11 +86,16 @@
     transition: transform .1s ease-in-out;
 }
 
+.lm-application .lm-dropdown-add,
 .lm-dropdown-add {
     position: absolute;
-    padding: 12px;
-    right: 20px;
+    padding: 6px 6px;
+    right: 30px;
     display: none;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
 }
 
 .lm-dropdown-add::after {
@@ -136,7 +150,7 @@
     color: #000;
     display: flex;
     align-items: center;
-    padding: 4px 40px 4px 16px;
+    padding: 4px 40px 4px 10px;
     position: relative;
     box-sizing: border-box;
 }
@@ -208,7 +222,7 @@
     border-top: 1px solid var(--lm-border-color);
     border-bottom: 1px solid var(--lm-border-color);
     box-shadow: 0 0 12px rgb(0 0 0 / 22%);
-    justify-content: right;
+    justify-content: space-between;
 }
 
 .lm-dropdown[data-type="picker"] .lm-modal {
@@ -219,6 +233,10 @@
     height: 300px !important;
 }
 
+.lm-dropdown[data-type="picker"] .lm-lazy {
+    width: 100% !important;
+}
+
 .lm-dropdown[data-type="picker"] .lm-dropdown-item > div {
     border-bottom: solid 1px rgba(0, 0, 0, 0.2);
     text-transform: uppercase;
@@ -257,17 +275,16 @@
     position: initial;
 }
 
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header-controls {
-    display: initial;
-    position: fixed;
-    right: 0;
-    top: 0;
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header {
+    display: flex;
     background-color: #fff;
-    z-index: 1;
-    padding-top: 5px;
     box-sizing: border-box;
 }
 
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header-controls {
+    display: flex;
+}
+
 .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
     font-size: 1.5em;
     border-radius: 0;
@@ -279,6 +296,7 @@
     padding-bottom: 0;
     line-height: 60px;
     height: 60px;
+    flex: 1;
 }
 
 .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
@@ -286,7 +304,15 @@
 }
 
 .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
-    right: 100px;
+    right: 150px;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"]:not(.lm-dropdown-loading) .lm-dropdown-add::after {
+    content: 'add';
+    font-family: "Material Symbols Outlined", "Material Icons";
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
 }
 
 .lm-dropdown[data-type="searchbar"] .lm-modal {
@@ -312,12 +338,16 @@
 
 .lm-dropdown[data-type="searchbar"] .lm-lazy {
     max-height: initial;
+    width: 100% !important;
 }
 
+
+
+
+
 .lm-dropdown .lm-lazy {
     max-height: 300px;
     scrollbar-width: thin;
-    padding-bottom: 5px;
 }
 
 .lm-dropdown .lm-lazy::-webkit-scrollbar {
@@ -328,9 +358,9 @@
     width: 12px;
 }
 
-.lm-dropdown-loading .lm-dropdown-add::after {
-    content: '';
+.lm-dropdown.lm-dropdown-loading .lm-dropdown-add::after {
     position: absolute;
+    content: '';
     width: 12px;
     height: 12px;
     margin-top: -7px;

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.3",
-        "@lemonadejs/modal": "^3.3.0"
+        "lemonadejs": "^5.2.0",
+        "@lemonadejs/modal": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.6.2"
+    "version": "5.2.0"
 }