@lemonadejs/dropdown 3.0.8 → 3.0.10

package/dist/index.js

@@ -18,7 +18,7 @@ if (!Modal && typeof (require) === 'function') {
 }(this, (function () {
 
     // Default row height
-    let defaultRowHeight = 26;
+    let defaultRowHeight = 24;
 
     const lazyLoading = function(self) {
         /**
@@ -67,31 +67,51 @@ if (!Modal && typeof (require) === 'function') {
         const updateScroll = function() {
             let items = self.rows;
             if (items) {
+                // Before control
+                let before = true;
                 // Total of items in the container
                 let numOfItems = items.length;
                 // Position from top
                 let height = 0;
+                // Size of the adjustment
+                let size = 0;
                 // Go through the items
                 for (let j = 0; j < numOfItems; j++) {
-                    height += items[j].height || defaultRowHeight;
+                    let h = items[j].height || defaultRowHeight;
+                    // Height
+                    height += h;
+                    // Start tracking all items as before
+                    if (items[j] === self.result[0]) {
+                        before = false;
+                    }
+                    // Adjustment
+                    if (before) {
+                        size += h;
+                    }
                 }
                 // Update height
                 scroll.style.height = height + 'px';
+                // Adjust scroll position
+                return size;
             }
+            return false;
         }
 
         const getVisibleRows = function(reset) {
             let items = self.rows;
             if (items) {
-                let rows = [];
+                let adjust;
                 // Total of items in the container
                 let numOfItems = items.length;
-                // Height
-                let height = 0;
-                // Controls
+                // Get the position from top
                 let y = el.scrollTop;
+                // Get the height
                 let h = y + (el.offsetHeight || self.height);
                 // Go through the items
+                let rows = [];
+                // Height
+                let height = 0;
+                // Go through all items
                 for (let j = 0; j < numOfItems; j++) {
                     if (items[j].visible !== false) {
                         // Height
@@ -106,6 +126,7 @@ if (!Modal && typeof (require) === 'function') {
 
                 // Update visible rows
                 if (reset || ! compareArray(rows, self.result)) {
+                    // Render the items
                     self.result = rows;
                     // Adjust scroll height
                     let adjustScroll = reset;
@@ -126,7 +147,8 @@ if (!Modal && typeof (require) === 'function') {
 
                     // Update scroll if the height of one element has been changed
                     if (adjustScroll) {
-                        updateScroll();
+                        // Adjust the scroll height
+                        adjust = updateScroll();
                     }
                 }
 
@@ -137,6 +159,8 @@ if (!Modal && typeof (require) === 'function') {
                     diff = 0;
                 }
                 self.container.style.top = diff + 'px';
+
+                return adjust;
             }
         }
 
@@ -151,13 +175,17 @@ if (!Modal && typeof (require) === 'function') {
             getVisibleRows(reset);
         }
 
+        /**
+         * Will adjust the items based on the scroll position offset
+         */
         self.adjustPosition = function(item) {
             if (item.el) {
-                let calc = item.el.offsetTop + item.el.offsetHeight;
+                let h = item.el.offsetHeight;
+                let calc = item.el.offsetTop + h;
                 if (calc > el.offsetHeight) {
                     let size = calc - el.offsetHeight;
-                    if (size < defaultRowHeight) {
-                        size = defaultRowHeight;
+                    if (size < h) {
+                        size = h;
                     }
                     el.scrollTop -= -1 * size;
                 }
@@ -166,7 +194,6 @@ if (!Modal && typeof (require) === 'function') {
 
         // Controls
         const scrollControls = function() {
-            // Get all items that should be visible based on the position of the scroll
             getVisibleRows(false);
         }
 
@@ -184,8 +211,12 @@ if (!Modal && typeof (require) === 'function') {
 
         self.goto = function(item) {
             el.scrollTop = getRowPosition(item);
-            // Get all items that should be visible based on the position of the scroll
-            getVisibleRows(false);
+            let adjust = getVisibleRows(false);
+            if (adjust) {
+                el.scrollTop += adjust;
+                // Last adjust on the visible rows
+                getVisibleRows(false);
+            }
         }
 
         return (prop) => {
@@ -368,9 +399,9 @@ if (!Modal && typeof (require) === 'function') {
 
         const onclose = function() {
             // Cursor
-            removeCursor();
+            removeCursor(true);
             // Reset search
-            if (self.autocomplete && self.input.textContent) {
+            if (self.autocomplete) {
                 // Go to begin of the data
                 self.rows = self.data;
                 // Remove editable attribute
@@ -390,8 +421,6 @@ if (!Modal && typeof (require) === 'function') {
             self.state = true;
             // Value
             let v = value[value.length-1];
-            // Cursor
-            removeCursor();
             // Move to the correct position
             if (v) {
                 // Go to the last item in the array of values
@@ -433,9 +462,14 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
+        let timer = null;
+
         self.open = function () {
             if (self.modal && self.modal.closed) {
+                // Open the modal
                 self.modal.closed = false;
+                // Timer
+                timer = setTimeout(() => timer = null, 400);
             }
         }
 
@@ -443,12 +477,14 @@ if (!Modal && typeof (require) === 'function') {
             // Close the modal
             if (self.modal) {
                 self.modal.closed = true;
-                // Remove cursor
-                removeCursor(true);
             }
         }
 
-        self.toggle = function() {
+        self.toggle = function(e) {
+            if (timer) {
+                return;
+            }
+
             if (self.modal) {
                 if (self.modal.closed) {
                     self.open();
@@ -458,6 +494,20 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
+        self.click = function(e) {
+            let x;
+            if (e.changedTouches && e.changedTouches[0]) {
+                x = e.changedTouches[0].clientX;
+            } else {
+                x = e.clientX;
+            }
+            if (e.target.offsetWidth - (x - e.target.offsetLeft) < 24) {
+                self.toggle();
+            } else {
+                self.open();
+            }
+        }
+
         self.select = function(e, s) {
             if (s) {
                 if (self.multiple === true) {
@@ -504,9 +554,9 @@ if (!Modal && typeof (require) === 'function') {
                     closed: true,
                     focus: false,
                     width: self.width,
-                    'auto-close': false,
                     onopen: onopen,
                     onclose: onclose,
+                    'auto-close': false,
                 };
                 // Generate modal
                 Modal(self.el.children[1], self.modal);
@@ -525,7 +575,7 @@ if (!Modal && typeof (require) === 'function') {
                 if (self.modal) {
                     if (! (e.relatedTarget && self.el.contains(e.relatedTarget)) && !self.el.contains(e.relatedTarget)) {
                         if (! self.modal.closed) {
-                            self.close();
+                            self.modal.closed = true;
                         }
                     }
                 }
@@ -573,7 +623,7 @@ if (!Modal && typeof (require) === 'function') {
 
         return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
             <div class="lm-dropdown-header">
-                <div class="lm-dropdown-input" oninput="self.search" onfocus="self.open" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+                <div class="lm-dropdown-input" oninput="self.search" onfocus="self.open" onclick="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
                 <button onclick="self.close" class="lm-dropdown-done">Done</button>
             </div>
             <div class="lm-dropdown-content">

package/dist/style.css

@@ -44,13 +44,28 @@
     cursor: pointer;
     box-sizing: border-box;
     width: 100%;
-    background-repeat: no-repeat;
-    background-position: top 50% right 0;
-    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
     border: 1px solid #ccc;
     min-height: 1em;
 }
 
+.lm-dropdown-input::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    right: 2px;
+    top: 2px;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
+    transition: transform .2s ease-in-out;
+}
+
+
+.lm-dropdown[data-state="true"] .lm-dropdown-input::after {
+    transform: rotate(-180deg);
+}
+
+
 .lm-dropdown-input:empty::before {
     content: "\00a0";
 }

package/package.json

@@ -18,5 +18,5 @@
         "@lemonadejs/modal": "^2.4.0"
     },
     "main": "dist/index.js",
-    "version": "3.0.8"
+    "version": "3.0.10"
 }