@lemonadejs/dropdown 3.0.12 → 3.1.0

package/README.md

@@ -0,0 +1,100 @@
+# LemonadeJS Dropdown
+
+[Official website and documentation is here](https://lemonadejs.net/components/dropdown)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.
+
+## Features
+
+-   Lightweight: The JavaScript Dropdown is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/dropdown
+```
+
+### CDN
+
+To use Dropdown via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+import Dropdown from '@lemonadejs/dropdown';
+import '@lemonadejs/dropdown/dist/style.css'
+import '@lemonadejs/modal/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    self.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 },
+    ]
+
+    return `<div>
+        <Dropdown :data="self.data" :value="1" />
+    </div>`
+}
+```
+
+### 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. |
+
+### 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. |
+
+### Events
+
+| 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. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) LemonadeJS Dropdown is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -35,25 +35,38 @@ declare namespace Dropdown {
         autocomplete?: boolean;
         /** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
         type?: 'default' | 'picker' | 'searchbar' | 'inline',
-        /** Defines the dropdown's width */
+        /** Defines the dropdown width */
         width?: number;
         /** The initial value of the dropdown */
         value?: string | string[] | number | number[];
         /** Placeholder text for the dropdown */
         placeholder?: string;
+        /** Allow insert new items */
+        insert?: boolean;
         /** Event handler for value changes */
-        onchange?: (el: HTMLElement, obj: object, oldValue: string, newValue: string) => void;
+        onchange?: (obj: object, newValue: string|number) => void;
         /** Event handler for when the dropdown is ready */
-        onload?: (el: HTMLElement, obj: object, data: any, val: any) => void;
+        onload?: (obj: object) => void;
         /** Event handler for when the dropdown opens */
-        onopen?: (el: HTMLElement) => void;
+        onopen?: (obj: object) => 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 */
+        onclose?: (obj: object) => void;
+        /**
+         * Event handler for just before a new option is added to the dropdown. This is an async function to handle ajax requests.
+         *     Example:
+         *     self.beforeInsert = async function(s, element) {
+         *         let newId = await getTheNewItemIdFromDatabase(element.text);
+         *         return {
+         *             text: element.text,
+         *             value: newId,
+         *         };
+         *     }
+         *
+         * */
         onbeforeinsert?: (obj: object, item: Item) => void;
-        /** Event handler for before a search on autocomplete is performed */
+        /** Event handler for when a new option is added to the dropdown */
+        oninsert?: (obj: object, item: Item) => void;
+        /** Before the search happens */
         onbeforesearch?: (obj: object, ajaxRequest: object) => boolean | null;
         /** Event handler for processing search results */
         onsearch?: (obj: object, result: object) => void;

package/dist/index.js

@@ -106,7 +106,14 @@ if (!Modal && typeof (require) === 'function') {
                 // Get the position from top
                 let y = el.scrollTop;
                 // Get the height
-                let h = y + (el.offsetHeight || self.height);
+                let h = null;
+                if (self.type === 'searchbar' || self.type === 'picker') {
+                    // Priority should be the size used on the viewport
+                    h = y + (el.offsetHeight || self.height);
+                } else {
+                    // Priority is the height define during initialization
+                    h = y + (self.height || el.offsetHeight);
+                }
                 // Go through the items
                 let rows = [];
                 // Height
@@ -171,6 +178,8 @@ if (!Modal && typeof (require) === 'function') {
         const render = function (reset) {
             // Move scroll to the top
             el.scrollTop = 0;
+            // Reset scroll
+            updateScroll();
             // Append first batch
             getVisibleRows(reset);
         }
@@ -213,7 +222,7 @@ if (!Modal && typeof (require) === 'function') {
             el.scrollTop = getRowPosition(item);
             let adjust = getVisibleRows(false);
             if (adjust) {
-                el.scrollTop += adjust;
+                el.scrollTop = adjust;
                 // Last adjust on the visible rows
                 getVisibleRows(false);
             }
@@ -238,6 +247,9 @@ if (!Modal && typeof (require) === 'function') {
         // Lazy loading global instance
         let lazyloading = null;
 
+        let onload = self.load;
+        let onchange = self.onchange;
+
         const setData = function() {
             // Estimate width
             let width = self.width;
@@ -392,6 +404,11 @@ if (!Modal && typeof (require) === 'function') {
 
             // Update label
             updateLabel();
+
+            // Component onchange
+            if (typeof(onchange) === 'function') {
+                onchange(self, self.value);
+            }
         }
 
         const getValue = function() {
@@ -427,6 +444,10 @@ if (!Modal && typeof (require) === 'function') {
             self.value = getValue();
             // Identify the new state of the dropdown
             self.state = false;
+
+            if (typeof(self.onclose) === 'function') {
+                self.onclose(self);
+            }
         }
 
         const onopen = function() {
@@ -452,9 +473,13 @@ if (!Modal && typeof (require) === 'function') {
                 // Focus on the item
                 self.input.focus();
             }
+
+            if (typeof(self.onopen) === 'function') {
+                self.onopen(self);
+            }
         }
 
-        self.search = function() {
+        self.search = function(e) {
             if (self.state && self.autocomplete) {
                 // Filter options
                 let data;
@@ -513,7 +538,7 @@ if (!Modal && typeof (require) === 'function') {
             } else {
                 x = e.clientX;
             }
-            if (e.target.offsetWidth - (x - e.target.offsetLeft) < 24) {
+            if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
                 self.toggle();
             } else {
                 self.open();
@@ -568,6 +593,8 @@ if (!Modal && typeof (require) === 'function') {
                     width: self.width,
                     onopen: onopen,
                     onclose: onclose,
+                    position: 'absolute',
+                    'auto-adjust': true,
                     'auto-close': false,
                 };
                 // Generate modal
@@ -619,6 +646,10 @@ if (!Modal && typeof (require) === 'function') {
                     e.stopImmediatePropagation();
                 }
             });
+
+            if (typeof(onload) === 'function') {
+                onload(self);
+            }
         }
 
         self.onchange = function(prop) {
@@ -633,9 +664,65 @@ if (!Modal && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
+        /**
+         * Sanitize any HTML from be paste on the search
+         * @param e
+         */
+        self.onpaste = function(e) {
+            let text;
+            if (e.clipboardData || e.originalEvent.clipboardData) {
+                text = (e.originalEvent || e).clipboardData.getData('text/plain');
+            } else if (window.clipboardData) {
+                text = window.clipboardData.getData('Text');
+            }
+            text = text.replace(/(\r\n|\n|\r)/gm, "");
+            document.execCommand('insertText', false, text)
+            e.preventDefault();
+        }
+
+        self.add = async function(e) {
+            if (! self.input.textContent) {
+                return false;
+            }
+
+            e.preventDefault();
+
+            // New item
+            let s = {
+                text: self.input.textContent,
+                value: self.input.textContent,
+            }
+
+            // Event
+            if (typeof(self.onbeforeinsert) === 'function') {
+                let elClass = self.el.classList;
+                elClass.add('lm-dropdown-loading');
+                let ret = await self.onbeforeinsert(self, s);
+                elClass.remove('lm-dropdown-loading');
+                if (ret === false) {
+                    return;
+                } else if (ret) {
+                    s = ret;
+                }
+            }
+
+            // Process the data
+            self.data.push(s);
+            // Select the new item
+            self.select(e, s);
+            // Close dropdown
+            self.close();
+
+            // Event
+            if (typeof(self.oninsert) === 'function') {
+                self.oninsert(self, s);
+            }
+        }
+
+        return `<div class="lm-dropdown" data-insert="{{self.insert}}" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value">
             <div class="lm-dropdown-header">
-                <div class="lm-dropdown-input" oninput="self.search" onfocus="self.open" onclick="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+                <div class="lm-dropdown-input" onpaste="self.onpaste" oninput="self.search" onfocus="self.open" onclick="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>
             <div class="lm-dropdown-content">

package/dist/style.css

@@ -8,6 +8,8 @@
 
 .lm-dropdown-header {
     display: flex;
+    position: relative;
+    align-items: center;
 }
 
 .lm-dropdown-header button {
@@ -35,8 +37,6 @@
 
 .lm-dropdown-input {
     padding: 5px 24px 5px 10px;
-    align-items: center;
-    position: relative;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -52,20 +52,38 @@
     content: '';
     position: absolute;
     width: 24px;
-    height: 24px;
-    right: 2px;
-    top: 2px;
+    height: 100%;
+    top: 0;
+    right: 4px;
     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");
+    background-position: center;
     transition: transform .1s ease-in-out;
 }
 
+.lm-dropdown-add {
+    position: absolute;
+    padding: 10px;
+    right: 20px;
+    display: none;
+}
+
+.lm-dropdown-add::after {
+    content: '+';
+}
+
+.lm-dropdown[data-insert="true"] .lm-dropdown-input {
+    padding-right: 35px;
+}
+
+.lm-dropdown[data-state="true"][data-insert="true"] .lm-dropdown-add {
+    display: initial;
+}
 
 .lm-dropdown[data-state="true"] .lm-dropdown-input::after {
     transform: rotate(-180deg);
 }
 
-
 .lm-dropdown-input:empty::before {
     content: "\00a0";
 }
@@ -193,6 +211,7 @@
     display: initial;
     border-left: 1px solid #ccc;
     border-bottom: 1px solid #eee;
+    height: 100%;
 }
 
 .lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input {
@@ -208,6 +227,14 @@
     height: 60px;
 }
 
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-input::after {
+    background: initial;
+}
+
+.lm-dropdown[data-type="searchbar"][data-state="true"] .lm-dropdown-add {
+    right: 100px;
+}
+
 .lm-dropdown[data-type="searchbar"] .lm-modal {
     max-height: initial;
     bottom: 0;
@@ -255,3 +282,27 @@
     box-sizing: border-box;
     width: 100%;
 }
+
+.lm-dropdown-loading .lm-dropdown-add::after {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    margin-top: -7px;
+    margin-left: -12px;
+    border-style: solid;
+    border-color: #888;
+    border-top-color: transparent;
+    border-width: 1px;
+    border-radius: 50%;
+    animation: spin .8s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}

package/dist/vue.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/package.json

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