neo.mjs 4.0.77 → 4.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.77",
+    "version": "4.0.80",
     "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/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,10 +77,18 @@ class Text extends Base {
          * @member {String[]} cls=['neo-textfield']
          */
         cls: ['neo-textfield'],
+        /**
+         * @member {String|null} error_=null
+         */
+        error_: null,
         /**
          * @member {Boolean} hideLabel_=false
          */
         hideLabel_: false,
+        /**
+         * @member {RegExp|null} inputPattern=null
+         */
+        inputPattern_: null,
         /**
          * @member {String} inputType_='text'
          */
@@ -132,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}
         ]}
     }}
 
@@ -220,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
@@ -256,6 +275,16 @@ class Text extends Base {
         super.afterSetId(value, oldValue);
     }
 
+    /**
+     * Triggered after the inputPattern config got changed
+     * @param {RegExp|null} value
+     * @param {RegExp|null} oldValue
+     * @protected
+     */
+    afterSetInputPattern(value, oldValue) {
+
+    }
+
     /**
      * Triggered after the inputType config got changed
      * @param {String} value
@@ -536,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');
         }
 
@@ -817,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;
         }
 
@@ -911,7 +945,9 @@ class Text extends Base {
             vnode.vnode.attributes.value = value;
         }
 
-        if (value !== oldValue) {
+        if (me.inputPattern && !me.inputPattern.test(value) ) {
+            me.afterSetValue(oldValue, value);
+        } else if (value !== oldValue) {
             me.value = value;
         }
     }
@@ -1025,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;

package/src/manager/Focus.mjs

@@ -13,11 +13,6 @@ class Focus extends CoreBase {
          * @protected
          */
         className: 'Neo.manager.Focus',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * An array containing opts objects.
          * opts.componentPath
@@ -47,7 +42,12 @@ class Focus extends CoreBase {
          * The maximum amount of items stored inside the history array
          * @member {Number} maxHistoryLength=20
          */
-        maxHistoryLength: 20
+        maxHistoryLength: 20,
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
     }}
 
     /**