@lemonadejs/dropdown 3.6.2 → 5.0.0

package/dist/index.js

@@ -405,13 +405,43 @@ if (!Modal && typeof (require) === 'function') {
             setCursor(cursor);
         }
 
-        const setData = function () {
+        const adjustDimensions = function(data) {
             // Estimate width
             let width = self.width;
+            // Adjust the width
+            let w = self.input.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';
+            // Height
+            self.height = 400;
+
+            // Animation for mobile
+            if (document.documentElement.clientWidth < 800) {
+                self.animation = true;
+            }
+        }
+
+        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 +458,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;
@@ -745,7 +748,6 @@ if (!Modal && typeof (require) === 'function') {
                 self.modal = {
                     closed: true,
                     focus: false,
-                    width: self.width,
                     onopen: onopen,
                     onclose: onclose,
                     position: 'absolute',
@@ -762,9 +764,12 @@ if (!Modal && typeof (require) === 'function') {
             }
 
             // 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';
+            }
+            // Adjust width and height
+            adjustDimensions(self.data);
 
             // Focus out of the component
             self.el.addEventListener('focusout', function (e) {

package/dist/style.css

@@ -34,7 +34,7 @@
 
 .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 +50,16 @@
     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);
+}
+
+@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 {
@@ -136,7 +143,7 @@
     color: #000;
     display: flex;
     align-items: center;
-    padding: 4px 40px 4px 16px;
+    padding: 4px 40px 4px 10px;
     position: relative;
     box-sizing: border-box;
 }
@@ -317,7 +324,6 @@
 .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.3.3",
-        "@lemonadejs/modal": "^3.3.0"
+        "lemonadejs": "^5.0.3",
+        "@lemonadejs/modal": "^5.0.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.6.2"
+    "version": "5.0.0"
 }