neo.mjs 5.2.2 → 5.2.4

package/apps/ServiceWorker.mjs

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

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

@@ -1,3 +1,4 @@
+import Fieldset          from '../../../../src/form/Fieldset.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
 import TextField         from '../../../../src/form/field/Text.mjs';
 
@@ -12,18 +13,47 @@ class Page7 extends FormPageContainer {
          * @protected
          */
         className: 'Form.view.pages.Page7',
+        /**
+         * @member {String} formGroup='page7'
+         */
+        formGroup: 'page7',
         /**
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
-            labelText: 'Page 7 Field 1',
-            name     : 'page7field1',
-            required : true
+            module   : Fieldset,
+            formGroup: 'persons[0]',
+            title    : 'Fieldset 1',
+
+            items : [{
+                module   : TextField,
+                labelText: 'Firstname',
+                name     : 'firstname',
+                required : true,
+                value    : 'John'
+            }, {
+                module   : TextField,
+                labelText: 'Lastname',
+                name     : 'lastname',
+                value    : 'Doe'
+            }]
         }, {
-            module   : TextField,
-            labelText: 'Page 7 Field 2',
-            name     : 'page7field2'
+            module   : Fieldset,
+            formGroup: 'persons[1]',
+            title    : 'Fieldset 2',
+
+            items : [{
+                module   : TextField,
+                labelText: 'Firstname',
+                name     : 'firstname',
+                required : true,
+                value    : 'Jane'
+            }, {
+                module   : TextField,
+                labelText: 'Lastname',
+                name     : 'lastname',
+                value    : 'Dough'
+            }]
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/examples/data/formSideNav.json

@@ -10,7 +10,7 @@
         {"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":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Fieldsets"},
         {"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"},

package/resources/scss/src/button/Base.scss

@@ -100,7 +100,7 @@
     &:active {
         background-color: v(button-background-color-active) !important;
         background-image: none !important;
-        border          : v(button-border-active);
+        border          : v(button-border-active) !important;
 
         .neo-button-glyph {
             color: v(button-glyph-color-active);

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -411,12 +411,43 @@ Neo = globalThis.Neo = Object.assign({
             if (create && !prev[current]) {
                 prev[current] = {};
             }
+
             if (prev) {
                 return prev[current];
             }
         }, scope || globalThis);
     },
 
+    /**
+     * Extended version of Neo.ns() which supports mapping into arrays.
+     * @memberOf module:Neo
+     * @param {Array|String} names The class name string containing dots or an Array of the string parts
+     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
+     * @param {Object} [scope] Set a different starting point as globalThis
+     * @returns {Object} reference to the toplevel namespace
+     */
+    nsWithArrays(names, create, scope) {
+        names = Array.isArray(names) ? names : names.split('.');
+
+        return names.reduce((prev, current) => {
+            if (create && !prev[current]) {
+                if (current.endsWith(']')) {
+                    return createArrayNs(true, current, prev);
+                }
+
+                prev[current] = {};
+            }
+
+            if (prev) {
+                if (current.endsWith(']')) {
+                    return createArrayNs(false, current, prev);
+                }
+
+                return prev[current];
+            }
+        }, scope || globalThis);
+    },
+
     /**
      * Creates instances of Neo classes using their ntype instead of the class name
      * @example
@@ -439,6 +470,7 @@ Neo = globalThis.Neo = Object.assign({
     ntype(ntype, config) {
         if (typeof ntype === 'object') {
             config = ntype;
+
             if (!config.ntype) {
                 throw new Error('Class defined with object configuration missing ntype property. ' + config.ntype);
             }
@@ -450,6 +482,7 @@ Neo = globalThis.Neo = Object.assign({
         if (!className) {
             throw new Error('ntype ' + ntype + ' does not exist');
         }
+
         return Neo.create(className, config);
     },
 
@@ -492,7 +525,10 @@ const ignoreMixin = [
     'ntype',
     'observable',
     'registerToGlobalNs'
-];
+],
+
+    charsRegex         = /\d+/g,
+    extractArraysRegex = /^(\w+)\s*((?:\[\s*\d+\s*\]\s*)*)$/;
 
 /**
  * @param {Neo.core.Base} cls
@@ -519,6 +555,7 @@ function applyMixins(cls, mixins) {
             if (!exists(mixin)) {
                 throw new Error('Attempting to mixin an undefined class: ' + mixin + ', ' + cls.prototype.className);
             }
+
             mixinCls   = Neo.ns(mixin);
             mixinProto = mixinCls.prototype;
         }
@@ -619,6 +656,37 @@ function autoGenerateGetSet(proto, key) {
     Object.defineProperty(proto, key, Neo[getSetCache][key]);
 }
 
+/**
+ * @param {Boolean} create
+ * @param {Object} current
+ * @param {Object} prev
+ * @returns {Object}
+ */
+function createArrayNs(create, current, prev) {
+    let arrDetails = parseArrayFromString(current),
+        i          = 1,
+        len        = arrDetails.length,
+        arrItem, arrRoot;
+
+    if (create) {
+        prev[arrDetails[0]] = arrRoot = prev[arrDetails[0]] || [];
+    } else {
+        arrRoot = prev[arrDetails[0]];
+    }
+
+    for (; i < len; i++) {
+        arrItem = parseInt(arrDetails[i]);
+
+        if (create) {
+            arrRoot[arrItem] = arrRoot[arrItem] || {};
+        }
+
+        arrRoot = arrRoot[arrItem];
+    }
+
+    return arrRoot;
+}
+
 /**
  * Checks if the class name exists inside the Neo or app namespace
  * @param {String} className
@@ -646,6 +714,7 @@ function mixinProperty(proto, mixinProto) {
         if (~ignoreMixin.indexOf(key)) {
             return;
         }
+
         if (proto[key]?._from) {
             if (mixinProto.className === proto[key]._from) {
                 console.warn('Mixin set multiple times or already defined on a Base Class', proto.className, mixinProto.className, key);
@@ -677,6 +746,17 @@ function mixReduce(mixinCls) {
     };
 }
 
+/**
+ * @param {String} str
+ * @returns {Function}
+ * @private
+ */
+function parseArrayFromString(str) {
+    return (extractArraysRegex.exec(str) || [null]).slice(1).reduce(
+        (fun, args) => [fun].concat(args.match(charsRegex))
+    );
+}
+
 Neo.config = Neo.config || {};
 
 Neo.assignDefaults(Neo.config, DefaultConfig);

package/src/form/Container.mjs

@@ -90,15 +90,21 @@ class Container extends BaseContainer {
     async getValues() {
         let fields = await this.getFields(),
             values = {},
-            key, ns, nsArray, value;
+            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);
+                ns      = Neo.nsWithArrays(nsArray, true, values);
             } else {
                 key = item.id;
                 ns  = values;

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.unshift(parent.formGroup)
+        });
+
+        returnValue = group.join('.');
+
+        me.formGroupString = returnValue;
+
+        return returnValue;
+    }
+
     /**
      * Override this method as needed
      * @param {*} value