neo.mjs 5.12.3 → 5.12.5

package/apps/ServiceWorker.mjs

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

package/examples/ConfigurationViewport.mjs

@@ -69,17 +69,14 @@ class ConfigurationViewport extends Viewport {
             items : [me.exampleComponent],
             flex  : me.exampleComponentFlex,
             layout: 'base',
-            style : {padding: '20px'}
+            style : {overflow: 'auto', padding: '20px'},
+            ...me.exampleContainerConfig
         }, {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],
             flex  : me.configPanelFlex,
             style : {margin: '20px', minWidth: me.configPanelMinWidth},
 
-            containerConfig: {
-                style: {overflowY: 'scroll'}
-            },
-
             headers: [{
                 dock : 'top',
                 style: {borderLeft:0, borderRight:0, borderTop:0},
@@ -100,7 +97,7 @@ class ConfigurationViewport extends Viewport {
             items: [{
                 module: Container,
                 layout: {ntype: 'vbox'},
-                style : {padding: '10px'},
+                style : {overflowY: 'auto', padding: '10px'},
                 cls   : ['neo-configuration-panel-body'],
                 itemDefaults: {
                     clearToOriginalValue: true,

package/examples/ServiceWorker.mjs

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

package/examples/button/base/MainContainer.mjs

@@ -177,9 +177,11 @@ class MainContainer extends ConfigurationViewport {
         return Neo.create({
             module   : Button,
             badgeText: 'Badge',
+            flex     : 'none',
             handler  : data => console.log('button click =>', data.component.id),
             height   : 50,
             iconCls  : 'fa fa-home',
+            style    : {marginBottom: '1500px', marginTop: '500px'},
             text     : 'Hello World',
             ui       : 'primary',
             width    : 150,

package/package.json

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

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -139,6 +139,20 @@ class Base extends Component {
      */
     #rippleTimeoutId = null
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            click: me.onClick,
+            scope: me
+        })
+    }
+
     /**
      * Triggered after the badgePosition config got changed
      * @param {String} value
@@ -173,26 +187,6 @@ class Base extends Component {
         this.update();
     }
 
-    /**
-     * Triggered after the handler config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetHandler(value, oldValue) {
-        let me = this;
-
-        value && me.addDomListeners({
-            click: value,
-            scope: me.handlerScope || me
-        });
-
-        me.menu && me.addDomListeners({
-            click: me.toggleMenu,
-            scope: me
-        })
-    }
-
     /**
      * Triggered after the iconCls config got changed
      * @param {String} value
@@ -257,45 +251,15 @@ class Base extends Component {
                 let me = this;
 
                 me.menuList = Neo.create({
-                    module      : module.default,
-                    appName     : me.appName,
-                    displayField: 'text',
-                    floating    : true,
-                    hidden      : true,
-                    items       : value,
-                    parentId    : me.id
-                });
-
-                me.vdom.cn.push(me.menuList.vdom)
-            })
-        }
-    }
-
-    /**
-     * Triggered after the mounted config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetMounted(value, oldValue) {
-        super.afterSetMounted(value, oldValue);
-
-        let me = this,
-            style;
-
-        if (value && me.menu) {
-            setTimeout(() => {
-                me.getDomRect().then(rect => {
-                    style = me.menuList.style || {};
-
-                    Object.assign(style, {
-                        right: 0,
-                        top  : rect.height + 'px'
-                    });
-
-                    me.menuList.style = style
+                    module         : module.default,
+                    appName        : me.appName,
+                    displayField   : 'text',
+                    floating       : true,
+                    hidden         : true,
+                    items          : value,
+                    parentComponent: me
                 })
-            }, 50)
+            })
         }
     }
 
@@ -312,21 +276,6 @@ class Base extends Component {
         this.cls = cls;
     }
 
-    /**
-     * Triggered after the route config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetRoute(value, oldValue) {
-        let me = this;
-
-        value && me.addDomListeners({
-            click: me.changeRoute,
-            scope: me
-        })
-    }
-
     /**
      * Triggered after the text config got changed
      * @param {String|null} value
@@ -349,7 +298,7 @@ class Base extends Component {
             textNode.innerHTML = value;
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -369,7 +318,7 @@ class Base extends Component {
             vdomRoot.tag = 'button';
         }
 
-        this.update();
+        this.update()
     }
 
     /**
@@ -379,19 +328,9 @@ class Base extends Component {
      * @protected
      */
     afterSetUseRippleEffect(value, oldValue) {
-        let me            = this,
-            listener      = {click: me.showRipple, scope: me},
-            rippleWrapper = me.getRippleWrapper();
-
-        if (!value && oldValue) {
-            me.removeDomListeners(listener);
-        } else if (value) {
-            me.addDomListeners(listener);
-        }
-
-        // setting the config to false should end running ripple animations
-        rippleWrapper.removeDom = true;
-        me.update();
+        // setting the config to false ends running ripple animations
+        this.getRippleWrapper().removeDom = true;
+        this.update()
     }
 
     /**
@@ -410,7 +349,7 @@ class Base extends Component {
             delete vdomRoot.target;
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -425,7 +364,7 @@ class Base extends Component {
             return iconCls.join(' ');
         }
 
-        return iconCls;
+        return iconCls
     }
 
     /**
@@ -436,7 +375,7 @@ class Base extends Component {
      * @protected
      */
     beforeSetBadgePosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'badgePosition');
+        return this.beforeSetEnumValue(value, oldValue, 'badgePosition')
     }
 
     /**
@@ -451,7 +390,7 @@ class Base extends Component {
             value = value.split(' ').filter(Boolean);
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -471,9 +410,9 @@ class Base extends Component {
         let me = this;
 
         if (me.editRoute) {
-            Neo.Main.editRoute(me.route);
+            Neo.Main.editRoute(me.route)
         } else {
-            Neo.Main.setRoute({value: me.route});
+            Neo.Main.setRoute({value: me.route})
         }
     }
 
@@ -482,7 +421,7 @@ class Base extends Component {
      * @returns {Object}
      */
     getBadgeNode() {
-        return this.getVdomRoot().cn[2];
+        return this.getVdomRoot().cn[2]
     }
 
     /**
@@ -490,7 +429,7 @@ class Base extends Component {
      * @returns {Object}
      */
     getIconNode() {
-        return this.getVdomRoot().cn[0];
+        return this.getVdomRoot().cn[0]
     }
 
     /**
@@ -498,7 +437,20 @@ class Base extends Component {
      * @returns {Object}
      */
     getRippleWrapper() {
-        return this.getVdomRoot().cn[3];
+        return this.getVdomRoot().cn[3]
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onClick(data) {
+        let me = this;
+
+        me.handler?.call(me.handlerScope || me, data);
+
+        me.menu            && me.toggleMenu();
+        me.route           && me.changeRoute();
+        me.useRippleEffect && me.showRipple(data)
     }
 
     /**
@@ -536,7 +488,7 @@ class Base extends Component {
                 me.#rippleTimeoutId = null;
 
                 rippleWrapper.removeDom = true;
-                me.update();
+                me.update()
             }
         }, rippleEffectDuration);
     }

package/src/core/Base.mjs

@@ -24,7 +24,9 @@ class Base {
     static observable = false
     /**
      * Keep the overwritten methods
-     * @type {Object}
+     * @member {Object} overwrittenMethods={}
+     * @protected
+     * @static
      */
     static overwrittenMethods = {}
     /**
@@ -116,7 +118,7 @@ class Base {
             value     : true
         });
 
-        me.remote && setTimeout(me.initRemote.bind(me), 1);
+        me.remote && setTimeout(me.initRemote.bind(me), 1)
     }
 
     /**
@@ -133,9 +135,9 @@ class Base {
 
         if (oldValue) {
             if (hasManager) {
-                Neo.manager.Instance.unregister(oldValue);
+                Neo.manager.Instance.unregister(oldValue)
             } else {
-                delete Neo.idMap[oldValue];
+                delete Neo.idMap[oldValue]
             }
         }
 
@@ -143,7 +145,7 @@ class Base {
             Neo.manager.Instance.register(me);
         } else {
             Neo.idMap = Neo.idMap || {};
-            Neo.idMap[me.id] = me;
+            Neo.idMap[me.id] = me
         }
     }
 
@@ -169,8 +171,9 @@ class Base {
                     }
                 }
             }
+
             // Apply configs to prototype
-            overwrites && Object.assign(cfg, overwrites);
+            overwrites && Object.assign(cfg, overwrites)
         }
     }
 
@@ -187,10 +190,10 @@ class Base {
 
         if (!values.includes(value)) {
             console.error(`Supported values for ${name} are: ${values.join(', ')}`, this);
-            return oldValue;
+            return oldValue
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -217,7 +220,7 @@ class Base {
             regex      = Base.methodNameRegex,
             methodName = stack.match(regex)[1];
 
-        this.__proto__.constructor.overwrittenMethods[methodName].call(this, ...args);
+        this.__proto__.constructor.overwrittenMethods[methodName].call(this, ...args)
     }
 
     /**
@@ -238,14 +241,14 @@ class Base {
         let me = this;
 
         if (Base.instanceManagerAvailable === true) {
-            Neo.manager.Instance.unregister(me);
+            Neo.manager.Instance.unregister(me)
         } else if (Neo.idMap) {
-            delete Neo.idMap[me.id];
+            delete Neo.idMap[me.id]
         }
 
         Object.keys(me).forEach(key => {
             if (Object.getOwnPropertyDescriptor(me, key).writable) {
-                delete me[key];
+                delete me[key]
             }
         })
     }
@@ -299,7 +302,7 @@ class Base {
             listenerId;
 
         if (!me.singleton) {
-            throw new Error('Remote method access is only functional for Singleton classes ' + className);
+            throw new Error('Remote method access is only functional for Singleton classes ' + className)
         }
 
         if (!Neo.config.unitTestMode && Neo.isObject(remote)) {
@@ -325,11 +328,11 @@ class Base {
             ctor = me.constructor;
 
         if (!ctor.config) {
-            throw new Error('Neo.applyClassConfig has not been run on ' + me.className);
+            throw new Error('Neo.applyClassConfig has not been run on ' + me.className)
         }
 
         if (!preventOriginalConfig) {
-            me.originalConfig = Neo.clone(config, true, true);
+            me.originalConfig = Neo.clone(config, true, true)
         }
 
         return {...ctor.config, ...config}
@@ -364,7 +367,7 @@ class Base {
 
         if (items) {
             if (!Array.isArray(items)) {
-                items = [items];
+                items = [items]
             }
 
             items.forEach(item => {
@@ -377,16 +380,16 @@ class Base {
                         ns      = Neo.ns(nsArray, false, me);
 
                         if (ns[nsKey] === undefined) {
-                            console.error('The used @config does not exist:', nsKey, nsArray.join('.'));
+                            console.error('The used @config does not exist:', nsKey, nsArray.join('.'))
                         } else {
                             symbolNs = Neo.ns(nsArray, false, me[configSymbol]);
 
                             // The config might not be processed yet, especially for configs
                             // not ending with an underscore, so we need to check the configSymbol first.
                             if (symbolNs && Object.hasOwn(symbolNs, nsKey)) {
-                                item[key] = symbolNs[nsKey];
+                                item[key] = symbolNs[nsKey]
                             } else {
-                                item[key] = ns[nsKey];
+                                item[key] = ns[nsKey]
                             }
                         }
                     }
@@ -414,7 +417,7 @@ class Base {
                 me[keys[0]] = me[configSymbol][keys[0]];
             }
 
-            // there is a delete call inside the config getter as well (Neo.mjs => autoGenerateGetSet())
+            // there is a delete-call inside the config getter as well (Neo.mjs => autoGenerateGetSet())
             // we need to keep this one for configs, which do not use getters (no trailing underscore)
             delete me[configSymbol][keys[0]];
 
@@ -439,7 +442,7 @@ class Base {
                     methods
                 })
             }
-        });
+        })
     }
 
     /**
@@ -455,7 +458,7 @@ class Base {
         // finish this one first before dropping new values into the configSymbol.
         // see: https://github.com/neomjs/neo/issues/2201
         if (me[forceAssignConfigs] !== true && Object.keys(me[configSymbol]).length > 0) {
-            me.processConfigs();
+            me.processConfigs()
         }
 
         Object.assign(me[configSymbol], values);
@@ -476,11 +479,11 @@ class Base {
         Object.entries(config).forEach(([key, value]) => {
             if (!configNames.hasOwnProperty(key) && !Neo.hasPropertySetter(me, key)) {
                 me[key] = value;
-                delete config[key];
+                delete config[key]
             }
         })
 
-        return config;
+        return config
     }
 
     /**

package/src/menu/List.mjs

@@ -104,6 +104,17 @@ class List extends BaseList {
         {tag: 'ul', tabIndex: -1, cn: []}
     }
 
+    /**
+     * If the menu is floating, it will anchor itself to the parentRect
+     * @member {Neo.component.Base|null} parentComponent=null
+     */
+    parentComponent = null
+    /**
+     * If the menu is floating, it will anchor itself to the parentRect
+     * @member {Object|null} parentRect=null
+     */
+    parentRect = null
+
     /**
      * Triggered after the floating config got changed
      * @param {Object[]} value
@@ -157,6 +168,35 @@ class List extends BaseList {
         }
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me       = this,
+            parentId = me.parentComponent?.id;
+
+        if (value && parentId) {
+            Neo.main.addon.ScrollSync.register({
+                sourceId: parentId,
+                targetId: me.id
+            });
+
+            me.getDomRect([me.id, parentId]).then(rects => {
+                let style = me.style || {};
+
+                style.left = `${rects[1].right - rects[0].width}px`;
+                style.top  = `${rects[1].bottom + 1}px`;
+
+                me.style = style
+            })
+        }
+    }
+
     /**
      * Triggered after the zIndex config got changed
      * @param {Number} value

package/src/selection/menu/ListModel.mjs

@@ -28,7 +28,7 @@ class ListModel extends BaseListModel {
         if (parentMenu) {
             view.hideSubMenu();
             view.selectionModel.deselectAll();
-            parentMenu.selectionModel.selectAt(view.parentIndex);
+            parentMenu.selectionModel.selectAt(view.parentIndex)
         }
     }
 
@@ -39,7 +39,7 @@ class ListModel extends BaseListModel {
         let activeSubMenu = this.view.activeSubMenu;
 
         if (activeSubMenu) {
-            activeSubMenu.selectionModel.selectAt(0);
+            activeSubMenu.selectionModel.selectAt(0)
         }
     }
 }

package/src/table/View.mjs

@@ -45,6 +45,87 @@ class View extends Component {
         {tag: 'tbody', cn: []}
     }
 
+    /**
+     * @param {String} cellId
+     * @param {Object} column
+     * @param {Object} record
+     * @param {Number} index
+     * @param {Neo.table.Container} tableContainer
+     * @returns {Object}
+     */
+    applyRendererOutput(cellId, column, record, index, tableContainer) {
+        let me         = this,
+            cellCls    = ['neo-table-cell'],
+            dataField  = column.dataField,
+            fieldValue = record[dataField],
+            hasStore   = tableContainer.store?.model, // todo: remove as soon as all tables use stores (examples table)
+            vdom       = me.vdom,
+            cellConfig, rendererOutput;
+
+        if (fieldValue === undefined) {
+            fieldValue = ''
+        }
+
+        rendererOutput = column.renderer.call(column.rendererScope || tableContainer, {
+            dataField,
+            index,
+            record,
+            value: fieldValue
+        });
+
+        switch (Neo.typeOf(rendererOutput)) {
+            case 'Object': {
+                if (rendererOutput.cls && rendererOutput.html) {
+                    cellCls.push(...rendererOutput.cls);
+                } else {
+                    rendererOutput = [rendererOutput];
+                }
+                break;
+            }
+            case 'Number':
+            case 'String': {
+                rendererOutput = {
+                    cls : cellCls,
+                    html: rendererOutput?.toString()
+                };
+                break;
+            }
+        }
+
+        if (rendererOutput === null || rendererOutput === undefined) {
+            rendererOutput = ''
+        }
+
+        if (column.align !== 'left') {
+            cellCls.push('neo-' + column.align)
+        }
+
+        if (!cellId) {
+            // todo: remove the else part as soon as all tables use stores (examples table)
+            if (hasStore) {
+                cellId = me.getCellId(record, column.dataField)
+            } else {
+                cellId = vdom.cn[i]?.cn[j]?.id || Neo.getId('td')
+            }
+        }
+
+        cellConfig = {
+            tag     : 'td',
+            id      : cellId,
+            cls     : cellCls,
+            style   : rendererOutput.style || {},
+            tabIndex: '-1'
+        };
+
+        if (Neo.typeOf(rendererOutput) === 'Object') {
+            cellConfig.innerHTML = rendererOutput.html  || ''
+        } else {
+            cellConfig.cn = rendererOutput
+        }
+
+        return cellConfig
+    }
+
     /**
      * @param {Array} inputData
      */
@@ -52,14 +133,13 @@ class View extends Component {
         let me         = this,
             amountRows = inputData.length,
             container  = Neo.getComponent(me.parentId),
-            hasStore   = container.store?.model, // todo: remove as soon as all tables use stores (examples table)
             columns    = container.items[0].items,
             colCount   = columns.length,
             data       = [],
             i          = 0,
             vdom       = me.vdom,
-            cellCls, cellId, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
-            record, rendererValue, selectedRows, trCls;
+            config, column, dockLeftMargin, dockRightMargin, id, index, j,
+            record, selectedRows, trCls;
 
         me.recordVnodeMap = {}; // remove old data
 
@@ -97,64 +177,8 @@ class View extends Component {
             j = 0;
 
             for (; j < colCount; j++) {
-                column         = columns[j];
-                rendererValue  = record[column.dataField];
-
-                if (rendererValue === undefined) {
-                    rendererValue = '';
-                }
-
-                rendererOutput = column.renderer.call(column.rendererScope || container, {
-                    dataField: column.dataField,
-                    index    : i,
-                    record,
-                    value    : rendererValue
-                });
-
-                cellCls = ['neo-table-cell'];
-
-                switch (Neo.typeOf(rendererOutput)) {
-                    case 'Object': {
-                        if (rendererOutput.cls && rendererOutput.html) {
-                            cellCls.push(...rendererOutput.cls);
-                        } else {
-                            rendererOutput = [rendererOutput];
-                        }
-                        break;
-                    }
-                    case 'String': {
-                        rendererOutput = {
-                            cls : cellCls,
-                            html: rendererOutput?.toString()
-                        };
-                        break;
-                    }
-                }
-
-                if (column.align !== 'left') {
-                    cellCls.push('neo-' + column.align)
-                }
-
-                // todo: remove the else part as soon as all tables use stores (examples table)
-                if (hasStore) {
-                    cellId = me.getCellId(record, column.dataField);
-                } else {
-                    cellId = vdom.cn[i]?.cn[j]?.id || Neo.getId('td');
-                }
-
-                config = {
-                    tag     : 'td',
-                    id      : cellId,
-                    cls     : cellCls,
-                    style   : rendererOutput.style || {},
-                    tabIndex: '-1'
-                };
-
-                if (Neo.typeOf(rendererOutput) === 'Object') {
-                    config.innerHTML = rendererOutput.html  || ''
-                } else {
-                    config.cn = rendererOutput
-                }
+                column = columns[j];
+                config = me.applyRendererOutput(null, column, record, i, container);
 
                 if (column.dock) {
                     config.cls = ['neo-locked', ...config.cls || []];
@@ -195,7 +219,7 @@ class View extends Component {
                 // this logic only works for selection.table.RowModel
                 Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});
             }
-        });
+        })
     }
 
     /**
@@ -216,6 +240,29 @@ class View extends Component {
         return this.id + '__' + record[this.store.keyProperty] + '__' + dataField;
     }
 
+    /**
+     * Get a table column by a given field name
+     * @param {String} field
+     * @returns {Object|null}
+     */
+    getColumn(field) {
+        let container = Neo.getComponent(this.parentId),
+            columns   = container.columns,
+            i         = 0,
+            len       = columns.length,
+            column;
+
+        for (; i < len; i++) {
+            column = columns[i];
+
+            if (column.dataField === field) {
+                return column
+            }
+        }
+
+        return null
+    }
+
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a table cell.
      * @param {String} nodeId
@@ -287,26 +334,28 @@ class View extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange(opts) {
-        let me     = this,
-            deltas = [],
-            cellId, cellNode;
+        let me          = this,
+            container   = Neo.getComponent(me.parentId),
+            needsUpdate = false,
+            vdom        = me.vdom,
+            cellId, cellNode, column, index, scope;
 
         opts.fields.forEach(field => {
             cellId   = me.getCellId(opts.record, field.name);
-            cellNode = me.getVdomChild(cellId);
+            cellNode = VDomUtil.findVdomChild(vdom, cellId);
 
             // the vdom might not exist yet => nothing to do in this case
-            if (cellNode) {
-                cellNode.innerHTML = field.value; // keep the vdom in sync
+            if (cellNode.vdom) {
+                column      = me.getColumn(field.name);
+                index       = cellNode.index;
+                needsUpdate = true;
+                scope       = column.rendererScope || container;
 
-                deltas.push({
-                    id       : cellId,
-                    innerHTML: field.value
-                })
+                cellNode.parentNode.cn[index] = me.applyRendererOutput(cellId, column, opts.record, index, container)
             }
         });
 
-        deltas.length > 0 && Neo.applyDeltas(me.appName, deltas);
+        needsUpdate && me.update()
     }
 }