neo.mjs 5.4.11 → 5.5.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.4.11'
+         * @member {String} version='5.5.0'
          */
-        version: '5.4.11'
+        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.11'
+         * @member {String} version='5.5.0'
          */
-        version: '5.4.11'
+        version: '5.5.0'
     }
 
     /**

package/examples/form/field/checkbox/MainContainer.mjs

@@ -23,8 +23,14 @@ class MainContainer extends ConfigurationViewport {
             module   : CheckBox,
             checked  : me.exampleComponent.disabled,
             labelText: 'disabled',
-            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
-            style    : {marginTop: '10px'}
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')}
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'error',
+            listeners: {change: me.onConfigChange.bind(me, 'error')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.error
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,

package/examples/form/field/checkbox/app.mjs

@@ -1,4 +1,3 @@
-import Overrides     from './Overrides.mjs';
 import MainContainer from './MainContainer.mjs';
 
 export const onStart = () => Neo.app({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.4.11",
+    "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/resources/scss/src/form/field/CheckBox.scss

@@ -33,6 +33,20 @@
         user-select: none;
     }
 
+    .neo-error {
+        color      : v(textfield-border-color-invalid);
+        font-size  : 11px;
+        margin-top : .3em;
+        white-space: break-spaces;
+        word-break : break-word;
+    }
+
+    &.neo-invalid {
+        .neo-checkbox-icon {
+            color: v(textfield-border-color-invalid);
+        }
+    }
+
     &.neo-label-top {
         .neo-checkbox-input {
             margin-left: 0;

package/src/DefaultConfig.mjs

@@ -237,12 +237,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.4.11'
+     * @default '5.5.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.4.11'
+    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
@@ -33,6 +34,22 @@ class CheckBox extends Base {
          * @member {Boolean} checked_=false
          */
         checked_: false,
+        /**
+         * @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
          */
@@ -75,6 +92,15 @@ class CheckBox extends Base {
          * @member {String} The name (group) of the input dom node
          */
         name_: '',
+        /**
+         * @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.
@@ -93,14 +119,24 @@ class CheckBox extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'label', cn: [
-            {tag: 'span',  cls: []},
-            {tag: 'input', cls: ['neo-checkbox-input']},
-            {tag: 'i',     cls: ['neo-checkbox-icon']},
-            {tag: 'span',  cls: ['neo-checkbox-value-label']}
+        {cn: [
+            {tag: 'label', cls: ['neo-checkbox-label'], cn: [
+                {tag: 'span',  cls: []},
+                {tag: 'input', cls: ['neo-checkbox-input']},
+                {tag: 'i',     cls: ['neo-checkbox-icon']},
+                {tag: 'span',  cls: ['neo-checkbox-value-label']}
+            ]},
+            {cls: ['neo-error'], removeDom: true}
         ]}
     }
 
+    /**
+     * Set this value to false, in case a field should display errors up front.
+     * Otherwise, errors will stay hidden on mounting, unless you trigger validate(false).
+     * @member {Boolean} clean=true
+     */
+    clean = true
+
     /**
      * @param {Object} config
      */
@@ -111,7 +147,7 @@ class CheckBox extends Base {
 
         me.addDomListeners(
             {change: me.onInputValueChange, scope: me}
-        );
+        )
     }
 
     /**
@@ -121,21 +157,48 @@ class CheckBox extends Base {
      */
     afterSetChecked(value, oldValue) {
         let me      = this,
-            iconCls = me.vdom.cn[2].cls,
+            labelEl = me.vdom.cn[0],
+            iconCls = labelEl.cn[2].cls,
             newCls  = value ? me.iconClsChecked : me.iconCls,
             oldCls  = value ? me.iconCls : me.iconClsChecked;
 
-        me.vdom.cn[1].checked = value;
+        if (oldValue) {
+            me.clean = false;
+        }
+
+        me.validate(); // silent
+
+        labelEl.cn[1].checked = value;
 
         NeoArray.removeAdd(iconCls, oldCls, newCls);
 
         me.update();
 
         if (oldValue !== undefined) {
-            me.fireChangeEvent(me.getValue(), null);
+            me.fireChangeEvent(me.getValue(), null)
         }
     }
 
