neo.mjs 5.7.6 → 5.8.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.7.6",
+    "version": "5.8.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,7 +52,7 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.2",
+        "inquirer": "^9.2.3",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",

package/src/DefaultConfig.mjs

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

package/src/form/field/Base.mjs

@@ -24,6 +24,24 @@ class Base extends Component {
          * @member {String|null} formGroup_=null
          */
         formGroup_: null,
+        /**
+         * @member {String|null} name_=null
+         */
+        name_: null,
+        /**
+         * Neo itself does not need field names to get mapped to the DOM (input nodes),
+         * except for CheckBoxes & Radios to work. It can be useful for testing tools
+         * & accessibility though, so the default got set to true.
+         * Feel free to change it to false to keep the DOM minimal.
+         * @member {Boolean} renderName_=true
+         */
+        renderName_: true,
+        /**
+         * In case renderName is set to true, you can optionally render the combination
+         * of all formGroup(s) & the field name into the DOM => input node
+         * @member {Boolean} renderPath=true
+         */
+        renderPath: true,
         /**
          * @member {*} value_=null
          */
@@ -35,6 +53,22 @@ class Base extends Component {
      * @member {String|null} formGroupString=null
      */
     formGroupString = null
+    /**
+     * An internal cache for formGroup(s) and the field name
+     * @member {String|null} path=null
+     */
+    path = null
+
+    /**
+     * Triggered after the name config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetName(value, oldValue) {
+        let me = this;
+
+        me.renderName && me.changeInputElKey('name', me.renderPath ? me.getPath() : value)
+    }
 
     /**
      * Triggered after the value config got changed
@@ -43,7 +77,7 @@ class Base extends Component {
      */
     afterSetValue(value, oldValue) {
         if (oldValue !== undefined) {
-            this.fireChangeEvent(value, oldValue);
+            this.fireChangeEvent(value, oldValue)
         }
     }
 
@@ -72,7 +106,25 @@ class Base extends Component {
 
         me.formGroupString = returnValue;
 
-        return returnValue;
+        return returnValue
+    }
+
+    /**
+     * Changes the value of a inputEl vdom object attribute or removes it in case it has no value
+     * @param {String} key
+     * @param {Array|Number|Object|String|null} value
+     * @param {Boolean} silent=false
+     */
+    changeInputElKey(key, value, silent=false) {
+        let me = this;
+
+        if (value || Neo.isBoolean(value) || value === 0) {
+            me.getInputEl()[key] = value;
+        } else {
+            delete me.getInputEl()[key];
+        }
+
+        !silent && me.update()
     }
 
     /**
@@ -103,6 +155,41 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Override this method as needed
+     * @returns {Object|null}
+     */
+    getInputEl() {
+        return this.vdom
+    }
+
+    /**
+     * Returns the combination of the field formGroup(s) & name
+     * @returns {String|null}
+     */
+    getPath() {
+        let me = this,
+            path;
+
+        if (!me.path) {
+            path = me.formGroup ? me.formGroup.split('.') : [];
+
+            me.name && path.push(me.name);
+
+            if (path.length < 1) {
+                return null
+            }
+
+            me.path = path.join('.');
+        }
+
+        if (!me.path) {
+            me.path = 'none'
+        }
+
+        return me.path === 'none' ? null: me.path
+    }
+
     /**
      * @returns {*}
      */

package/src/form/field/CheckBox.mjs

@@ -93,16 +93,12 @@ class CheckBox extends Base {
          * @member {Number|String} labelWidth_=150
          */
         labelWidth_: 150,
-        /**
-         * @member {String} The name (group) of the input dom node
-         */
-        name_: '',
         /**
          * @member {Boolean} required_=false
          */
         required_: false,
         /**
-         * Use case: Set this config to false for all but one items with the same name.
+         * Use case: Set this config to false for all but one item with the same name.
          * @member {Boolean} showErrorTexts_=true
          */
         showErrorTexts_: true,
@@ -259,8 +255,7 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetInputType(value, oldValue) {
-        this.vdom.cn[0].cn[1].type = value;
-        this.update()
+        this.changeInputElKey('type', value)
     }
 
     /**
@@ -320,17 +315,6 @@ class CheckBox extends Base {
         }
     }
 
-    /**
-     * Triggered after the name config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetName(value, oldValue) {
-        this.vdom.cn[0].cn[1].name = value;
-        this.update()
-    }
-
     /**
      * Triggered after the required config got changed
      * @param {Boolean} value
@@ -358,10 +342,7 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        if (value) {
-            this.vdom.cn[0].cn[1].value = value;
-            this.update()
-        }
+        this.changeInputElKey('value', value)
     }
 
     /**
@@ -419,6 +400,17 @@ class CheckBox extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'labelPosition')
     }
 
+    /**
+     * Triggered before the renderName config gets changed.
+     * CheckBoxes & radios rely on this flag being set to true
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    beforeSetRenderName(value, oldValue) {
+        return true
+    }
+
     /**
      * @returns {String}
      */
@@ -426,6 +418,13 @@ class CheckBox extends Base {
         return `${this.id}__icon`
     }
 
+    /**
+     * @returns {Object|null}
+     */
+    getInputEl() {
+        return this.vdom.cn[0].cn[1]
+    }
+
     /**
      * @returns {String}
      */

package/src/form/field/Text.mjs

@@ -667,7 +667,7 @@ class Text extends Base {
      * @protected
      */
     afterSetSpellCheck(value, oldValue) {
-        this.changeInputElKey('spellcheck', Neo.isBoolean(value) ? value : null);
+        this.changeInputElKey('spellcheck', Neo.isBoolean(value) ? value : null)
     }
 
     /**
@@ -932,24 +932,6 @@ class Text extends Base {
         return value
     }
 
-    /**
-     * Changes the value of a inputEl vdom object attribute or removes it in case it has no value
-     * @param {String} key
-     * @param {Array|Number|Object|String|null} value
-     * @param {Boolean} silent=false
-     */
-    changeInputElKey(key, value, silent=false) {
-        let me = this;
-
-        if (value || Neo.isBoolean(value) || value === 0) {
-            me.getInputEl()[key] = value;
-        } else {
-            delete me.getInputEl()[key];
-        }
-
-        !silent && me.update()
-    }
-
     /**
      * Resets the field to its original value or null depending on the clearToOriginalValue config
      */

package/src/form/field/ZipCode.mjs

@@ -59,7 +59,7 @@ class ZipCode extends Text {
 
         me.inputPattern = ZipCode.countryCodes[value] || null;
 
-        !me.clean && me.validate(false);
+        oldValue !== undefined && me.value && !me.clean && me.validate(false);
     }
 
     /**
@@ -106,7 +106,7 @@ class ZipCode extends Text {
      * @param {Object} data
      */
     onCountryFieldChange(data) {
-        this.countryCode = data.record?.[this.countryKeyProperty];
+        this.countryCode = data.record?.[this.countryKeyProperty] || null;
     }
 }