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

package/src/component/Base.mjs

@@ -208,10 +208,10 @@ class Base extends CoreBase {
         isLoading_: false,
         /**
          * Internal flag which will get set to true while an update request (worker messages) is in progress
-         * @member {Boolean} isVdomUpdating=false
+         * @member {Boolean} isVdomUpdating_=false
          * @protected
          */
-        isVdomUpdating: false,
+        isVdomUpdating_: false,
         /**
          * Using the keys config will create an instance of Neo.util.KeyNavigation.
          * @see {@link Neo.util.KeyNavigation KeyNavigation}
@@ -404,6 +404,11 @@ class Base extends CoreBase {
      * @member {String[]} childUpdateCache=[]
      */
     childUpdateCache = []
+    /**
+     * Stores the updateDepth while an update is running to enable checks for parent update collisions
+     * @member {Number|null} currentUpdateDepth=null
+     */
+    currentUpdateDepth = null
     /**
      * @member {Function[]} resolveUpdateCache=[]
      */
@@ -732,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) {
@@ -747,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);
@@ -767,6 +764,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the isVdomUpdating config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetIsVdomUpdating(value, oldValue) {
+        this.currentUpdateDepth = value ? this.updateDepth : null
+    }
+
     /**
      * Triggered after the maxHeight config got changed
      * @param {Number|String|null} value
@@ -1388,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
@@ -1830,6 +1859,16 @@ class Base extends CoreBase {
         return this.vnode
     }
 
+    /**
+     * Checks if a given updateDepth & distance would result in an update collision
+     * @param {Number} updateDepth
+     * @param {Number} distance
+     * @returns {Boolean}
+     */
+    hasUpdateCollision(updateDepth, distance) {
+        return updateDepth === -1 ? true : distance < updateDepth
+    }
+
     /**
      * Hide the component.
      * hideMode: 'removeDom'  uses vdom removeDom.
@@ -1844,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()
@@ -1889,29 +1929,35 @@ class Base extends CoreBase {
      * Checks for vdom updates inside the parent chain and if found.
      * Registers the component for a vdom update once done.
      * @param {String} parentId=this.parentId
-     * @param {Function} [resolve] gets passed by updateVdom()
+     * @param {Function} [resolve] Gets passed by updateVdom()
+     * @param {Number} distance=1 Distance inside the component tree
      * @returns {Boolean}
      */
-    isParentVdomUpdating(parentId=this.parentId, resolve) {
+    isParentUpdating(parentId=this.parentId, resolve, distance=1) {
         if (parentId !== 'document.body') {
             let me     = this,
                 parent = Neo.getComponent(parentId);
 
             if (parent) {
                 if (parent.isVdomUpdating) {
-                    if (Neo.config.logVdomUpdateCollisions) {
-                        console.warn('vdom parent update conflict with:', parent, 'for:', me)
-                    }
+                    if (me.hasUpdateCollision(parent.currentUpdateDepth, distance)) {
+                        if (Neo.config.logVdomUpdateCollisions) {
+                            console.warn('vdom parent update conflict with:', parent, 'for:', me)
+                        }
 
-                    NeoArray.add(parent.childUpdateCache, me.id);
+                        NeoArray.add(parent.childUpdateCache, me.id);
 
-                    // Adding the resolve fn to its own cache, since the parent will trigger
-                    // a new update() directly on this cmp
-                    resolve && me.resolveUpdateCache.push(resolve)
-                    return true
-                } else {
-                    return me.isParentVdomUpdating(parent.parentId, resolve)
+                        // Adding the resolve fn to its own cache, since the parent will trigger
+                        // a new update() directly on this cmp
+                        resolve && me.resolveUpdateCache.push(resolve);
+                        return true
+                    }
+
+                    // If an update is running and does not have a collision, we do not need to check further parents
+                    return false
                 }
+
+                return me.isParentUpdating(parent.parentId, resolve, distance+1)
             }
         }
 
@@ -2022,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)
             }
         }
 
@@ -2148,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)
         })
