neo.mjs 5.4.8 → 5.4.10

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.4.8'
+         * @member {String} version='5.4.10'
          */
-        version: '5.4.8'
+        version: '5.4.10'
     }
 
     /**

package/apps/form/Overwrites.mjs

@@ -5,6 +5,10 @@ Neo.overwrites = {
                 Text: {
                     labelPosition_   : 'inline',
                     showOptionalText_: true
+                },
+                ZipCode: {
+                    maxLength: 5,
+                    minLength: 5
                 }
             }
         }

package/apps/form/view/pages/Page11.mjs

@@ -1,5 +1,5 @@
 import FormPageContainer from '../FormPageContainer.mjs';
-import TextField         from '../../../../src/form/field/Text.mjs';
+import ZipCodeField      from '../../../../src/form/field/ZipCode.mjs';
 
 /**
  * @class Form.view.pages.Page11
@@ -16,13 +16,15 @@ class Page11 extends FormPageContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
-            labelText: 'Page 11 Field 1',
-            name     : 'page11field1'
+            module   : ZipCodeField,
+            labelText: 'Munich',
+            name     : 'page11.field1',
+            required : true,
+            value    : '80796'
         }, {
-            module   : TextField,
+            module   : ZipCodeField,
             labelText: 'Page 11 Field 2',
-            name     : 'page11field2'
+            name     : 'page11.field2'
         }]
     }
 }

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.4.8'
+         * @member {String} version='5.4.10'
          */
-        version: '5.4.8'
+        version: '5.4.10'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.4.8",
+    "version": "5.4.10",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -47,19 +47,19 @@
         "autoprefixer": "^10.4.14",
         "chalk": "^5.2.0",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^10.0.0",
+        "commander": "^10.0.1",
         "cssnano": "^6.0.0",
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.5",
+        "inquirer": "^9.2.0",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
-        "postcss": "^8.4.21",
-        "sass": "^1.61.0",
-        "webpack": "^5.78.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "4.13.2",
+        "postcss": "^8.4.23",
+        "sass": "^1.62.0",
+        "webpack": "^5.80.0",
+        "webpack-cli": "^5.0.2",
+        "webpack-dev-server": "4.13.3",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/examples/data/formSideNav.json

@@ -16,7 +16,7 @@
         {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "HiddenFields"},
         {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "SelectFields"},
         {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "4. Optional data"},
-        {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "Page 11"},
+        {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "ZipCodeFields"},
         {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "Page 12"},
         {"id": 17, "cardIndex":   12, "isHeader": false, "isValid": null, "name": "Page 13"},
         {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "Page 14"}

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

@@ -63,21 +63,23 @@
             border-color: v(textfield-border-color-invalid);
         }
 
