neo.mjs 5.12.4 → 5.12.5

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.12.4'
+         * @member {String} version='5.12.5'
          */
-        version: '5.12.4'
+        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.4'
+         * @member {String} version='5.12.5'
          */
-        version: '5.12.4'
+        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.4",
+    "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.4'
+     * @default '5.12.5'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.12.4'
+    version: '5.12.5'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -251,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)
+            })
         }
     }
 

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/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,69 +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
-                });
-
-                if (!rendererOutput) {
-                    rendererOutput = ''
-                }
-
-                cellCls = ['neo-table-cell'];
-
-                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 (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 || []];
@@ -200,7 +219,7 @@ class View extends Component {
                 // this logic only works for selection.table.RowModel
                 Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});
             }
-        });
+        })
     }
 
     /**
@@ -221,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
@@ -292,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()
     }
 }