@lemonadejs/dropdown 3.1.9 → 3.1.12

package/README.md

@@ -1,100 +1,114 @@
-# 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)
+# 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.                                                       |
+| 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.                               |
+| 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.                                 |
+| 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.  |
+| 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
+
+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

@@ -1,83 +1,85 @@
-/**
- * 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 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?: (obj: object, newValue: string|number) => void;
-        /** Event handler for when the dropdown is ready */
-        onload?: (obj: object) => void;
-        /** Event handler for when the dropdown opens */
-        onopen?: (obj: object) => void;
-        /** Event handler for when the dropdown closes */
-        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 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;
-    }
-
-    interface Instance {
-        /** Internal type */
-        type: 'dropdown';
-        /** Current internal value */
-        value: Record<number, 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 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;
+        /** 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 */
+        onload?: (obj: object) => void;
+        /** Event handler for when the dropdown opens */
+        onopen?: (obj: object) => void;
+        /** Event handler for when the dropdown closes */
+        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 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;
+    }
+
+    interface Instance {
+        /** Internal type */
+        type: 'dropdown';
+        /** Current internal value */
+        value: Record<number, string>;
+    }
+}
+
 export default Dropdown;