-        .neo-label-wrapper {
-            .neo-center-border, .neo-left-border, .neo-right-border {
-                border-bottom-color: v(textfield-border-color-invalid);
-            }
+        &.label-inline {
+            .neo-label-wrapper {
+                .neo-center-border, .neo-left-border, .neo-right-border {
+                    border-bottom-color: v(textfield-border-color-invalid);
+                }
 
-            .neo-left-border, .neo-right-border {
-                border-top-color: v(textfield-border-color-invalid);
-            }
+                .neo-left-border, .neo-right-border {
+                    border-top-color: v(textfield-border-color-invalid);
+                }
 
-            .neo-left-border {
-                border-left-color: v(textfield-border-color-invalid);
-            }
+                .neo-left-border {
+                    border-left-color: v(textfield-border-color-invalid);
+                }
 
-            .neo-right-border {
-                border-right-color: v(textfield-border-color-invalid);
+                .neo-right-border {
+                    border-right-color: v(textfield-border-color-invalid);
+                }
             }
         }
     }

package/src/DefaultConfig.mjs

@@ -237,12 +237,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.4.8'
+     * @default '5.4.10'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.4.8'
+    version: '5.4.10'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -259,11 +259,11 @@ class Base extends CoreBase {
          */
         role_: null,
         /**
-         * Set this to true for bulk updates.
-         * Ensure to set it back to false afterwards.
-         * @member {Boolean} silentVdomUpdate=false
+         * Set this to true for bulk updates. Ensure to set it back to false afterwards.
+         * Internally the value will get saved as a number to ensure that child methods won't stop the silent mode too early.
+         * @member {Boolean} silentVdomUpdate_=false
          */
-        silentVdomUpdate: false,
+        silentVdomUpdate_: false,
         /**
          * Style attributes added to this vdom root. see: getVdomRoot()
          * @member {Object} style_=null
@@ -982,6 +982,21 @@ class Base extends CoreBase {
         return value;
     }
 
+    /**
+     * Triggered before the silentVdomUpdate config gets changed.
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @returns {Number}
+     * @protected
+     */
+    beforeSetSilentVdomUpdate(value, oldValue) {
+        if (value === true) {
+            return Neo.isNumber(oldValue) ? (oldValue + 1) : 1
+        }
+
+        return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
+    }
+
     /**
      * Changes the value of a vdom object attribute or removes it in case it has no value
      * @param {String} key

package/src/form/field/CheckBox.mjs

@@ -78,9 +78,13 @@ class CheckBox extends Base {
         /**
          * 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.
-         * @member {*} uncheckedValue=null
+         * @member {*} uncheckedValue=false
          */
-        uncheckedValue: null,
+        uncheckedValue: false,
+        /**
+         * @member {Boolean|Number|String|null} value=true
+         */
+        value: true,
         /**
          * @member {String|null} valueLabelText_=null
          */

package/src/form/field/Phone.mjs

@@ -0,0 +1,30 @@
+import Text from './Text.mjs';
+
+/**
+ * An extended form.field.Text which uses an input type 'tel'
+ * @class Neo.form.field.Phone
+ * @extends Neo.form.field.Text
+ */
+class Phone extends Text {
+    static config = {
+        /**
+         * @member {String} className='Neo.form.field.Phone'
+         * @protected
+         */
+        className: 'Neo.form.field.Phone',
+        /**
+         * @member {String} ntype='phonefield'
+         * @protected
+         */
+        ntype: 'phonefield',
+        /**
+         * Value for the inputType_ textfield config
+         * @member {String} inputType='tel'
+         */
+        inputType: 'tel'
+    }
+}
+
+Neo.applyClassConfig(Phone);
+
+export default Phone;

package/src/form/field/Text.mjs

@@ -74,12 +74,17 @@ class Text extends Base {
          */
         error_: null,
         /**
-         * data passes maxLength, minLength & valueLength properties
+         * data passes inputPattern, maxLength, minLength & valueLength properties
+         * @member {Function} errorTextInputPattern=data=>`Input pattern violation: ${data.inputPattern}`
+         */
+        errorTextInputPattern: data => `Input pattern violation: ${data.inputPattern}`,
+        /**
+         * data passes inputPattern, maxLength, minLength & valueLength properties
          * @member {Function} errorTextMaxLength=data=>`Max length violation: ${valueLength} / ${maxLength}`
          */
         errorTextMaxLength: data => `Max length violation: ${data.valueLength} / ${data.maxLength}`,
         /**
-         * data passes maxLength, minLength & valueLength properties
+         * data passes inputPattern, maxLength, minLength & valueLength properties
          * @member {Function} errorTextMinLength=data=>`Min length violation: ${data.valueLength} / ${data.minLength}`
          */
         errorTextMinLength: data => `Min length violation: ${data.valueLength} / ${data.minLength}`,
@@ -92,7 +97,7 @@ class Text extends Base {
          */
         hideLabel_: false,
         /**
-         * @member {RegExp|null} inputPattern=null
+         * @member {RegExp|null} inputPattern_=null
          */
         inputPattern_: null,
         /**
@@ -330,7 +335,12 @@ class Text extends Base {
      * @protected
      */
     afterSetInputPattern(value, oldValue) {
+        if (value) {
+            value = value.toString();
+            value = value.substring(1, value.length - 1);
+        }
 
+        this.changeInputElKey('pattern', value);
     }
 
     /**
@@ -573,9 +583,15 @@ class Text extends Base {
     afterSetRequired(value, oldValue) {
         let me = this;
 
-        me.validate(); // silent
-        me.changeInputElKey('required', value ? value : null, true); // silent update
-        me.labelText = me.labelText; // triggers a vdom update
+        me.silentVdomUpdate = true;
+
+        me.validate(false);
+        me.changeInputElKey('required', value ? value : null);
+        me.labelText        = me.labelText; // apply the optional text if needed
+
+        me.silentVdomUpdate = false;
+
+        me.update()
     }
 
     /**
@@ -1122,21 +1138,16 @@ class Text extends Base {
      * @protected
      */
     onInputValueChange(data) {
-        let me       = this,
-            value    = data.value,
-            oldValue = me.value,
-            vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+        let me    = this,
+            value = data.value,
+            vnode = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
             // required for validation -> revert a wrong user input
             vnode.vnode.attributes.value = value;
         }
 
-        if (me.inputPattern && !me.inputPattern.test(value) ) {
-            me.afterSetValue(oldValue, value);
-        } else if (value !== oldValue) {
-            me.value = value;
-        }
+        me.value = value;
     }
 
     /**
@@ -1253,7 +1264,7 @@ class Text extends Base {
             isValid = !value || value === '';
 
             NeoArray[!isValid ? 'add' : 'remove'](cls, 'neo-invalid');
-            me[silent ? '_cls' : 'cls'] = cls;
+            me.cls = cls;
 
             errorNode = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom;
 
@@ -1313,16 +1324,17 @@ class Text extends Base {
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
     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 !== 0 && (!value || valueLength < 1),
-            errorParam  = {maxLength, minLength, valueLength},
+        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,
+            inputPattern = me.inputPattern,
+            isEmpty      = value !== 0 && (!value || valueLength < 1),
+            errorParam   = {inputPattern, maxLength, minLength, valueLength},
             errorText;
 
         if (!silent) {
@@ -1337,7 +1349,9 @@ class Text extends Base {
                 me[errorField] = errorText;
                 returnValue = false;
             }
-        } else if (required && isEmpty) {
+        }
+
+        if (required && isEmpty) {
             me[errorField] = me.errorTextRequired;
             returnValue = false;
         } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
@@ -1350,6 +1364,11 @@ class Text extends Base {
                 me[errorField] = me.errorTextMinLength(errorParam);
                 returnValue = false;
             }
+        } else if (inputPattern && !inputPattern.test(value)) {
+            if (required || !isEmpty) {
+                me[errorField] = me.errorTextInputPattern(errorParam);
+                returnValue = false;
+            }
         }
 
         if (returnValue) {

package/src/form/field/ZipCode.mjs

@@ -0,0 +1,26 @@
+import Text from './Text.mjs';
+
+/**
+ * An extended form.field.Text which uses an input pattern to limit the amount of character which users can enter.
+ * The first version will only support numbers. Feel free to open feature requests.
+ * @class Neo.form.field.ZipCode
+ * @extends Neo.form.field.Text
+ */
+class ZipCode extends Text {
+    static config = {
+        /**
+         * @member {String} className='Neo.form.field.ZipCode'
+         * @protected
+         */
+        className: 'Neo.form.field.ZipCode',
+        /**
+         * @member {String} ntype='zipcodefield'
+         * @protected
+         */
+        ntype: 'zipcodefield'
+    }
+}
+
+Neo.applyClassConfig(ZipCode);
+
+export default ZipCode;