neo.mjs 5.1.16 → 5.2.0

package/apps/ServiceWorker.mjs

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

package/apps/form/Overwrites.mjs

@@ -3,7 +3,8 @@ Neo.overwrites = {
         form: {
             field: {
                 Text: {
-                    labelPosition_: 'inline'
+                    labelPosition_   : 'inline',
+                    showOptionalText_: true
                 }
             }
         }

package/apps/form/view/FormContainer.mjs

@@ -38,8 +38,14 @@ class FormContainer extends BaseFormContainer {
                 cls   : ['form-header-label'],
                 flex  : 'none'
             }, '->', {
+                iconCls: ['fas', 'fa-file'],
                 handler: 'onValidatePageButtonClick',
-                text   : 'Validate Page'
+                text   : 'Validate page'
+            }, {
+                iconCls: ['fas', 'fa-layer-group'],
+                handler: 'onValidateAllPagesButtonClick',
+                style  : {marginLeft: '1em'},
+                text   : 'Validate all pages'
             }]
         }, {
             module   : Container,
@@ -50,27 +56,18 @@ class FormContainer extends BaseFormContainer {
                 bind : {activeIndex: data => data.activeIndex}
             },
 
-            items: [{
-                module: () => import('./pages/Page1.mjs')
-            }, {
-                module: () => import('./pages/Page2.mjs')
-            }, {
-                module: () => import('./pages/Page3.mjs')
-            }, {
-                module: () => import('./pages/Page4.mjs')
-            }, {
-                module: () => import('./pages/Page5.mjs')
-            }, {
-                module: () => import('./pages/Page6.mjs')
-            }, {
-                module: () => import('./pages/Page7.mjs')
-            }, {
-                module: () => import('./pages/Page8.mjs')
-            }, {
-                module: () => import('./pages/Page9.mjs')
-            }, {
-                module: () => import('./pages/Page10.mjs')
-            }]
+            items: [
+                {module: () => import('./pages/Page1.mjs')},
+                {module: () => import('./pages/Page2.mjs')},
+                {module: () => import('./pages/Page3.mjs')},
+                {module: () => import('./pages/Page4.mjs')},
+                {module: () => import('./pages/Page5.mjs')},
+                {module: () => import('./pages/Page6.mjs')},
+                {module: () => import('./pages/Page7.mjs')},
+                {module: () => import('./pages/Page8.mjs')},
+                {module: () => import('./pages/Page9.mjs')},
+                {module: () => import('./pages/Page10.mjs')}
+            ]
         }, {
             module: Toolbar,
             cls   : ['form-footer'],

package/apps/form/view/Viewport.mjs

@@ -40,8 +40,9 @@ class Viewport extends BaseViewport {
                 }
             }]
         }, {
-            module: FormContainer,
-            style : {margin: '20px'}
+            module   : FormContainer,
+            reference: 'main-form',
+            style    : {margin: '20px'}
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}

package/apps/form/view/ViewportController.mjs

@@ -16,19 +16,59 @@ class ViewportController extends Component {
     /**
      * @param {Object} data
      */
-    onValidatePageButtonClick(data) {
+    async onValidateAllPagesButtonClick(data) {
+        let me         = this,
+            form       = me.getReference('main-form'),
+            isValid    = await form.validate(),
+            formValues = await form.getValues();
+
+        console.log({isValid, formValues});
+
+        await me.updateRecordValidityState()
+    }
+
+    /**
+     * @param {Object} 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/examples/ServiceWorker.mjs

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

package/package.json

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

package/src/form/Container.mjs

@@ -31,11 +31,30 @@ class Container extends BaseContainer {
     }
 
     /**
-     * Either pass a field id or name
+     * @param {Neo.container.Base} parent
+     * @param {Object[]} modules
+     * @returns {Object[]}
+     */
+    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, modules);
+            }
+        });
+
+        return modules;
+    }
+
+    /**
+     * 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;
 
@@ -51,11 +70,13 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Neo.form.field.Base[]} fields
+     * @returns {Promise<Neo.form.field.Base[]>} fields
      */
-    getFields() {
+    async getFields() {
         let fields = [];
 
+        await this.loadModules();
+
         ComponentManager.getChildComponents(this).forEach(item => {
             item instanceof BaseField && fields.push(item);
         });
@@ -64,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();
         });
 
@@ -77,12 +99,13 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @returns {Object}
+     * @returns {Promise<Object>}
      */
