neo.mjs 6.8.3 → 6.9.1

package/src/form/field/Text.mjs

@@ -367,8 +367,9 @@ class Text extends Base {
             { cls } = me;
 
         NeoArray.toggle(cls, 'neo-not-editable', !value);
-        me.cls = cls
-        me.changeInputElKey('readonly', value ? false : true);
+        me.cls = cls;
+
+        me.updateReadOnlyState()
     }
 
     /**
@@ -675,7 +676,7 @@ class Text extends Base {
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-readonly');
         me.cls = cls;
 
-        me.changeInputElKey('readonly', value ? value : null);
+        me.updateReadOnlyState();
 
         me.triggers?.forEach(trigger => {
             trigger.hidden = value ? true : trigger.getHiddenState?.() || false
@@ -1440,6 +1441,15 @@ class Text extends Base {
         me.update()
     }
 
+    /**
+     * The DOM based readonly attribute needs to honor the editable & readOnly configs
+     */
+    updateReadOnlyState() {
+        let me = this;
+
+        me.changeInputElKey('readonly', !me.editable || me.readOnly || null);
+    }
+
     /**
      * Since triggers do not get rendered, assign the relevant props
      * todo: this could be handled by component.Base

package/src/form/field/trigger/Picker.mjs

@@ -34,14 +34,7 @@ class Picker extends Base {
      */
     onTriggerClick(data) {
         this.field.onPickerTriggerClick();
-    }
-
-    /**
-     * @returns {Boolean} true in case the trigger should be hidden
-     */
-    getHiddenState() {
-        return !this.field.editable;
-    }    
+    } 
 }
 
 Neo.applyClassConfig(Picker);

package/src/main/DomEvents.mjs

@@ -262,12 +262,18 @@ class DomEvents extends Base {
             path = event.path;
         }
 
-        return {
+        const result = {
             path     : path.map(e => this.getTargetData(e)),
             target   : this.getTargetData(event.target),
             timeStamp: event.timeStamp,
             type     : event.type
+        };
+
+        if (event.relatedTarget) {
+            result.relatedTarget = this.getTargetData(event.relatedTarget);
         }
+
+        return result;
     }
 
     /**
@@ -552,7 +558,7 @@ class DomEvents extends Base {
      */
     onMouseEnter(event) {
         let me       = this,
-            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null};
+            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null, toElementId: event.toElement?.id || null};
 
         me.sendMessageToApp(appEvent);
         me.fire('mouseEnter', appEvent)
