@lemonadejs/dropdown 3.2.2 → 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,20 +242,96 @@ if (!Modal && typeof (require) === 'function') {
         }
     }
 
-    const Dropdown = function () {
+    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
         let lazyloading = null;
+
+        // Data
+        if (! Array.isArray(self.data)) {
+            self.data = [];
+        }
+
+        let d = extract.call(this, children);
+        if (d) {
+            d.forEach((v) => {
+                self.data.push(v)
+            })
+        }
+
         // Custom events defined by the user
         let onload = self.onload;
         let onchange = self.onchange;
@@ -332,9 +408,11 @@ if (!Modal && typeof (require) === 'function') {
         const setData = function () {
             // Estimate width
             let width = self.width;
+            // Data
+            data = JSON.parse(JSON.stringify(self.data));
             // Re-order to make sure groups are in sequence
-            if (self.data && self.data.length) {
-                self.data.sort((a, b) => {
+            if (data && data.length) {
+                data.sort((a, b) => {
                     // Compare groups
                     if (a.group && b.group) {
                         return a.group.localeCompare(b.group);
@@ -343,15 +421,15 @@ if (!Modal && typeof (require) === 'function') {
                 });
                 let group = '';
                 // Define group headers
-                self.data.map((v) => {
+                data.map((v) => {
                     // Compare groups
                     if (v && v.group && v.group !== group) {
-                        v.header = true;
+                        v.header = v.group;
                         group = v.group;
                     }
                 });
                 // Width && values
-                self.data.map(function (s) {
+                data.map(function (s) {
                     // Estimated width of the element
                     if (s.text) {
                         width = Math.max(width, s.text.length * 8);
@@ -375,7 +453,7 @@ if (!Modal && typeof (require) === 'function') {
                 self.animation = true;
             }
             // Data to be listed
-            self.rows = self.data;
+            self.rows = data;
         }
 
         const updateLabel = function () {
@@ -386,7 +464,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const setValue = function (v) {
+        const setValue = function (v, ignoreEvent) {
             // Values
             let newValue;
             if (!Array.isArray(v)) {
@@ -402,8 +480,8 @@ if (!Modal && typeof (require) === 'function') {
             // Width && values
             value = [];
 
-            if (Array.isArray(self.data)) {
-                self.data.map(function (s) {
+            if (Array.isArray(data)) {
+                data.map(function (s) {
                     // Select values
                     if (newValue.indexOf(s.value) !== -1) {
                         s.selected = true;
@@ -418,7 +496,7 @@ if (!Modal && typeof (require) === 'function') {
             updateLabel();
 
             // Component onchange
-            if (typeof (onchange) === 'function') {
+            if (! ignoreEvent && typeof(onchange) === 'function') {
                 onchange.call(self, self, getValue());
             }
         }
@@ -444,7 +522,7 @@ if (!Modal && typeof (require) === 'function') {
             // Reset search
             if (self.autocomplete) {
                 // Go to begin of the data
-                self.rows = self.data;
+                self.rows = data;
                 // Remove editable attribute
                 self.input.removeAttribute('contenteditable');
                 // Clear input
@@ -498,6 +576,26 @@ 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) {
@@ -526,11 +624,11 @@ if (!Modal && typeof (require) === 'function') {
             }
 
             // Process the data
-            self.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') {
@@ -538,23 +636,22 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.search = function (e) {
+        self.search = function () {
             if (self.state && self.autocomplete) {
                 // Filter options
-                let data;
-                if (!self.input.textContent) {
-                    data = self.data;
+                let temp;
+                let value = self.input.textContent.toLowerCase()
+                if (! value) {
+                    temp = data;
                 } else {
-                    data = 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
                 removeCursor(true);
                 // Update the data from the dropdown
-                self.rows = data;
+                self.rows = temp;
             }
         }
 
@@ -613,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;
@@ -631,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
@@ -661,36 +754,9 @@ if (!Modal && typeof (require) === 'function') {
                 self.input.remove();
             }
 
-            if (!Array.isArray(self.data)) {
-                self.data = [];
-            }
-
-            if (self.url && self.data.length === 0) {
-                const xhr = new XMLHttpRequest();
-                
-                xhr.onreadystatechange = function () {
-                    if (xhr.readyState === 4) {
-                        if (xhr.status === 200) {
-                            self.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);
-            }
             // Focus out of the component
             self.el.addEventListener('focusout', function (e) {
                 if (self.modal) {
@@ -701,9 +767,10 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 }
             });
+
             // Key events
             self.el.addEventListener('keydown', function (e) {
-                if (!self.modal.closed) {
+                if (! self.modal.closed) {
                     let prevent = false;
                     if (e.key === 'ArrowUp') {
                         moveCursor(-1);
@@ -724,6 +791,9 @@ if (!Modal && typeof (require) === 'function') {
                     } 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]);
@@ -735,14 +805,21 @@ if (!Modal && typeof (require) === 'function') {
                         e.stopImmediatePropagation();
                     }
                 } else {
-                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') {
                         self.modal.closed = false;
                     }
                 }
             });
-            // 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();
             }
         }
 
@@ -777,7 +854,7 @@ if (!Modal && typeof (require) === 'function') {
 
         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-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-header-controls">
                     <button onclick="self.close" class="lm-dropdown-done">Done</button>
@@ -786,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>
@@ -797,6 +874,8 @@ if (!Modal && typeof (require) === 'function') {
 
     lemonade.setComponents({ Dropdown: Dropdown });
 
+    lemonade.createWebComponent('dropdown', Dropdown);
+
     return function (root, options) {
         if (typeof (root) === 'object') {
             lemonade.render(Dropdown, root, options)

package/dist/react.d.ts

@@ -6,10 +6,13 @@
 import Component from './index';
 
 interface Dropdown {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Dropdown<Dropdown>(props: Component.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Dropdown;
+
+declare function Dropdown<Dropdown>(props: Props): any;
 
 export default Dropdown;

package/dist/style.css

@@ -40,12 +40,8 @@
     border-radius: 0;
 }
 
-.lm-dropdown .lm-lazy {
-    max-height: 300px;
-}
-
 .lm-dropdown-input {
-    padding: 5px 24px 5px 10px;
+    padding: var(--lm-input-padding, 6px) 24px var(--lm-input-padding, 6px) 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,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;
@@ -152,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;
 }
 
@@ -311,7 +315,9 @@
 }
 
 .lm-dropdown .lm-lazy {
+    max-height: 300px;
     scrollbar-width: thin;
+    padding-bottom: 5px;
 }
 
 .lm-dropdown .lm-lazy::-webkit-scrollbar {

package/package.json

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