-    getValues() {
-        let values = {};
+    async getValues() {
+        let fields = await this.getFields(),
+            values = {};
 
-        this.getFields().forEach(item => {
+        fields.forEach(item => {
             values[item.name || item.id] = item.value;
         });
 
@@ -91,10 +114,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;
 
@@ -107,16 +130,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) {
@@ -124,18 +166,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) {
@@ -145,20 +188,28 @@ class Container extends BaseContainer {
             if (index > -1) {
                 item.value = values[keys[index]];
             }
-        });
+        })
     }
 
     /**
-     * Updates the invalid state for all fields, which have updateValidationIndicators() implemented.
-     * This can be useful for create entity forms which show up "clean", when pressing a submit button.
-     * @returns {Boolean}
+     * 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 {Promise<Boolean>}
      */
-    validate() {
-        this.getFields().forEach(item => {
-            item.validate?.(false);
+    async validate() {
+        let isValid = true,
+            fields  = await this.getFields(),
+            validField;
+
+        fields.forEach(item => {
+            validField = item.validate?.(false);
+
+            if (!validField) {
+                isValid = false;
+            }
         });
 
-        return this.isValid();
+        return isValid;
     }
 }
 

package/src/form/field/Text.mjs

@@ -570,7 +570,7 @@ class Text extends Base {
 
         me.validate(); // silent
         me.changeInputElKey('required', value ? value : null, true); // silent update
-        me.labelText = me.labelText;
+        me.labelText = me.labelText; // triggers a vdom update
     }
 
     /**
@@ -786,8 +786,10 @@ class Text extends Base {
             labelOptionalText = me.labelOptionalText,
             hasOptionalText   = value.endsWith(labelOptionalText);
 
-        if (me.showOptionalText && !me.required && !hasOptionalText) {
-            value += labelOptionalText;
+        if (me.showOptionalText && !me.required) {
+            if (!hasOptionalText) {
+                value += labelOptionalText;
+            }
         } else if (value && hasOptionalText) {
             value = value.replace(labelOptionalText, '');
         }
@@ -1086,11 +1088,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;
 

package/src/layout/Card.mjs

@@ -65,11 +65,10 @@ class Card extends Base {
             sCfg                = me.constructor,
             needsUpdate         = false,
             removeInactiveCards = me.removeInactiveCards,
-            i, isActiveIndex, item, items, len, module, proto, vdom, wrapperCls;
+            i, isActiveIndex, item, items, len, module, wrapperCls;
 
         if (Neo.isNumber(value) && container) {
             items = container.items;
-            vdom  = container.vdom;
             len   = items.length;
 
             if (!items[value]) {
@@ -80,7 +79,7 @@ class Card extends Base {
             for (i=0; i < len; i++) {
                 module = items[i].module;
 
-                if (i === value && !module?.isClass && Neo.isFunction(module)) {
+                if (i === value && Neo.typeOf(module) === 'Function') {
                     needsUpdate = true;
                     break;
                 }
@@ -91,23 +90,8 @@ class Card extends Base {
                 item          = items[i];
                 module        = item.module;
 
-                if (isActiveIndex && !module?.isClass && Neo.isFunction(module)) {
-                    module     = await module();
-                    module     = module.default;
-                    proto      = module.prototype;
-                    wrapperCls = item.wrapperCls || proto.constructor.config.wrapperCls || [];
-
-                    item.className  = proto.className;
-                    item.wrapperCls = [...wrapperCls, sCfg.itemCls];
-                    item.module     = module;
-
-                    delete item.vdom;
-
-                    items[i] = item = Neo.create(item);
-
-                    container.fire('cardLoaded', {item});
-
-                    vdom.cn[i] = item.vdom;
+                if (isActiveIndex && Neo.typeOf(module) === 'Function') {
+                    item = await me.loadModule(item, i);
                 }
 
                 if (item instanceof Neo.core.Base) {
@@ -180,6 +164,53 @@ class Card extends Base {
         container.wrapperCls = wrapperCls;
     }
 
+    /**
+     * Loads a component.Base module which is defined via module: () => import('...')
+     * @param {Object} item
+     * @param {Number} [index]
+     * @returns {Neo.component.Base}
+     */
+    async loadModule(item, index) {
+        let me          = this,
+            containerId = me.containerId,
+            container   = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
+            items       = container.items,
+            sCfg        = me.constructor,
+            vdom        = container.vdom,
+            module      = item.module,
+            proto, wrapperCls;
+
+        if (!Neo.isNumber(index)) {
+            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;
+        wrapperCls = item.wrapperCls || proto.constructor.config.wrapperCls || [];
+
+        item.className  = proto.className;
+        item.wrapperCls = [...wrapperCls, sCfg.itemCls];
+        item.module     = module;
+
+        delete item.isLoading;
+        delete item.vdom;
+
+        items[index] = item = Neo.create(item);
+
+        if (me.removeInactiveCards) {
+            item.vdom.removeDom = true;
+        }
+
+        container.fire('cardLoaded', {item});
+
+        vdom.cn[index] = item.vdom;
+
+        return item;
+    }
+
     /**
      * Removes all CSS rules from the container this layout is bound to.
      * Gets called when switching to a different layout.