neo.mjs 5.12.1 → 5.12.3

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/button/base/MainContainer.mjs

@@ -185,15 +185,15 @@ class MainContainer extends ConfigurationViewport {
             width    : 150,
 
             menu: [{
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 1 click =>', data),
                 iconCls: 'fa fa-home',
                 text   : 'Item 1'
             }, {
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 2 click =>', data),
                 iconCls: 'fa fa-user',
                 text   : 'Item 2'
             }, {
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 3 click =>', data),
                 iconCls: 'fa fa-play',
                 text   : 'Item 3'
             }]
@@ -201,7 +201,7 @@ class MainContainer extends ConfigurationViewport {
             /*tooltips: [{
                 text: 'Hello World Tooltip'
             }]*/
-        });
+        })
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.12.1",
+    "version": "5.12.3",
     "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.1'
+     * @default '5.12.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.12.1'
+    version: '5.12.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -1963,7 +1963,12 @@ class Base extends CoreBase {
                 opts.appName = me.appName;
             }
 
-            Neo.vdom.Helper.update(opts).then(data => {
+            Neo.vdom.Helper.update(opts).catch(err => {
+                console.log('Error attempting to update component dom', err, me);
+                me.isVdomUpdating = false;
+
+                reject?.();
+            }).then(data => {
                 // console.log('Component vnode updated', data);
                 me.vnode          = data.vnode;
                 me.isVdomUpdating = false;
@@ -1987,12 +1992,7 @@ class Base extends CoreBase {
                         me.vdom = me.vdom;
                     }
                 }
-            }).catch(err => {
-                console.log('Error attempting to update component dom', err, me);
-                me.isVdomUpdating = false;
-
-                reject?.();
-            });
+            })
         }
     }
 }

package/src/controller/Component.mjs

@@ -48,11 +48,11 @@ class Component extends Base {
         me.references = {};
 
         if (component.isConstructed) {
-            me.onComponentConstructed();
+            me.onComponentConstructed()
         } else {
             listenerId = component.on('constructed', () => {
                 component.un('constructed', listenerId);
-                me.onComponentConstructed();
+                me.onComponentConstructed()
             });
         }
     }
