@lemonadejs/dropdown 3.1.3 → 3.1.6

package/dist/index.js

@@ -20,17 +20,22 @@ if (!Modal && typeof (require) === 'function') {
     // Default row height
     let defaultRowHeight = 24;
 
-    const lazyLoading = function(self) {
-        /**
-         * Compare two arrays to see if contains exact the same elements
-         * @param {number[]} a1
-         * @param {number[]} a2
-         */
-        const compareArray = function (a1, a2) {
-            if (! a1 || ! a2) {
+    /**
+     * Compare two arrays to see if contains exact the same elements
+     * @param {number|number[]} a1
+     * @param {number|number[]} a2
+     */
+    const compareValues = function (a1, a2) {
+        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) {
                 return false;
@@ -40,9 +45,11 @@ if (!Modal && typeof (require) === 'function') {
                     return false;
                 }
             }
-            return true;
         }
+        return true;
+    }
 
+    const lazyLoading = function(self) {
         /**
          * Get the position from top of a row by its index
          * @param item
@@ -132,7 +139,7 @@ if (!Modal && typeof (require) === 'function') {
                 }
 
                 // Update visible rows
-                if (reset || ! compareArray(rows, self.result)) {
+                if (reset || ! compareValues(rows, self.result)) {
                     // Render the items
                     self.result = rows;
                     // Adjust scroll height
@@ -237,73 +244,24 @@ if (!Modal && typeof (require) === 'function') {
 
     const Dropdown = function () {
         let self = this;
+        // Internal value controllers
         let value = [];
+        // Cursor
         let cursor = null;
-
+        // Control events
+        let ignoreEvents = false;
+        // Default widht
         if (! self.width) {
             self.width = 260;
         }
-
         // Lazy loading global instance
         let lazyloading = null;
-
+        // Custom events defined by the user
         let onload = self.load;
         let onchange = self.onchange;
 
-        const setData = function() {
-            // Estimate width
-            let width = self.width;
-            // Re-order to make sure groups are in sequence
-            if (self.data && self.data.length) {
-                self.data.sort((a, b) => {
-                    // Compare groups
-                    if (a.group && b.group) {
-                        return a.group.localeCompare(b.group);
-                    }
-                    return 0;
-                });
-                let group = '';
-                // Define group headers
-                self.data.map((v) => {
-                    // Compare groups
-                    if (v && v.group && v.group !== group) {
-                        v.header = true;
-                        group = v.group;
-                    }
-                });
-                // Width && values
-                self.data.map(function (s) {
-                    // Estimated width of the element
-                    if (s.text) {
-                        width = Math.max(width, s.text.length * 8);
-                    }
-                });
-            }
-            // Adjust the width
-            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';
-            // Height
-            self.height = 400;
-            // Animation for mobile
-            if (document.documentElement.clientWidth < 800) {
-                self.animation = true;
-            }
-            // Data to be listed
-            self.rows = self.data;
-            // Set the initial value
-            if (typeof(self.value) !== 'undefined') {
-                setValue(self.value);
-            }
-        }
-
-        const setCursor = function(index) {
+        // Cursor controllers
+        const setCursor = function(index, force) {
             let item = self.rows[index];
 
             if (typeof(item) !== 'undefined') {
@@ -312,7 +270,7 @@ if (!Modal && typeof (require) === 'function') {
                 // Set visual indication
                 item.cursor = true;
                 // Go to the item on the scroll in case the item is not on the viewport
-                if (! (item.el && item.el.parentNode)) {
+                if (! (item.el && item.el.parentNode) || force === true) {
                     // Goto method
                     self.goto(item);
                 }
@@ -371,6 +329,55 @@ if (!Modal && typeof (require) === 'function') {
             setCursor(cursor);
         }
 
+        const setData = function() {
+            // Estimate width
+            let width = self.width;
+            // Re-order to make sure groups are in sequence
+            if (self.data && self.data.length) {
+                self.data.sort((a, b) => {
+                    // Compare groups
+                    if (a.group && b.group) {
+                        return a.group.localeCompare(b.group);
+                    }
+                    return 0;
+                });
+                let group = '';
+                // Define group headers
+                self.data.map((v) => {
+                    // Compare groups
+                    if (v && v.group && v.group !== group) {
+                        v.header = true;
+                        group = v.group;
+                    }
+                });
+                // Width && values
+                self.data.map(function (s) {
+                    // Estimated width of the element
+                    if (s.text) {
+                        width = Math.max(width, s.text.length * 8);
+                    }
+                });
+            }
+            // Adjust the width
+            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';
+            // Height
+            self.height = 400;
+            // Animation for mobile
+            if (document.documentElement.clientWidth < 800) {
+                self.animation = true;
+            }
+            // Data to be listed
+            self.rows = self.data;
+        }
+
         const updateLabel = function() {
             if (value && value.length) {
                 self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
@@ -396,7 +403,7 @@ if (!Modal && typeof (require) === 'function') {
             value = [];
 
             if (Array.isArray(self.data)) {
-                self.data.map(function (s) {
+                self.data.map(function(s) {
                     // Select values
                     if (newValue.indexOf(s.value) !== -1) {
                         s.selected = true;
@@ -412,7 +419,7 @@ if (!Modal && typeof (require) === 'function') {
 
             // Component onchange
             if (typeof(onchange) === 'function') {
-                onchange(self, self.value);
+                onchange(self, value);
             }
         }
 
@@ -443,10 +450,18 @@ if (!Modal && typeof (require) === 'function') {
                 // Clear input
                 self.input.textContent = '';
             }
-            // Update label
-            updateLabel();
-            // Update value
-            self.value = getValue();
+
+            // 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;
 
@@ -459,13 +474,14 @@ if (!Modal && typeof (require) === 'function') {
             self.state = true;
             // Value
             let v = value[value.length-1];
+            // Make sure goes back to the top of the scroll
+            if (self.container.parentNode.scrollTop > 0) {
+                self.container.parentNode.scrollTop = 0;
+            }
             // Move to the correct position
             if (v) {
                 // Mark the position of the cursor to the same element
-                setCursor(self.rows.indexOf(v));
-            } else {
-                // Go to begin of the data
-                self.rows = self.data;
+                setCursor(self.rows.indexOf(v), true);
             }
             // Prepare search field
             if (self.autocomplete) {
@@ -482,6 +498,46 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
+
+        self.add = async function(e) {
+            if (! self.input.textContent) {
+                return false;
+            }
+
+            e.preventDefault();
+
+            // New item
+            let s = {
+                text: self.input.textContent,
+                value: self.input.textContent,
+            }
+
+            // Event
+            if (typeof(self.onbeforeinsert) === 'function') {
+                let elClass = self.el.classList;
+                elClass.add('lm-dropdown-loading');
+                let ret = await self.onbeforeinsert(self, s);
+                elClass.remove('lm-dropdown-loading');
+                if (ret === false) {
+                    return;
+                } else if (ret) {
+                    s = ret;
+                }
+            }
+
+            // Process the data
+            self.data.push(s);
+            // Select the new item
+            self.select(e, s);
+            // Close dropdown
+            self.close();
+
+            // Event
+            if (typeof(self.oninsert) === 'function') {
+                self.oninsert(self, s);
+            }
+        }
+
         self.search = function(e) {
             if (self.state && self.autocomplete) {
                 // Filter options
@@ -516,7 +572,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.toggle = function(e) {
+        self.toggle = function() {
             if (self.modal) {
                 if (self.modal.closed) {
                     self.open();
@@ -527,16 +583,20 @@ if (!Modal && typeof (require) === 'function') {
         }
 
         self.click = function(e) {
-            let x;
-            if (e.changedTouches && e.changedTouches[0]) {
-                x = e.changedTouches[0].clientX;
+            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 {
-                x = e.clientX;
-            }
-            if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
                 self.toggle();
-            } else {
-                self.open();
             }
         }
 
@@ -604,6 +664,10 @@ if (!Modal && typeof (require) === 'function') {
             lazyloading = lazyLoading(self);
             // Process the data
             setData();
+            // Se value
+            if (self.value) {
+                setValue(self.value);
+            }
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
                 if (self.modal) {
@@ -647,7 +711,7 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 }
             });
-
+            // Custom event by the developer
             if (typeof(onload) === 'function') {
                 onload(self);
             }
@@ -658,6 +722,7 @@ if (!Modal && typeof (require) === 'function') {
                 setValue(self.value);
             } else if (prop === 'data') {
                 setData();
+                self.value = null;
             }
 
             if (typeof(lazyloading) === 'function') {
@@ -681,46 +746,7 @@ if (!Modal && typeof (require) === 'function') {
             e.preventDefault();
         }
 
-        self.add = async function(e) {
-            if (! self.input.textContent) {
-                return false;
-            }
-
-            e.preventDefault();
-
-            // New item
-            let s = {
-                text: self.input.textContent,
-                value: self.input.textContent,
-            }
-
-            // Event
-            if (typeof(self.onbeforeinsert) === 'function') {
-                let elClass = self.el.classList;
-                elClass.add('lm-dropdown-loading');
-                let ret = await self.onbeforeinsert(self, s);
-                elClass.remove('lm-dropdown-loading');
-                if (ret === false) {
-                    return;
-                } else if (ret) {
-                    s = ret;
-                }
-            }
-
-            // Process the data
-            self.data.push(s);
-            // Select the new item
-            self.select(e, s);
-            // Close dropdown
-            self.close();
-
-            // Event
-            if (typeof(self.oninsert) === 'function') {
-                self.oninsert(self, s);
-            }
-        }
-
-        return `<div class="lm-dropdown" data-insert="{{self.insert}}" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value">
+        return `<div class="lm-dropdown" data-insert="{{self.insert}}" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value" :data="self.data">
             <div class="lm-dropdown-header">
                 <div class="lm-dropdown-input" onpaste="self.onpaste" oninput="self.search" onfocus="self.open" onmousedown="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
                 <div class="lm-dropdown-add" onmousedown="self.add"></div>

package/dist/style.css

@@ -63,7 +63,7 @@
 
 .lm-dropdown-add {
     position: absolute;
-    padding: 10px;
+    padding: 12px;
     right: 20px;
     display: none;
 }

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.0.7",
+        "lemonadejs": "^4.1.0",
         "@lemonadejs/modal": "^2.7.1"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.1.3"
+    "version": "3.1.6"
 }