@lemonadejs/dropdown 3.1.10 → 3.2.0

package/README.md

@@ -62,33 +62,105 @@ export default function App() {
 }
 ```
 
+Quick example with React
+
+```jsx
+import React, { useRef } from 'react';
+import Dropdown from '@lemonadejs/dropdown/dist/react';
+import '@lemonadejs/dropdown/dist/style.css'
+import '@lemonadejs/modal/dist/style.css';
+
+const data = [
+    { text: "Red", value: 1 },
+    { text: "Blue", value: 2 },
+    { text: "Green", value: 3 },
+    { text: "Yellow", value: 4 },
+    { text: "Purple", value: 5 },
+    { text: "Gray", value: 6 },
+]
+export default function App() {
+    const dropdown = useRef();
+    return (
+        <div>
+            <Dropdown data={data} ref={dropdown} value={1} />
+        </div>);
+}
+```
+
+Quick example with Vue
+
+```vue
+<template>
+    <Dropdown :data="data" :value="1" />
+</template>
+
+<script>
+import Dropdown from '@lemonadejs/dropdown/dist/vue'
+import '@lemonadejs/dropdown/dist/style.css'
+import '@lemonadejs/modal/dist/style.css'
+
+export default {
+    name: 'App',
+    components: {
+        Dropdown
+    },
+    data() {
+        return {
+            data: [
+                { text: "Red", value: 1 },
+                { text: "Blue", value: 2 },
+                { text: "Green", value: 3 },
+                { text: "Yellow", value: 4 },
+                { text: "Purple", value: 5 },
+                { text: "Gray", value: 6 },
+            ]
+        };
+    },
+}
+</script>
+```
+
 ### Settings
 
-| Attribute | Description |
-|-----------|-------------|
-| data: Item[]  | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section. |
-| multiple?: boolean | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously. |
-| autocomplete?: boolean | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown. |
-| value?: string | Represents the current value or selected option in the Dropdown. |
-| type?: string | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance. |
-| insert?: boolean | Enables the `insert` feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol. |
+| Attribute              | Description                                                                                                                                                                               |
+|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| data: Item[]           | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section.                                                                         |
+| multiple?: boolean     | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously.                                                                           |
+| autocomplete?: boolean | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown.                                            |
+| value?: string         | Represents the current value or selected option in the Dropdown.                                                                                                                          |
+| type?: string          | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance. |
+| insert?: boolean       | Enables the `insert` feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol.                                                       |
+| format?: number | Data format type, usually in the form of { id: name } or { value: text } |
+| width?: number | Specifies the width of the dropdown. |
+| placeholder?: string | Placeholder text to guide users in the dropdown. |
+| url?: string | Specifies the URL for fetching the data. Do not declare the `data` attribute for the url to function properly.  |
 
 ### Item Details
 
-| Attribute | Description |
-| --------- | ----------- |
-| value?: number or string | Represents the identifier or unique value associated with the option. |
-| group?: string | Indicates the group to which the option belongs, allowing for segregation and organization. |
-| text?: string | Displays the label or text associated with the option. |
-| image?: string | Specifies the image URL to be displayed alongside the option. |
+| Attribute                | Description                                                                                 |
+|--------------------------|---------------------------------------------------------------------------------------------|
+| value?: number or string | Represents the identifier or unique value associated with the option.                       |
+| group?: string           | Indicates the group to which the option belongs, allowing for segregation and organization. |
+| text?: string            | Displays the label or text associated with the option.                                      |
+| image?: string           | Specifies the image URL to be displayed alongside the option.                               |
+| synonyms?: string[] | Keywords for easier item identification |
+| disabled?: boolean | Indicates whether the item is currently disabled |
+| color?: string | Specifies the color associated with the item |
 
 ### Events
 
-| Event | Trigger |
-| ----- | ------- |
-| onclose?: () => void | Invoked when the dropdown modal is closed. |
+| Event                                     | Trigger                                                                    |
+|-------------------------------------------|----------------------------------------------------------------------------|
+| onclose?: () => void                      | Invoked when the dropdown modal is closed.                                 |
 | onbeforeinsert?: (instance, Item) => void | Invoked before an item is added to the options through the insert feature. |
-| oninsert?: (instance, Item) => void | Invoked after an item is added to the options through the insert feature. |
+| oninsert?: (instance, Item) => void       | Invoked after an item is added to the options through the insert feature.  |
+| onchange?: (instance, Item) => void       | Invoked when the value changes.                                            |
+| onload?: (instance, Item) => void         | Invoked when appended to the DOM.                                          |
+| onsearch?: (instance, Item) => void | Invoked when searching for an item.
+ |
+| onbeforesearch?: (instance, Item) => void | Invoked before initiating a search.
+ |
+| onopen?: (instance) => void | Invoked when the dropdown is opened. |
 
 ## License
 
@@ -96,5 +168,5 @@ The [LemonadeJS](https://lemonadejs.net) LemonadeJS Dropdown is released under t
 
 ## Other Tools
 
--   [jSuites](https://jsuites.net/v4/)
+-   [jSuites](https://jsuites.net/docs)
 -   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -43,6 +43,8 @@ declare namespace Dropdown {
         placeholder?: string;
         /** Allow insert new items */
         insert?: boolean;
+        /** Specifies the URL for fetching the data. */
+        url?: string;
         /** Event handler for value changes */
         onchange?: (obj: object, newValue: string|number) => void;
         /** Event handler for when the dropdown is ready */

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
@@ -26,10 +26,10 @@ if (!Modal && typeof (require) === 'function') {
      * @param {number|number[]} a2
      */
     const compareValues = function (a1, a2) {
-        if (! a1 || ! a2) {
+        if (!a1 || !a2) {
             return false;
         }
-        if (! Array.isArray(a1) || ! Array.isArray(a2)) {
+        if (!Array.isArray(a1) || !Array.isArray(a2)) {
             if (a1 === a2) {
                 return true;
             } else {
@@ -49,13 +49,13 @@ if (!Modal && typeof (require) === 'function') {
         return true;
     }
 
-    const lazyLoading = function(self) {
+    const lazyLoading = function (self) {
         /**
          * Get the position from top of a row by its index
          * @param item
          * @returns {number}
          */
-        const getRowPosition = function(item) {
+        const getRowPosition = function (item) {
             // Position from top
             let top = 0;
             if (item) {
@@ -71,7 +71,7 @@ if (!Modal && typeof (require) === 'function') {
             return top;
         }
 
-        const updateScroll = function() {
+        const updateScroll = function () {
             let items = self.rows;
             if (items) {
                 // Before control
@@ -104,7 +104,7 @@ if (!Modal && typeof (require) === 'function') {
             return false;
         }
 
-        const getVisibleRows = function(reset) {
+        const getVisibleRows = function (reset) {
             let items = self.rows;
             if (items) {
                 let adjust;
@@ -139,7 +139,7 @@ if (!Modal && typeof (require) === 'function') {
                 }
 
                 // Update visible rows
-                if (reset || ! compareValues(rows, self.result)) {
+                if (reset || !compareValues(rows, self.result)) {
                     // Render the items
                     self.result = rows;
                     // Adjust scroll height
@@ -151,7 +151,7 @@ if (!Modal && typeof (require) === 'function') {
                         // Item height
                         let h = item.el.offsetHeight;
                         // Update row height
-                        if (! item.height || h !== item.height) {
+                        if (!item.height || h !== item.height) {
                             // Keep item height
                             item.height = h;
                             // Adjust total height
@@ -194,7 +194,7 @@ if (!Modal && typeof (require) === 'function') {
         /**
          * Will adjust the items based on the scroll position offset
          */
-        self.adjustPosition = function(item) {
+        self.adjustPosition = function (item) {
             if (item.el) {
                 let h = item.el.offsetHeight;
                 let calc = item.el.offsetTop + h;
@@ -209,7 +209,7 @@ if (!Modal && typeof (require) === 'function') {
         }
 
         // Controls
-        const scrollControls = function() {
+        const scrollControls = function () {
             getVisibleRows(false);
         }
 
@@ -221,11 +221,11 @@ if (!Modal && typeof (require) === 'function') {
         scroll.classList.add('lm-lazy-scroll');
         // Force the height and add scrolling
         el.appendChild(scroll);
-        el.addEventListener('scroll', scrollControls);
-        el.addEventListener('wheel', scrollControls);
+        el.addEventListener('scroll', scrollControls, { passive: true });
+        el.addEventListener('wheel', scrollControls, { passive: true });
         self.container.classList.add('lm-lazy-items');
 
-        self.goto = function(item) {
+        self.goto = function (item) {
             el.scrollTop = getRowPosition(item);
             let adjust = getVisibleRows(false);
             if (adjust) {
@@ -251,7 +251,7 @@ if (!Modal && typeof (require) === 'function') {
         // Control events
         let ignoreEvents = false;
         // Default widht
-        if (! self.width) {
+        if (!self.width) {
             self.width = 260;
         }
         // Lazy loading global instance
@@ -261,29 +261,29 @@ if (!Modal && typeof (require) === 'function') {
         let onchange = self.onchange;
 
         // Cursor controllers
-        const setCursor = function(index, force) {
+        const setCursor = function (index, force) {
             let item = self.rows[index];
 
-            if (typeof(item) !== 'undefined') {
+            if (typeof (item) !== 'undefined') {
                 // Set cursor number
                 cursor = index;
                 // Set visual indication
                 item.cursor = true;
                 // Go to the item on the scroll in case the item is not on the viewport
-                if (! (item.el && item.el.parentNode) || force === true) {
+                if (!(item.el && item.el.parentNode) || force === true) {
                     // Goto method
                     self.goto(item);
                 }
                 // Adjust cursor position
-                setTimeout(function() {
+                setTimeout(function () {
                     self.adjustPosition(item);
                 });
             }
         }
 
-        const removeCursor = function(reset) {
+        const removeCursor = function (reset) {
             if (cursor !== null) {
-                if (typeof(self.rows[cursor]) !== 'undefined') {
+                if (typeof (self.rows[cursor]) !== 'undefined') {
                     self.rows[cursor].cursor = false;
                 }
                 if (reset) {
@@ -293,7 +293,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const moveCursor = function(direction, jump) {
+        const moveCursor = function (direction, jump) {
             // Remove cursor
             removeCursor();
             // Last item
@@ -329,7 +329,7 @@ if (!Modal && typeof (require) === 'function') {
             setCursor(cursor);
         }
 
-        const setData = function() {
+        const setData = function () {
             // Estimate width
             let width = self.width;
             // Re-order to make sure groups are in sequence
@@ -378,7 +378,7 @@ if (!Modal && typeof (require) === 'function') {
             self.rows = self.data;
         }
 
-        const updateLabel = function() {
+        const updateLabel = function () {
             if (value && value.length) {
                 self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
             } else {
@@ -386,11 +386,11 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const setValue = function(v) {
+        const setValue = function (v) {
             // Values
             let newValue;
-            if (! Array.isArray(v)) {
-                if (typeof(v) === 'string') {
+            if (!Array.isArray(v)) {
+                if (typeof (v) === 'string') {
                     newValue = v.split(';');
                 } else {
                     newValue = [v];
@@ -403,7 +403,7 @@ if (!Modal && typeof (require) === 'function') {
             value = [];
 
             if (Array.isArray(self.data)) {
-                self.data.map(function(s) {
+                self.data.map(function (s) {
                     // Select values
                     if (newValue.indexOf(s.value) !== -1) {
                         s.selected = true;
@@ -418,12 +418,12 @@ if (!Modal && typeof (require) === 'function') {
             updateLabel();
 
             // Component onchange
-            if (typeof(onchange) === 'function') {
+            if (typeof (onchange) === 'function') {
                 onchange.call(self, self, getValue());
             }
         }
 
-        const getValue = function() {
+        const getValue = function () {
             if (self.multiple) {
                 if (value && value.length) {
                     return value.filter(v => v.selected).map(i => i.value);
@@ -438,7 +438,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        const onclose = function() {
+        const onclose = function () {
             // Cursor
             removeCursor(true);
             // Reset search
@@ -455,7 +455,7 @@ if (!Modal && typeof (require) === 'function') {
             let newValue = getValue();
 
             // If that is different from the component value
-            if (! compareValues(newValue, self.value)) {
+            if (!compareValues(newValue, self.value)) {
                 self.value = newValue;
             } else {
                 // Update label
@@ -465,15 +465,15 @@ if (!Modal && typeof (require) === 'function') {
             // Identify the new state of the dropdown
             self.state = false;
 
-            if (typeof(self.onclose) === 'function') {
+            if (typeof (self.onclose) === 'function') {
                 self.onclose(self);
             }
         }
 
-        const onopen = function() {
+        const onopen = function () {
             self.state = true;
             // Value
-            let v = value[value.length-1];
+            let v = value[value.length - 1];
             // Make sure goes back to the top of the scroll
             if (self.container.parentNode.scrollTop > 0) {
                 self.container.parentNode.scrollTop = 0;
@@ -493,14 +493,14 @@ if (!Modal && typeof (require) === 'function') {
                 self.input.focus();
             }
 
-            if (typeof(self.onopen) === 'function') {
+            if (typeof (self.onopen) === 'function') {
                 self.onopen(self);
             }
         }
 
 
-        self.add = async function(e) {
-            if (! self.input.textContent) {
+        self.add = async function (e) {
+            if (!self.input.textContent) {
                 return false;
             }
 
@@ -513,7 +513,7 @@ if (!Modal && typeof (require) === 'function') {
             }
 
             // Event
-            if (typeof(self.onbeforeinsert) === 'function') {
+            if (typeof (self.onbeforeinsert) === 'function') {
                 let elClass = self.el.classList;
                 elClass.add('lm-dropdown-loading');
                 let ret = await self.onbeforeinsert(self, s);
@@ -533,16 +533,16 @@ if (!Modal && typeof (require) === 'function') {
             self.close();
 
             // Event
-            if (typeof(self.oninsert) === 'function') {
+            if (typeof (self.oninsert) === 'function') {
                 self.oninsert(self, s);
             }
         }
 
-        self.search = function(e) {
+        self.search = function (e) {
             if (self.state && self.autocomplete) {
                 // Filter options
                 let data;
-                if (! self.input.textContent) {
+                if (!self.input.textContent) {
                     data = self.data;
                 } else {
                     data = self.data.filter(item => {
@@ -572,7 +572,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.toggle = function() {
+        self.toggle = function () {
             if (self.modal) {
                 if (self.modal.closed) {
                     self.open();
@@ -582,7 +582,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.click = function(e) {
+        self.click = function (e) {
             if (self.autocomplete) {
                 let x;
                 if (e.changedTouches && e.changedTouches[0]) {
@@ -600,7 +600,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.select = function(e, s) {
+        self.select = function (e, s) {
             if (s) {
                 if (self.multiple === true) {
                     let position = value.indexOf(s);
@@ -631,7 +631,7 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        self.getGroup = function() {
+        self.getGroup = function () {
             if (this.group && this.header) {
                 return this.group;
             } else {
@@ -660,27 +660,50 @@ if (!Modal && typeof (require) === 'function') {
                 // Remove search
                 self.input.remove();
             }
+
+            if (!Array.isArray(self.data)) {
+                self.data = [];
+            }
+
+            if (self.url && self.data.length === 0) {
+                const xhr = new XMLHttpRequest();
+                
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === 4) {
+                        if (xhr.status === 200) {
+                            self.data = JSON.parse(xhr.responseText);
+                        } else {
+                            console.error('Failed to fetch data. Status code: ' + xhr.status);
+                        }
+                    }
+                };
+                
+                xhr.open('GET', self.url, true);
+                xhr.setRequestHeader('Content-Type', 'text/json')
+                xhr.send();
+            }
+
             // Loading controls
             lazyloading = lazyLoading(self);
             // Process the data
             setData();
             // Set value
-            if (typeof(self.value) !== 'undefined') {
+            if (typeof (self.value) !== 'undefined') {
                 setValue(self.value);
             }
             // Focus out of the component
-            self.el.addEventListener('focusout', function(e) {
+            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) {
+                    if (!(e.relatedTarget && self.el.contains(e.relatedTarget)) && !self.el.contains(e.relatedTarget)) {
+                        if (!self.modal.closed) {
                             self.modal.closed = true;
                         }
                     }
                 }
             })
             // Key events
-            self.el.addEventListener('keydown', function(e) {
-                if (! self.modal.closed) {
+            self.el.addEventListener('keydown', function (e) {
+                if (!self.modal.closed) {
                     let prevent = false;
                     if (e.key === 'ArrowUp') {
                         moveCursor(-1);
@@ -690,19 +713,19 @@ if (!Modal && typeof (require) === 'function') {
                         prevent = true;
                     } else if (e.key === 'Home') {
                         moveCursor(-1, true);
-                        if (! self.autocomplete) {
+                        if (!self.autocomplete) {
                             prevent = true;
                         }
                     } else if (e.key === 'End') {
                         moveCursor(1, true);
-                        if (! self.autocomplete) {
+                        if (!self.autocomplete) {
                             prevent = true;
                         }
                     } else if (e.key === 'Enter') {
                         self.select(e, self.rows[cursor]);
                         prevent = true;
                     } else {
-                        if (e.keyCode === 32 && ! self.autocomplete) {
+                        if (e.keyCode === 32 && !self.autocomplete) {
                             self.select(e, self.rows[cursor]);
                         }
                     }
@@ -718,12 +741,12 @@ if (!Modal && typeof (require) === 'function') {
                 }
             });
             // Custom event by the developer
-            if (typeof(onload) === 'function') {
+            if (typeof (onload) === 'function') {
                 onload(self);
             }
         }
 
-        self.onchange = function(prop) {
+        self.onchange = function (prop) {
             if (prop === 'value') {
                 setValue(self.value);
             } else if (prop === 'data') {
@@ -731,7 +754,7 @@ if (!Modal && typeof (require) === 'function') {
                 self.value = null;
             }
 
-            if (typeof(lazyloading) === 'function') {
+            if (typeof (lazyloading) === 'function') {
                 lazyloading(prop);
             }
         }
@@ -740,7 +763,7 @@ if (!Modal && typeof (require) === 'function') {
          * Sanitize any HTML from be paste on the search
          * @param e
          */
-        self.onpaste = function(e) {
+        self.onpaste = function (e) {
             let text;
             if (e.clipboardData || e.originalEvent.clipboardData) {
                 text = (e.originalEvent || e).clipboardData.getData('text/plain');

package/dist/style.css

@@ -27,7 +27,7 @@
     padding: 0;
     min-width: initial;
     min-height: 5px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--lm-border-color, #ccc);
     border-radius: 0;
 }
 
@@ -44,8 +44,15 @@
     cursor: pointer;
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid #ccc;
+    background: var(--lm-background-color, #fff);
+    border: 1px solid var(--lm-border-color, #ccc);
     min-height: 1em;
+    border-radius: 2px;
+}
+
+.lm-dropdown-input:focus {
+    outline: 2px solid var(--lm-border-outline, #000);
+    outline-offset: -1px;
 }
 
 .lm-dropdown-input::after {
@@ -260,27 +267,16 @@
     max-height: initial;
 }
 
-/** Lazyloading */
-
-.lm-lazy {
-    position: relative;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    box-sizing: border-box;
-    height: 100%;
+.lm-dropdown .lm-lazy {
+    scrollbar-width: thin;
 }
 
-.lm-lazy-scroll {
-    position: absolute;
-    width: 1px;
+.lm-dropdown .lm-lazy::-webkit-scrollbar {
+    height: 12px;
 }
 
-.lm-lazy-items {
-    position: sticky;
-    top: 0;
-    box-sizing: border-box;
-    width: 100%;
+.lm-dropdown .lm-lazy::-webkit-scrollbar {
+    width: 12px;
 }
 
 .lm-dropdown-loading .lm-dropdown-add::after {
@@ -295,14 +291,41 @@
     border-top-color: transparent;
     border-width: 1px;
     border-radius: 50%;
-    animation: spin .8s linear infinite;
+    animation: lm-dropdown-spin .8s linear infinite;
 }
 
-@keyframes spin {
+@keyframes lm-dropdown-spin {
     from {
-        transform:rotate(0deg);
+        transform: rotate(0deg);
     }
     to {
-        transform:rotate(360deg);
+        transform: rotate(360deg);
     }
+}
+
+.lm-dark-mode .lm-dropdown-item > div {
+    color: white;
+}
+
+/** Lazyloading */
+
+.lm-lazy {
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.lm-lazy-scroll {
+    position: absolute;
+    width: 1px;
+}
+
+.lm-lazy-items {
+    position: sticky;
+    top: 0;
+    box-sizing: border-box;
+    width: 100%;
 }

package/package.json

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