@lemonadejs/dropdown 3.2.1 → 3.5.0

package/dist/index.js

@@ -242,7 +242,7 @@ if (!Modal && typeof (require) === 'function') {
         }
     }
 
-    const Dropdown = function () {
+    const Dropdown = function (html) {
         let self = this;
         // Internal value controllers
         let value = [];
@@ -256,6 +256,29 @@ if (!Modal && typeof (require) === 'function') {
         }
         // Lazy loading global instance
         let lazyloading = null;
+
+        // Data
+        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 });
+                }
+            }
+        }
+
         // Custom events defined by the user
         let onload = self.onload;
         let onchange = self.onchange;
@@ -332,9 +355,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,7 +368,7 @@ 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;
@@ -351,7 +376,7 @@ if (!Modal && typeof (require) === 'function') {
                     }
                 });
                 // 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 +400,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 +411,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const setValue = function (v) {
+        const setValue = function (v, ignoreEvent) {
             // Values
             let newValue;
             if (!Array.isArray(v)) {
@@ -402,8 +427,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 +443,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 +469,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,7 +523,6 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-
         self.add = async function (e) {
             if (!self.input.textContent) {
                 return false;
@@ -526,7 +550,7 @@ if (!Modal && typeof (require) === 'function') {
             }
 
             // Process the data
-            self.data.push(s);
+            data.push(s);
             // Select the new item
             self.select(e, s);
             // Close dropdown
@@ -541,11 +565,11 @@ if (!Modal && typeof (require) === 'function') {
         self.search = function (e) {
             if (self.state && self.autocomplete) {
                 // Filter options
-                let data;
-                if (!self.input.textContent) {
-                    data = self.data;
+                let temp;
+                if (! self.input.textContent) {
+                    temp = self.data;
                 } else {
-                    data = self.data.filter(item => {
+                    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()));
@@ -554,7 +578,7 @@ if (!Modal && typeof (require) === 'function') {
                 // Cursor
                 removeCursor(true);
                 // Update the data from the dropdown
-                self.rows = data;
+                self.rows = temp;
             }
         }
 
@@ -661,17 +685,13 @@ if (!Modal && typeof (require) === 'function') {
                 self.input.remove();
             }
 
-            if (!Array.isArray(self.data)) {
-                self.data = [];
-            }
-
-            if (self.url && self.data.length === 0) {
+            if (self.url && data.length === 0) {
                 const xhr = new XMLHttpRequest();
                 
                 xhr.onreadystatechange = function () {
                     if (xhr.readyState === 4) {
                         if (xhr.status === 200) {
-                            self.data = JSON.parse(xhr.responseText);
+                            data = JSON.parse(xhr.responseText);
                         } else {
                             console.error('Failed to fetch data. Status code: ' + xhr.status);
                         }
@@ -689,21 +709,21 @@ if (!Modal && typeof (require) === 'function') {
             setData();
             // Set value
             if (typeof (self.value) !== 'undefined') {
-                setValue(self.value);
+                setValue(self.value, true);
             }
             // 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;
+                            self.modal.closed = true;
                         }
                     }
                 }
-            })
+            });
             // 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 +744,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,7 +758,7 @@ 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;
                     }
                 }
@@ -777,7 +800,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>
@@ -797,6 +820,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;
@@ -311,7 +307,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.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.2.1"
+    "version": "3.5.0"
 }