+    /**
+     * Triggered after the error config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetError(value, oldValue) {
+        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
@@ -143,8 +206,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetHideLabel(value, oldValue) {
-        this.vdom.cn[0].removeDom = value;
-        this.update();
+        this.vdom.cn[0].cn[0].removeDom = value;
+        this.update()
     }
 
     /**
@@ -154,16 +217,17 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetId(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
+        let me      = this,
+            vdom    = me.vdom,
+            labelEl = vdom.cn[0];
 
-        vdom.cn[0].id = me.getLabelId();
-        vdom.cn[1].id = me.getInputElId();
-        vdom.cn[2].id = me.getIconElId();
-        vdom.cn[3].id = me.getValueLabelId();
+        labelEl.cn[0].id = me.getLabelId();
+        labelEl.cn[1].id = me.getInputElId();
+        labelEl.cn[2].id = me.getIconElId();
+        labelEl.cn[3].id = me.getValueLabelId();
 
         // silent vdom update, the super call will trigger the engine
-        super.afterSetId(value, oldValue);
+        super.afterSetId(value, oldValue)
     }
 
     /**
@@ -173,8 +237,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetInputType(value, oldValue) {
-        this.vdom.cn[1].type = value;
-        this.update();
+        this.vdom.cn[0].cn[1].type = value;
+        this.update()
     }
 
     /**
@@ -185,12 +249,12 @@ class CheckBox extends Base {
      */
     afterSetLabelCls(value, oldValue) {
         let me  = this,
-            cls = me.vdom.cn[0].cls;
+            cls = me.vdom.cn[0].cn[0].cls;
 
         NeoArray.remove(cls, oldValue);
         NeoArray.add(cls, value);
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -205,7 +269,7 @@ class CheckBox extends Base {
 
         NeoArray.remove(cls, 'neo-label-' + oldValue);
         NeoArray.add(   cls, 'neo-label-' + value);
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -215,8 +279,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetLabelText(value, oldValue) {
-        this.vdom.cn[0].innerHTML = value;
-        this.update();
+        this.vdom.cn[0].cn[0].innerHTML = value;
+        this.update()
     }
 
     /**
@@ -229,8 +293,8 @@ class CheckBox extends Base {
         let me = this;
 
         if (!me.hideLabel) {
-            me.vdom.cn[0].width = value;
-            me.update();
+            me.vdom.cn[0].cn[0].width = value;
+            me.update()
         }
     }
 
@@ -241,8 +305,28 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetName(value, oldValue) {
-        this.vdom.cn[1].name = value;
-        this.update();
+        this.vdom.cn[0].cn[1].name = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the required config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetRequired(value, oldValue) {
+        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)
     }
 
     /**
@@ -253,8 +337,8 @@ class CheckBox extends Base {
      */
     afterSetValue(value, oldValue) {
         if (value) {
-            this.vdom.cn[1].value = value;
-            this.update();
+            this.vdom.cn[0].cn[1].value = value;
+            this.update()
         }
     }
 
@@ -266,7 +350,7 @@ class CheckBox extends Base {
      */
     afterSetValueLabelText(value, oldValue) {
         let me         = this,
-            valueLabel = me.vdom.cn[3],
+            valueLabel = me.vdom.cn[0].cn[3],
             showLabel  = !!value; // hide the label, in case value === null || value === ''
 
         if (showLabel) {
@@ -274,7 +358,22 @@ class CheckBox extends Base {
         }
 
         valueLabel.removeDom = !showLabel;
-        me.update();
+        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
     }
 
     /**
@@ -284,7 +383,7 @@ class CheckBox extends Base {
      * @protected
      */
     beforeSetLabelCls(value, oldValue) {
-        return NeoArray.union(value || [], this.labelBaseCls);
+        return NeoArray.union(value || [], this.labelBaseCls)
     }
 
     /**
@@ -295,28 +394,28 @@ class CheckBox extends Base {
      * @returns {String}
      */
     beforeSetLabelPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
+        return this.beforeSetEnumValue(value, oldValue, 'labelPosition')
     }
 
     /**
      * @returns {String}
      */
     getIconElId() {
-        return `${this.id}__icon`;
+        return `${this.id}__icon`
     }
 
     /**
      * @returns {String}
      */
     getInputElId() {
-        return `${this.id}__input`;
+        return `${this.id}__input`
     }
 
     /**
      * @returns {String}
      */
     getLabelId() {
-        return `${this.id}__label`;
+        return `${this.id}__label`
     }
 
     /**
@@ -332,7 +431,14 @@ class CheckBox extends Base {
      * @returns {String}
      */
     getValueLabelId() {
-        return `${this.id}__value-label`;
+        return `${this.id}__value-label`
+    }
+
+    /**
+     * @returns {Boolean}
+     */
+    isValid() {
+        return this.error ? false : super.isValid()
     }
 
     /**
@@ -344,9 +450,100 @@ class CheckBox extends Base {
             checked = data.target.checked;
 
         // keep the vdom & vnode in sync for future updates
-        me.vnode.childNodes[me.hideLabel ? 0 : 1].attributes.checked = `${checked}`;
+        me.vnode.childNodes[0].childNodes[me.hideLabel ? 0 : 1].attributes.checked = `${checked}`;
+
+        me.checked = checked
+    }
+
+    /**
+     @param {String|null} value
+     @param {Boolean} silent=false
+     */
+    updateError(value, silent=false) {
+        let me        = this,
+            cls       = me.cls,
+            showError = value && me.showErrorTexts,
+            errorNode;
+
+        if (!(me.clean && !me.mounted)) {
+            me._error = value; // silent update
+
+            NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
+            me.cls = cls;
+
+            errorNode = me.vdom.cn[1];
+
+            if (showError) {
+                errorNode.html = value;
+            } else {
+                delete errorNode.html;
+            }
+
+            errorNode.removeDom = !showError;
+
+            !silent && me.update()
+        }
+    }
+
+    /**
+     * Checks for client-side field errors
+     * @param {Boolean} silent=true
+     * @returns {Boolean} Returns true in case there are no client-side errors
+     */
+    validate(silent=true) {
+        let me          = this,
+            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.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;
+        }
+
+        if (returnValue) {
+            me._error = null;
+        }
+
+        !me.clean && me.updateError(me._error, silent);
 
-        me.checked = checked;
+        return !returnValue ? false : super.validate(silent)
     }
 }
 

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
@@ -345,39 +373,31 @@ class Number extends Text {
      */
     validate(silent=true) {
         let me          = this,
-            errorField  = silent ? '_error' : 'error',
             value       = me.value,
             isNumber    = Neo.isNumber(value),
             maxValue    = me.maxValue,
             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[errorField] = me.errorTextMaxValue(errorParam);
-            returnValue = false;
-        } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
-            me[errorField] = me.errorTextMinValue(errorParam);
-            returnValue = false;
-        } else if ((Math.round((value % me.stepSize) * stepSizePow) / stepSizePow) !== 0) {
-            me[errorField] = me.errorTextStepSize(errorParam);
-            returnValue = false;
-        }
-
         if (returnValue) {
-            me[errorField] = 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[errorField], 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

package/src/form/field/Text.mjs

@@ -281,7 +281,7 @@ class Text extends Base {
         this.fire('changeClearToOriginalValue', {
             oldValue,
             value
-        });
+        })
     }
 
     /**
@@ -291,7 +291,7 @@ class Text extends Base {
      * @protected
      */
     afterSetError(value, oldValue) {
-        this.updateError(value);
+        this.updateError(value)
     }
 
     /**
@@ -305,7 +305,7 @@ class Text extends Base {
             node = me.labelPosition === 'inline' ? me.getCenterBorderEl() : me.vdom.cn[0];
 
         node.removeDom = value;
-        me.updateInputWidth();
+        me.updateInputWidth()
     }
 
     /**
@@ -325,7 +325,7 @@ class Text extends Base {
         labelEl.for = inputElId;
 
         // silent vdom update, the super call will trigger the engine
-        super.afterSetId(value, oldValue);
+        super.afterSetId(value, oldValue)
     }
 
     /**
@@ -340,7 +340,7 @@ class Text extends Base {
             value = value.substring(1, value.length - 1);
         }
 
-        this.changeInputElKey('pattern', value);
+        this.changeInputElKey('pattern', value)
     }
 
     /**
@@ -350,7 +350,7 @@ class Text extends Base {
      * @protected
      */
     afterSetInputType(value, oldValue) {
-        this.changeInputElKey('type', value);
+        this.changeInputElKey('type', value)
     }
 
     /**
@@ -366,7 +366,7 @@ class Text extends Base {
         NeoArray.remove(cls, oldValue);
         NeoArray.add(cls, value);
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -376,7 +376,7 @@ class Text extends Base {
      * @protected
      */
     afterSetLabelOptionalText(value, oldValue) {
-        this.labelText = this.labelText; // triggers a vdom update
+        this.labelText = this.labelText // triggers a vdom update
     }
 
     /**
@@ -428,11 +428,11 @@ class Text extends Base {
             me.updateInputWidth();
 
             !isEmpty && setTimeout(() => {
-                me.updateCenterBorderElWidth(false);
+                me.updateCenterBorderElWidth(false)
             }, 20);
         } else {
             // changes from e.g. left to top
-            me.updateInputWidth();
+            me.updateInputWidth()
         }
     }
 
@@ -455,7 +455,7 @@ class Text extends Base {
                 }
 
                 me.promiseVdomUpdate().then(() => {
-                    me.updateCenterBorderElWidth(isEmpty);
+                    me.updateCenterBorderElWidth(isEmpty)
                 });
             } else {
                 me.update();
@@ -499,7 +499,7 @@ class Text extends Base {
      */
     afterSetMinLength(value, oldValue) {
         this.validate(); // silent
-        this.changeInputElKey('minlength', value);
+        this.changeInputElKey('minlength', value)
     }
 
     /**
@@ -526,9 +526,9 @@ class Text extends Base {
 
             if (me.labelPosition === 'inline') {
                 if (value) {
-                    me.updateCenterBorderElWidth();
+                    me.updateCenterBorderElWidth()
                 } else {
-                    delete me.getCenterBorderEl().width;
+                    delete me.getCenterBorderEl().width
                 }
             }
         }
@@ -550,7 +550,7 @@ class Text extends Base {
         // => labelPosition: 'inline' should keep the label at the top
         if (Neo.isEmpty(value) !== Neo.isEmpty(oldValue)) {
             NeoArray[value !== null && value.toString().length > 0 ? 'add' : 'remove'](cls, 'neo-has-content');
-            me.cls = cls;
+            me.cls = cls
         }
     }
 
@@ -601,7 +601,7 @@ class Text extends Base {
      * @protected
      */
     afterSetShowOptionalText(value, oldValue) {
-        this.labelText = this.labelText; // triggers a vdom update
+        this.labelText = this.labelText // triggers a vdom update
     }
 
     /**
@@ -627,7 +627,7 @@ class Text extends Base {
         NeoArray.remove(cls, oldValue);
         NeoArray.add(cls, value);
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -644,7 +644,7 @@ class Text extends Base {
         subLabel.html      = value;
         subLabel.removeDom = !showLabel;
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -663,7 +663,7 @@ class Text extends Base {
 
         oldValue?.forEach(item => {
             if (!me.getTrigger(item.type)) {
-                item.destroy();
+                item.destroy()
             }
         });
 
@@ -705,8 +705,8 @@ class Text extends Base {
         }
 
         me.promiseVdomUpdate().then(() => {
-            me.updateTriggerVnodes();
-        });
+            me.updateTriggerVnodes()
+        })
     }
 
     /**
@@ -738,7 +738,7 @@ class Text extends Base {
 
         me.update();
 
-        super.afterSetValue(value, oldValue); // fires the change event
+        super.afterSetValue(value, oldValue) // fires the change event
     }
 
     /**
@@ -749,7 +749,7 @@ class Text extends Base {
      */
     afterSetWidth(value, oldValue) {
         super.afterSetWidth(value, oldValue);
-        this.updateInputWidth();
+        this.updateInputWidth()
     }
 
     /**
@@ -762,7 +762,7 @@ class Text extends Base {
             return [...value];
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -773,7 +773,7 @@ class Text extends Base {
      * @returns {String}
      */
     beforeSetAutoCapitalize(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'autoCapitalize', 'autoCapitalizeValues');
