neo.mjs 5.2.1 → 5.2.3

package/apps/ServiceWorker.mjs

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

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/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/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/apps/form/view/pages/Page5.mjs

@@ -12,18 +12,23 @@ class Page5 extends FormPageContainer {
          * @protected
          */
         className: 'Form.view.pages.Page5',
+        /**
+         * @member {String} formGroup='page5'
+         */
+        formGroup: 'page5',
         /**
          * @member {Object[]} items
          */
         items: [{
             module   : TextField,
             labelText: 'Page 5 Field 1',
-            name     : 'page5field1',
-            required : true
+            name     : 'field1',
+            required : true,
+            value    : 'bar'
         }, {
             module   : TextField,
             labelText: 'Page 5 Field 2',
-            name     : 'page5field2'
+            name     : 'field2'
         }]
     }
 }

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

@@ -12,18 +12,22 @@ class Page6 extends FormPageContainer {
          * @protected
          */
         className: 'Form.view.pages.Page6',
+        /**
+         * @member {String} formGroup='page6'
+         */
+        formGroup: 'page6',
         /**
          * @member {Object[]} items
          */
         items: [{
             module   : TextField,
             labelText: 'Page 6 Field 1',
-            name     : 'page6field1',
+            name     : 'field1',
             required : true
         }, {
             module   : TextField,
             labelText: 'Page 6 Field 2',
-            name     : 'page6field2'
+            name     : 'field2'
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.2.1",
+    "version": "5.2.3",
     "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.1'
+     * @default '5.2.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.2.1'
+    version: '5.2.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/Container.mjs

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

package/src/form/field/Base.mjs

@@ -1,4 +1,5 @@
-import Component from '../../component/Base.mjs';
+import Component        from '../../component/Base.mjs';
+import ComponentManager from '../../manager/Component.mjs';
 
 /**
  * Abstract base class for form fields
@@ -17,12 +18,24 @@ class Base extends Component {
          * @protected
          */
         ntype: 'basefield',
+        /**
+         * Form groups can get set on any parent component level.
+         * An alternative way for using dots in field names.
+         * @member {String|null} formGroup_=null
+         */
+        formGroup_: null,
         /**
          * @member {*} value_=null
          */
         value_: null
     }
 
+    /**
+     * An internal cache for formGroups of all parent levels
+     * @member {String|null} formGroupString=null
+     */
+    formGroupString = null
+
     /**
      * Triggered after the value config got changed
      * @param {*} value
@@ -34,6 +47,34 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered when accessing the formGroup config
+     * @param {String|null} value
+     * @returns {String|null} parents
+     * @protected
+     */
+    beforeGetFormGroup(value) {
+        let me    = this,
+            group = [],
+            returnValue;
+
+        if (me.formGroupString) {
+            return me.formGroupString;
+        }
+
+        value && group.push(value);
+
+        ComponentManager.getParents(me).forEach(parent => {
+            parent.formGroup && group.push(parent.formGroup)
+        });
+
+        returnValue = group.join('.');
+
+        me.formGroupString = returnValue;
+
+        return returnValue;
+    }
+
     /**
      * Override this method as needed
      * @param {*} value
@@ -48,9 +89,9 @@ class Base extends Component {
     }
 
     /**
-     * @returns {*} this.value
+     * @returns {*}
      */
-    getSubmitValue() {
+    getValue() {
         return this.value;
     }
 
@@ -63,9 +104,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