neo.mjs 8.0.0-alpha.2 → 8.0.0-beta.1

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -147,12 +147,12 @@ class MainView extends FormContainer {
         }, {
             module: TabContainer,
             items : [{
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'user-form',
-                tabButtonConfig: {text: 'User'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'User'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'user-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Firstname',
@@ -165,12 +165,12 @@ class MainView extends FormContainer {
                     value    : 'Doe'
                 }]
             }, {
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'product-form',
-                tabButtonConfig: {text: 'Product'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'Product'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'product-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Name',
@@ -189,7 +189,7 @@ class MainView extends FormContainer {
             itemDefaults: {module: Button},
             layout      : {ntype: 'hbox'},
 
-            items : [{
+            items: [{
                 handler: 'up.getMainFormValues',
                 text   : 'Get Main Values'
             }, {

package/resources/data/deck/training/pages/2022-12-27T21-55-23-144Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-28T17-11-34-653Z.md

@@ -13,18 +13,18 @@ Give it the `ntype:'yelp-businesses-tabs',`.
 
 It needs *two* tabs, with the tab button text set to 'Map' and 'Table'.
 
-Remember that a tab is configured with the `tabButtonConfig`, and you'll use the
+Remember that a tab is configured with the `header`, and you'll use the
 `html` config as a placeholder to indicate that a map and a table will eventually
 be used. The generated class already has two tabs. 
 
-The first tab shoudl end up looking like this. 
+The first tab should end up looking like this. 
 
     {
-        ntype: 'component',
-        html: 'The map goes here',
-        tabButtonConfig: {
+        ntype : 'component',
+        html  : 'The map goes here',
+        header: {
             text: 'Map'
-        },
+        }
     }
 
 

package/resources/data/deck/training/pages/2022-12-29T18-36-08-226Z.md

@@ -33,7 +33,7 @@ to inspect it, and run methods on it.
 Now add a new tab: 
 
     tabContainer.add({
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Hi there!'
         },
@@ -103,4 +103,4 @@ and change the value.
 Clear the console and do another _Ctrl-right-click_, then right-click on the button component logged in 
 the console and choose _Store object as global variable_. It'll use a value like _temp1_.
 
-Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.
+Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.

package/resources/data/deck/training/pages/2022-12-29T18-36-56-893Z.md

@@ -80,7 +80,7 @@ class MainContainer extends Viewport {
             },
 
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
@@ -88,7 +88,7 @@ class MainContainer extends Viewport {
                     innerHTML: 'Welcome to your new Neo App.'
                 }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-08-919Z.md

@@ -26,13 +26,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-20-344Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2023-01-01T21-11-58-025Z.md

@@ -14,12 +14,12 @@ class Simple extends Base {
 items: [{
     module: Simple
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 
 }, {
     module: Simple
     foo: 2, // This value is used for the instance
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 }],
-</pre>
+</pre>

package/resources/data/deck/training/pages/2023-01-16T20-24-09-690Z.md

@@ -1,23 +1,23 @@
 A tab container is a card-layout container with a tab bar and styled buttons.
 Do not specify a `layout` for tab containers.
 
-The buttons are configured via `tabButtonConfig`
+The buttons are configured via `header`
 
     activeIndex: 2,
     tabBarPosition: 'left', // top, right, bottom, left
     itemDefaults: { module: Button },
     items: [{
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Tab 1'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-play-circle',
             text: 'Tab 2'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-bell',
             text: 'Tab 3'
         }

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -19,7 +19,7 @@ in the `afterSetBusiness()` method.
     items: [{
         module: Component,
         reference: 'view',
-        tabButtonConfig: {
+        header: {
             text: 'View'
         },
         style: {
@@ -33,7 +33,7 @@ in the `afterSetBusiness()` method.
         }
     }, {
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         }
     }]
@@ -192,4 +192,4 @@ Here's one way to code it. How does this compare to your solution?
 
 The view tab will become more and more complicated as we add content.
 It should be refactored into its own view class to isolate that complexity.
-We won't bother, but on a project that would be the right thing to do.
+We won't bother, but on a project that would be the right thing to do.

package/resources/data/deck/training/pages/2023-02-05T17-45-40-114Z.md

@@ -16,7 +16,7 @@ Configure the form to use vbox, along with some other configs.
     {
         module: Form,
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         },
         style: {

package/src/DefaultConfig.mjs

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

package/src/calendar/view/SettingsContainer.mjs

@@ -89,44 +89,29 @@ class SettingsContainer extends Container {
             items: [{
                 module: () => import('./settings/GeneralContainer.mjs'),
                 flag  : 'general',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'General'
-                }
+                header: {text: 'General'},
+                style : {padding: '20px'}
             }, {
-                ntype: 'component',
-                flag : 'day',
-                html : 'Day',
-                style: {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Day'
-                }
+                ntype : 'component',
+                flag  : 'day',
+                header: {text: 'Day'},
+                html  : 'Day',
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/WeekContainer.mjs'),
                 flag  : 'week',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Week'
-                }
+                header: {text: 'Week'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/MonthContainer.mjs'),
                 flag  : 'month',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Month'
-                }
+                header: {text: 'Month'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/YearContainer.mjs'),
                 flag  : 'year',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Year'
-                }
+                header: {text: 'Year'},
+                style : {padding: '20px'}
             }],
 
             listeners: {

package/src/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,11 @@ class ColorsList extends List {
         bind: {
             store: 'stores.colors'
         },
+        /**
+         * Set this to true in case a keyboard navigation should immediately select the focussed item
+         * @member {Boolean} selectOnFocus=true
+         */
+        selectOnFocus: true,
         /**
          * @member {Boolean} useWrapperNode=false
          */

package/src/code/LivePreview.mjs

@@ -63,16 +63,16 @@ class LivePreview extends Container {
             removeInactiveCards: false,
 
             items: [{
-                module         : MonacoEditor,
-                hideLabel      : true,
-                listeners      : {editorChange: 'up.onEditorChange'},
-                style          : {height: '100%'},
-                reference      : 'editor',
-                tabButtonConfig: {text: 'Source'}
+                module   : MonacoEditor,
+                header   : {text: 'Source'},
+                hideLabel: true,
+                listeners: {editorChange: 'up.onEditorChange'},
+                style    : {height: '100%'},
+                reference: 'editor'
             }, {
-                module         : Container,
-                reference      : 'preview',
-                tabButtonConfig: {text: 'Preview'}
+                module   : Container,
+                header   : {text: 'Preview'},
+                reference: 'preview'
             }]
         }],
         /**
@@ -410,7 +410,7 @@ class LivePreview extends Container {
             ui       : 'ghost'
         });
 
-        items[0].style = {marginLeft: 'auto'};
+        items.unshift('->');
 
         // we want to add a normal (non-header) button
         tabContainer.getTabBar().add(items);

package/src/component/Base.mjs

@@ -737,13 +737,13 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetIsLoading(value, oldValue) {
-        if (!(value === false && oldValue === undefined)) {
+        if (value || oldValue !== undefined) {
             let me          = this,
                 {cls, vdom} = me,
                 maskIndex;
 
             if (oldValue !== undefined && vdom.cn) {
-                maskIndex = vdom.cn.findIndex(c => c.cls.includes('neo-load-mask'));
+                maskIndex = vdom.cn.findLastIndex(c => c.cls?.includes('neo-load-mask'));
 
                 // Remove the load mask
                 if (maskIndex !== -1) {
@@ -752,19 +752,11 @@ class Base extends CoreBase {
             }
 
             if (value) {
-                vdom.cn.push(me.loadMask = {
-                    cls: ['neo-load-mask'],
-                    cn : [{
-                        cls: ['neo-load-mask-body'],
-                        cn : [{
-                            cls: me.loadingSpinnerCls
-                        }, {
-                            cls      : ['neo-loading-message'],
-                            html     : value,
-                            removeDom: !Neo.isString(value)
-                        }]
-                    }]
-                })
+                if (!vdom.cn) {
+                    vdom.cn = []
+                }
+
+                vdom.cn.push(me.createLoadingMask(value))
             }
 
             NeoArray.toggle(cls, 'neo-masked', value);
@@ -1403,6 +1395,28 @@ class Base extends CoreBase {
         me.update()
     }
 
+    /**
+     * Override this method in case you need different mask markups.
+     * The removal logic relies on the top level node having the cls 'neo-load-mask'
+     * @param {Boolean|String} loadingMessage
+     * @returns {Object} vdom
+     */
+    createLoadingMask(loadingMessage) {
+        return {
+            cls: ['neo-load-mask'],
+            cn : [{
+                cls: ['neo-load-mask-body'],
+                cn : [{
+                    cls: this.loadingSpinnerCls
+                }, {
+                    cls      : ['neo-loading-message'],
+                    html     : loadingMessage,
+                    removeDom: !Neo.isString(loadingMessage)
+                }]
+            }]
+        }
+    }
+
     /**
      * Creates the tooltip instances
      * @param {Object|String} value
@@ -1869,6 +1883,7 @@ class Base extends CoreBase {
             let removeFn = function () {
                 if (me.parentId !== 'document.body') {
                     me.vdom.removeDom = true;
+                    me.parent.updateDepth = 2;
                     me.parent.update()
                 } else {
                     me.unmount()
@@ -1918,7 +1933,7 @@ class Base extends CoreBase {
      * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    isParentVdomUpdating(parentId=this.parentId, resolve, distance=1) {
+    isParentUpdating(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
@@ -1940,9 +1955,9 @@ class Base extends CoreBase {
 
                     // If an update is running and does not have a collision, we do not need to check further parents
                     return false
-                } else {
-                    return me.isParentVdomUpdating(parent.parentId, resolve, distance+1)
                 }
+
+                return me.isParentUpdating(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -2053,22 +2068,24 @@ class Base extends CoreBase {
      * Checks the needsVdomUpdate config inside the parent tree
      * @param {String} parentId=this.parentId
      * @param {Function} [resolve] gets passed by updateVdom()
+     * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    needsParentUpdate(parentId=this.parentId, resolve) {
+    needsParentUpdate(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
-                if (parent.needsVdomUpdate) {
+                // We are checking for parent.updateDepth, since we care about the depth of the next update cycle
+                if (parent.needsVdomUpdate && me.hasUpdateCollision(parent.updateDepth, distance)) {
                     parent.resolveUpdateCache.push(...me.resolveUpdateCache);
                     resolve && parent.resolveUpdateCache.push(resolve);
                     me.resolveUpdateCache = [];
                     return true
-                } else {
-                    return me.needsParentUpdate(parent.parentId)
                 }
+
+                return me.needsParentUpdate(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -2179,7 +2196,7 @@ class Base extends CoreBase {
      * @param {Neo.vdom.VNode} vnode= this.vnode
      * @returns {Promise<any>}
      */
-    promiseUpdate(vdom = this.vdom, vnode = this.vnode) {
+    promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
         return new Promise((resolve, reject) => {
             this.updateVdom(vdom, vnode, resolve, reject)
         })
@@ -2380,6 +2397,7 @@ class Base extends CoreBase {
             if (me.silentVdomUpdate) {
                 me.needsVdomUpdate = true
             } else if (me.parentId !== 'document.body') {
+                me.parent.updateDepth = 2;
                 me.parent.update()
             } else {
                 !me.mounted && me.render(true)
@@ -2429,7 +2447,7 @@ class Base extends CoreBase {
 
         // we need one separate iteration first to ensure all wrapper nodes get registered
         childComponents.forEach(component => {
-            childVnode = VNodeUtil.findChildVnode(me.vnode, component.vdom.id)?.vnode;
+            childVnode = VNodeUtil.find(me.vnode, component.vdom.id)?.vnode;
 
             if (childVnode) {
                 map[component.id] = childVnode;
@@ -2517,7 +2535,7 @@ class Base extends CoreBase {
     updateCls(cls, oldCls, id=this.id) {
         let me          = this,
             {vnode}     = me,
-            vnodeTarget = vnode && VNodeUtil.findChildVnode(me.vnode, {id})?.vnode;
+            vnodeTarget = vnode && VNodeUtil.find(me.vnode, {id})?.vnode;
 
         if (vnode && !Neo.isEqual(cls, oldCls)) {
             if (vnodeTarget) {
@@ -2549,7 +2567,7 @@ class Base extends CoreBase {
 
         if (delta) {
             vdom  = VDomUtil.find(me.vdom, id);
-            vnode = me.vnode && VNodeUtil.findChildVnode(me.vnode, id);
+            vnode = me.vnode && VNodeUtil.find(me.vnode, id);
 
             if (!me.hasUnmountedVdomChanges) {
                 me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
@@ -2600,24 +2618,8 @@ class Base extends CoreBase {
             {app, mounted, parentId} = me,
             listenerId;
 
-        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
-        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
-        // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
-            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
-
-            Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key]
-            });
-
-            vdom = Object.assign(me._vdom, vdom)
-        }
-
-        if (resolve && me.isVdomUpdating) {
-            me.resolveUpdateCache.push(resolve)
-        }
-
         if (me.isVdomUpdating || me.silentVdomUpdate) {
+            resolve && me.resolveUpdateCache.push(resolve);
             me.needsVdomUpdate = true
         } else {
             if (!mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
@@ -2637,7 +2639,7 @@ class Base extends CoreBase {
 
                 if (
                     !me.needsParentUpdate(parentId, resolve)
-                    && !me.isParentVdomUpdating(parentId, resolve)
+                    && !me.isParentUpdating(parentId, resolve)
                     && mounted
                     && vnode
                 ) {

package/src/container/Base.mjs

@@ -500,7 +500,7 @@ class Base extends Component {
     /**
      * Inserts an item or array of items at a specific index
      * @param {Number} index
-     * @param {Object|Array} item
+     * @param {Array|Object} item
      * @param {Boolean} [silent=false]
      * @returns {Neo.component.Base|Neo.component.Base[]}
      */

package/src/form/field/Text.mjs

@@ -1356,7 +1356,7 @@ class Text extends Base {
         let me         = this,
             oldValue   = me.value,
             inputValue = data.value,
-            vnode      = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+            vnode      = VNodeUtil.find(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
             // Update the current state (modified DOM by the user) to enable the delta-updates logic.

package/src/form/field/Time.mjs

@@ -101,9 +101,11 @@ class Time extends Picker {
         });
 
         me.list = Neo.create({
-            module      : List,
-            displayField: 'value',
-            store       : me.collection,
+            module        : List,
+            displayField  : 'value',
+            itemsFocusable: false,
+            navigator     : {eventSource: me.getInputElId()},
+            store         : me.collection,
             ...me.listConfig
         });
 

package/src/form/field/trigger/Time.mjs

@@ -62,10 +62,11 @@ class Time extends Picker {
             parentId: me.id,
             showDisc: false,
             size    : null,
+            windowId: me.windowId,
             ...me.clockConfig
         });
 
-        me.vdom.cn = [me.clock.vdom];
+        me.vdom.cn = [me.clock.createVdomReference()];
         me.update()
     }
 

package/src/list/Base.mjs

@@ -125,7 +125,12 @@ class Base extends Component {
          */
         selectionModel_: null,
         /**
-         * Set this to true in case a select event should only update _vdom (e.g. when used inside a form.field.Select
+         * Set this to true in case a keyboard navigation should immediately select the focussed item
+         * @member {Boolean} selectOnFocus=false
+         */
+        selectOnFocus: false,
+        /**
+         * Set this to true in case a select event should only update _vdom (e.g. when used inside a form.field.ComboBox
          * @member {Boolean} silentSelect=false
          */
         silentSelect: false,
@@ -298,6 +303,7 @@ class Base extends Component {
             if (!me.hasNavigator) {
                 me.navigator = {
                     appName       : me.appName,
+                    autoClick     : me.selectOnFocus,
                     id            : me.id,
                     keepFocusIndex: me.keepFocusIndex,
                     selector      : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,

package/src/list/Color.mjs

@@ -22,13 +22,13 @@ class Color extends Base {
         baseCls: ['neo-color-list', 'neo-list'],
         /**
          * The data.Model field which contains the color value
-         * @member {String} colorField='name'
+         * @member {String} colorField_='name'
          */
-        colorField: 'name',
+        colorField_: 'name',
         /**
          * Override the formatter to apply a custom background-color styling.
          * E.g. using CSS vars for different themes
-         * @member {Function} colorField=(scope,data)=>data[scope.colorField]
+         * @member {Function} colorFormatter=(scope,data)=>data[scope.colorField]
          */
         colorFormatter: (scope,data) => data[scope.colorField]
     }