+        return this.beforeSetEnumValue(value, oldValue, 'autoCapitalize', 'autoCapitalizeValues')
     }
 
     /**
@@ -783,7 +783,7 @@ class Text extends Base {
      * @protected
      */
     beforeSetLabelCls(value, oldValue) {
-        return NeoArray.union(value || [], this.labelBaseCls);
+        return NeoArray.union(value || [], this.labelBaseCls)
     }
 
     /**
@@ -794,7 +794,7 @@ class Text extends Base {
      * @returns {String}
      */
     beforeSetLabelPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
+        return this.beforeSetEnumValue(value, oldValue, 'labelPosition')
     }
 
     /**
@@ -817,7 +817,7 @@ class Text extends Base {
             value = value.replace(labelOptionalText, '');
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -828,7 +828,7 @@ class Text extends Base {
      * @protected
      */
     beforeSetSubLabelCls(value, oldValue) {
-        return NeoArray.union(value || [], this.subLabelBaseCls);
+        return NeoArray.union(value || [], this.subLabelBaseCls)
     }
 
     /**
@@ -869,11 +869,11 @@ class Text extends Base {
                     ...item,
                     appName: me.appName,
                     field  : me
-                });
+                })
             }
         });
 
-        return value;
+        return value
     }
 
     /**
@@ -891,7 +891,7 @@ class Text extends Base {
             delete me.getInputEl()[key];
         }
 
-        !silent && me.update();
+        !silent && me.update()
     }
 
     /**
@@ -901,7 +901,7 @@ class Text extends Base {
         let me = this;
 
         me.value = me.clearToOriginalValue ? me.originalConfig.value : null;
-        me.fire('clear');
+        me.fire('clear')
     }
 
     /**
@@ -910,28 +910,28 @@ class Text extends Base {
      * @override
      */
     focus(id=this.id) {
-        super.focus(this.getInputElId());
+        super.focus(this.getInputElId())
     }
 
     /**
      * @returns {Object|null}
      */
     getCenterBorderEl() {
-        return VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'})?.vdom || null;
+        return VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'})?.vdom || null
     }
 
     /**
      * @returns {Object|null}
      */
     getInputEl() {
-        return VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'})?.vdom || null;
+        return VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'})?.vdom || null
     }
 
     /**
      * @returns {String}
      */
     getInputElId() {
-        return `${this.id}__input`;
+        return `${this.id}__input`
     }
 
     /**
@@ -945,33 +945,33 @@ class Text extends Base {
             width       = me.width;
 
         if (labelWidth && width) {
-            return parseInt(width) - parseInt(labelWidth);
+            return parseInt(width) - parseInt(labelWidth)
         } else if (width) {
-            return width;
+            return width
         }
 
-        return null;
+        return null
     }
 
     /**
      * @returns {String}
      */
     getInputWrapperId() {
-        return `${this.id}__input-wrapper`;
+        return `${this.id}__input-wrapper`
     }
 
     /**
      * @returns {Object|null}
      */
     getLabelEl() {
-        return VDomUtil.findVdomChild(this.vdom, {tag: 'label'})?.vdom || null;
+        return VDomUtil.findVdomChild(this.vdom, {tag: 'label'})?.vdom || null
     }
 
     /**
      * @returns {String}
      */
     getLabelId() {
-        return `${this.id}__label`;
+        return `${this.id}__label`
     }
 
     /**
@@ -986,11 +986,11 @@ class Text extends Base {
 
         for (; i < len; i++) {
             if (triggers[i].type === type) {
-                return triggers[i];
+                return triggers[i]
             }
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -1005,11 +1005,11 @@ class Text extends Base {
 
         for (; i < len; i++) {
             if (triggers[i].id === id) {
-                return triggers[i];
+                return triggers[i]
             }
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -1018,7 +1018,7 @@ class Text extends Base {
      * @returns {String} The trigger node id
      */
     getTriggerId(type) {
-        return this.id + '-trigger-' + type;
+        return this.id + '-trigger-' + type
     }
 
     /**
@@ -1042,18 +1042,18 @@ class Text extends Base {
 
         for (; i < len; i++) {
             if (triggers[i].type === type) {
-                return true;
+                return true
             }
         }
 
-        return false;
+        return false
     }
 
     /**
      * @returns {Boolean}
      */
     isEmpty() {
-        return !(this.value?.toString().length > 0);
+        return !(this.value?.toString().length > 0)
     }
 
     /**
@@ -1062,7 +1062,7 @@ class Text extends Base {
     isValid() {
         this.validate(true); // silent
 
-        return this.error?.length > 0 ? false : super.isValid();
+        return this.error ? false : super.isValid()
     }
 
     /**
@@ -1078,7 +1078,7 @@ class Text extends Base {
         me[triggers ? 'triggers' : '_triggers'] = triggers;
 
         delete config.triggers;
-        return config;
+        return config
     }
 
     /**
@@ -1097,9 +1097,9 @@ class Text extends Base {
             if (me.labelPosition === 'inline') {
                 if (me.centerBorderElWidth) {
                     me.getCenterBorderEl().width = me.centerBorderElWidth;
-                    me.update();
+                    me.update()
                 } else {
-                    me.updateCenterBorderElWidth(false);
+                    me.updateCenterBorderElWidth(false)
                 }
             }
         }
@@ -1127,10 +1127,10 @@ class Text extends Base {
                 delete centerBorderEl.width;
             }
 
-            me.update();
+            me.update()
         }
 
-        super.onFocusLeave(data);
+        super.onFocusLeave(data)
     }
 
     /**
@@ -1147,7 +1147,7 @@ class Text extends Base {
             vnode.vnode.attributes.value = value;
         }
 
-        me.value = value;
+        me.value = value
     }
 
     /**
@@ -1159,7 +1159,7 @@ class Text extends Base {
 
         if (!me.readOnly) {
             NeoArray.add(cls, 'neo-hovered');
-            me.cls = cls;
+            me.cls = cls
         }
     }
 
@@ -1172,7 +1172,7 @@ class Text extends Base {
 
         if (!me.readOnly) {
             NeoArray.remove(cls, 'neo-hovered');
-            me.cls = cls;
+            me.cls = cls
         }
     }
 
@@ -1205,7 +1205,7 @@ class Text extends Base {
             me.triggers = triggers;
         }
 
-        return hasMatch;
+        return hasMatch
     }
 
     /**
@@ -1227,7 +1227,7 @@ class Text extends Base {
         super.reset(value);
 
         if (value === null && me.clean) {
-            me.updateError(null);
+            me.updateError(null)
         }
     }
 
@@ -1244,9 +1244,9 @@ class Text extends Base {
 
             if (!silent) {
                 me.getCenterBorderEl().width = me.centerBorderElWidth;
-                me.update();
+                me.update()
             }
-        });
+        })
     }
 
     /**
@@ -1256,27 +1256,23 @@ class Text extends Base {
     updateError(value, silent=false) {
         let me  = this,
             cls = me.cls,
-            errorNode, isValid;
+            errorNode;
 
         if (!(me.clean && !me.mounted)) {
-            me._error = value;
-
-            isValid = !value || value === '';
-
-            NeoArray[!isValid ? 'add' : 'remove'](cls, 'neo-invalid');
+            NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
             me.cls = cls;
 
             errorNode = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom;
 
-            if (!isValid) {
-                errorNode.html = me.error;
+            if (value) {
+                errorNode.html = value;
             } else {
                 delete errorNode.html;
             }
 
-            errorNode.removeDom = isValid;
+            errorNode.removeDom = !value;
 
-            !silent && me.update();
+            !silent && me.update()
         }
     }
 
@@ -1289,12 +1285,12 @@ class Text extends Base {
             inputWidth = me.getInputWidth();
 
         if (inputWidth !== null && inputWidth !== me.width) {
-            me.vdom.cn[1].width = inputWidth;
+            me.vdom.cn[1].width = inputWidth
         } else {
-            delete me.vdom.cn[1].width;
+            delete me.vdom.cn[1].width
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -1314,8 +1310,8 @@ class Text extends Base {
                 vnode,
                 _rendered: true,
                 _mounted : true
-            });
-        });
+            })
+        })
     }
 
     /**
@@ -1325,7 +1321,6 @@ class Text extends Base {
      */
     validate(silent=true) {
         let me           = this,
-            errorField   = silent ? '_error' : 'error',
             maxLength    = me.maxLength,
             minLength    = me.minLength,
             required     = me.required,
@@ -1346,38 +1341,38 @@ class Text extends Base {
             errorText = me.validator(me);
 
             if (errorText !== true) {
-                me[errorField] = errorText;
+                me._error = errorText;
                 returnValue = false;
             }
         }
 
         if (required && isEmpty) {
-            me[errorField] = me.errorTextRequired;
+            me._error = me.errorTextRequired;
             returnValue = false;
         } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
             if (required || !isEmpty) {
-                me[errorField] = me.errorTextMaxLength(errorParam);
+                me._error = me.errorTextMaxLength(errorParam);
                 returnValue = false;
             }
         } else if (Neo.isNumber(minLength) && valueLength < minLength) {
             if (required || !isEmpty) {
-                me[errorField] = me.errorTextMinLength(errorParam);
+                me._error = me.errorTextMinLength(errorParam);
                 returnValue = false;
             }
         } else if (inputPattern && !inputPattern.test(value)) {
             if (required || !isEmpty) {
-                me[errorField] = me.errorTextInputPattern(errorParam);
+                me._error = me.errorTextInputPattern(errorParam);
                 returnValue = false;
             }
         }
 
         if (returnValue) {
-            me[errorField] = null;
+            me._error = null;
         }
 
-        !me.clean && me.updateError(me[errorField], silent);
+        !me.clean && me.updateError(me._error, silent);
 
-        return !returnValue ? false : super.validate(silent);
+        return !returnValue ? false : super.validate(silent)
     }
 }
 

package/examples/form/field/checkbox/Overrides.mjs

@@ -1,13 +0,0 @@
-Neo.overrides = {
-    Neo: {
-        form: {
-            field: {
-                CheckBox: {
-                    iconCls: ['fas', 'fa-rocket']
-                }
-            }
-        }
-    }
-};
-
-export default Neo.overrides;