neo.mjs 5.2.0 → 5.2.2

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainer.mjs

@@ -66,7 +66,11 @@ class FormContainer extends BaseFormContainer {
                 {module: () => import('./pages/Page7.mjs')},
                 {module: () => import('./pages/Page8.mjs')},
                 {module: () => import('./pages/Page9.mjs')},
-                {module: () => import('./pages/Page10.mjs')}
+                {module: () => import('./pages/Page10.mjs')},
+                {module: () => import('./pages/Page11.mjs')},
+                {module: () => import('./pages/Page12.mjs')},
+                {module: () => import('./pages/Page13.mjs')},
+                {module: () => import('./pages/Page14.mjs')}
             ]
         }, {
             module: Toolbar,

package/apps/form/view/ViewportController.mjs

@@ -22,7 +22,7 @@ class ViewportController extends Component {
             isValid    = await form.validate(),
             formValues = await form.getValues();
 
-        console.log({isValid, formValues});
+        console.log('All pages', {isValid, formValues});
 
         await me.updateRecordValidityState()
     }

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

@@ -0,0 +1,32 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Form.view.pages.Page11
+ * @extends Form.view.FormPageContainer
+ */
+class Page11 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page11'
+         * @protected
+         */
+        className: 'Form.view.pages.Page11',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 11 Field 1',
+            name     : 'page11field1'
+        }, {
+            module   : TextField,
+            labelText: 'Page 11 Field 2',
+            name     : 'page11field2'
+        }]
+    }
+}
+
+Neo.applyClassConfig(Page11);
+
+export default Page11;

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

@@ -0,0 +1,32 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Form.view.pages.Page12
+ * @extends Form.view.FormPageContainer
+ */
+class Page12 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page12'
+         * @protected
+         */
+        className: 'Form.view.pages.Page12',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 12 Field 1',
+            name     : 'page12field1'
+        }, {
+            module   : TextField,
+            labelText: 'Page 12 Field 2',
+            name     : 'page12field2'
+        }]
+    }
+}
+
+Neo.applyClassConfig(Page12);
+
+export default Page12;

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

@@ -0,0 +1,32 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Form.view.pages.Page13
+ * @extends Form.view.FormPageContainer
+ */
+class Page13 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page13'
+         * @protected
+         */
+        className: 'Form.view.pages.Page13',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 13 Field 1',
+            name     : 'page13field1'
+        }, {
+            module   : TextField,
+            labelText: 'Page 13 Field 2',
+            name     : 'page13field2'
+        }]
+    }
+}
+
+Neo.applyClassConfig(Page13);
+
+export default Page13;

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

@@ -0,0 +1,32 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Form.view.pages.Page14
+ * @extends Form.view.FormPageContainer
+ */
+class Page14 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page14'
+         * @protected
+         */
+        className: 'Form.view.pages.Page14',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 14 Field 1',
+            name     : 'page14field1'
+        }, {
+            module   : TextField,
+            labelText: 'Page 14 Field 2',
+            name     : 'page14field2'
+        }]
+    }
+}
+
+Neo.applyClassConfig(Page14);
+
+export default Page14;

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

@@ -18,12 +18,13 @@ class Page3 extends FormPageContainer {
         items: [{
             module   : TextField,
             labelText: 'Page 3 Field 1',
-            name     : 'page3field1',
-            required : true
+            name     : 'page3.field1',
+            required : true,
+            value    : 'foo'
         }, {
             module   : TextField,
             labelText: 'Page 3 Field 2',
-            name     : 'page3field2'
+            name     : 'page3.field2'
         }]
     }
 }

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

@@ -1,5 +1,5 @@
+import CheckBox          from '../../../../src/form/field/CheckBox.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
-import TextField         from '../../../../src/form/field/Text.mjs';
 
 /**
  * @class Form.view.pages.Page4
@@ -12,18 +12,36 @@ class Page4 extends FormPageContainer {
          * @protected
          */
         className: 'Form.view.pages.Page4',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module    : CheckBox,
