neo.mjs 5.4.12 → 5.5.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.4.12'
+         * @member {String} version='5.5.0'
          */
-        version: '5.4.12'
+        version: '5.5.0'
     }
 
     /**

package/apps/form/view/pages/Page4.mjs

@@ -16,10 +16,12 @@ class Page4 extends FormPageContainer {
          * @member {Object} itemDefaults
          */
         itemDefaults: {
-            module    : CheckBox,
-            labelText : null,
-            labelWidth: 70,
-            name      : 'fruits'
+            module        : CheckBox,
+            groupRequired : true,
+            labelText     : null,
+            labelWidth    : 70,
+            name          : 'fruits',
+            showErrorTexts: false
         },
         /**
          * @member {Object[]} items
@@ -40,11 +42,14 @@ class Page4 extends FormPageContainer {
             value         : 'orange',
             valueLabelText: 'Orange'
         }, {
+            showErrorTexts: true, // overwriting the itemDefaults value
             value         : 'strawberry',
             valueLabelText: 'Strawberry'
         }, {
             labelText     : 'Boolean',
+            groupRequired : false, // overwriting the itemDefaults value
             name          : 'boolean',
+            showErrorTexts: true,  // overwriting the itemDefaults value
             style         : {marginTop: '50px'},
             uncheckedValue: false,
             value         : true

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.4.12'
+         * @member {String} version='5.5.0'
          */
-        version: '5.4.12'
+        version: '5.5.0'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.4.12",
+    "version": "5.5.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",
-        "sass": "^1.62.0",
+        "sass": "^1.62.1",
         "webpack": "^5.80.0",
         "webpack-cli": "^5.0.2",
         "webpack-dev-server": "4.13.3",

package/src/DefaultConfig.mjs

@@ -237,12 +237,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.4.12'
+     * @default '5.5.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.4.12'
+    version: '5.5.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/CheckBox.mjs

@@ -1,5 +1,6 @@
-import Base     from './Base.mjs';
-import NeoArray from '../../util/Array.mjs';
+import Base             from './Base.mjs';
+import ComponentManager from '../../manager/Component.mjs';
+import NeoArray         from '../../util/Array.mjs';
 
 /**
  * @class Neo.form.field.CheckBox
@@ -37,10 +38,18 @@ class CheckBox extends Base {
          * @member {String|null} error_=null
          */
         error_: null,
+        /**
+         * @member {Function} errorTextGroupRequired='Required'
+         */
+        errorTextGroupRequired: data => `Please check at least one item of the group: ${data.name}`,
         /**
          * @member {String} errorTextRequired='Required'
          */
         errorTextRequired: 'Required',
+        /**
+         * @member {Boolean} groupRequired_=false
+         */
+        groupRequired_: false,
         /**
          * @member {Boolean} hideLabel_=false
          */
