neo.mjs 5.10.3 → 5.10.5

package/src/form/Container.mjs

@@ -198,46 +198,63 @@ class Container extends BaseContainer {
     }
 
     /**
-     * Set field values by field name or field id
-     * @param {Object} values={}
+     * Set field configs by field name or field id
+     * @param {Object} configs={}
      * @param {Boolean} suspendEvents=false
      */
-    async setValues(values={}, suspendEvents=false) {
+    async setConfigs(configs={}, suspendEvents=false) {
         let me     = this,
             fields = await me.getFields(),
-            isCheckBox, isRadio, path, value;
+            fieldConfigs, isCheckBox, isRadio, path, value;
 
         fields.forEach(item => {
-            if (suspendEvents) {
-                item.suspendEvents = true;
-            }
+            path         = me.getFieldPath(item);
+            fieldConfigs = Neo.nsWithArrays(path, false, configs);
+
+            if (fieldConfigs) {
+                if (suspendEvents) {
+                    item.suspendEvents = true;
+                }
+
+                isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
+                value      = fieldConfigs.value;
 
-            isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
-            path       = me.getFieldPath(item);
-            value      = Neo.nsWithArrays(path, false, values);
+                if (isCheckBox) {
+                    if (Neo.typeOf(value) === 'Array') {
+                        if (value.includes(item.value)) {
+                            fieldConfigs.checked = true
+                        }
+                    } else {
+                        fieldConfigs.checked = item.value === value
+                    }
+                } else if (value !== undefined) {
+                    isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-            if (isCheckBox) {
-                if (Neo.typeOf(value) === 'Array') {
-                    if (value.includes(item.value)) {
-                        item.checked = true
+                    if (isRadio) {
+                        fieldConfigs.checked = item.value === value
                     }
-                } else {
-                    item.checked = item.value === value
                 }
-            } else if (value !== undefined) {
-                isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-                if (isRadio) {
-                    item.checked = item.value === value
-                } else {
-                    item.value = value
+                item.set(fieldConfigs)
+
+                if (suspendEvents) {
+                    delete item.suspendEvents;
                 }
             }
+        })
+    }
 
-            if (suspendEvents) {
-                delete item.suspendEvents;
-            }
+    /**
+     * Set field values by field name or field id
+     * @param {Object} values={}
+     * @param {Boolean} suspendEvents=false
+     */
+    async setValues(values={}, suspendEvents=false) {
+        Object.entries(values).forEach(([key, value]) => {
+            values[key] = {value}
         })
+
+        await this.setConfigs(values, suspendEvents)
     }
 
     /**

package/src/form/field/Number.mjs

@@ -148,7 +148,7 @@ class Number extends Text {
 
         me.changeInputElKey('step', value);
 
-        stepSizeString = String(this.stepSize);
+        stepSizeString = String(value);
 
         me.stepSizeDigits = stepSizeString.includes('.') ? stepSizeString.split('.')[1].length : 0;
 
@@ -157,16 +157,44 @@ class Number extends Text {
 
             if (modulo !== 0) { // find the closest valid value
                 if (modulo / value > 0.5) {
-                    if      (val + value - modulo < me.maxValue) {me.value = val + value - modulo;}
-                    else if (val - modulo > me.minValue)         {me.value = val - modulo;}
+                    if (val + value - modulo < me.maxValue) {
+                        me.value = val + value - modulo;
+                    } else if (val - modulo > me.minValue) {
+                        me.value = val - modulo;
+                    }
                 } else {
-                    if      (val - modulo > me.minValue)         {me.value = val - modulo;}
-                    else if (val + value - modulo < me.maxValue) {me.value = val + value - modulo;}
+                    if (val - modulo > me.minValue) {
+                        me.value = val - modulo;
+                    } else if (val + value - modulo < me.maxValue) {
+                        me.value = val + value - modulo;
+                    }
                 }
             }
         }
     }
 
+    /**
+     * Triggered after the triggerPosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTriggerPosition(value, oldValue) {
+        oldValue && this.updateTriggers();
+    }
+
+    /**
+     * Triggered after the useSpinButtons config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseSpinButtons(value, oldValue) {
+        if (typeof oldValue === 'boolean') {
+            this.updateTriggers();
+        }
+    }
+
     /**
      * Triggered before the maxLength config gets changed
      * @param {Number|null} value
@@ -195,28 +223,6 @@ class Number extends Text {
         return null;
     }
 
-    /**
-     * Triggered after the triggerPosition config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetTriggerPosition(value, oldValue) {
-        oldValue && this.updateTriggers();
-    }
-
-    /**
-     * Triggered after the useSpinButtons config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetUseSpinButtons(value, oldValue) {
-        if (typeof oldValue === 'boolean') {
-            this.updateTriggers();
-        }
-    }
-
     /**
      * Triggered before the triggerPosition config gets changed
      * @param {String} value
@@ -229,18 +235,24 @@ class Number extends Text {
 
     /**
      * Triggered before the value config gets changed
-     * @param {Number} value
+     * @param {Number|String} value
      * @param {Number} oldValue
      * @protected
      */
     beforeSetValue(value, oldValue) {
-        if (Neo.isNumber(value) && this.stepSizeDigits > 0) {
-            return +value.toFixed(this.stepSizeDigits)
-        } else if (value === '') {
-            return null
+        if (value === null || value === '') {
+            return null;
+        }
+
+        if (!Neo.isNumber(value)) {
+            value = +value;
+        }
+
+        if (this.stepSizeDigits > 0) {
+            value = +value.toFixed(this.stepSizeDigits);
         }
 
-        return value
+        return value;
     }
 
     /**
@@ -366,7 +378,7 @@ class Number extends Text {
                 }
 
                 me.removeTrigger('spindown', true, triggers);
-                me.removeTrigger('spinup',   true, triggers);
+                me.removeTrigger('spinup', true, triggers);
             } else {
                 if (!me.hasTrigger('spindown')) {
                     triggers.push(SpinDownTrigger);
@@ -379,8 +391,8 @@ class Number extends Text {
                 me.removeTrigger('spinupdown', true, triggers);
             }
         } else {
-            me.removeTrigger('spindown',   true, triggers);
-            me.removeTrigger('spinup',     true, triggers);
+            me.removeTrigger('spindown', true, triggers);
+            me.removeTrigger('spinup', true, triggers);
             me.removeTrigger('spinupdown', true, triggers);
         }
 
@@ -392,7 +404,7 @@ class Number extends Text {
      * @param {Boolean} silent=true
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    validate(silent=true) {
+    validate(silent = true) {
         let me          = this,
             value       = me.value,
             isNumber    = Neo.isNumber(value),

package/src/form/field/Range.mjs

@@ -30,6 +30,11 @@ class Range extends Number {
          * @member {String} inputType='range'
          */
         inputType: 'range',
+        /**
+         * If true, shows the result of the slider in the label
+         * @member {Boolean} showResultInLabel=false
+         */
+        showResultInLabel: false,
         /**
          * @member {Array} tickmarks_=[]
          */
@@ -37,7 +42,7 @@ class Range extends Number {
         /**
          * @member {Boolean} useInputEvent=false
          */
-        useInputEvent : false,
+        useInputEvent: false,
         /**
          * Disables the field.Number buttons
          * @member {Boolean} useInputEvent=false
@@ -57,14 +62,16 @@ class Range extends Number {
         if (me.useInputEvent) {
             me.addDomListeners({
                 input: {
-                    fn    : me.onInputValueChange,
-                    id    : me.vdom.cn[2].id,
-                    scope : me
+                    fn   : me.onInputValueChange,
+                    id   : me.vdom.cn[2].id,
+                    scope: me
                 }
             });
         }
 
         inputEl.cls = ['neo-rangefield-input']; // replace neo-textfield-input
+
+        me.addValueToLabel();
     }
 
     /**
@@ -76,6 +83,26 @@ class Range extends Number {
     afterSetTickmarks(value, oldValue) {
         // todo
     }
+
+    /**
+     * Override the NumberField implementation
+     * @param {Object} data
+     */
+    afterSetValue(value, oldValue) {
+        this.addValueToLabel();
+        super.afterSetValue(value, oldValue);
+    }
+
+    /**
+     * Update label with value
+     */
+    addValueToLabel() {
+        const me = this;
+
+        if (me.showResultInLabel) {
+            me.getLabelEl().innerHTML = `[${me.value}] ` + me.labelText;
+        }
+    }
 }
 
 Neo.applyClassConfig(Range);

package/src/form/field/TextArea.mjs

@@ -1,4 +1,5 @@
-import Text from './Text.mjs';
+import StringUtil from '../../util/String.mjs';
+import Text       from './Text.mjs';
 
 /**
  *
@@ -121,7 +122,7 @@ class TextArea extends Text {
         let inputEl = this.getInputEl();
 
         if (inputEl) {
-            inputEl.html = value;
+            inputEl.html = StringUtil.escapeHtml(value);
         }
 
         super.afterSetValue(value, oldValue);

package/src/main/DomEvents.mjs

@@ -1,5 +1,6 @@
 import Base           from '../core/Base.mjs';
 import Observable     from '../core/Observable.mjs';
+import StringUtil     from '../util/String.mjs';
 import TouchDomEvents from './mixin/TouchDomEvents.mjs';
 
 const globalDomEvents = [
@@ -415,7 +416,7 @@ class DomEvents extends Base {
         data = {
             ...this.getEventData(event),
             valid: target.checkValidity(),
-            value: target.value
+            value: (target.tagName === 'INPUT') ? StringUtil.escapeHtml(target.value) : target.value
         };
 
         // input and change events can pass a FileList for input type file

package/src/manager/Toast.mjs

@@ -204,7 +204,11 @@ class Toast extends Base {
             component.style = moveObj;
             component.update();
 
-            acc = acc + rects[index].height;
+            // Sometimes the index is already reduced
+            // so the last index might not be available
+            if(rects[index]) {
+                acc = acc + rects[index].height;
+            }
         }
     }
 }

package/src/util/String.mjs

@@ -0,0 +1,56 @@
+import Base from '../core/Base.mjs';
+
+/**
+ * @class Neo.util.StringUtil
+ * @extends Neo.core.Base
+ */
+class StringUtil extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.util.StringUtil'
+         * @protected
+         */
+        className: 'Neo.util.StringUtil'
+    }
+    
+     static escapedChars = {
+        '&': '&',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        '\'': '&#039;'
+     }
+
+    /**
+     * Escape HTML special characters
+     * @param {String} value
+     */
+    static escapeHtml(value) {
+        if (Neo.typeOf(value) !== 'String') {
+            return value;
+        }
+
+        return value.replace(/[&<>"']/g, (char) => this.escapedChars[char] || char);
+    }
+
+    /**
+     * Unescape HTML special characters
+     * @param {String} value
+     */
+    static unescapeHtml(value) {
+        if (Neo.typeOf(value) !== 'String') {
+            return value;
+        }
+
+        return value.replace(/(&amp;)|(&lt;)|(&gt;)|(&quot;)|(&#039;)/g, (entity) => this.getKeyByValue(entity) || entity);
+    }
+
+    static getKeyByValue(value) {
+        return Object.keys(this.escapedChars).find(key => this.escapedChars[key] === value);
+      }
+}
+
+
+Neo.applyClassConfig(StringUtil);
+
+export default StringUtil;