neo.mjs 5.1.17 → 5.2.1

package/apps/ServiceWorker.mjs

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

package/apps/form/view/ViewportController.mjs

@@ -16,30 +16,59 @@ class ViewportController extends Component {
     /**
      * @param {Object} data
      */
-    onValidateAllPagesButtonClick(data) {
-        let me      = this,
-            form    = me.getReference('main-form'),
-            isValid = form.validate();
+    async onValidateAllPagesButtonClick(data) {
+        let me         = this,
+            form       = me.getReference('main-form'),
+            isValid    = await form.validate(),
+            formValues = await form.getValues();
 
-        console.log('Form values', form.getValues());
+        console.log('All pages', {isValid, formValues});
+
+        await me.updateRecordValidityState()
     }
 
     /**
      * @param {Object} data
      */
-    onValidatePageButtonClick(data) {
+    async onValidatePageButtonClick(data) {
+        let me          = this,
+            activeIndex = me.getModel().data.activeIndex,
+            activeCard  = me.getReference('pages-container').items[activeIndex],
+            formValues  = await activeCard.getValues();
+
+        await activeCard.validate();
+        await me.updateRecordValidityState(activeIndex)
+
+        console.log(`Current page: ${activeIndex + 1}`, formValues);
+    }
+
+    /**
+     * Not passing a pageIndex validates all pages
+     * @param {Number|null} [pageIndex]
+     * @returns {Promise<void>}
+     */
+    async updateRecordValidityState(pageIndex=null) {
         let me             = this,
             model          = me.getModel(),
-            activeIndex    = model.data.activeIndex,
             pagesContainer = me.getReference('pages-container'),
+            sideNav        = me.getReference('side-nav'),
             store          = model.getStore('sideNav'),
-            activeCard     = pagesContainer.items[activeIndex],
-            listIndex      = me.getReference('side-nav').getActiveIndex(activeIndex),
-            isValid        = activeCard.validate();
+            i              = 0,
+            len            = pagesContainer.items.length,
+            isValid, listIndex, page;
+
+        if (Neo.isNumber(pageIndex)) {
+            i   = pageIndex;
+            len = pageIndex + 1;
+        }
 
-        console.log(`Current page: ${activeIndex + 1}`, activeCard.getValues());
+        for (; i < len; i++) {
+            page      = pagesContainer.items[i];
+            listIndex = sideNav.getActiveIndex(i);
+            isValid   = await page.isValid();
 
-        store.getAt(listIndex).isValid = isValid;
+            store.getAt(listIndex).isValid = isValid;
+        }
     }
 }
 

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/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/scss/src/form/field/Text.scss

@@ -40,6 +40,7 @@
             .neo-label-wrapper {
                 .neo-center-border, .neo-left-border, .neo-right-border {
                     border-bottom-color: v(textfield-border-color-hovered);
+                    border-top-color   : v(textfield-border-color-hovered);
                 }
 
                 .neo-left-border, .neo-right-border {

package/src/DefaultConfig.mjs

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

package/src/form/Container.mjs

@@ -31,30 +31,30 @@ class Container extends BaseContainer {
     }
 
     /**
+     * @param {Neo.container.Base} parent
+     * @param {Object[]} modules
      * @returns {Object[]}
      */
-    findNotLoadedModules(container=this) {
-        let modules = [];
-
-        container.items.forEach(item => {
-            if (Neo.typeOf(item.module) === 'Function') {
-                modules.push(item)
+    findNotLoadedModules(parent=this, modules=[]) {
+        parent.items.forEach(item => {
+            if (Neo.typeOf(item.module) === 'Function' && !item.isLoading) {
+                modules.push({item, parent});
             } else {
-                item.items && this.findNotLoadedModules(item);
+                item.items && this.findNotLoadedModules(item, modules);
             }
         });
 
-        console.log(modules);
-
         return modules;
     }
 
     /**
-     * Either pass a field id or name
+     * Either pass a field name or id
      * @param {String} name
-     * @returns {Neo.form.field.Base|null} fields
+     * @returns {Promise<Neo.form.field.Base|null>} fields
      */
-    getField(name) {
+    async getField(name) {
+        await this.loadModules();
+
         let fields = ComponentManager.getChildComponents(this),
             field;
 
@@ -70,12 +70,12 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Neo.form.field.Base[]} fields
+     * @returns {Promise<Neo.form.field.Base[]>} fields
      */
-    getFields() {
+    async getFields() {
         let fields = [];
 
-        this.findNotLoadedModules();
+        await this.loadModules();
 
         ComponentManager.getChildComponents(this).forEach(item => {
             item instanceof BaseField && fields.push(item);
@@ -85,12 +85,13 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Object}
+     * @returns {Promise<Object>}
      */
-    getSubmitValues() {
-        let values = {};
+    async getSubmitValues() {
+        let fields = await this.getFields(),
+            values = {};
 
-        this.getFields().forEach(item => {
+        fields.forEach(item => {
             values[item.name || item.id] = item.getSubmitValue();
         });
 
@@ -98,13 +99,23 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Object}
+     * @returns {Promise<Object>}
      */
-    getValues() {
-        let values = {};
-
-        this.getFields().forEach(item => {
-            values[item.name || item.id] = item.value;
+    async getValues() {
+        let fields = await this.getFields(),
+            values = {},
+            key, ns, nsArray;
+
+        fields.forEach(item => {
+            if (item.name) {
+                nsArray = item.name.split('.');
+                key     = nsArray.pop();
+                ns      = Neo.ns(nsArray, true, values);
+
+                ns[key] = item.value;
+            } else {
+                values[item.id] = item.value;
+            }
         });
 
         return values;
@@ -112,10 +123,10 @@ class Container extends BaseContainer {
 
     /**
      * Returns true in case no form field isValid() call returns false
-     * @returns {Boolean}
+     * @returns {Promise<Boolean>}
      */
-    isValid() {
-        let fields = this.getFields(),
+    async isValid() {
+        let fields = await this.getFields(),
             i      = 0,
             len    = fields.length;
 
@@ -128,16 +139,35 @@ class Container extends BaseContainer {
         return true;
     }
 
+    /**
+     * Loads all not loaded items inside card layouts
+     * @returns {Promise<Neo.component.Base[]>}
+     */
+    async loadModules() {
+        let me       = this,
+            modules  = me.findNotLoadedModules(),
+            promises = [];
+
+        modules.forEach(module => {
+            promises.push(module.parent.layout.loadModule(module.item));
+        });
+
+        modules = await Promise.all(promises);
+
+        return modules;
+    }
+
     /**
      * Resets field values by field name or field id.
      * Fields not included with a value will get reset to null.
      * @param {Object} [values]
      */
-    reset(values={}) {
-        let keys = values ? Object.keys(values) : [],
+    async reset(values={}) {
+        let keys   = values ? Object.keys(values) : [],
+            fields = await this.getFields(),
             index;
 
-        this.getFields().forEach(item => {
+        fields.forEach(item => {
             index = keys.indexOf(item.name);
 
             if (index < 0) {
@@ -145,18 +175,19 @@ class Container extends BaseContainer {
             }
 
             item.reset(index > -1 ? values[keys[index]] : null);
-        });
+        })
     }
 
     /**
      * Set field values by field name or field id
      * @param {Object} values={}
      */
-    setValues(values={}) {
-        let keys = Object.keys(values),
+    async setValues(values={}) {
+        let keys   = Object.keys(values),
+            fields = await this.getFields(),
             index;
 
-        this.getFields().forEach(item => {
+        fields.forEach(item => {
             index = keys.indexOf(item.name);
 
             if (index < 0) {
@@ -166,19 +197,20 @@ class Container extends BaseContainer {
             if (index > -1) {
                 item.value = values[keys[index]];
             }
-        });
+        })
     }
 
     /**
      * Updates the invalid state for all fields which have validate() implemented.
      * This can be useful for create-entity forms which show up "clean" until pressing a submit button.
-     * @returns {Boolean}
+     * @returns {Promise<Boolean>}
      */
-    validate() {
+    async validate() {
         let isValid = true,
+            fields  = await this.getFields(),
             validField;
 
-        this.getFields().forEach(item => {
+        fields.forEach(item => {
             validField = item.validate?.(false);
 
             if (!validField) {

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
@@ -1088,11 +1089,13 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
-            cls            = me.cls;
+            cls;
 
         if (!me.readOnly) {
             me.validate(); // silent
 
+            cls = me.cls; // has to get set after validate()
+
             NeoArray.remove(cls, 'neo-focus');
             me.cls = cls;
 
@@ -1202,7 +1205,7 @@ class Text extends Base {
 
         super.reset(value);
 
-        if (value === null && me.validBeforeMount) {
+        if (value === null && me.clean) {
             me.updateError(null);
         }
     }
@@ -1234,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 === '';
@@ -1312,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);
 

package/src/layout/Card.mjs

@@ -184,6 +184,8 @@ class Card extends Base {
             index = items.indexOf(item);
         }
 
+        item.isLoading = true; // prevent the item from getting queued multiple times inside form.Container
+
         module     = await module();
         module     = module.default;
         proto      = module.prototype;
@@ -193,6 +195,7 @@ class Card extends Base {
         item.wrapperCls = [...wrapperCls, sCfg.itemCls];
         item.module     = module;
 
+        delete item.isLoading;
         delete item.vdom;
 
         items[index] = item = Neo.create(item);