neo.mjs 5.7.7 → 5.9.0

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainer.mjs

@@ -75,7 +75,8 @@ class FormContainer extends BaseFormContainer {
                 {module: () => import('./pages/Page11.mjs')},
                 {module: () => import('./pages/Page12.mjs')},
                 {module: () => import('./pages/Page13.mjs')},
-                {module: () => import('./pages/Page14.mjs')}
+                {module: () => import('./pages/Page14.mjs')},
+                {module: () => import('./pages/Page15.mjs')}
             ]
         }, {
             module: Toolbar,

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

@@ -0,0 +1,34 @@
+import CurrencyField     from '../../../../src/form/field/Currency.mjs';
+import FormPageContainer from '../FormPageContainer.mjs';
+
+/**
+ * @class Form.view.pages.Page15
+ * @extends Form.view.FormPageContainer
+ */
+class Page15 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page15'
+         * @protected
+         */
+        className: 'Form.view.pages.Page15',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : CurrencyField,
+            labelText: 'Amount in €',
+            name     : 'page15.field1',
+            value    : 15.00
+        }, {
+            module   : CurrencyField,
+            labelText: 'Amount in $',
+            name     : 'page15.field2',
+            value    : 16.10
+        }]
+    }
+}
+
+Neo.applyClassConfig(Page15);
+
+export default Page15;

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.7.7",
+    "version": "5.9.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/examples/data/formSideNav.json

@@ -19,6 +19,7 @@
         {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "ZipCodeFields"},
         {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "EmailFields"},
         {"id": 17, "cardIndex":   12, "isHeader": false, "isValid": null, "name": "UrlFields"},
-        {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "PhoneFields"}
+        {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "PhoneFields"},
+        {"id": 19, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "CurrencyFields"}
     ]
 }

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.7.7'
+     * @default '5.9.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.7.7'
+    version: '5.9.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/Currency.mjs

@@ -0,0 +1,54 @@
+import Number from './Number.mjs';
+
+/**
+ * @class Neo.form.field.Currency
+ * @extends Neo.form.field.Number
+ */
+class Currency extends Number {
+    static config = {
+        /**
+         * @member {String} className='Neo.form.field.Currency'
+         * @protected
+         */
+        className: 'Neo.form.field.Currency',
+        /**
+         * @member {String} ntype='currencyfield'
+         * @protected
+         */
+        ntype: 'currencyfield',
+        /**
+         * @member {Number} stepSize=0.01
+         */
+        stepSize: 0.01
+    }
+
+    /**
+     * @param {Number|null} value
+     * @returns {Number}
+     */
+    inputValueAdjustor(value) {
+        if (Neo.isString(value)) {
+            value = parseFloat(value).toFixed(2);
+
+            return parseInt(value.replace('.', '')) / 100
+        }
+
+        return value
+    }
+
+    /**
+     * @param {Number|null} value
+     * @returns {String}
+     */
+    inputValueRenderer(value) {
+        if (value === null) {
+            return null
+        }
+
+        return value.toFixed(2)
+    }
+}
+
+Neo.applyClassConfig(Currency);
+
+export default Currency;

package/src/form/field/Number.mjs

@@ -243,6 +243,18 @@ class Number extends Text {
         return value
     }
 
+    /**
+     * @param {Number|null} value
+     * @returns {Boolean}
+     */
+    fitsStepSize(value) {
+        if (value === null) {
+            return true
+        }
+
+        return (parseInt(value.toString().replace('.', '')) * (1 / this.stepSize)) % 1 === 0
+    }
+
     /**
      * @returns {Boolean}
      */
@@ -261,7 +273,7 @@ class Number extends Text {
             return false;
         }
 
-        if ((value / me.stepSize) % 1 !== 0) {
+        if (!me.fitsStepSize(value)) {
             return false;
         }
 
@@ -393,7 +405,7 @@ class Number extends Text {
             } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
                 me._error = me.errorTextMinValue(errorParam);
                 returnValue = false;
-            } else if ((value / me.stepSize) % 1 !== 0) {
+            } else if (!me.fitsStepSize(value)) {
                 me._error = me.errorTextStepSize(errorParam);
                 returnValue = false;
             }

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)
     }
 
     /**
@@ -780,7 +780,7 @@ class Text extends Base {
 
         me.silentVdomUpdate = true;
 
-        me.getInputEl().value = value;
+        me.getInputEl().value = me.inputValueRenderer(value);
 
         me.validate(); // silent
 
@@ -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
      */
@@ -1122,6 +1104,26 @@ class Text extends Base {
         return false
     }
 
+    /**
+     * Transform an input node value before applied to this.value.
+     * Override as needed
+     * @param {*} value
+     * @returns {*}
+     */
+    inputValueAdjustor(value) {
+        return value
+    }
+
+    /**
+     * Transform a value before getting rendered.
+     * Override as needed
+     * @param {*} value
+     * @returns {*}
+     */
+    inputValueRenderer(value) {
+        return value
+    }
+
     /**
      * @returns {Boolean}
      */
@@ -1220,7 +1222,7 @@ class Text extends Base {
             vnode.vnode.attributes.value = value;
         }
 
-        me.value = value
+       me.value = me.inputValueAdjustor(value)
     }
 
     /**