neo.mjs 4.0.76 → 4.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.76",
+    "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/component/Base.mjs

@@ -410,7 +410,7 @@ class Base extends CoreBase {
                     app.un('mounted', listenerId);
 
                     setTimeout(() => {
-                        me.updateVdom(me.vdom, me.vnode);
+                        me.vnode && me.updateVdom(me.vdom, me.vnode);
                     }, 50);
                 });
             } else if (me.mounted) {
@@ -1567,24 +1567,22 @@ class Base extends CoreBase {
 
         // keep the vnode parent tree in sync
         ComponentManager.getParents(me).forEach((component, index) => {
-            if (component._vnode) {
-                if (!me.vnode) {
-                    if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
-                        // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
-                        // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
-                    }
+            if (!me.vnode) {
+                if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
+                    // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
+                    // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
                 }
+            }
 
-                // check for dynamically rendered components which get inserted into the component tree
-                else if (index === 0 && me.vnode.outerHTML) {
-                    // console.log('dyn item', me.vnode, me.parentIndex);
-                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
-                }
+            // check for dynamically rendered components which get inserted into the component tree
+            else if (index === 0 && me.vnode.outerHTML) {
+                // console.log('dyn item', me.vnode, me.parentIndex);
+                component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
+            }
 
-                else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
-                    // todo: can happen for dynamically inserted container items
-                    // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
-                }
+            else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
+                // todo: can happen for dynamically inserted container items
+                // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
             }
         });
 

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
     }}
 
     /**

package/src/vdom/Helper.mjs

@@ -167,9 +167,6 @@ class Helper extends Base {
             // use case: calendar week view => move an event into a column on the right side
 
             if (movedNode) {
-
-                // todo: check if there is a real index change
-
                 deltas.push({
                     action: 'moveNode',
                     id      : oldVnode.id,
@@ -786,8 +783,8 @@ class Helper extends Base {
      * @returns {Object|Promise<Object>}
      */
     update(opts) {
-        let me     = this,
-            node   = me.parseHelper(opts.vdom),
+        let me   = this,
+            node = me.parseHelper(opts.vdom),
 
         deltas = me.createDeltas({
             newVnode: node,