neo.mjs 5.12.4 → 5.12.6

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.6'
          */
-        version: '5.12.4'
+        version: '5.12.6'
     }
 
     /**

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.6'
          */
-        version: '5.12.4'
+        version: '5.12.6'
     }
 
     /**

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.6",
     "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.6'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.12.4'
+    version: '5.12.6'
 };
 
 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)
+            })
         }
     }
 
@@ -302,7 +272,7 @@ class Base extends Component {
     afterSetPressed(value, oldValue) {
         let cls = this.cls;
 
-        NeoArray[value === true ? 'add' : 'remove'](cls, 'pressed');
+        NeoArray.toggle(cls, 'pressed', value === true);
         this.cls = cls;
     }
 
@@ -314,18 +284,16 @@ class Base extends Component {
      */
     afterSetText(value, oldValue) {
         let me       = this,
+            isEmpty  = !value || value === '',
             vdomRoot = me.getVdomRoot(),
             textNode = vdomRoot.cn[1];
 
-        if (!value || value === '') {
-            NeoArray.add(me._cls,      'no-text');
-            NeoArray.add(vdomRoot.cls, 'no-text');
-            textNode.removeDom = true;
-        } else {
-            NeoArray.remove(me._cls,      'no-text');
-            NeoArray.remove(vdomRoot.cls, 'no-text');
-            textNode.removeDom = false;
-            textNode.innerHTML = value;
+        NeoArray.toggle(me._cls,      'no-text', isEmpty);
+        NeoArray.toggle(vdomRoot.cls, 'no-text', isEmpty);
+        textNode.removeDom = isEmpty;
+
+        if (!isEmpty) {
+            textNode.innerHTML = value
         }
 
         me.update()
@@ -430,7 +398,7 @@ class Base extends Component {
      * @protected
      */
     beforeSetIconPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'iconPosition');
+        return this.beforeSetEnumValue(value, oldValue, 'iconPosition')
     }
 
     /**
@@ -520,23 +488,21 @@ class Base extends Component {
                 rippleWrapper.removeDom = true;
                 me.update()
             }
-        }, rippleEffectDuration);
+        }, rippleEffectDuration)
     }
 
     /**
      *
      */
-    toggleMenu() {
+    async toggleMenu() {
         let menuList = this.menuList,
             hidden   = !menuList.hidden;
 
         menuList.hidden = hidden;
 
         if (!hidden) {
-            setTimeout(() => {
-                console.log('focus'); // todo: does not activate the key nav
-                menuList.focus()
-            }, 500)
+            await Neo.timeout(50);
+            menuList.focus()
         }
     }
 }

package/src/component/Base.mjs

@@ -1828,6 +1828,7 @@ class Base extends CoreBase {
 
         me.vdom.removeDom = true;
 
+        me._hidden = true; // silent update
         me.mounted = false;
 
         Neo.currentWorker.promiseMessage('main', {

package/src/menu/List.mjs

@@ -39,6 +39,11 @@ class List extends BaseList {
          * @protected
          */
         focusTimeoutId: null,
+        /**
+         * Hides a floating list on leaf item click, in case it has a parentComponent
+         * @member {Boolean} hideOnLeafItemClick=true
+         */
+        hideOnLeafItemClick: true,
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} items_=null
@@ -104,6 +109,12 @@ 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
+
     /**
      * Triggered after the floating config got changed
      * @param {Object[]} value
@@ -143,7 +154,6 @@ class List extends BaseList {
             if (me.isRoot) {
                 if (!value) {
                     me.focusTimeoutId = setTimeout(() => {
-                        console.log('unmount'); // todo: does not hide a top-level floating menu
                         me[me.floating ? 'unmount' : 'hideSubMenu']();
                     }, 20);
                 } else {
@@ -157,6 +167,43 @@ 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,
+            id       = me.id,
+            parentId = me.parentComponent?.id;
+
+        if (parentId) {
+            if (value) {
+                Neo.main.addon.ScrollSync.register({
+                    sourceId: parentId,
+                    targetId: id
+                });
+
+                me.getDomRect([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
+                })
+            } else if (oldValue !== undefined) {
+                Neo.main.addon.ScrollSync.unregister({
+                    sourceId: parentId,
+                    targetId: id
+                })
+            }
+        }
+    }
+
     /**
      * Triggered after the zIndex config got changed
      * @param {Number} value
@@ -270,7 +317,22 @@ class List extends BaseList {
      * @param {Object[]} data.oldPath
      */
     onFocusLeave(data) {
-        this.menuFocus = false
+        let insideParent = false,
+            parentId     = this.parentComponent?.id,
+            item;
+
+        if (parentId) {
+            for (item of data.oldPath) {
+                if (item.id === parentId) {
+                    insideParent = true;
+                    break;
+                }
+            }
+        }
+
+        if (!insideParent) {
+            this.menuFocus = false
+        }
     }
 
     /**
@@ -280,7 +342,13 @@ class List extends BaseList {
     onItemClick(node, data) {
         super.onItemClick(node, data);
 
-        data.record.handler?.call(this, data)
+        let me = this;
+
+        data.record.handler?.call(me, data);
+
+        if (me.hideOnLeafItemClick && !data.record.items) {
+            me.unmount()
+        }
     }
 
     /**

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()
     }
 }