neo.mjs 4.0.78 → 4.0.81

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

@@ -42,6 +42,13 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'disabled',
             listeners: {change: me.onConfigChange.bind(me, 'disabled')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'error',
+            listeners: {change: me.onConfigChange.bind(me, 'error')},
+            reference: 'error-field',
+            value    : me.exampleComponent.error
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,
@@ -157,7 +164,14 @@ class MainContainer extends ConfigurationViewport {
             labelWidth   : 70,
             minLength    : 3,
             value        : 'Hello World',
-            width        : 200
+            width        : 200,
+
+            listeners: {
+                change(value) {
+                    this.down({reference: 'error-field'}).clear();
+                },
+                scope: this
+            }
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.78",
+    "version": "4.0.81",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -50,12 +50,12 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.0.1",
+        "inquirer": "^9.0.2",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.14",
-        "sass": "^1.53.0",
-        "webpack": "^5.73.0",
+        "sass": "^1.54.0",
+        "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.9.3",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/form/field/Text.scss

@@ -54,7 +54,9 @@
     }
 
     &.label-inline {
+        display  : block;
         font-size: 14px;
+        height   : inherit;
         position : relative;
 
         &.neo-focus {
@@ -107,7 +109,7 @@
 
         .neo-label-wrapper {
             display : flex;
-            height  : 100%;
+            height  : 27px;
             position: absolute;
             width   : 100%;
 
@@ -191,6 +193,12 @@
         }
     }
 
+    .neo-textfield-error {
+        color     : v(textfield-border-color-invalid);
+        font-size : 11px;
+        margin-top: .3em;
+    }
+
     .neo-textfield-input {
         background-color: v(textfield-input-background-color);
         border          : 1px solid v(textfield-border-color);

package/src/form/field/Base.mjs

@@ -68,6 +68,15 @@ class Base extends Component {
     reset(value) {
         this.value = value;
     }
+
+    /**
+     * 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) {
+        return true;
+    }
 }
 
 /**

package/src/form/field/Number.mjs

@@ -99,7 +99,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMaxValue(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('max', value);
     }
 
@@ -110,7 +110,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMinValue(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('min', value);
     }
 

package/src/form/field/Select.mjs

@@ -261,7 +261,7 @@ class Select extends Picker {
 
             if (record) {
                 me.record = record;
-                return record[me.displayField];
+                return record[displayField];
             }
         }
 

package/src/form/field/Text.mjs

@@ -77,6 +77,10 @@ class Text extends Base {
          * @member {String[]} cls=['neo-textfield']
          */
         cls: ['neo-textfield'],
+        /**
+         * @member {String|null} error_=null
+         */
+        error_: null,
         /**
          * @member {Boolean} hideLabel_=false
          */
@@ -136,7 +140,8 @@ class Text extends Base {
         _vdom:
         {cn: [
             {tag: 'label', cls: ['neo-textfield-label'], style: {}},
-            {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}}
+            {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
+            {cls: ['neo-textfield-error'], removeDom: true}
         ]}
     }}
 
@@ -224,6 +229,16 @@ class Text extends Base {
         });
     }
 
+    /**
+     * 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 hideLabel config got changed
      * @param {Boolean} value
@@ -262,12 +277,12 @@ class Text extends Base {
 
     /**
      * Triggered after the inputPattern config got changed
-     * @param {RegExp|null} value 
+     * @param {RegExp|null} value
      * @param {RegExp|null} oldValue
      * @protected
      */
     afterSetInputPattern(value, oldValue) {
-        
+
     }
 
     /**
@@ -395,7 +410,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMaxLength(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('maxlength', value);
     }
 
@@ -406,7 +421,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMinLength(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('minlength', value);
     }
 
@@ -459,7 +474,7 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('required', value ? value : null);
     }
 
@@ -550,12 +565,12 @@ class Text extends Base {
 
         me.getInputEl().value = value;
 
-        if (!!value !== !!oldValue) { // change from empty to non empty
+        if (!!value !== !!oldValue) { // change from empty to non-empty
             NeoArray[value && value.toString().length > 0 ? 'add' : 'remove'](me._cls, 'neo-has-content');
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](me._cls, 'neo-is-dirty');
-        me.updateValidationIndicators();
+        me.validate(); // silent
 
         me.vdom = vdom;
 
@@ -830,23 +845,7 @@ class Text extends Base {
      * @returns {Boolean}
      */
     isValid() {
-        let me          = this,
-            value       = me.value,
-            valueLength = value?.toString().length;
-
-        if (me.required && (!value || valueLength < 1)) {
-            return false;
-        }
-
-        if (Neo.isNumber(me.maxLength) && valueLength > me.maxLength) {
-            return false;
-        }
-
-        if (Neo.isNumber(me.minLength) && valueLength < me.minLength) {
-            return false;
-        }
-
-        return super.isValid();
+        return this.error?.length > 0 ? false : super.isValid();
     }
 
     /**
@@ -899,7 +898,7 @@ class Text extends Base {
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
             vdom           = me.vdom;
 
-        me.updateValidationIndicators();
+        me.validate(); // silent
 
         NeoArray.remove(me._cls, 'neo-focus');
 
@@ -925,7 +924,7 @@ class Text extends Base {
             vnode.vnode.attributes.value = value;
         }
 
-        if (me.inputPattern && !me.inputPattern.test(value) ) {            
+        if (me.inputPattern && !me.inputPattern.test(value) ) {
             me.afterSetValue(oldValue, value);
         } else if (value !== oldValue) {
             me.value = value;
@@ -997,6 +996,36 @@ class Text extends Base {
         });
     }
 
+    /**
+     @param {String|null} value
+     @param {Boolean} silent=false
+     */
+    updateError(value, silent=false) {
+        let me   = this,
+            vdom = me.vdom,
+            errorNode, isValid;
+
+        if (!(me.validBeforeMount && !me.mounted)) {
+            isValid = !value || value === '';
+
+            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+            errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
+
+            if (!isValid) {
+                errorNode.html = me.error;
+            } else {
+                delete errorNode.html;
+            }
+
+            errorNode.removeDom = isValid;
+
+            if (!silent) {
+                me.vdom = vdom;
+            }
+        }
+    }
+
     /**
      * Calculates the new inputWidth based on the labelWidth & total width
      * @protected
@@ -1037,19 +1066,43 @@ class Text extends Base {
     }
 
     /**
+     * Checks for client-side field errors
      * @param {Boolean} silent=true
+     * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    updateValidationIndicators(silent=true) {
-        let me   = this,
-            vdom = me.vdom;
-
-        if (!(me.validBeforeMount && !me.mounted)) {
-            NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
-
-            if (!silent) {
-                me.vdom = vdom;
+    validate(silent=true) {
+        let me          = this,
+            errorField  = silent ? '_error' : 'error',
+            maxLength   = me.maxLength,
+            minLength   = me.minLength,
+            required    = me.required,
+            returnValue = true,
+            value       = me.value,
+            valueLength = value?.toString().length,
+            isEmpty     = !value || valueLength < 1;
+
+        if (required && isEmpty) {
+            me[errorField] = 'Required';
+            returnValue = false;
+        } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
+            if (required || !isEmpty) {
+                me[errorField] = `Max length violation: ${valueLength} / ${maxLength}`;
+                returnValue = false;
+            }
+        } else if (Neo.isNumber(minLength) && valueLength < minLength) {
+            if (required || !isEmpty) {
+                me[errorField] = `Min length violation: ${valueLength} / ${minLength}`;
+                returnValue = false;
             }
         }
+
+        if (returnValue) {
+            me[errorField] = null;
+        }
+
+        silent && me.updateError(me[errorField], true);
+
+        return !returnValue ? false : super.validate(silent);
     }
 }