+            labelText : null,
+            labelWidth: 70,
+            name      : 'fruits'
+        },
         /**
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
-            labelText: 'Page 4 Field 1',
-            name     : 'page4field1',
-            required : true
+            labelText     : 'Fruits',
+            value         : 'apple',
+            valueLabelText: 'Apple'
+        }, {
+            value         : 'banana',
+            valueLabelText: 'Banana'
+        }, {
+            checked       : true,
+            value         : 'lemon',
+            valueLabelText: 'Lemon'
+        }, {
+            checked       : true,
+            value         : 'orange',
+            valueLabelText: 'Orange'
         }, {
-            module   : TextField,
-            labelText: 'Page 4 Field 2',
-            name     : 'page4field2'
+            value         : 'strawberry',
+            valueLabelText: 'Strawberry'
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/examples/data/formSideNav.json

@@ -7,13 +7,18 @@
         {"id":  3, "cardIndex":    1, "isHeader": false, "isValid": null, "name": "Page 2"},
         {"id":  4, "cardIndex":    2, "isHeader": false, "isValid": null, "name": "Page 3"},
         {"id":  5, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "2. Personal data"},
-        {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "Page 4"},
+        {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "CheckBoxes"},
         {"id":  7, "cardIndex":    4, "isHeader": false, "isValid": null, "name": "Page 5"},
         {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "Page 6"},
         {"id":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Page 7"},
         {"id": 10, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. More data"},
         {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "Page 8"},
         {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "Page 9"},
-        {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "Page 10"}
+        {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "Page 10"},
+        {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. Optional data"},
+        {"id": 15, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "Page 11"},
+        {"id": 16, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "Page 12"},
+        {"id": 17, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "Page 13"},
+        {"id": 18, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "Page 14"}
     ]
 }

package/src/DefaultConfig.mjs

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

package/src/form/Container.mjs

@@ -87,26 +87,34 @@ class Container extends BaseContainer {
     /**
      * @returns {Promise<Object>}
      */
-    async getSubmitValues() {
+    async getValues() {
         let fields = await this.getFields(),
-            values = {};
+            values = {},
+            key, ns, nsArray, value;
 
         fields.forEach(item => {
-            values[item.name || item.id] = item.getSubmitValue();
-        });
+            value = item.getValue();
 
-        return values;
-    }
+            if (item.name) {
+                nsArray = item.name.split('.');
+                key     = nsArray.pop();
+                ns      = Neo.ns(nsArray, true, values);
+            } else {
+                key = item.id;
+                ns  = values;
+            }
 
-    /**
-     * @returns {Promise<Object>}
-     */
-    async getValues() {
-        let fields = await this.getFields(),
-            values = {};
+            if (Object.hasOwn(ns, key)) {
+                if (ns[key] === null) {
+                    ns[key] = []
+                } else if (!Array.isArray(ns[key])) {
+                    ns[key] = [ns[key]]
+                }
 
-        fields.forEach(item => {
-            values[item.name || item.id] = item.value;
+                value !== null && ns[key].unshift(value)
+            } else {
+                ns[key] = value;
+            }
         });
 
         return values;

package/src/form/field/Base.mjs

@@ -48,9 +48,9 @@ class Base extends Component {
     }
 
     /**
-     * @returns {*} this.value
+     * @returns {*}
      */
-    getSubmitValue() {
+    getValue() {
         return this.value;
     }
 
@@ -63,9 +63,9 @@ class Base extends Component {
 
     /**
      * Resets the field to a new value or null
-     * @param {*} [value=null]
+     * @param {*} value=null
      */
-    reset(value) {
+    reset(value=null) {
         this.value = value;
     }
 

package/src/form/field/CheckBox.mjs

@@ -316,6 +316,13 @@ class CheckBox extends Base {
         return `${this.id}__label`;
     }
 
+    /**
+     * @returns {String|null}
+     */
+    getValue() {
+        return this.checked ? this.value : null
+    }
+
     /**
      * @returns {String}
      */

package/src/form/field/Select.mjs

@@ -356,7 +356,7 @@ class Select extends Picker {
     /**
      * @returns {Number|String}
      */
-    getSubmitValue() {
+    getValue() {
         let me = this;
 
         return me.record?.[me.valueField] || me.value

package/src/form/field/Text.mjs

@@ -175,6 +175,12 @@ class Text extends Base {
         ]}
     }
 
+    /**
+     * Set this value to false, in case a field should display errors up front.
+     * Otherwise, errors will stay hidden on mounting, unless you trigger validate(false).
+     * @member {Boolean} clean=true
+     */
+    clean = true
     /**
      * data passes maxLength, minLength & valueLength properties
      * @member {Function} errorTextMaxLength=data=>`Max length violation: ${valueLength} / ${maxLength}`
@@ -189,11 +195,6 @@ class Text extends Base {
      * @member {String} errorTextRequired='Required'
      */
     errorTextRequired = 'Required'
-    /**
-     * Set this value to false, in case a field should display errors up front
-     * @member {Boolean} validBeforeMount=true
-     */
-    validBeforeMount = true
 
     /**
      * @param {Object} config
@@ -1204,7 +1205,7 @@ class Text extends Base {
 
         super.reset(value);
 
-        if (value === null && me.validBeforeMount) {
+        if (value === null && me.clean) {
             me.updateError(null);
         }
     }
@@ -1236,7 +1237,7 @@ class Text extends Base {
             cls = me.cls,
             errorNode, isValid;
 
-        if (!(me.validBeforeMount && !me.mounted)) {
+        if (!(me.clean && !me.mounted)) {
             me._error = value;
 
             isValid = !value || value === '';
@@ -1314,6 +1315,11 @@ class Text extends Base {
             errorParam  = {maxLength, minLength, valueLength},
             errorText;
 
+        if (!silent) {
+            // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
+            me.clean = false;
+        }
+
         if (Neo.isFunction(me.validator)) {
             errorText = me.validator(me);