@@ -64,7 +64,7 @@ class Component extends Base {
      * @protected
      */
     beforeSetParent(value, oldValue) {
-        return value ? value : this.getParent();
+        return value || this.getParent()
     }
 
     /**
@@ -87,7 +87,7 @@ class Component extends Base {
      */
     getModel(sameLevelOnly=false) {
         let component = this.component;
-        return sameLevelOnly ? component.model : component.getModel();
+        return sameLevelOnly ? component.model : component.getModel()
     }
 
     /**
@@ -105,7 +105,7 @@ class Component extends Base {
         parentId        = me.component.parentId;
         parentComponent = parentId && Neo.getComponent(parentId);
 
-        return parentComponent?.getController() || null;
+        return parentComponent?.getController() || null
     }
 
     /**
@@ -125,7 +125,7 @@ class Component extends Base {
             }
         }
 
-        return component || null;
+        return component || null
     }
 
     /**
@@ -220,8 +220,8 @@ class Component extends Base {
                             }
                         }
                     }
-                });
-            });
+                })
+            })
         }
     }
 
@@ -241,7 +241,7 @@ class Component extends Base {
             }
         }
 
-        me.getParent()?.removeReference(component);
+        me.getParent()?.removeReference(component)
     }
 }
 

package/src/list/Base.mjs

@@ -641,6 +641,9 @@ class Base extends Component {
         let me     = this,
             record = me.store.get(me.getItemRecordId(node.id));
 
+        // pass the record to class extensions
+        data.record = record;
+
         if (!me.disableSelection && (!me.useHeaders || !record.isHeader)) {
             me.selectionModel?.select(node.id);
         }

package/src/menu/List.mjs

@@ -114,7 +114,7 @@ class List extends BaseList {
         let cls = this.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-floating');
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -127,7 +127,7 @@ class List extends BaseList {
         let store = this.store;
 
         oldValue && store.remove(oldValue);
-        value    && store.add(value);
+        value    && store.add(value)
     }
 
     /**
@@ -164,7 +164,7 @@ class List extends BaseList {
      * @protected
      */
     afterSetZIndex(value, oldValue) {
-        this.style = {...this.style, zIndex: value};
+        this.style = {...this.style, zIndex: value}
     }
 
     /**
@@ -174,19 +174,20 @@ class List extends BaseList {
      * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
      */
     createItemContent(record, index) {
-        let me     = this,
-            id     = record[me.store.keyProperty],
-            vdomCn = [{tag: 'span', cls: ['neo-content'], html: record[me.displayField]}];
+        let me      = this,
+            iconCls = record.iconCls,
+            id      = record[me.store.keyProperty],
+            vdomCn  = [{tag: 'span', cls: ['neo-content'], html: record[me.displayField]}];
 
-        if (record.iconCls && record.iconCls !== '') {
-            vdomCn.unshift({tag: 'i', cls: ['neo-menu-icon', 'neo-icon', record.iconCls], id: me.getIconId(id)});
+        if (iconCls && iconCls !== '') {
+            vdomCn.unshift({tag: 'i', cls: ['neo-menu-icon', 'neo-icon', iconCls], id: me.getIconId(id)});
         }
 
         if (me.hasChildren(record)) {
             vdomCn.push({tag: 'i', cls: ['neo-arrow-icon', 'neo-icon', 'fas fa-chevron-right'], id: me.getArrowIconId(id)});
         }
 
-        return vdomCn;
+        return vdomCn
     }
 
     /**
@@ -203,10 +204,10 @@ class List extends BaseList {
 
         Object.entries(subMenuMap).forEach(([key, value]) => {
             value.destroy();
-            subMenuMap[key] = null;
+            subMenuMap[key] = null
         });
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -214,7 +215,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getArrowIconId(recordId) {
-        return `${this.id}__arrow_icon__${recordId}`;
+        return `${this.id}__arrow_icon__${recordId}`
     }
 
     /**
@@ -222,7 +223,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getIconId(recordId) {
-        return `${this.id}__icon__${recordId}`;
+        return `${this.id}__icon__${recordId}`
     }
 
     /**
@@ -231,7 +232,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getMenuMapId(recordId) {
-        return `menu__${recordId}`;
+        return `menu__${recordId}`
     }
 
     /**
@@ -240,7 +241,7 @@ class List extends BaseList {
      * @returns {Boolean}
      */
     hasChildren(record) {
-        return Array.isArray(record.items) && record.items.length > 0;
+        return Array.isArray(record.items) && record.items.length > 0
     }
 
     /**
@@ -252,7 +253,7 @@ class List extends BaseList {
 
         if (activeSubMenu) {
             activeSubMenu.unmount();
-            me.activeSubMenu = null;
+            me.activeSubMenu = null
         }
     }
 
@@ -261,7 +262,7 @@ class List extends BaseList {
      * @param {Object[]} data.path
      */
     onFocusEnter(data) {
-        this.menuFocus = true;
+        this.menuFocus = true
     }
 
     /**
@@ -269,7 +270,17 @@ class List extends BaseList {
      * @param {Object[]} data.oldPath
      */
     onFocusLeave(data) {
-        this.menuFocus = false;
+        this.menuFocus = false
+    }
+
+    /**
+     * @param {Object} node
+     * @param {Object} data
+     */
+    onItemClick(node, data) {
+        super.onItemClick(node, data);
+
+        data.record.handler?.call(this, data)
     }
 
     /**
@@ -283,7 +294,7 @@ class List extends BaseList {
 
         if (me.activeSubMenu !== me.subMenuMap?.[me.getMenuMapId(recordId)]) {
             me.hideSubMenu();
-            me.hasChildren(record) && me.showSubMenu(nodeId, record);
+            me.hasChildren(record) && me.showSubMenu(nodeId, record)
         }
     }
 

package/src/menu/Model.mjs

@@ -19,6 +19,9 @@ class Model extends BaseModel {
          * @member {Object[]} fields
          */
         fields: [{
+            name: 'handler',
+            type: 'Function'
+        }, {
             name: 'iconCls',
             type: 'String'
         }, {

package/src/table/View.mjs

@@ -59,7 +59,7 @@ class View extends Component {
             i          = 0,
             vdom       = me.vdom,
             cellCls, cellId, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
-            record, rendererType, rendererValue, selectedRows, trCls;
+            record, rendererValue, selectedRows, trCls;
 
         me.recordVnodeMap = {}; // remove old data
 
@@ -111,10 +111,9 @@ class View extends Component {
                     value    : rendererValue
                 });
 
-                cellCls      = ['neo-table-cell'];
-                rendererType = Neo.typeOf(rendererOutput);
+                cellCls = ['neo-table-cell'];
 
-                switch (rendererType) {
+                switch (Neo.typeOf(rendererOutput)) {
                     case 'Object': {
                         if (rendererOutput.cls && rendererOutput.html) {
                             cellCls.push(...rendererOutput.cls);
@@ -151,7 +150,7 @@ class View extends Component {
                     tabIndex: '-1'
                 };
 
-                if (rendererType === 'String') {
+                if (Neo.typeOf(rendererOutput) === 'Object') {
                     config.innerHTML = rendererOutput.html  || ''
                 } else {
                     config.cn = rendererOutput
@@ -296,12 +295,15 @@ class View extends Component {
             cellId   = me.getCellId(opts.record, field.name);
             cellNode = me.getVdomChild(cellId);
 
-            cellNode.innerHTML = field.value; // keep the vdom in sync
+            // the vdom might not exist yet => nothing to do in this case
+            if (cellNode) {
+                cellNode.innerHTML = field.value; // keep the vdom in sync
 
-            deltas.push({
-                id       : cellId,
-                innerHTML: field.value
-            })
+                deltas.push({
+                    id       : cellId,
+                    innerHTML: field.value
+                })
+            }
         });
 
         deltas.length > 0 && Neo.applyDeltas(me.appName, deltas);

package/src/tooltip/Base.mjs

@@ -97,7 +97,7 @@ class Base extends Container {
                 mouseleave: me.hideDelayed,
                 delegate  : me.delegate,
                 scope     : me
-            });
+            })
         }
     }
 
@@ -118,7 +118,7 @@ class Base extends Container {
             me.addDomListeners([
                 {mouseenter: me.onMouseEnter, scope: me},
                 {mouseleave: me.onMouseLeave, scope: me}
-            ]);
+            ])
         }
     }
 
@@ -177,7 +177,7 @@ class Base extends Container {
         let me = this;
 
         me.clearTimeout(['dismiss', 'hide', 'show']);
-        me.mounted && me.unmount();
+        me.mounted && me.unmount()
     }
 
     /**
@@ -190,7 +190,7 @@ class Base extends Container {
         if (me.hideDelay) {
             me.hideDelayTaskId = setTimeout(me.hide.bind(me), me.hideDelay, data);
         } else {
-            me.hide(data);
+            me.hide(data)
         }
     }
 
@@ -233,7 +233,7 @@ class Base extends Container {
             me.dismissDelayTaskId = setTimeout(me.hide.bind(me), me.dismissDelay, data);
         }
 
-        !me.mounted && me.mount();
+        !me.mounted && me.render(true)
     }
 
     /**
@@ -244,9 +244,9 @@ class Base extends Container {
         let me = this;
 
         if (me.showDelay) {
-            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data);
+            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data)
         } else {
-            me.show(data);
+            me.show(data)
         }
     }
 }

package/src/util/VDom.mjs

@@ -347,12 +347,11 @@ class VDom extends Base {
      */
     static syncVdomIds(vnode, vdom) {
         if (vnode && vdom) {
-            let childNodes = vdom.childNodes || vdom.cn,
+            let childNodes = vdom.cn,
                 cn, i, len;
 
             if (vnode.id && vnode.id !== vdom.id) {
                 vdom.id = vnode.id;
-                // console.log('vdom id set to', vnode.id);
             }
 
             if (childNodes) {
@@ -362,7 +361,7 @@ class VDom extends Base {
 
                 for (; i < len; i++) {
                     if (vnode.childNodes) {
-                        VDom.syncVdomIds(vnode.childNodes[i], cn[i]);
+                        VDom.syncVdomIds(vnode.childNodes[i], cn[i])
                     }
                 }
             }