neo.mjs 6.8.2 → 6.9.0

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}
      */

package/src/tooltip/Base.mjs

@@ -1,6 +1,8 @@
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
 
+let singletons = {};
+
 /**
  * Base class for component tooltips
  * @class Neo.tooltip.Base
@@ -44,6 +46,10 @@ class Base extends Container {
          * @protected
          */
         dismissDelayTaskId: null,
+        /**
+         * @member {Boolean} floating=true
+         */
+        floating: true,
         /**
          * The delay in ms before the tooltip gets shown
          * @member {Number|null} hideDelay=400
@@ -78,6 +84,18 @@ class Base extends Container {
         text_: null
     }
 
+    /**
+     * @param {String} id
+     * @param {Function} callback
+     * @param {Number} delay
+     */
+    addTimeout(id, callback, delay) {
+        id += 'DelayTaskId';
+
+        this.clearTimeout(this[id]);
+        this[id] = setTimeout(callback, delay);
+    }
+
     /**
      * Triggered after the componentId config got changed
      * @param {String} value
@@ -93,8 +111,8 @@ class Base extends Container {
             let me = this;
 
             Neo.getComponent(value).addDomListeners({
-                mouseenter: me.showDelayed,
-                mouseleave: me.hideDelayed,
+                mouseenter: me.onDelegateMouseEnter,
+                mouseleave: me.onDelegateMouseLeave,
                 delegate  : me.delegate,
                 scope     : me
             })
@@ -137,12 +155,10 @@ class Base extends Container {
             if (item?.ntype === 'label') {
                 item.text = value;
             } else {
-                items.push({
+                me.add({
                     module: Label,
                     text  : value
                 });
-
-                me.items = items;
             }
         }
     }
@@ -169,11 +185,48 @@ class Base extends Container {
         });
     }
 
+    /**
+     * @param {Neo.controller.Application} app
+     * @returns {Neo.tooltip.Base}
+     */
+    static createSingleton(app) {
+        if (!singletons[app.name]) {
+            singletons[app.name] = Neo.create('Neo.tooltip.Base', {
+                appName     : app.name,
+                componentId : app.mainView.id,
+                resetCfg    : {},
+                isShared    : true,
+                delegate    : '.neo-uses-shared-tooltip',
+                listeners : {
+                    // Reconfigure on over a target
+                    async targetOver({ target }) {
+                        // Revert last pointerOver config set to initial setting.
+                        this.set(this.resetCfg);
+                        this.resetCfg = {};
+
+                        // Use the tooltip config block that the target was configured with
+                        // to reconfogure tis instance
+                        const config = target?._tooltip;
+
+                        // Cache things we have to reset
+                        for (const key in config) {
+                            this.resetCfg[key] = this[key];
+                        }
+
+                        // Set ourself up as the target wants
+                        this.set(config);
+                    }
+                }
+            });
+        }
+
+        return singletons[app.name];
+    }
+
     /**
      * Instantly hides the tooltip
-     * @param {Object|null} data
      */
-    hide(data) {
+    hide() {
         let me = this;
 
         me.clearTimeout(['dismiss', 'hide', 'show']);
@@ -188,12 +241,59 @@ class Base extends Container {
         let me = this;
 
         if (me.hideDelay) {
-            me.hideDelayTaskId = setTimeout(me.hide.bind(me), me.hideDelay, data);
+            me.addTimeout('hide', me.hide.bind(me), me.hideDelay);
         } else {
             me.hide(data)
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onDelegateMouseEnter(data) {
+        const
+            me = this,
+            {
+                currentTarget
+            }  = data;
+
+        // If it's an internal move within the delegate, do nothing
+        if (currentTarget !== me.activeTarget?.id) {
+            me.activeTarget = Neo.get(currentTarget);
+            me.align.target = currentTarget;
+            me.align.targetMargin = 10;
+
+            me.fire('targetOver', {
+                target : me.activeTarget
+            });
+
+            // Still visible, just realign
+            if (me.mounted) {
+                me.show();
+                me.alignTo();
+            }
+            else {
+                me.showDelayed(data);
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onDelegateMouseLeave(data) {
+        const me = this;
+
+        // If it's an internal move within the delegate, do nothing
+        if (data.currentTarget === me.activeTarget?.id) {
+            me.fire('targetOut', {
+                target : this.activeTarget
+            });
+            me.activeTarget = null;
+            me.hideDelayed(data);
+        }
+    }
+
     /**
      * mouseenter event listener for the tooltip element
      * @param {Object} data
@@ -227,10 +327,10 @@ class Base extends Container {
 
         me.showDelayTaskId = null;
 
-        me.clearTimeout('hide');
+        me.clearTimeout(['hide', 'dismiss']);
 
         if (me.dismissDelay) {
-            me.dismissDelayTaskId = setTimeout(me.hide.bind(me), me.dismissDelay, data);
+            me.addTimeout('dismiss', me.hide.bind(me), me.dismissDelay, data);
         }
 
         !me.mounted && me.render(true)
@@ -244,7 +344,7 @@ class Base extends Container {
         let me = this;
 
         if (me.showDelay) {
-            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data)
+            me.addTimeout('show', me.show.bind(me), me.showDelay)
         } else {
             me.show(data)
         }