@lemonadejs/dropdown 3.0.9 → 3.0.12

package/dist/index.d.ts

@@ -1,58 +1,70 @@
-interface DropdownItem {
-    /** Value of the selected item. */
-    value?: string | number;
-    /** Description of the item */
-    text?: string;
-    /** Icon of the item */
-    image?: string;
-    /** Name of the group where the item belongs to */
-    group?: string;
-    /** Keywords to help finding one item */
-    synonym?: string[];
-    /** Item is disabled */
-    disabled?: boolean;
-    /** Color for the item */
-    color?: string;
-}
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Dropdown(el: HTMLElement, options?: Dropdown.Options): Dropdown.Instance;
+
+declare namespace Dropdown {
+    interface Item {
+        /** Value of the selected item. */
+        value?: string | number;
+        /** Description of the item */
+        text?: string;
+        /** Icon of the item */
+        image?: string;
+        /** Name of the group where the item belongs to */
+        group?: string;
+        /** Keywords to help finding one item */
+        synonym?: string[];
+        /** Item is disabled */
+        disabled?: boolean;
+        /** Color for the item */
+        color?: string;
+    }
+
+    interface Options {
+        /** Preloaded data items for the dropdown */
+        data?: Item[];
+        /** Format type of the data, typically { id: name } or { value: text } */
+        format?: number;
+        /** Indicates if multiple item selection is allowed */
+        multiple?: boolean;
+        /** Enables the autocomplete feature for user input */
+        autocomplete?: boolean;
+        /** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
+        type?: 'default' | 'picker' | 'searchbar' | 'inline',
+        /** Defines the dropdown's width */
+        width?: number;
+        /** The initial value of the dropdown */
+        value?: string | string[] | number | number[];
+        /** Placeholder text for the dropdown */
+        placeholder?: string;
+        /** Event handler for value changes */
+        onchange?: (el: HTMLElement, obj: object, oldValue: string, newValue: string) => void;
+        /** Event handler for when the dropdown is ready */
+        onload?: (el: HTMLElement, obj: object, data: any, val: any) => void;
+        /** Event handler for when the dropdown opens */
+        onopen?: (el: HTMLElement) => void;
+        /** Event handler for when the dropdown closes */
+        onclose?: (el: HTMLElement) => void;
+        /** Event handler for when a new option is added to the dropdown */
+        oninsert?: (obj: object, item: Item, newItem: Item) => void;
+        /** Event handler for just before a new option is added to the dropdown */
+        onbeforeinsert?: (obj: object, item: Item) => void;
+        /** Event handler for before a search on autocomplete is performed */
+        onbeforesearch?: (obj: object, ajaxRequest: object) => boolean | null;
+        /** Event handler for processing search results */
+        onsearch?: (obj: object, result: object) => void;
+    }
 
-interface DropdownOptions {
-    /** Preloaded data items for the dropdown */
-    data?: DropdownItem[];
-    /** Format type of the data, typically { id: name } or { value: text } */
-    format?: number;
-    /** Indicates if multiple item selection is allowed */
-    multiple?: boolean;
-    /** Enables the autocomplete feature for user input */
-    autocomplete?: boolean;
-    /** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
-    type?: 'default' | 'picker' | 'searchbar' | 'inline',
-    /** Defines the dropdown's width */
-    width?: number;
-    /** The initial value of the dropdown */
-    value?: string | string[] | number | number[];
-    /** Placeholder text for the dropdown */
-    placeholder?: string;
-    /** Event handler for value changes */
-    onchange?: (el: HTMLElement, obj: Dropdown, oldValue: string, newValue: string) => void;
-    /** Event handler for when the dropdown is ready */
-    onload?: (el: HTMLElement, obj: Dropdown, data: any, val: any) => void;
-    /** Event handler for when the dropdown opens */
-    onopen?: (el: HTMLElement) => void;
-    /** Event handler for when the dropdown closes */
-    onclose?: (el: HTMLElement) => void;
-    /** Event handler for when a new option is added to the dropdown */
-    oninsert?: (obj: Dropdown, item: DropdownItem, newItem: DropdownItem) => void;
-    /** Event handler for just before a new option is added to the dropdown */
-    onbeforeinsert?: (obj: Dropdown, item: DropdownItem) => void;
-    /** Event handler for before a search on autocomplete is performed */
-    onbeforesearch?: (obj: Dropdown, ajaxRequest: object) => boolean | null;
-    /** Event handler for processing search results */
-    onsearch?: (obj: Dropdown, result: object) => void;
+    interface Instance {
+        /** Internal type */
+        type: 'dropdown';
+        /** Current internal value */
+        value: Record<number, string>;
+    }
 }
 
-export type Dropdown = (el: HTMLElement, options: DropdownOptions) => {
-    /** Internal type */
-    type: 'dropdown';
-    /** Current internal value */
-    value: Record<number, string>;
-}
+export default Dropdown;

package/dist/index.js

@@ -214,6 +214,8 @@ if (!Modal && typeof (require) === 'function') {
             let adjust = getVisibleRows(false);
             if (adjust) {
                 el.scrollTop += adjust;
+                // Last adjust on the visible rows
+                getVisibleRows(false);
             }
         }
 
@@ -237,30 +239,34 @@ if (!Modal && typeof (require) === 'function') {
         let lazyloading = null;
 
         const setData = function() {
-            // Re-order to make sure groups are in sequence
-            self.data.sort((a, b) => {
-                // Compare groups
-                if (a.group && b.group) {
-                    return a.group.localeCompare(b.group);
-                }
-                return 0;
-            });
-            let group = '';
-            // Define group headers
-            self.data.map((v) => {
-                // Compare groups
-                if (v.group && v.group !== group) {
-                    v.header = true;
-                    group = v.group;
-                }
-            });
             // Estimate width
             let width = self.width;
-            // Width && values
-            self.data.map(function (s) {
-                // Estimated width of the element
-                width = Math.max(width, s.text.length * 8);
-            });
+            // Re-order to make sure groups are in sequence
+            if (self.data && self.data.length) {
+                self.data.sort((a, b) => {
+                    // Compare groups
+                    if (a.group && b.group) {
+                        return a.group.localeCompare(b.group);
+                    }
+                    return 0;
+                });
+                let group = '';
+                // Define group headers
+                self.data.map((v) => {
+                    // Compare groups
+                    if (v && v.group && v.group !== group) {
+                        v.header = true;
+                        group = v.group;
+                    }
+                });
+                // Width && values
+                self.data.map(function (s) {
+                    // Estimated width of the element
+                    if (s.text) {
+                        width = Math.max(width, s.text.length * 8);
+                    }
+                });
+            }
             // Adjust the width
             let w = self.input.offsetWidth;
             if (width < w) {
@@ -389,17 +395,25 @@ if (!Modal && typeof (require) === 'function') {
         }
 
         const getValue = function() {
-            if (value && value.length) {
-                return value.filter(v => v.selected).map(i => i.value);
+            if (self.multiple) {
+                if (value && value.length) {
+                    return value.filter(v => v.selected).map(i => i.value);
+                }
+                return [];
+            } else {
+                if (value && value.length) {
+                    return value[0].value;
+                } else {
+                    return '';
+                }
             }
-            return [];
         }
 
         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
@@ -419,8 +433,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
@@ -462,9 +474,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);
             }
         }
 
@@ -472,12 +489,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();
@@ -487,6 +506,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) {
@@ -533,9 +566,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);
@@ -554,7 +587,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;
                         }
                     }
                 }
@@ -602,7 +635,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/react.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Dropdown {
+    (): any
+    [key: string]: any
+}
+
+declare function Dropdown<Dropdown>(props: Component.Options): any;
+
+export default Dropdown;

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 .1s 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

@@ -15,8 +15,9 @@
     ],
     "dependencies": {
         "lemonadejs": "^4.0.7",
-        "@lemonadejs/modal": "^2.4.0"
+        "@lemonadejs/modal": "^2.4.6"
     },
     "main": "dist/index.js",
-    "version": "3.0.9"
+    "types": "dist/index.d.ts",
+    "version": "3.0.12"
 }