@lemonadejs/dropdown 3.2.0 → 3.2.2

package/dist/index.js

@@ -13,8 +13,8 @@ if (!Modal && typeof (require) === 'function') {
 
 ; (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-        typeof define === 'function' && define.amd ? define(factory) :
-            global.Dropdown = factory();
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Dropdown = factory();
 }(this, (function () {
 
     // Default row height
@@ -700,7 +700,7 @@ if (!Modal && typeof (require) === 'function') {
                         }
                     }
                 }
-            })
+            });
             // Key events
             self.el.addEventListener('keydown', function (e) {
                 if (!self.modal.closed) {
@@ -779,7 +779,9 @@ if (!Modal && typeof (require) === 'function') {
             <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>
-                <button onclick="self.close" class="lm-dropdown-done">Done</button>
+                <div class="lm-dropdown-header-controls">
+                    <button onclick="self.close" class="lm-dropdown-done">Done</button>
+                </div>
             </div>
             <div class="lm-dropdown-content">
                 <div>

package/dist/style.css

@@ -12,15 +12,24 @@
     align-items: center;
 }
 
-.lm-dropdown-header button {
+.lm-dropdown-header-controls {
     display: none;
-    border: 1px solid transparent;
+}
+
+.lm-application .lm-dropdown-header-controls button,
+.lm-dropdown-header-controls button {
     background-color: transparent;
     text-transform: uppercase;
     cursor: pointer;
     padding: 15px;
     font-weight: bold;
     outline: 0;
+    border: 0;
+    color: var(--lm-main-color);
+}
+
+.lm-dropdown-content {
+    position: relative;
 }
 
 .lm-dropdown .lm-modal {
@@ -132,6 +141,10 @@
     box-sizing: border-box;
 }
 
+.lm-dropdown-item > div > span:empty::before {
+    content: "\00a0";
+}
+
 .lm-dropdown-item > div > img {
     width: 24px;
     height: 24px;
@@ -170,18 +183,32 @@
 
 /** Picker */
 
-.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header button {
-    display: initial;
-    position: absolute;
-    border: 1px solid #ccc;
-    text-align: right;
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-content .lm-modal {
+    box-shadow: initial;
+    border: initial;
+}
+
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-content {
+    position: initial;
+}
+
+.lm-dropdown[data-type="picker"][data-state="true"] .lm-dropdown-header-controls {
+    display: flex;
+    position: fixed;
     bottom: 300px;
     left: 0;
     width: 100% !important;
+    background-color: #fff;
+    z-index: 1;
+    box-sizing: border-box;
+    border-top: 1px solid var(--lm-border-color);
+    border-bottom: 1px solid var(--lm-border-color);
+    box-shadow: 0 0 12px rgb(0 0 0 / 22%);
+    justify-content: right;
 }
 
 .lm-dropdown[data-type="picker"] .lm-modal {
-    position: absolute;
+    position: fixed;
     bottom: 0;
     left: 0;
     width: 100% !important;
@@ -204,7 +231,7 @@
 /** Searchbar */
 
 .lm-dropdown[data-type="searchbar"][data-state="true"] {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100% !important;
@@ -212,13 +239,29 @@
     display: flex;
     flex-direction: column;
     background-color: #fff;
+    z-index: 1;
+    box-sizing: border-box;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-content .lm-modal {
+    box-shadow: initial;
+    border: initial;
+    border-top: 1px solid var(--lm-border-color);
 }
 
-.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-done {
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-content {
+    position: initial;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-header-controls {
     display: initial;
-    border-left: 1px solid #ccc;
-    border-bottom: 1px solid #eee;
-    height: 100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background-color: #fff;
+    z-index: 1;
+    padding-top: 5px;
+    box-sizing: border-box;
 }
 
 .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {

package/package.json

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