neo.mjs 7.15.0 → 8.0.0-alpha.1

package/src/form/field/Text.mjs

@@ -410,7 +410,7 @@ class Text extends Base {
      */
     afterSetErrorPositionAbsolute(value, oldValue) {
         let me  = this,
-            cls = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom.cls;
+            cls = VDomUtil.find(me.vdom, {cls: 'neo-textfield-error'}).vdom.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-absolute');
 
@@ -824,10 +824,10 @@ class Text extends Base {
             });
 
             postTriggers.sort((a, b) => b.weight - a.weight); // DESC
-            preTriggers.sort((a, b) => a.weight - b.weight); // ASC
+            preTriggers.sort( (a, b) => a.weight - b.weight); // ASC
 
-            postTriggers = postTriggers.map(a => a.vdom);
-            preTriggers  = preTriggers.map(a => a.vdom);
+            postTriggers = postTriggers.map(trigger => trigger.createVdomReference());
+            preTriggers  = preTriggers.map( trigger => trigger.createVdomReference());
 
             if (inputEl.tag === 'input') {
                 // wrap the input tag
@@ -1090,14 +1090,14 @@ class Text extends Base {
      * @returns {Object|null}
      */
     getCenterBorderEl() {
-        return VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'})?.vdom || null
+        return VDomUtil.find(this.vdom, {cls: 'neo-center-border'})?.vdom || null
     }
 
     /**
      * @returns {Object|null}
      */
     getInputEl() {
-        return VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'})?.vdom || null
+        return VDomUtil.find(this.vdom, {flag: 'neo-real-input'})?.vdom || null
     }
 
     /**
@@ -1137,7 +1137,7 @@ class Text extends Base {
      * @returns {Object|null}
      */
     getLabelEl() {
-        return VDomUtil.findVdomChild(this.vdom, {tag: 'label'})?.vdom || null
+        return VDomUtil.find(this.vdom, {tag: 'label'})?.vdom || null
     }
 
     /**
@@ -1486,7 +1486,7 @@ class Text extends Base {
             NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
             me.cls = cls;
 
-            errorWrapper = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error-wrapper'}).vdom;
+            errorWrapper = VDomUtil.find(me.vdom, {cls: 'neo-textfield-error-wrapper'}).vdom;
             errorNode    = errorWrapper.cn[0];
 
             if (value) {

package/src/layout/Card.mjs

@@ -133,6 +133,7 @@ class Card extends Base {
             if (needsTransition) {
                 await me.slideCards(value, oldValue)
             } else if (removeInactiveCards || needsUpdate) {
+                container.updateDepth = -1; // include the full tree to honor new or changed inactive cards
                 container.update()
             }
         }

package/src/list/Chip.mjs

@@ -62,7 +62,7 @@ class Chip extends ComponentList {
                 items = me.items || [];
 
             items.forEach(item => {
-                item.display = value ? 'flex' : 'inline-flex';
+                item.display = value ? 'flex' : 'inline-flex'
             })
         }
     }
@@ -85,6 +85,7 @@ class Chip extends ComponentList {
             };
 
         if (listItem) {
+            me.updateDepth = 2;
             listItem.setSilent(config)
         } else {
             items[index] = listItem = Neo.create({
@@ -98,7 +99,7 @@ class Chip extends ComponentList {
 
         me.items = items;
 
-        return [listItem.vdom]
+        return [listItem.createVdomReference()]
     }
 }
 

package/src/list/Circle.mjs

@@ -61,6 +61,7 @@ class Circle extends Component {
             };
 
         if (listItem) {
+            me.updateDepth = 2;
             listItem.setSilent(config)
         } else {
             items[index] = listItem = Neo.create({
@@ -79,7 +80,7 @@ class Circle extends Component {
 
         me.items = items;
 
-        return [listItem.vdom]
+        return [listItem.createVdomReference()]
     }
 }
 

package/src/list/Component.mjs

@@ -112,6 +112,10 @@ class Component extends Base {
             fromIndex, key, previousKeys;
 
         if (me.items) {
+            me.items.forEach(item => {
+                item.setSilent({id: null})
+            });
+
             key          = me.getKeyProperty();
             previousKeys = data.previousItems.map(e => e[key]);
 
@@ -120,6 +124,7 @@ class Component extends Base {
                 newItems.push(me.items[fromIndex])
             });
 
+            me.updateDepth = -1;
             me.items = newItems
         }
     }

package/src/manager/Component.mjs

@@ -1,4 +1,5 @@
 import Base      from './Base.mjs';
+import VDomUtil  from '../util/VDom.mjs';
 import VNodeUtil from '../util/VNode.mjs';
 
 /**
@@ -20,6 +21,11 @@ class Component extends Base {
         singleton: true
     }
 
+    /**
+     * @member {Map} wrapperNodes=new Map()
+     */
+    wrapperNodes = new Map()
+
     /**
      * @param {Object} config
      */
@@ -32,6 +38,58 @@ class Component extends Base {
         Neo.getComponent = me.getById.bind(me)   // alias
     }
 
+    /**
+     * Flattens a given vnode tree by replacing component based subtrees with componentId based references
+     * @param {Object} vnode
+     * @param {String} ownerId We do not want to replace the own id => wrapped items
+     * @returns {Object}
+     */
+    addVnodeComponentReferences(vnode, ownerId) {
+        vnode = {...vnode}; // shallow copy
+
+        let me         = this,
+            childNodes = vnode?.childNodes ? [...vnode.childNodes] : [],
+            childNodeId, component, componentId, parentRef, referenceNode;
+
+        vnode.childNodes = childNodes;
+
+        childNodes.forEach((childNode, index) => {
+            childNodeId = childNode.id;
+
+            if (!childNode.componentId && childNodeId !== ownerId) {
+                component = me.get(childNodeId);
+
+                if (!component) {
+                    // searching for wrapped components as a fallback
+                    component = me.wrapperNodes.get(childNodeId);
+
+                    if (component) {
+                        // update the parent component reference => assign the wrapper id
+                        componentId = component.id;
+                        parentRef   = VDomUtil.find(component.parent.vdom, {componentId}, false);
+
+                        if (parentRef) {
+                            parentRef.vdom.id = childNodeId
+                        }
+                    }
+                }
+
+                if (component) {
+                    componentId   = component.id;
+                    referenceNode = {componentId};
+
+                    if (componentId !== childNodeId) {
+                        referenceNode.id = childNodeId
+                    }
+                }
+            }
+
+            childNodes[index] = component ? referenceNode : me.addVnodeComponentReferences(childNode, ownerId)
+        });
+
+        return vnode
+    }
+
     /**
      * Returns the first component which matches the config-selector moving down the component items tree.
      * Use returnFirstMatch=false to get an array of all matching items instead.
@@ -144,11 +202,11 @@ class Component extends Base {
     /**
      * todo: replace all calls of this method to calls using the util.VNode class
      * Get the ids of all child nodes of the given vnode
-     * @param vnode
-     * @param childIds
-     * @returns {Array} childIds
+     * @param {Object} vnode
+     * @param {String[]} childIds=[]
+     * @returns {String[]} childIds
      */
-    getChildIds(vnode, childIds) {
+    getChildIds(vnode, childIds=[]) {
         return VNodeUtil.getChildIds(vnode, childIds)
     }
 
@@ -318,6 +376,79 @@ class Component extends Base {
         return parents
     }
 
+    /**
+     * Copies a given vdom tree and replaces child component references with the vdom of their matching components
+     * @param {Object} vdom
+     * @param {Number} depth=-1
+     *     The component replacement depth.
+     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
+     * @returns {Object}
+     */
+    getVdomTree(vdom, depth=-1) {
+        let output = {...vdom}, // shallow copy
+            childDepth;
+
+        if (vdom.cn) {
+            output.cn = [];
+
+            childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
+
+            vdom.cn.forEach(item => {
+                childDepth = depth;
+
+                if (item.componentId) {
+                    childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
+
+                    if (depth === -1 || depth > 1) {
+                        item = this.get(item.componentId).vdom
+                    }
+                }
+
+                output.cn.push(this.getVdomTree(item, childDepth))
+            })
+        }
+
+        return output
+    }
+
+    /**
+     * Copies a given vnode tree and replaces child component references with the vnode of their matching components
+     * @param {Object} vnode
+     * @param {Number} depth=-1
+     *     The component replacement depth.
+     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
+     * @returns {Object}
+     */
+    getVnodeTree(vnode, depth=-1) {
+        let output = {...vnode}, // shallow copy
+            childDepth, component;
+
+        if (vnode.childNodes) {
+            output.childNodes = [];
+
+            vnode.childNodes.forEach(item => {
+                childDepth = depth;
+
+                if (item.componentId) {
+                    childDepth = depth === -1 ? -1 : depth > 1 ? depth-1 : 1;
+
+                    if (depth === -1 || depth > 1) {
+                        component = this.get(item.componentId);
+
+                        // keep references in case there is no vnode (cmp not mounted)
+                        if (component.vnode) {
+                            item = component.vnode
+                        }
+                    }
+                }
+
+                output.childNodes.push(this.getVnodeTree(item, childDepth))
+            })
+        }
+
+        return output
+    }
+
     /**
      * Check if the component had a property of any value somewhere in the Prototype chain
      *
@@ -338,6 +469,29 @@ class Component extends Base {
         return false
     }
 
+    /**
+     * @param {String} wrapperId
+     * @param {Neo.component.Base} component
+     */
+    registerWrapperNode(wrapperId, component) {
+        this.wrapperNodes.set(wrapperId, component)
+    }
+
+    /**
+     * @param {Neo.component.Base|String} item
+     */
+    unregister(item) {
+        if (item) {
+            if (Neo.isString(item)) {
+                this.wrapperNodes.delete(item)
+            } else if (item.id !== item.vdom.id) {
+                this.wrapperNodes.delete(item.vdom.id)
+            }
+        }
+
+        super.unregister(item)
+    }
+
     /**
      * Returns the first component which matches the config-selector.
      * Use returnFirstMatch=false to get an array of all matching items instead.

package/src/manager/DomEvent.mjs

@@ -522,11 +522,11 @@ class DomEvent extends Base {
             delegationVdom;
 
         if (targetId && targetId !== delegationTargetId) {
-            delegationVdom = VDomUtil.findVdomChild(component.vdom, delegationTargetId);
+            delegationVdom = VDomUtil.find(component.vdom, delegationTargetId);
 
             // delegationVdom can be undefined when dragging a proxy over the node.
             // see issues/1137 for details.
-            if (!delegationVdom || delegationVdom.vdom && VDomUtil.findVdomChild(delegationVdom.vdom, targetId)) {
+            if (!delegationVdom || delegationVdom.vdom && VDomUtil.find(delegationVdom.vdom, targetId)) {
                 return false
             }
         }

package/src/menu/List.mjs

@@ -45,7 +45,7 @@ class List extends BaseList {
         items_: null,
         /**
          * Internal flag.
-         * Sub-menus will bubble of focus changes to the top level.
+         * Sub-menus will bubble focus changes to the top level.
          * @member {Boolean} menuFocus_=false
          * @protected
          */
@@ -251,12 +251,11 @@ class List extends BaseList {
      *
      */
     hideSubMenu() {
-        let me            = this,
-            activeSubMenu = me.activeSubMenu;
+        let {activeSubMenu} = this;
 
         if (activeSubMenu) {
             activeSubMenu.unmount();
-            me.activeSubMenu = null
+            this.activeSubMenu = null
         }
     }
 
@@ -402,7 +401,7 @@ class List extends BaseList {
             recordId = record[me.getKeyProperty()],
             submenu  = me.subMenuMap?.[me.getMenuMapId(recordId)];
 
-        if (!submenu || !submenu.mounted) {
+        if (!submenu?.mounted) {
             me.showSubMenu(nodeId, record)
         } else {
             me.hideSubMenu()

package/src/menu/Panel.mjs

@@ -82,7 +82,7 @@ class Panel extends BasePanel {
      * @protected
      */
     beforeSetList(value, oldValue) {
-        oldValue && oldValue.destroy();
+        oldValue?.destroy();
         return ClassSystemUtil.beforeSetInstance(value, List, this.listConfig)
     }
 }

package/src/selection/Model.mjs

@@ -229,7 +229,7 @@ class Model extends Base {
                 me.deselectAll(true)
             }
 
-            items.forEach((node, i) => {
+            items.forEach(node => {
                 node = view.getVdomChild(node);
 
                 if (node) {

package/src/selection/grid/BaseModel.mjs

@@ -0,0 +1,61 @@
+import Model from '../Model.mjs';
+
+/**
+ * Abstract base class for all grid related selection models
+ * @class Neo.selection.grid.BaseModel
+ * @extends Neo.selection.Model
+ * @abstract
+ */
+class BaseModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.selection.grid.BaseModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.BaseModel'
+    }
+
+    /**
+     * @param {Object} item
+     * @param {Boolean} [silent] true to prevent a vdom update
+     * @param {Object[]|String[]} itemCollection=this.items
+     * @param {String} [selectedCls]
+     */
+    deselect(item, silent, itemCollection=this.items, selectedCls) {
+        let {view} = this;
+
+        if (!silent) {
+            view.updateDepth = 2
+        }
+
+        super.deselect(item, silent, itemCollection, selectedCls)
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAll(silent) {
+        let {view} = this;
+
+        if (!silent) {
+            view.updateDepth = 2
+        }
+
+        super.deselectAll(silent)
+    }
+
+    /**
+     * @param {Object} args
+     */
+    select(...args) {
+        let {view} = this;
+
+        if (!view.silentSelect) {
+            view.updateDepth = 2
+        }
+
+        super.select(...args)
+    }
+}
+
+export default Neo.setupClass(BaseModel);

package/src/selection/grid/CellColumnModel.mjs

@@ -69,7 +69,7 @@ class CellColumnModel extends CellModel {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -96,7 +96,7 @@ class CellColumnModel extends CellModel {
             newIndex += fields.length
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/grid/CellColumnRowModel.mjs

@@ -69,7 +69,7 @@ class CellColumnRowModel extends CellRowModel {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -96,7 +96,7 @@ class CellColumnRowModel extends CellRowModel {
             newIndex += fields.length
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/grid/CellModel.mjs

@@ -1,10 +1,10 @@
-import Model from '../Model.mjs';
+import BaseModel from './BaseModel.mjs';
 
 /**
  * @class Neo.selection.grid.CellModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.grid.BaseModel
  */
-class CellModel extends Model {
+class CellModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.grid.CellModel'
@@ -40,7 +40,7 @@ class CellModel extends Model {
 
         me.view.un('cellClick', me.onCellClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**

package/src/selection/grid/CellRowModel.mjs

@@ -73,7 +73,10 @@ class CellRowModel extends CellModel {
 
         NeoArray.remove(me.selectedRowIds, rowId);
 
-        !silent && view.update()
+        if (!silent) {
+            view.updateDepth = 2;
+            view.update()
+        }
     }
 
     /**
@@ -103,7 +106,7 @@ class CellRowModel extends CellModel {
             node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.findVdomChild(view.vdom, node.id),
+            vdomNode     = VDomUtil.find(view.vdom, node.id),
             newIndex     = (vdomNode.index + step) % store.getCount(),
             {parentNode} = vdomNode,
             id;
@@ -138,7 +141,10 @@ class CellRowModel extends CellModel {
             me.selectedRowIds.push(id)
         }
 
-        !silent && view.update()
+        if (!silent) {
+            view.updateDepth = 2;
+            view.update()
+        }
     }
 
     /**

package/src/selection/grid/ColumnModel.mjs

@@ -1,11 +1,11 @@
-import Model    from '../Model.mjs';
-import VDomUtil from '../../util/VDom.mjs';
+import BaseModel from './BaseModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.grid.ColumnModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.grid.BaseModel
  */
-class ColumnModel extends Model {
+class ColumnModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.grid.ColumnModel'
@@ -41,7 +41,7 @@ class ColumnModel extends Model {
 
         me.view.un('cellClick', me.onCellClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -87,7 +87,7 @@ class ColumnModel extends Model {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.select(columnNodeIds)
@@ -128,7 +128,7 @@ class ColumnModel extends Model {
         idArray[2] = fields[newIndex];
         id = idArray.join('__');
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.select(columnNodeIds);
@@ -143,33 +143,22 @@ class ColumnModel extends Model {
 
         let {id, view} = this;
 
-        view.keys?._keys.push({
-            fn   : 'onKeyDownLeft',
-            key  : 'Left',
-            scope: id
-        }, {
-            fn   : 'onKeyDownRight',
-            key  : 'Right',
-            scope: id
-        })
+        view.keys?._keys.push(
+            {fn: 'onKeyDownLeft',  key: 'Left',  scope: id},
+            {fn: 'onKeyDownRight', key: 'Right', scope: id}
+        )
     }
 
-
     /**
      *
      */
     unregister() {
         let {id, view} = this;
 
-        view.keys?.removeKeys([{
-            fn   : 'onKeyDownLeft',
-            key  : 'Left',
-            scope: id
-        }, {
-            fn   : 'onKeyDownRight',
-            key  : 'Right',
-            scope: id
-        }]);
+        view.keys?.removeKeys([
+            {fn: 'onKeyDownLeft',  key: 'Left',  scope: id},
+            {fn: 'onKeyDownRight', key: 'Right', scope: id}
+        ]);
 
         super.unregister()
     }