neo.mjs 5.1.16 → 5.1.17

package/apps/ServiceWorker.mjs

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

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

@@ -13,6 +13,17 @@ class ViewportController extends Component {
         className: 'Form.view.ViewportController'
     }
 
+    /**
+     * @param {Object} data
+     */
+    onValidateAllPagesButtonClick(data) {
+        let me      = this,
+            form    = me.getReference('main-form'),
+            isValid = form.validate();
+
+        console.log('Form values', form.getValues());
+    }
+
     /**
      * @param {Object} data
      */

package/examples/ServiceWorker.mjs

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

package/package.json

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

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.1.17'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.1.16'
+    version: '5.1.17'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/Container.mjs

@@ -30,6 +30,25 @@ class Container extends BaseContainer {
         {tag: 'form', cn: [], onsubmit: 'return false;'}
     }
 
+    /**
+     * @returns {Object[]}
+     */
+    findNotLoadedModules(container=this) {
+        let modules = [];
+
+        container.items.forEach(item => {
+            if (Neo.typeOf(item.module) === 'Function') {
+                modules.push(item)
+            } else {
+                item.items && this.findNotLoadedModules(item);
+            }
+        });
+
+        console.log(modules);
+
+        return modules;
+    }
+
     /**
      * Either pass a field id or name
      * @param {String} name
@@ -56,6 +75,8 @@ class Container extends BaseContainer {
     getFields() {
         let fields = [];
 
+        this.findNotLoadedModules();
+
         ComponentManager.getChildComponents(this).forEach(item => {
             item instanceof BaseField && fields.push(item);
         });
@@ -149,16 +170,23 @@ class Container extends BaseContainer {
     }
 
     /**
-     * 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.
+     * 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}
      */
     validate() {
+        let isValid = true,
+            validField;
+
         this.getFields().forEach(item => {
-            item.validate?.(false);
+            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, '');
         }

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,50 @@ 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);
+        }
+
+        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[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.