jsuites 6.0.3 → 6.1.1

package/dist/jsuites.css

@@ -3521,11 +3521,6 @@ body.lm-dark-mode {
     gap: 1px;
 }
 
-.lm-calendar-navigation i:hover {
-    background-color: var(--lm-background-color-highlight, #ebebeb);
-    color: #000;
-}
-
 .lm-calendar-weekdays {
     display: none;
     grid-template-columns: repeat(7, 1fr);
@@ -3638,7 +3633,6 @@ body.lm-dark-mode {
     top: calc(25%);
     height: 50%;
     background-color: var(--lm-main-color-alpha, #2196f388);
-    z-index: -1;
 }
 
 .lm-calendar-content > div[data-start="true"]::before {
@@ -3695,7 +3689,7 @@ body.lm-dark-mode {
 .lm-calendar-input {
     padding-right: 24px !important;
     box-sizing: border-box;
-    background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" fill=\"gray\" /></svg>") top 50% right 1px no-repeat;
+    background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" fill=\"gray\" /></svg>") top 50% right 5px no-repeat;
 }
 
 .lm-calendar-time[data-visible="false"] {
@@ -4077,6 +4071,10 @@ body.lm-dark-mode {
     border: 1px solid var(--lm-border-color, #767676);
     border-radius: var(--lm-border-radius, 2px);
     position: relative;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    font: inherit;
 }
 
 .lm-dropdown-input > br {

package/dist/jsuites.js

@@ -4579,8 +4579,6 @@ const Mask = utils.Mask;
                 // Back to the days
                 self.view = 'days';
             } else if (! s.disabled) {
-                setCursor(s);
-
                 if (isTrue(self.range)) {
                     // Start a new range
                     if (self.rangeValues && (self.rangeValues[0] >= s.number || self.rangeValues[1])) {
@@ -4596,7 +4594,10 @@ const Mask = utils.Mask;
                         s.end = true;
                         self.rangeValues[1] = s.number;
                     }
+                    setCursor(s);
                 } else {
+                    setCursor(s);
+
                     update();
                 }
             }
@@ -6712,7 +6713,13 @@ if (!Modal && "function" === 'function') {
 
             if (Array.isArray(data)) {
                 data.map(function (s) {
-                    s.selected = newValue.some(v => v == s.value);
+                    s.selected = newValue.some(v => {
+                        // Use strict equality when either value is empty string to avoid '' == 0 being true
+                        if (v === '' || s.value === '') {
+                            return v === s.value;
+                        }
+                        return v == s.value;
+                    });
                     if (s.selected) {
                         value.push(s);
                     }
@@ -6747,6 +6754,20 @@ if (!Modal && "function" === 'function') {
             return null;
         }
 
+        const getText = function () {
+            if (self.multiple) {
+                if (value && value.length) {
+                    return value.filter(v => v.selected).map(i => i.text);
+                }
+            } else {
+                if (value && value.length) {
+                    return value[0].text;
+                }
+            }
+
+            return null;
+        }
+
         const onopen = function () {
             self.state = true;
             // Value
@@ -6917,7 +6938,11 @@ if (!Modal && "function" === 'function') {
 
                     // Debounce the search with 300ms delay
                     searchTimeout = setTimeout(() => {
-                        fetch(`${self.url}?q=${query}`, http).then(r => r.json()).then(resetData).catch((error) => {
+                        let url = self.url;
+                        url += url.indexOf('?') === -1 ? '?' : '&';
+                        url += `q=${query}`;
+
+                        fetch(url, http).then(r => r.json()).then(resetData).catch((error) => {
                             resetData([]);
                         });
                     }, 300);
@@ -7197,6 +7222,10 @@ if (!Modal && "function" === 'function') {
             return self.value;
         }
 
+        self.getText = function() {
+            return getText();
+        }
+
         self.setValue = function(v) {
             self.value = v;
         }
@@ -7795,7 +7824,7 @@ if (!lemonade && "function" === 'function') {
         }
     }
 
-    const Modal = function (template, { onchange, onload }) {
+    const Modal = function (template, { onchange, onload, track }) {
         let self = this;
         let backdrop = null;
         let elements = null;
@@ -8200,7 +8229,12 @@ if (!lemonade && "function" === 'function') {
             }
         });
 
-        return render => render`<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" tabindex="-1" role="modal" onmousedown="${mousedown}" onmousemove="${mousemove}" onclick="${click}">
+        track('top');
+        track('left');
+        track('width');
+        track('height');
+
+        return render => render`<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" tabindex="-1" role="modal" onmousedown="${mousedown}" onmousemove="${mousemove}" onclick="${click}">
             <div class="lm-modal-title" data-title="{{self.title}}" data-icon="{{self.icon}}"><div class="lm-modal-icon">{{self.icon}}</div><div>{{self.title}}</div><div class="lm-modal-icon lm-modal-minimize" tabindex="0"></div><div class="lm-modal-icon lm-modal-close" tabindex="0"></div></div>
             <div :ref="self.root">${template}</div>
         </div>`
@@ -10202,13 +10236,12 @@ if (! Contextmenu && "function" === 'function') {
 
                 // Event property to the element
                 event = () => {
-                    let value = getAttribute(getElement(item), 'value');
-                    if (lemon.self[prop] !== value) {
-                        setAttribute(getElement(item), 'value', lemon.self[prop]);
-                    }
+                    setAttribute(getElement(item), 'value', lemon.self[prop]);
                 }
                 // Append event
                 appendEvent(prop, event, true);
+            } else if (prop.value instanceof state) {
+                // TODO: implement :bind states
             }
         }
 
@@ -10372,6 +10405,8 @@ if (! Contextmenu && "function" === 'function') {
                         } else {
                             // Register parent
                             register(self, 'parent', lemon.self);
+                            // Pass parent view for expressions in loop templates
+                            item.parentView = lemon.view;
                             // Render
                             L.render(method, root, self, item);
                         }
@@ -10634,76 +10669,81 @@ if (! Contextmenu && "function" === 'function') {
                         item.props = reorderProps(item.props);
                         // Order by priority
                         item.props.forEach(function(prop) {
-                            // If the property is an event
-                            let event = getAttributeEvent(prop.name);
-                            // When event for a DOM
-                            if (event) {
-                                // Element
-                                let element = item.element;
-                                // Value
-                                let value = prop.value;
-                                if (value) {
-                                    let handler = null; // Reset handler for each iteration
-                                    if (typeof (value) === 'function') {
-                                        handler = value;
-                                    } else {
-                                        let t = extractFromPath.call(lemon.self, value);
-                                        if (t) {
-                                            if (typeof (t) === 'function') {
-                                                prop.value = handler = t;
-                                            }
-                                        }
-                                    }
-                                    // When the element is a DOM
-                                    if (isDOM(element)) {
-                                        // Create the event handler
-                                        let eventHandler;
-                                        // Bind event
-                                        if (typeof(handler) === 'function') {
-                                            eventHandler = function(e, a, b) {
-                                                return handler.call(element, e, lemon.self, a, b);
-                                            }
+                            try {
+                                // If the property is an event
+                                let event = getAttributeEvent(prop.name);
+                                // When event for a DOM
+                                if (event) {
+                                    // Element
+                                    let element = item.element;
+                                    // Value
+                                    let value = prop.value;
+                                    if (value) {
+                                        let handler = null; // Reset handler for each iteration
+                                        if (typeof (value) === 'function') {
+                                            handler = value;
                                         } else {
-                                            // Legacy compatibility. Inline scripting is non-Compliance with Content Security Policy (CSP).
-                                            eventHandler = function (e) {
-                                                return Function('e', 'self', value).call(element, e, lemon.self); // TODO, quebra tudo se mudar
+                                            let t = extractFromPath.call(lemon.self, value);
+                                            if (t) {
+                                                if (typeof (t) === 'function') {
+                                                    prop.value = handler = t;
+                                                }
                                             }
                                         }
+                                        // When the element is a DOM
+                                        if (isDOM(element)) {
+                                            // Create the event handler
+                                            let eventHandler;
+                                            // Bind event
+                                            if (typeof(handler) === 'function') {
+                                                eventHandler = function(e, a, b) {
+                                                    return handler.call(element, e, lemon.self, a, b);
+                                                }
+                                            } else {
+                                                // Legacy compatibility. Inline scripting is non-Compliance with Content Security Policy (CSP).
+                                                eventHandler = function (e) {
+                                                    return Function('e', 'self', value).call(element, e, lemon.self); // TODO, quebra tudo se mudar
+                                                }
+                                            }
 
-                                        if (isValidEventName(element, prop.name)) {
-                                            element.addEventListener(event.substring(2), eventHandler);
-                                        } else {
-                                            if (element.tagName?.includes('-')) {
-                                                element[event] = handler;
+                                            if (isValidEventName(element, prop.name)) {
+                                                element.addEventListener(event.substring(2), eventHandler);
                                             } else {
-                                                element[event] = eventHandler;
+                                                if (element.tagName?.includes('-')) {
+                                                    element[event] = handler;
+                                                } else {
+                                                    element[event] = eventHandler;
+                                                }
                                             }
+                                        } else {
+                                            item.self[event] = handler || value;
                                         }
+                                    }
+                                } else if (prop.name.startsWith(':') || prop.name.startsWith('@') || prop.name.startsWith('lm-')) {
+                                    // Special lemonade attribute name
+                                    let attrName = getAttributeName(prop.name);
+                                    // Special properties bound to the self
+                                    if (attrName === 'ready') {
+                                        whenIsReady(item, prop);
+                                    } else if (attrName === 'ref') {
+                                        createReference(item, prop);
+                                    } else if (attrName === 'loop') {
+                                        registerLoop(item, prop);
+                                    } else if (attrName === 'bind') {
+                                        applyBindHandler(item, prop);
+                                    } else if (attrName === 'path') {
+                                        registerPath(item, prop);
+                                    } else if (attrName === 'render') {
+                                        applyRenderHandler(item, prop);
                                     } else {
-                                        item.self[event] = handler || value;
+                                        setDynamicValue(item, prop, attrName);
                                     }
-                                }
-                            } else if (prop.name.startsWith(':') || prop.name.startsWith('@') || prop.name.startsWith('lm-')) {
-                                // Special lemonade attribute name
-                                let attrName = getAttributeName(prop.name);
-                                // Special properties bound to the self
-                                if (attrName === 'ready') {
-                                    whenIsReady(item, prop);
-                                } else if (attrName === 'ref') {
-                                    createReference(item, prop);
-                                } else if (attrName === 'loop') {
-                                    registerLoop(item, prop);
-                                } else if (attrName === 'bind') {
-                                    applyBindHandler(item, prop);
-                                } else if (attrName === 'path') {
-                                    registerPath(item, prop);
-                                } else if (attrName === 'render') {
-                                    applyRenderHandler(item, prop);
                                 } else {
-                                    setDynamicValue(item, prop, attrName);
+                                    applyElementAttribute(item, prop);
                                 }
-                            } else {
-                                applyElementAttribute(item, prop);
+                            } catch (e) {
+                                let propValue = prop.expression || prop.value;
+                                console.error(`${prop.name}="${propValue}" - ${e.message}`, item);
                             }
                         })
                     }
@@ -11065,7 +11105,7 @@ if (! Contextmenu && "function" === 'function') {
             self: self,
             ready: [],
             change: [],
-            events: [],
+            events: {},
             components: {},
             elements: [],
             root: root,
@@ -11090,6 +11130,10 @@ if (! Contextmenu && "function" === 'function') {
         // New self
         if (component === Basic) {
             view = cloneChildren(item.children[0]);
+
+            if (item.parentView) {
+                lemon.view = item.parentView;
+            }
         } else {
             R.currentLemon = lemon;
 
@@ -11266,7 +11310,10 @@ if (! Contextmenu && "function" === 'function') {
             let props = Object.keys(lemon.events);
             if (props.length) {
                 for (let i = 0; i <props.length; i++) {
-                    trackProperty(lemon, props[i]);
+                    let prop = props[i];
+                    if (prop != Number(prop)) {
+                        trackProperty(lemon, prop);
+                    }
                 }
             }
         }
@@ -11537,6 +11584,8 @@ if (! Contextmenu && "function" === 'function') {
                         for (let i = 0; i < elements.length; i++) {
                             let v = Path.call(newValue, elements[i].path)
                             setAttribute(elements[i].element, 'value', v);
+                            // Also sync value to the data object (use '' for undefined to match form behavior)
+                            Path.call(lemon.path.value, elements[i].path, v !== undefined ? v : '');
                         }
                     }
                 }
@@ -22973,7 +23022,7 @@ var jSuites = {
     ...dictionary,
     ...helpers,
     /** Current version */
-    version: '6.0.1',
+    version: '6.1.1',
     /** Bind new extensions to Jsuites */
     setExtensions: function(o) {
         if (typeof(o) == 'object') {

package/package.json

@@ -26,18 +26,18 @@
     },
     "main": "dist/jsuites.js",
     "types": "dist/jsuites.d.ts",
-    "version": "6.0.3",
+    "version": "6.1.1",
     "bugs": "https://github.com/jsuites/jsuites/issues",
     "homepage": "https://github.com/jsuites/jsuites",
     "docs": "https://jsuites.net",
     "download": "https://github.com/jsuites/jsuites/archive/master.zip",
     "dependencies": {
         "@jsuites/utils": "^6.0.3",
-        "@lemonadejs/calendar": "^5.8.0",
+        "@lemonadejs/calendar": "^5.8.3",
         "@lemonadejs/color": "^5.8.0",
         "@lemonadejs/contextmenu": "^5.8.0",
-        "@lemonadejs/dropdown": "^5.8.0",
-        "@lemonadejs/modal": "^5.8.0",
+        "@lemonadejs/dropdown": "^5.8.1",
+        "@lemonadejs/modal": "^5.8.1",
         "@lemonadejs/rating": "^5.8.1",
         "@lemonadejs/switch": "^5.8.0",
         "@lemonadejs/tabs": "^5.8.0",