neo.mjs 5.6.9 → 5.6.11

package/apps/ServiceWorker.mjs

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

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

@@ -1,5 +1,5 @@
+import CountryField      from '../../../../src/form/field/Country.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
-import SelectField       from '../../../../src/form/field/Select.mjs';
 import ZipCodeField      from '../../../../src/form/field/ZipCode.mjs';
 
 /**
@@ -13,36 +13,75 @@ class Page11 extends FormPageContainer {
          * @protected
          */
         className: 'Form.view.pages.Page11',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            itemDefaults: {
+                flex : 1,
+                style: {maxWidth: '300px'}
+            }
+        },
         /**
          * @member {Object[]} items
          */
         items: [{
-            module        : SelectField,
-            editable      : false,
-            forceSelection: true,
-            labelText     : 'Country',
-            name          : 'page11.countryfield',
-            reference     : 'country',
-            value         : 'DE',
+            ntype : 'container',
+            layout: {ntype: 'hbox'},
 
-            store: {
-                data: [
-                    {id: 'DE',     name: 'Germany'},
-                    {id: 'Others', name: 'Others'}
-                ]
-            }
-        }, {
-            module      : ZipCodeField,
-            countryField: 'country',
-            labelText   : 'Munich',
-            name        : 'page11.field1',
-            required    : true,
-            value       : '80796'
+            items : [{
+                module        : CountryField,
+                editable      : false,
+                forceSelection: true,
+                labelText     : 'Country',
+                name          : 'page11.countryfield1',
+                reference     : 'country1',
+                value         : 'DE',
+
+                store: {
+                    data: [
+                        {id: 'DE',     name: 'Germany'},
+                        {id: 'Others', name: 'Others'}
+                    ]
+                }
+            }, {
+                module      : ZipCodeField,
+                countryField: 'country1',
+                labelText   : 'Munich',
+                name        : 'page11.zipcodefield1',
+                required    : true,
+                style       : {marginLeft: '10px', maxWidth: '300px'},
+                value       : '80796'
+            }]
         }, {
-            module      : ZipCodeField,
-            countryField: 'country',
-            labelText   : 'Page 11 Field 2',
-            name        : 'page11.field2'
+            ntype : 'container',
+            layout: {ntype: 'hbox', align: 'stretch'},
+
+            items: [{
+                module   : ZipCodeField,
+                labelText: 'Munich',
+                name     : 'page11.zipcodefield2',
+                reference: 'zipcodefield2',
+                required : true,
+                value    : '80796'
+            }, {
+                module        : CountryField,
+                editable      : false,
+                forceSelection: true,
+                labelText     : 'Country',
+                name          : 'page11.countryfield2',
+                reference     : 'country2',
+                style         : {marginLeft: '10px', maxWidth: '300px'},
+                value         : 'DE',
+                zipCodeField  : 'zipcodefield2',
+
+                store: {
+                    data: [
+                        {id: 'DE',     name: 'Germany'},
+                        {id: 'Others', name: 'Others'}
+                    ]
+                }
+            }]
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -1184,6 +1184,18 @@ class Base extends CoreBase {
         return this.getConfigInstanceByNtype('model', ntype);
     }
 
+    /**
+     * Honors different item roots for mount / render OPs
+     * @returns {String}
+     */
+    getMountedParentId() {
+        let parentId  = this.parentId,
+            parent    = Neo.getComponent(parentId),
+            itemsRoot = parent?.getVdomItemsRoot();
+
+        return itemsRoot ? itemsRoot.id : parentId
+    }
+
     /**
      * Calculate the real parentIndex inside the DOM
      * @returns {Number|undefined}
@@ -1432,7 +1444,7 @@ class Base extends CoreBase {
                 appName    : me.appName,
                 id         : me.id,
                 html       : me.vnode.outerHTML,
-                parentId   : me.parentId,
+                parentId   : me.getMountedParentId(),
                 parentIndex: me.getMountedParentIndex()
             });
 
@@ -1655,7 +1667,7 @@ class Base extends CoreBase {
             Neo.vdom.Helper.create({
                 appName    : me.appName,
                 autoMount,
-                parentId   : autoMount ? me.parentId                : undefined,
+                parentId   : autoMount ? me.getMountedParentId()    : undefined,
                 parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
                 ...me.vdom
             }).then(data => {

package/src/form/field/Country.mjs

@@ -0,0 +1,58 @@
+import Select from '../../form/field/Select.mjs';
+
+/**
+ * @class Neo.form.field.Country
+ * @extends Neo.form.field.Select
+ */
+class Country extends Select {
+    static config = {
+        /**
+         * @member {String} className='Neo.form.field.Country'
+         * @protected
+         */
+        className: 'Neo.form.field.Country',
+        /**
+         * @member {String} ntype='countryfield'
+         * @protected
+         */
+        ntype: 'countryfield',
+        /**
+         * You can either pass a field instance or a field reference
+         * @member {Neo.form.field.Base|String|null} zipCodeField_=null
+         */
+        zipCodeField_: null
+    }
+
+    /**
+     * Triggered after the zipCodeField config got changed
+     * @param {Neo.form.field.Base|null} value
+     * @param {Neo.form.field.Base|null} oldValue
+     * @protected
+     */
+    afterSetZipCodeField(value, oldValue) {
+        if (value && value instanceof Neo.form.field.Base) {
+            value.countryField = this
+        }
+    }
+
+    /**
+     * Triggered before the zipCodeField config gets changed
+     * @param {Neo.form.field.Base|String|null} value
+     * @param {Neo.form.field.Base|String|null} oldValue
+     * @returns {Neo.form.field.Base|null}
+     * @protected
+     */
+    beforeSetZipCodeField(value, oldValue) {
+        let me = this;
+
+        if (Neo.isString(value)) {
+            return me.up().getReference(value)
+        }
+
+        return value;
+    }
+}
+
+Neo.applyClassConfig(Country);
+
+export default Country;

package/src/form/field/ZipCode.mjs

@@ -93,24 +93,10 @@ class ZipCode extends Text {
      * @protected
      */
     beforeSetCountryField(value, oldValue) {
-        let me = this,
-            field;
+        let me = this;
 
         if (Neo.isString(value)) {
-            field = me.up().getReference(value);
-
-            /*
-             * The related field could be at a higher index inside the items array
-             * => Not being constructed when this logic triggers.
-             * In this case we want to frequently check again until the field is found.
-             */
-            if (!field) {
-                setTimeout(() => {
-                    me.countryField = value;
-                }, 20)
-            }
-
-            return field
+            return me.up().getReference(value)
         }
 
         return value;