@lemonadejs/dropdown 3.5.0 → 3.6.0

package/dist/index.d.ts

@@ -45,6 +45,8 @@ declare namespace Dropdown {
         insert?: boolean;
         /** Specifies the URL for fetching the data. */
         url?: string;
+        /** Allow empty. Default: true */
+        allowempty?: boolean;
         /** Event handler for value changes */
         onchange?: (obj: object, newValue: string|number) => void;
         /** Event handler for when the dropdown is ready */

package/dist/index.js

@@ -242,16 +242,79 @@ if (!Modal && typeof (require) === 'function') {
         }
     }
 
-    const Dropdown = function (html) {
+    const getAttributeName = function(prop) {
+        if (prop.substring(0,1) === ':') {
+            prop = prop.substring(1);
+        } else if (prop.substring(0,3) === 'lm-') {
+            prop = prop.substring(3);
+        }
+        return prop.toLowerCase();
+    }
+
+    const extractFromHtml =  function(element) {
+        let data = [];
+        // Content
+        for (let i = 0; i < element.children.length; i++) {
+            let e = element.children[i];
+            let item = {
+                text: e.textContent || e.getAttribute('title'),
+                value: e.getAttribute('value'),
+            }
+            if (item.value == null) {
+                item.value = item.text;
+            }
+            data.push(item);
+        }
+
+        return data;
+    }
+
+    const extract = function(children) {
+        let data = [];
+
+        if (this.tagName) {
+            data = extractFromHtml(this);
+            // Remove all elements
+            this.textContent = '';
+        } else {
+            // Get data
+            if (typeof(children) === 'string') {
+                // Version 4
+                let d = document.createElement('div');
+                d.innerHTML = children;
+                data = extractFromHtml(d);
+            } else if (children && children.length) {
+                // Version 5
+                children.forEach((v) => {
+                    let item = {}
+                    v.props.forEach((prop) => {
+                        item[getAttributeName(prop.name)] = prop.value;
+                    });
+                    if (! item.text) {
+                        item.text = v.children[0]?.props[0]?.value || '';
+                    }
+                    data.push(item);
+                });
+                // Block children
+                children.length = 0;
+            }
+        }
+
+        return data;
+    }
+
+    const Dropdown = function (children) {
         let self = this;
+        // Data
+        let data = [];
         // Internal value controllers
         let value = [];
         // Cursor
         let cursor = null;
         // Control events
         let ignoreEvents = false;
-        // Default widht
-        if (!self.width) {
+        // Default width
+        if (! self.width) {
             self.width = 260;
         }
         // Lazy loading global instance
@@ -261,22 +324,12 @@ if (!Modal && typeof (require) === 'function') {
         if (! Array.isArray(self.data)) {
             self.data = [];
         }
-        let data = JSON.parse(JSON.stringify(self.data));
-
-        if (html) {
-            let select = document.createElement('select');
-            select.innerHTML = html.trim();
-            for (let i = 0; i < select.children.length; i++) {
-                let option = select.children[i];
-                if (option.tagName === 'OPTION') {
-                    let text = option.textContent;
-                    let value = option.getAttribute('value');
-                    if (value === null) {
-                        value = text;
-                    }
-                    self.data.push({ text: text, value: value });
-                }
-            }
+
+        let d = extract.call(this, children);
+        if (d) {
+            d.forEach((v) => {
+                self.data.push(v)
+            })
         }
 
         // Custom events defined by the user
@@ -371,7 +424,7 @@ if (!Modal && typeof (require) === 'function') {
                 data.map((v) => {
                     // Compare groups
                     if (v && v.group && v.group !== group) {
-                        v.header = true;
+                        v.header = v.group;
                         group = v.group;
                     }
                 });
@@ -523,6 +576,27 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
+        const loadData = function(result) {
+            // Loading controls
+            lazyloading = lazyLoading(self);
+            // Loading new data from a remote source
+            if (result) {
+                result.forEach((v) => {
+                    self.data.push(v);
+                });
+            }
+            // Process the data
+            setData();
+            // Set value
+            if (typeof(self.value) !== 'undefined') {
+                setValue(self.value, true);
+            }
+            // Custom event by the developer
+            if (typeof(onload) === 'function') {
+                onload(self);
+            }
+        }
+
         self.add = async function (e) {
             if (!self.input.textContent) {
                 return false;
@@ -550,11 +624,11 @@ if (!Modal && typeof (require) === 'function') {
             }
 
             // Process the data
-            data.push(s);
+            data.unshift(s);
             // Select the new item
             self.select(e, s);
             // Close dropdown
-            self.close();
+            self.search();
 
             // Event
             if (typeof (self.oninsert) === 'function') {
@@ -562,17 +636,16 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.search = function (e) {
+        self.search = function () {
             if (self.state && self.autocomplete) {
                 // Filter options
                 let temp;
-                if (! self.input.textContent) {
-                    temp = self.data;
+                let value = self.input.textContent.toLowerCase()
+                if (! value) {
+                    temp = data;
                 } else {
-                    temp = self.data.filter(item => {
-                        return item.selected === true ||
-                            (item.text.toLowerCase().includes(self.input.textContent.toLowerCase())) ||
-                            (item.group && item.group.toLowerCase().includes(self.input.textContent.toLowerCase()));
+                    temp = data.filter(item => {
+                        return item.selected === true || (item.text.toLowerCase().includes(value)) || (item.group && item.group.toLowerCase().includes(value));
                     });
                 }
                 // Cursor
@@ -637,7 +710,11 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 } else {
                     if (value[0] === s) {
-                        s.selected = !s.selected;
+                        if (self.allowempty === false) {
+                            s.selected = true;
+                        } else {
+                            s.selected = !s.selected;
+                        }
                     } else {
                         if (value[0]) {
                             value[0].selected = false;
@@ -655,14 +732,6 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.getGroup = function () {
-            if (this.group && this.header) {
-                return this.group;
-            } else {
-                return '';
-            }
-        }
-
         self.onload = function () {
             if (self.type !== "inline") {
                 // Create modal instance
@@ -685,32 +754,9 @@ if (!Modal && typeof (require) === 'function') {
                 self.input.remove();
             }
 
-            if (self.url && data.length === 0) {
-                const xhr = new XMLHttpRequest();
-                
-                xhr.onreadystatechange = function () {
-                    if (xhr.readyState === 4) {
-                        if (xhr.status === 200) {
-                            data = JSON.parse(xhr.responseText);
-                        } else {
-                            console.error('Failed to fetch data. Status code: ' + xhr.status);
-                        }
-                    }
-                };
-                
-                xhr.open('GET', self.url, true);
-                xhr.setRequestHeader('Content-Type', 'text/json')
-                xhr.send();
-            }
+            // Default width
+            self.el.style.width = self.width + 'px';
 
-            // Loading controls
-            lazyloading = lazyLoading(self);
-            // Process the data
-            setData();
-            // Set value
-            if (typeof (self.value) !== 'undefined') {
-                setValue(self.value, true);
-            }
             // Focus out of the component
             self.el.addEventListener('focusout', function (e) {
                 if (self.modal) {
@@ -721,6 +767,7 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 }
             });
+
             // Key events
             self.el.addEventListener('keydown', function (e) {
                 if (! self.modal.closed) {
@@ -763,9 +810,16 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 }
             });
-            // Custom event by the developer
-            if (typeof (onload) === 'function') {
-                onload(self);
+
+            // Load remote data
+            if (self.url) {
+                fetch(self.url, {
+                    headers: {
+                        'Content-Type': 'text/json',
+                    }
+                }).then(r => r.json()).then(loadData);
+            } else {
+                loadData();
             }
         }
 
@@ -809,7 +863,7 @@ if (!Modal && typeof (require) === 'function') {
             <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.parent.getGroup}}">
+                        <div class="lm-dropdown-item" onclick="self.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.header}}">
                             <div><img :src="self.image" /><span>{{self.text}}</span></div>
                         </div>
                     </div>

package/dist/style.css

@@ -55,6 +55,10 @@
     border-radius: 2px;
 }
 
+.lm-dropdown-input > br {
+    display: none;
+}
+
 .lm-dropdown-input:focus {
     outline: 2px solid var(--lm-border-outline, #000);
     outline-offset: -1px;
@@ -148,7 +152,11 @@
     margin-right: 6px;
 }
 
-.lm-dropdown-item > div > img[src=''] {
+.lm-dropdown-item > div > img:not([src]) {
+    display: none;
+}
+
+.lm-dropdown-item > div > img[src=""] {
     display: none;
 }
 

package/package.json

@@ -15,9 +15,9 @@
     ],
     "dependencies": {
         "lemonadejs": "^4.3.3",
-        "@lemonadejs/modal": "^3.2.0"
+        "@lemonadejs/modal": "^3.3.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.5.0"
+    "version": "3.6.0"
 }