@lemonadejs/dropdown 3.0.3 → 3.0.4

package/dist/index.d.ts

@@ -1,10 +1,8 @@
 interface DropdownItem {
     /** Value of the selected item. */
-    id?: string | number;
-    /** Label for the selected item. */
-    name?: string;
+    value?: string | number;
     /** Description of the item */
-    title?: string;
+    text?: string;
     /** Icon of the item */
     image?: string;
     /** Name of the group where the item belongs to */
@@ -18,8 +16,6 @@ interface DropdownItem {
 }
 
 interface DropdownOptions {
-    /** Endpoint to fetch data from a remote server */
-    url?: string;
     /** Preloaded data items for the dropdown */
     data?: DropdownItem[];
     /** Format type of the data, typically { id: name } or { value: text } */
@@ -28,16 +24,10 @@ interface DropdownOptions {
     multiple?: boolean;
     /** Enables the autocomplete feature for user input */
     autocomplete?: boolean;
-    /** Allows remote search for options */
-    remoteSearch?: boolean;
-    /** Enables the lazy loading feature for handling a large number of options */
-    lazyLoading?: boolean;
     /** Rendering style of the dropdown: 'default', 'picker', or 'searchbar' */
     type?: 'default' | 'picker' | 'searchbar',
     /** Defines the dropdown's width */
     width?: number;
-    /** Sets the maximum width of the dropdown */
-    maxWidth?: number;
     /** Determines if the dropdown is opened when initialized */
     opened?: boolean;
     /** The initial value of the dropdown */

package/dist/index.js

@@ -309,7 +309,7 @@ if (!lazyloading && typeof (require) === 'function') {
         }
 
         return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
-            <div class="lm-dropdown-input" onkeydown="self.toggle" onfocus="self.open" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+            <div class="lm-dropdown-input" onmousedown="self.toggle" onfocus="self.open" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
             <Modal :ref="self.modal" :closed="true" :onclose="self.onclose" :onopen="self.onopen" :width="self.width" :animation="self.animation">
                 <Lazyloading :data="self.data" :ref="self.lazyLoading" :height="330">
                     <div class="lm-dropdown-item" onclick="self.parent.parent.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.parent.parent.parent.getGroup(self.group)}}">

package/dist/react.js

@@ -1,13 +1,10 @@
 // @ts-nocheck
-import React, { useRef, useEffect  } from "react";
+import React, { useRef, useEffect } from "react";
 import Component from './index';
 
-import "./style.css";
-import "@lemonadejs/modal/dist/style.css"
-import "@lemonadejs/lazy-loading/dist/style.css"
 
 // @ts-ignore
-const Dropdown = React.forwardRef((props, mainReference) => {
+export default React.forwardRef((props, mainReference) => {
     // Dom element
     const Ref = useRef(null);
 
@@ -16,17 +13,25 @@ const Dropdown = React.forwardRef((props, mainReference) => {
 
     useEffect(() => {
         // @ts-ignore
-        if (! Ref.current.innerHTML) {
+        if (!Ref.current.innerHTML) {
             mainReference.current = Component(Ref.current, options);
         }
     }, []);
 
+    useEffect(() => {
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
     let prop = {
         ref: Ref,
         style: { height: '100%', width: '100%' }
     };
 
     return React.createElement("div", prop);
-})
-
-export default Dropdown;
+})

package/dist/vue.js

@@ -1,16 +1,12 @@
-import { h, getCurrentInstance } from 'vue';
+import { h } from 'vue';
 import component from "./index";
 
-import "./style.css";
-import "@lemonadejs/modal/dist/style.css"
 
-export const Calendar = {
+export default {
     inheritAttrs: false,
     mounted() {
-        const { attrs } = getCurrentInstance();
-
         let options = {
-            ...attrs
+            ...this.$attrs
         };
 
         this.el = this.$refs.container;
@@ -26,7 +22,24 @@ export const Calendar = {
             }
         };
         return () => h('div', containerProps);
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            }
+        }
+    },
+    methods: {
+        updateState() {
+            for (let key in this.$attrs) {
+                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                    if (this.$attrs[key] !== this.current[key]) {
+                        this.current[key] = this.$attrs[key];
+                    }
+                }
+            }
+        }
     }
 }
-
-export default Calendar;

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^3.4.0",
+        "lemonadejs": "^4.0.6",
         "@lemonadejs/modal": "2.3.3",
         "@lemonadejs/lazy-loading": "1.0.0"
     },
     "main": "dist/index.js",
-    "version": "3.0.3"
+    "version": "3.0.4"
 }