@@ -563,7 +569,7 @@ class DomEvents extends Base {
      */
     onMouseLeave(event) {
         let me       = this,
-            appEvent = {...me.getMouseEventData(event), toElementId: event.toElement?.id || null};
+            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null, toElementId: event.toElement?.id || null};
 
         me.sendMessageToApp(appEvent);
         me.fire('mouseLeave', appEvent)

package/src/manager/DomEvent.mjs

@@ -127,6 +127,9 @@ class DomEvent extends Base {
                                     data = Neo.clone(data, true, true);
 
                                     data.component = component;
+
+                                    // Handler needs to know which actual target matched the delegate
+                                    data.currentTarget = delegationTargetId;
                                     listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {
@@ -429,34 +432,44 @@ class DomEvent extends Base {
      * @returns {Boolean|String} true in case the delegation string matches the event path
      */
     verifyDelegationPath(listener, path) {
-        let delegationArray = listener.delegate.split(' '),
-            j               = 0,
-            len             = delegationArray.length,
-            pathLen         = path.length,
-            hasMatch, i, item, isId, targetId;
-
-        for (i=len-1; i >= 0; i--) {
-            hasMatch = false;
-            item     = delegationArray[i];
-            isId     = item.startsWith('#');
-
-            if (isId || item.startsWith('.')) {
-                item = item.substr(1);
+        const { delegate } = listener;
+
+        let j = 0, pathLen = path.length, targetId;
+
+        if (typeof delegate === 'function') {
+            j = delegate(path);
+            if (j != null) {
+                targetId = path[j].id;
             }
+        }
+        else {
+            let delegationArray = delegate.split(' '),
+                len             = delegationArray.length,
+                hasMatch, i, item, isId;
+
+            for (i=len-1; i >= 0; i--) {
+                hasMatch = false;
+                item     = delegationArray[i];
+                isId     = item.startsWith('#');
+
+                if (isId || item.startsWith('.')) {
+                    item = item.substr(1);
+                }
 
-            for (; j < pathLen; j++) {
-                if (
-                    (isId && path[j].id === item) ||
-                    path[j].cls.includes(item)
-                ) {
-                    hasMatch = true;
-                    targetId = path[j].id;
-                    break
+                for (; j < pathLen; j++) {
+                    if (
+                        (isId && path[j].id === item) ||
+                        path[j].cls.includes(item)
+                    ) {
+                        hasMatch = true;
+                        targetId = path[j].id;
+                        break
+                    }
                 }
-            }
 
-            if (!hasMatch) {
-                return false
+                if (!hasMatch) {
+                    return false
+                }
             }
         }
 

package/src/menu/List.mjs

@@ -311,7 +311,7 @@ class List extends BaseList {
                 record   = me.store.get(recordId),
                 submenu;
 
-            record.handler?.call(me, record);
+            me.callback(record.handler, me, [record]);
 
             record.route && Neo.Main.setRoute({
                 appName: me.appName,

package/src/table/View.mjs

@@ -21,6 +21,11 @@ class View extends Component {
          * @member {String[]} baseCls=['neo-table-view']
          */
         baseCls: ['neo-table-view'],
+        /**
+         * Define which model field contains the value of colspan definitions
+         * @member {String} colspanField='colspan'
+         */
+        colspanField: 'colspan',
         /**
          * @member {String|null} containerId=null
          * @protected
@@ -46,16 +51,19 @@ class View extends Component {
     }
 
     /**
-     * @param {String} cellId
-     * @param {Object} column
-     * @param {Object} record
-     * @param {Number} index
-     * @param {Neo.table.Container} tableContainer
+     * @param {Object} data
+     * @param {String} [data.cellId]
+     * @param {Object} data.column
+     * @param {Object} data.record
+     * @param {Number} data.index
+     * @param {Neo.table.Container} data.tableContainer
      * @returns {Object}
      */
-    applyRendererOutput(cellId, column, record, index, tableContainer) {
-        let me         = this,
+    applyRendererOutput(data) {
+        let {cellId, column, record, index, tableContainer} = data,
+            me         = this,
             cellCls    = ['neo-table-cell'],
+            colspan    = record[me.colspanField],
             dataField  = column.dataField,
             fieldValue = record[dataField],
             hasStore   = tableContainer.store?.model, // todo: remove as soon as all tables use stores (examples table)
@@ -77,8 +85,8 @@ class View extends Component {
 
         switch (Neo.typeOf(rendererOutput)) {
             case 'Object': {
-                if (rendererOutput.cls && rendererOutput.html) {
-                    cellCls.push(...rendererOutput.cls);
+                if (rendererOutput.html) {
+                    rendererOutput.cls && cellCls.push(...rendererOutput.cls);
                 } else {
                     rendererOutput = [rendererOutput];
                 }
@@ -107,7 +115,7 @@ class View extends Component {
             if (hasStore) {
                 cellId = me.getCellId(record, column.dataField)
             } else {
-                cellId = vdom.cn[i]?.cn[j]?.id || Neo.getId('td')
+                cellId = vdom.cn[index]?.cn[me.getColumn(column.dataField, true)]?.id || Neo.getId('td')
             }
         }
 
@@ -119,6 +127,10 @@ class View extends Component {
             tabIndex: '-1'
         };
 
+        if (colspan && Object.keys(colspan).includes(dataField)) {
+            cellConfig.colspan = colspan[dataField]
+        }
+
         if (Neo.typeOf(rendererOutput) === 'Object') {
             cellConfig.innerHTML = rendererOutput.html  || ''
         } else {
@@ -129,29 +141,28 @@ class View extends Component {
     }
 
     /**
-     * @param {Array} inputData
+     * @param {Object[]} inputData
      */
     createViewData(inputData) {
-        let me         = this,
-            amountRows = inputData.length,
-            container  = me.parent,
-            columns    = container.items[0].items,
-            colCount   = columns.length,
-            data       = [],
-            i          = 0,
-            vdom       = me.vdom,
-            config, column, dockLeftMargin, dockRightMargin, id, index, j,
-            record, selectedRows, trCls;
-
-        me.recordVnodeMap = {}; // remove old data
-
-        if (container.selectionModel.ntype === 'selection-table-rowmodel') {
-            selectedRows = container.selectionModel.items || [];
+        let me             = this,
+            amountRows     = inputData.length,
+            tableContainer = me.parent,
+            columns        = tableContainer.items[0].items,
+            colCount       = columns.length,
+            data           = [],
+            i              = 0,
+            vdom           = me.vdom,
+            config, colspan, colspanKeys, column, dockLeftMargin, dockRightMargin, id, index, j, record, selectedRows, trCls;
+
+        if (tableContainer.selectionModel.ntype === 'selection-table-rowmodel') {
+            selectedRows = tableContainer.selectionModel.items || [];
         }
 
         for (; i < amountRows; i++) {
-            record = inputData[i];
-            id     = me.getRowId(record, i);
+            record      = inputData[i];
+            colspan     = record[me.colspanField];
+            colspanKeys = colspan && Object.keys(colspan);
+            id          = me.getRowId(record, i);
 
             me.recordVnodeMap[id] = i;
 
@@ -180,7 +191,7 @@ class View extends Component {
 
             for (; j < colCount; j++) {
                 column = columns[j];
-                config = me.applyRendererOutput(null, column, record, i, container);
+                config = me.applyRendererOutput({column, record, index: i, tableContainer});
 
                 if (column.dock) {
                     config.cls = ['neo-locked', ...config.cls || []];
@@ -196,6 +207,10 @@ class View extends Component {
                 }
 
                 data[i].cn.push(config);
+
+                if (colspanKeys?.includes(column.dataField)) {
+                    j += (colspan[column.dataField] - 1)
+                }
             }
 
             j = 0;
@@ -208,13 +223,16 @@ class View extends Component {
                     data[i].cn[index].style.right = dockRightMargin + 'px';
                     dockRightMargin += (column.width + 1); // todo: borders fix
                 }
+
+                if (colspanKeys?.includes(column.dataField)) {
+                    j += (colspan[column.dataField] - 1)
+                }
             }
         }
 
         vdom.cn = data;
 
-        container.dockLeftMargin  = dockLeftMargin;
-        container.dockRightMargin = dockRightMargin;
+        Object.assign(tableContainer, {dockLeftMargin, dockRightMargin});
 
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
@@ -243,11 +261,12 @@ class View extends Component {
     }
 
     /**
-     * Get a table column by a given field name
+     * Get a table column or column index by a given field name
      * @param {String} field
-     * @returns {Object|null}
+     * @param {Boolean} returnIndex=false
+     * @returns {Object|Number|null}
      */
-    getColumn(field) {
+    getColumn(field, returnIndex=false) {
         let container = this.parent,
             columns   = container.items[0].items, // todo: we need a shortcut for accessing the header toolbar
             i         = 0,
@@ -258,7 +277,7 @@ class View extends Component {
             column = columns[i];
 
             if (column.dataField === field) {
-                return column
+                return returnIndex ? i : column
             }
         }
 
@@ -336,26 +355,32 @@ class View extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange(opts) {
-        let me          = this,
-            container   = me.parent,
-            needsUpdate = false,
-            vdom        = me.vdom,
+        let me             = this,
+            fieldNames     = opts.fields.map(field => field.name),
+            needsUpdate    = false,
+            tableContainer = me.parent,
+            vdom           = me.vdom,
             cellId, cellNode, column, index, scope;
 
-        opts.fields.forEach(field => {
-            cellId   = me.getCellId(opts.record, field.name);
-            cellNode = VDomUtil.findVdomChild(vdom, cellId);
-
-            // the vdom might not exist yet => nothing to do in this case
-            if (cellNode?.vdom) {
-                column      = me.getColumn(field.name);
-                index       = cellNode.index;
-                needsUpdate = true;
-                scope       = column.rendererScope || container;
-
-                cellNode.parentNode.cn[index] = me.applyRendererOutput(cellId, column, opts.record, index, container)
-            }
-        });
+        if (fieldNames.includes(me.colspanField)) {
+            // we should narrow it down to only update the current row
+            me.createViewData(me.store.items)
+        } else {
+            opts.fields.forEach(field => {
+                cellId   = me.getCellId(opts.record, field.name);
+                cellNode = VDomUtil.findVdomChild(vdom, cellId);
+
+                // the vdom might not exist yet => nothing to do in this case
+                if (cellNode?.vdom) {
+                    column      = me.getColumn(field.name);
+                    index       = cellNode.index;
+                    needsUpdate = true;
+                    scope       = column.rendererScope || tableContainer;
+
+                    cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                }
+            })
+        }
 
         needsUpdate && me.update()
     }

package/src/toolbar/Paging.mjs

@@ -41,15 +41,75 @@ class Paging extends Toolbar {
         /**
          * @member {Function} totalText_=count=>`Total: ${count} records`
          */
-        totalText_: count => `Total: ${count} rows`
-    }
+        totalText_: count => `Total: ${count} rows`,
+        /**
+         * @member {Object|Object[]} items
+         */
+        items: {
+            'nav-button-first': {
+                handler  : 'up.onFirstPageButtonClick',
+                iconCls  : 'fa fa-angles-left'
+            },
+            'nav-button-prev': {
+                handler  : 'up.onPrevPageButtonClick',
+                iconCls  : 'fa fa-angle-left',
+                style    : {marginLeft: '2px'}
+            },
+            'pages-text': {
+                ntype    : 'label',
+                style    : {marginLeft: '10px'}
+            },
+            'nav-button-next': {
+                handler  : 'up.onNextPageButtonClick',
+                iconCls  : 'fa fa-angle-right',
+                style    : {marginLeft: '10px'}
+            },
+            'nav-button-last': {
+                handler  : 'up.onLastPageButtonClick',
+                iconCls  : 'fa fa-angles-right',
+                style    : {marginLeft: '2px'}
+            },
+            label: {
+                ntype: 'label',
+                style: {marginLeft: '50px'},
+                text : 'Rows per page:'
+            },
+            rowsPerPage: {
+                module       : SelectField,
+                clearable    : false,
+                hideLabel    : true,
+                listConfig   : {highlightFilterValue: false},
+                listeners    : {change: 'up.onPageSizeFieldChange'},
+                style        : {margin: 0},
+                triggerAction: 'all',
+                useFilter    : false,
+                value        : 30,
+                width        : 70,
 
-    /**
-     * @param config
-     */
-    construct(config) {
-        super.construct(config);
-        this.createToolbarItems();
+                store: {
+                    model: {
+                        fields: [
+                            {name: 'id',   type: 'Integer'},
+                            {name: 'name', type: 'Integer'}
+                        ]
+                    },
+                    data: [
+                        {id: 1, name:  10},
+                        {id: 2, name:  20},
+                        {id: 3, name:  30},
+                        {id: 4, name:  50},
+                        {id: 5, name: 100}
+                    ]
+                }
+            },
+            spacer: {
+                ntype: 'component',
+                flex : 1
+            },
+            'total-text': {
+                ntype: 'label'
+            }
+        }
     }
 
     /**
@@ -115,74 +175,6 @@ class Paging extends Toolbar {
         return ClassSystemUtil.beforeSetInstance(value, null, {listeners});
     }
 
-    /**
-     *
-     */
-    createToolbarItems() {
-        let me = this;
-
-        me.items = [{
-            handler  : me.onFirstPageButtonClick.bind(me),
-            iconCls  : 'fa fa-angles-left',
-            reference: 'nav-button-first'
-        }, {
-            handler  : me.onPrevPageButtonClick.bind(me),
-            iconCls  : 'fa fa-angle-left',
-            reference: 'nav-button-prev',
-            style    : {marginLeft: '2px'}
-        }, {
-            ntype    : 'label',
-            reference: 'pages-text',
-            style    : {marginLeft: '10px'},
-            text     : me.pagesText(me)
-        }, {
-            handler  : me.onNextPageButtonClick.bind(me),
-            iconCls  : 'fa fa-angle-right',
-            reference: 'nav-button-next',
-            style    : {marginLeft: '10px'}
-        }, {
-            handler  : me.onLastPageButtonClick.bind(me),
-            iconCls  : 'fa fa-angles-right',
-            reference: 'nav-button-last',
-            style    : {marginLeft: '2px'}
-        }, {
-            ntype: 'label',
-            style: {marginLeft: '50px'},
-            text : 'Rows per page:'
-        }, {
-            module       : SelectField,
-            clearable    : false,
-            hideLabel    : true,
-            listConfig   : {highlightFilterValue: false},
-            listeners    : {change: me.onPageSizeFieldChange.bind(me)},
-            style        : {margin: 0},
-            triggerAction: 'all',
-            useFilter    : false,
-            value        : 30,
-            width        : 70,
-
-            store: {
-                model: {
-                    fields: [
-                        {name: 'id',   type: 'Integer'},
-                        {name: 'name', type: 'Integer'}
-                    ]
-                },
-                data: [
-                    {id: 1, name:  10},
-                    {id: 2, name:  20},
-                    {id: 3, name:  30},
-                    {id: 4, name:  50},
-                    {id: 5, name: 100}
-                ]
-            }
-        }, '->', {
-            ntype    : 'label',
-            reference: 'total-text',
-            text     : me.totalText(me.store.totalCount)
-        }];
-    }
-
     /**
      * @returns {Number}
      */