neo.mjs 4.0.78 → 4.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.78",
+    "version": "4.0.79",
     "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,6 +54,7 @@
     }
 
     &.label-inline {
+        display  : block;
         font-size: 14px;
         position : relative;
 
@@ -191,6 +192,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/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.updateValidationIndicators(false);
+    }
+
     /**
      * 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) {
-        
+
     }
 
     /**
@@ -550,7 +565,7 @@ 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');
         }
 
@@ -831,18 +846,23 @@ class Text extends Base {
      */
     isValid() {
         let me          = this,
+            maxLength   = me.maxLength,
+            minLength   = me.minLength,
             value       = me.value,
             valueLength = value?.toString().length;
 
         if (me.required && (!value || valueLength < 1)) {
+            me._error = 'Required';
             return false;
         }
 
-        if (Neo.isNumber(me.maxLength) && valueLength > me.maxLength) {
+        if (Neo.isNumber(maxLength) && valueLength > maxLength) {
+            me._error = `Max length violation: ${valueLength} / ${maxLength}`;
             return false;
         }
 
-        if (Neo.isNumber(me.minLength) && valueLength < me.minLength) {
+        if (Neo.isNumber(minLength) && valueLength < minLength) {
+            me._error = `Min length violation: ${valueLength} / ${minLength}`;
             return false;
         }
 
@@ -925,7 +945,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;
@@ -1041,10 +1061,18 @@ class Text extends Base {
      */
     updateValidationIndicators(silent=true) {
         let me   = this,
-            vdom = me.vdom;
+            vdom = me.vdom,
+            errorNode, isValid;
 
         if (!(me.validBeforeMount && !me.mounted)) {
-            NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
+            isValid = me.isValid();
+
+            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+            errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
+
+            errorNode.html      = me.error;
+            errorNode.removeDom = isValid;
 
             if (!silent) {
                 me.vdom = vdom;