@@ -87,6 +96,11 @@ class CheckBox extends Base {
          * @member {Boolean} required_=false
          */
         required_: false,
+        /**
+         * Use case: Set this config to false for all but one items with the same name.
+         * @member {Boolean} showErrorTexts_=true
+         */
+        showErrorTexts_: true,
         /**
          * In case the CheckBox does not belong to a group (multiple fields with the same name),
          * you can pass a custom value for the unchecked state.
@@ -148,6 +162,10 @@ class CheckBox extends Base {
             newCls  = value ? me.iconClsChecked : me.iconCls,
             oldCls  = value ? me.iconCls : me.iconClsChecked;
 
+        if (oldValue) {
+            me.clean = false;
+        }
+
         me.validate(); // silent
 
         labelEl.cn[1].checked = value;
@@ -171,6 +189,16 @@ class CheckBox extends Base {
         this.updateError(value)
     }
 
+    /**
+     * Triggered after the required groupRequired got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetGroupRequired(value, oldValue) {
+        oldValue !== undefined && this.validate(false)
+    }
+
     /**
      * Triggered after the hideLabel config got changed
      * @param {String} value
@@ -291,6 +319,16 @@ class CheckBox extends Base {
         oldValue !== undefined && this.validate(false)
     }
 
+    /**
+     * Triggered after the showErrorTexts config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowErrorTexts(value, oldValue) {
+        oldValue !== undefined && this.validate(false)
+    }
+
     /**
      * Triggered after the value config got changed
      * @param {String} value
@@ -323,6 +361,21 @@ class CheckBox extends Base {
         me.update()
     }
 
+    /**
+     * Triggered before the groupRequired config gets changed.
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    beforeSetGroupRequired(value, oldValue) {
+        if (value && this.required) {
+            console.warn('Do not use groupRequired & required at the same time. Switching to required.', this);
+            return false
+        }
+
+        return value
+    }
+
     /**
      * Triggered before the labelCls config gets changed.
      * @param {String[]} value
@@ -407,8 +460,9 @@ class CheckBox extends Base {
      @param {Boolean} silent=false
      */
     updateError(value, silent=false) {
-        let me  = this,
-            cls = me.cls,
+        let me        = this,
+            cls       = me.cls,
+            showError = value && me.showErrorTexts,
             errorNode;
 
         if (!(me.clean && !me.mounted)) {
@@ -419,13 +473,13 @@ class CheckBox extends Base {
 
             errorNode = me.vdom.cn[1];
 
-            if (value) {
+            if (showError) {
                 errorNode.html = value;
             } else {
                 delete errorNode.html;
             }
 
-            errorNode.removeDom = !value;
+            errorNode.removeDom = !showError;
 
             !silent && me.update()
         }
@@ -438,14 +492,47 @@ class CheckBox extends Base {
      */
     validate(silent=true) {
         let me          = this,
-            returnValue = true;
+            name        = me.name,
+            returnValue = true,
+            checkBox, checkBoxes;
 
         if (!silent) {
             // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
             me.clean = false;
         }
 
-        if (me.required && !me.checked) {
+        if (me.groupRequired) {
+            returnValue = false;
+
+            // discuss: we could limit this to checkBoxes / radios inside the same form, IF a top level form is used
+            checkBoxes = ComponentManager.find({
+                ntype: me.ntype,
+                name : me.name
+            });
+
+            // get the group validity state first
+            for (checkBox of checkBoxes) {
+                if (checkBox.checked) {
+                    returnValue = true;
+                    break;
+                }
+            }
+
+            // update all group items
+            for (checkBox of checkBoxes) {
+                if (checkBox.id !== me.id) {
+                    if (!me.clean) {
+                        checkBox.clean = false;
+                    }
+
+                    checkBox[me.clean ? '_error' : 'error'] = returnValue ? null : checkBox.errorTextGroupRequired({name})
+                }
+            }
+
+            if (!returnValue) {
+                me._error = me.errorTextGroupRequired({name});
+            }
+        } else if (me.required && !me.checked) {
             me._error = me.errorTextRequired;
             returnValue = false;
         }

package/src/form/field/Number.mjs

@@ -162,6 +162,34 @@ class Number extends Text {
         }
     }
 
+    /**
+     * Triggered before the maxLength config gets changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    beforeSetMaxLength(value, oldValue) {
+        if (value !== null) {
+            console.warn('input type number does not support maxLength. use maxValue instead.', this)
+        }
+
+        return null;
+    }
+
+    /**
+     * Triggered before the minLength config gets changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    beforeSetMinLength(value, oldValue) {
+        if (value !== null) {
+            console.warn('input type number does not support minLength. use minValue instead.', this)
+        }
+
+        return null;
+    }
+
     /**
      * Triggered after the triggerPosition config got changed
      * @param {String} value
@@ -351,32 +379,25 @@ class Number extends Text {
             minValue    = me.minValue,
             stepSize    = me.stepSize,
             stepSizePow = Math.pow(10, me.stepSizeDigits),
-            returnValue = true,
+            returnValue = super.validate(silent),
             errorParam  = {maxValue, minValue, stepSize, value};
 
-        if (!silent) {
-            // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
-            me.clean = false;
-        }
-
-        if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
-            me._error = me.errorTextMaxValue(errorParam);
-            returnValue = false;
-        } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
-            me._error = me.errorTextMinValue(errorParam);
-            returnValue = false;
-        } else if ((Math.round((value % me.stepSize) * stepSizePow) / stepSizePow) !== 0) {
-            me._error = me.errorTextStepSize(errorParam);
-            returnValue = false;
-        }
-
         if (returnValue) {
-            me._error = null;
+            if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
+                me._error = me.errorTextMaxValue(errorParam);
+                returnValue = false;
+            } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
+                me._error = me.errorTextMinValue(errorParam);
+                returnValue = false;
+            } else if ((Math.round((value % me.stepSize) * stepSizePow) / stepSizePow) !== 0) {
+                me._error = me.errorTextStepSize(errorParam);
+                returnValue = false;
+            }
         }
 
-        !me.clean && me.updateError(me._error, silent);
+        !returnValue && !me.clean && me.updateError(me._error, silent);
 
-        return !returnValue ? false : super.validate(silent);
+        return returnValue
     }
 }
 

package/src/form/field/Radio.mjs

@@ -1,5 +1,5 @@
 import CheckBox         from './CheckBox.mjs';
-import ComponentManager from '../../manager/Component.mjs'
+import ComponentManager from '../../manager/Component.mjs';
 
 /**
  * @class Neo.form.field.Radio