@@ -2349,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)
@@ -2398,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;
@@ -2486,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) {
@@ -2518,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
@@ -2569,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) {
@@ -2606,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

@@ -168,7 +168,7 @@ class Base extends Component {
         if (oldValue !== undefined) {
             super.afterSetMounted(value, oldValue);
 
-            for (let i = 0, { items } = this, { length } = items; i < length; i++) {
+            for (let i = 0, {items} = this, {length} = items; i < length; i++) {
                 if (!items[i].vdom.removeDom) {
                     items[i].mounted = value
                 }
@@ -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/layout/Card.mjs

@@ -201,14 +201,14 @@ class Card extends Base {
         item.className = proto.className;
         item.module    = module;
 
-        me.applyChildAttributes(item, index);
-
         delete item.isLoading;
         delete item.vdom;
 
         items[index] = item = Neo.create(item);
 
-        container.getVdomItemsRoot().cn[index] = item.vdom;
+        me.applyChildAttributes(item, index);
+
+        container.getVdomItemsRoot().cn[index] = item.createVdomReference();
 
         container.fire('cardLoaded', {item});
 
@@ -253,13 +253,15 @@ class Card extends Base {
 
         vdom.cn = [
             {cls: ['neo-relative'], cn: [
-                {cls: ['neo-animation-wrapper'], style, cn: [card.vdom]}
+                {cls: ['neo-animation-wrapper'], style, cn: [card.createVdomReference()]}
             ]}
         ];
 
         animationWrapper = vdom.cn[0].cn[0];
 
-        animationWrapper.cn[slideIn ? 'unshift' : 'push'](oldCard.vdom);
+        animationWrapper.cn[slideIn ? 'unshift' : 'push'](oldCard.createVdomReference());
+
+        container.updateDepth = -1;
 
         await container.promiseUpdate();
 
@@ -274,11 +276,13 @@ class Card extends Base {
         vdom.cn = [];
 
         container.items.forEach(item => {
-            vdom.cn.push(item.vdom)
+            vdom.cn.push(item.createVdomReference())
         });
 
         oldCard.vdom.removeDom = true;
 
+        container.updateDepth = -1;
+
         await container.promiseUpdate()
     }
 }

package/src/layout/Cube.mjs

@@ -144,6 +144,7 @@ class Cube extends Card {
 
             if (Neo.typeOf(item.module) === 'Function') {
                 await me.loadModule(item, value);
+                container.updateDepth = -1;
                 container.update();
 
                 await me.timeout(100) // wait for the view to get painted first
@@ -276,6 +277,14 @@ class Cube extends Card {
         }
     }
 
+    /**
+     * @protected
+     */
+    applyRenderAttributes() {
+        this.container.updateDepth = -1;
+        super.applyRenderAttributes()
+    }
+
     /**
      *
      */
@@ -299,9 +308,9 @@ class Cube extends Card {
         vdom.cn = container.getVdomItemsRoot().cn;
 
         if (me.hideInactiveCardsOnDestroy) {
-            vdom.cn.forEach((item, index) => {
+            container.items.forEach((item, index) => {
                 if (index < 6 && index !== me.activeIndex) {
-                    item.removeDom = true
+                    item.vdom.removeDom = true
                 }
             })
         }
@@ -309,6 +318,7 @@ class Cube extends Card {
         // override
         container.getVdomItemsRoot = me.#cachedVdomItemsRoot;
 
+        container.updateDepth = -1;
         container.update();
 
         super.destroy(...args)
@@ -336,12 +346,13 @@ class Cube extends Card {
 
         me.timeout(50).then(() => {
             // Important when switching from a card layout to this one
-            container.vdom.cn[0].cn[0].cn.forEach((node, index) => {
+            container.items.forEach((item, index) => {
                 if (index < 6) {
-                    delete node.removeDom
+                    delete item.vdom.removeDom
                 }
             });
 
+            container.updateDepth = -1;
             container.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]
     }

package/src/main/DomEvents.mjs

@@ -98,7 +98,7 @@ class DomEvents extends Base {
         singleton: true,
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: ['addDomListener']}
+         * @member {Object} remote
          * @protected
          */
         remote: {

package/src/main/DomUtils.mjs

@@ -1,22 +1,22 @@
 import Base from '../core/Base.mjs';
 
 const focusableTags = {
-    BODY     : 1,
-    BUTTON   : 1,
-    EMBED    : 1,
-    IFRAME   : 1,
-    INPUT    : 1,
-    OBJECT   : 1,
-    SELECT   : 1,
-    TEXTAREA : 1
+    BODY    : 1,
+    BUTTON  : 1,
+    EMBED   : 1,
+    IFRAME  : 1,
+    INPUT   : 1,
+    OBJECT  : 1,
+    SELECT  : 1,
+    TEXTAREA: 1
 };
 
 /**
- * @class Neo.main.DomUtils 
+ * @class Neo.main.DomUtils
  * @extends Neo.core.Base
  * @singleton
  */
-export default class DomUtils extends Base {
+class DomUtils extends Base {
     static config = {
         /**
          * @member {String} className='Neo.main.DomUtils'
@@ -31,42 +31,21 @@ export default class DomUtils extends Base {
      * @param {HTMLElement} el The element to start from.
      * @param {Function} filterFn A function which returns `true` when the desired element is reached.
      * @param {HTMLElement} [limit] The element to stop at. This is *not* considered for matching.
-     * @returns {Boolean}
+     * @returns {HTMLElement}
      */
     static closest(el, filterFn, limit = document.body) {
         while (el?.nodeType === Node.ELEMENT_NODE && el !== limit) {
             if (filterFn(el)) {
-                return el;
+                return el
             }
-            el = el.parentNode;
-        }
-    }
-
-    /**
-     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
-     * and all descendants for all elements for which the passed `filterFn` returns `true`.
-     * @param {HTMLElement} el The element to start from.
-     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
-     * @returns {HTMLElement[]} An array of matching elements
-     */
-    static queryAll(el, filterFn) {
-        return [el, ...el.querySelectorAll('*')].filter(filterFn);
-    }
 
-    /**
-     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
-     * and all descendants for the first element for which the passed `filterFn` returns `true`.
-     * @param {HTMLElement} el The element to start from.
-     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
-     * @returns {HTMLElement} The first matching element
-     */
-    static query(el, filterFn) {
-        return [el, ...el.querySelectorAll('*')].find(filterFn);
+            el = el.parentNode
+        }
     }
 
     static isFocusable(e) {
         // May be used as a scopeless callback, so use "DomUtils", not "this"
-        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0;
+        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0
     }
 
     static isTabbable(e) {
@@ -86,4 +65,28 @@ export default class DomUtils extends Base {
             (tabIndex != null && Number(tabIndex) >= 0) ||
             e.contentEditable === 'true'
     }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
+     * and all descendants for the first element for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
+     * @returns {HTMLElement} The first matching element
+     */
+    static query(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].find(filterFn);
+    }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
+     * and all descendants for all elements for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
+     * @returns {HTMLElement[]} An array of matching elements
+     */
+    static queryAll(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].filter(filterFn)
+    }
 }
+
+export default Neo.setupClass(DomUtils);

package/src/tab/Container.mjs

@@ -243,7 +243,7 @@ class Container extends BaseContainer {
         });
 
         items.forEach((item, index) => {
-            tabButtons.push(me.getTabButtonConfig(item.tabButtonConfig, index));
+            tabButtons.push(me.getTabButtonConfig(item.header, index));
 
             if (!(item instanceof Neo.component.Base)) {
                 item = {flex: 1, ...me.itemDefaults, isTab: true, ...item}
@@ -410,7 +410,7 @@ class Container extends BaseContainer {
             cardContainer = me.getCardContainer(),
             tabBar        = me.getTabBar(),
             hasItem       = false,
-            i, len, returnArray, superItem, tab, tabButtonConfig;
+            i, len, returnArray, superItem, tab;
 
         if (Array.isArray(item)) {
             i           = 0;
@@ -441,9 +441,7 @@ class Container extends BaseContainer {
             }
 
             if (!hasItem) {
-                tabButtonConfig = item.tabButtonConfig;
-
-                tab = tabBar.insert(index, me.getTabButtonConfig(tabButtonConfig, index));
+                tab = tabBar.insert(index, me.getTabButtonConfig(item.header, index));
 
                 // todo: non index based matching of tab buttons and cards
                 i = 0;