neo.mjs 8.12.0 → 8.14.0

package/src/component/Base.mjs

@@ -488,7 +488,7 @@ class Component extends Base {
      * @param {String} value
      */
     addCls(value) {
-        let cls = this.cls;
+        let {cls} = this;
 
         NeoArray.add(cls, value);
         this.cls = cls
@@ -526,6 +526,17 @@ class Component extends Base {
         return this.style = Object.assign(this.style, value)
     }
 
+    /**
+     * Add a new wrapperCls to the top level node
+     * @param {String} value
+     */
+    addWrapperCls(value) {
+        let {wrapperCls} = this;
+
+        NeoArray.add(wrapperCls, value);
+        this.wrapperCls = wrapperCls
+    }
+
     /**
      * Triggered after the appName config got changed
      * @param {String|null} value
@@ -560,11 +571,7 @@ class Component extends Base {
             vdom.cls = cls
         }
 
-        if (me.isVdomUpdating || me.silentVdomUpdate) {
-            me.needsVdomUpdate = true
-        } else if (me.mounted && me.vnode) {
-            me.updateCls(value, oldValue, vdomRoot.id)
-        }
+        me.update()
     }
 
     /**
@@ -1038,7 +1045,7 @@ class Component extends Base {
      * @protected
      */
     afterSetVdom(value, oldValue) {
-        this.updateVdom(value)
+        this.updateVdom()
     }
 
     /**
@@ -1098,9 +1105,9 @@ class Component extends Base {
         value    = value    || [];
 
         let me       = this,
-            vdom     = me.vdom,
+            {vdom}   = me,
             vdomRoot = me.getVdomRoot(),
-            cls      = me.vdom?.cls || [];
+            cls      = vdom.cls || [];
 
         if (vdom === vdomRoot) {
             // we need to merge changes
@@ -1114,9 +1121,7 @@ class Component extends Base {
             oldValue && NeoArray.remove(cls, oldValue);
             NeoArray.add(cls, value);
 
-            if (vdom) {
-                vdom.cls = cls
-            }
+            vdom.cls = cls
         }
 
         me.update()
@@ -1545,15 +1550,14 @@ class Component extends Base {
 
     /**
      * Internal method to send update requests to the vdom worker
-     * @param {Object} vdom
-     * @param {Neo.vdom.VNode} vnode
      * @param {function} [resolve] used by promiseUpdate()
      * @param {function} [reject] used by promiseUpdate()
      * @private
      */
-    #executeVdomUpdate(vdom, vnode, resolve, reject) {
-        let me   = this,
-            opts = {},
+    #executeVdomUpdate(resolve, reject) {
+        let me            = this,
+            {vdom, vnode} = me,
+            opts          = {},
             deltas;
 
         if (currentWorker.isSharedWorker) {
@@ -1576,8 +1580,6 @@ class Component extends Base {
 
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;
-            console.log('Error attempting to update component dom', err, me);
-
             reject?.()
         }).then(data => {
             me.isVdomUpdating = false;
@@ -2197,8 +2199,6 @@ class Component extends Base {
             me._rendered = true; // silent update
             me.fire('rendered', me.id);
 
-            // console.log('rendered: ' + me.appName + ' ' + me.id, me);
-
             if (autoMount) {
                 me.mounted = true;
 
@@ -2212,13 +2212,11 @@ class Component extends Base {
 
     /**
      * Promise based vdom update
-     * @param {Object} vdom=this.vdom
-     * @param {Neo.vdom.VNode} vnode= this.vnode
      * @returns {Promise<any>}
      */
-    promiseUpdate(vdom=this.vdom, vnode=this.vnode) {
+    promiseUpdate() {
         return new Promise((resolve, reject) => {
-            this.updateVdom(vdom, vnode, resolve, reject)
+            this.updateVdom(resolve, reject)
         })
     }
 
@@ -2586,34 +2584,6 @@ class Component extends Base {
         this.afterSetVdom(this.vdom, null)
     }
 
-    /**
-     * Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
-     * @param {String[]} cls
-     * @param {String[]} oldCls
-     * @param {String} id=this.id
-     * @protected
-     */
-    updateCls(cls, oldCls, id=this.id) {
-        let me          = this,
-            {vnode}     = me,
-            vnodeTarget = vnode && VNodeUtil.find(me.vnode, {id})?.vnode;
-
-        if (vnode && !Neo.isEqual(cls, oldCls)) {
-            if (vnodeTarget) {
-                vnodeTarget.className = cls; // keep the vnode in sync
-                me.vnode = vnode;
-            }
-
-            Neo.applyDeltas(me.appName, {
-                id,
-                cls: {
-                    add   : NeoArray.difference(cls, oldCls),
-                    remove: NeoArray.difference(oldCls, cls)
-                }
-            })
-        }
-    }
-
     /**
      * Creates the style deltas for newValue & oldValue and applies them directly to the DOM.
      * @param {Object|String} value
@@ -2668,15 +2638,13 @@ class Component extends Base {
 
     /**
      * Gets called after the vdom config gets changed in case the component is already mounted (delta updates).
-     * @param {Object} vdom=this.vdom
-     * @param {Neo.vdom.VNode} vnode=this.vnode
      * @param {function} [resolve] used by promiseUpdate()
      * @param {function} [reject] used by promiseUpdate()
      * @protected
      */
-    updateVdom(vdom=this.vdom, vnode=this.vnode, resolve, reject) {
-        let me                       = this,
-            {app, mounted, parentId} = me,
+    updateVdom(resolve, reject) {
+        let me                              = this,
+            {app, mounted, parentId, vnode} = me,
             listenerId;
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
@@ -2690,7 +2658,7 @@ class Component extends Base {
                     app.un('mounted', listenerId);
 
                     me.timeout(50).then(() => {
-                        me.vnode && me.updateVdom(me.vdom, me.vnode, resolve, reject)
+                        me.vnode && me.updateVdom(resolve, reject)
                     })
                 })
             } else {
@@ -2707,10 +2675,10 @@ class Component extends Base {
                     // Verify that the critical rendering path => CSS files for the new tree is in place
                     if (currentWorker.countLoadingThemeFiles !== 0) {
                         currentWorker.on('themeFilesLoaded', function() {
-                            me.updateVdom(vdom, vnode, resolve, reject)
+                            me.updateVdom(resolve, reject)
                         }, me, {once: true})
                     } else {
-                        me.#executeVdomUpdate(vdom, vnode, resolve, reject)
+                        me.#executeVdomUpdate(resolve, reject)
                     }
                 }
             }

package/src/component/DateSelector.mjs

@@ -547,7 +547,7 @@ class DateSelector extends Component {
                     vdom.cn[2].cn[0].cn[scrollFromTop ? 'unshift' : 'push'](vdom.cn[1]);
                     vdom.cn.splice(1, 1);
 
-                    me.promiseUpdate(vdom).then(() => {
+                    me.promiseUpdate().then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();

package/src/component/Gallery.mjs

@@ -441,7 +441,7 @@ class Gallery extends Component {
             itemsRoot.cn.push(vdomItem)
         }
 
-        me.promiseUpdate(vdom).then(() => {
+        me.promiseUpdate().then(() => {
             me[itemsMounted] = true
         })
     }

package/src/component/Helix.mjs

@@ -597,7 +597,7 @@ class Helix extends Component {
 
             me[lockWheel] = true;
 
-            me.promiseUpdate(vdom).then(() => {
+            me.promiseUpdate().then(() => {
                 me[itemsMounted] = true;
                 me.fire('itemsMounted');
 

package/src/data/Model.mjs

@@ -50,14 +50,6 @@ class Model extends Base {
      */
     hasNestedFields = false
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-        RecordFactory.createRecordClass(this)
-    }
-
     /**
      Triggered after the fields config got changed
      * @param {Object[]|null} value

package/src/draggable/DragZone.mjs

@@ -184,9 +184,11 @@ class DragZone extends Base {
     }
 
     /**
-     * @param {Object} data
+     * @param {Object}  data
+     * @param {Boolean} createComponent=true
+     * @returns {Object|Neo.draggable.DragProxyComponent}
      */
-    createDragProxy(data) {
+    async createDragProxy(data, createComponent=true) {
         let me        = this,
             component = Neo.getComponent(me.getDragElementRoot().id) || me.owner,
             rect      = me.dragElementRect,
@@ -228,7 +230,11 @@ class DragZone extends Base {
             width : `${data.width}px`
         });
 
-        me.dragProxy = Neo.create(config)
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
     }
 
     /**
@@ -304,7 +310,7 @@ class DragZone extends Base {
     /**
      * @param {Object} data
      */
-    dragStart(data) {
+    async dragStart(data) {
         let me                         = this,
             {appName, owner, windowId} = me,
             {cls}                      = owner,
@@ -331,7 +337,7 @@ class DragZone extends Base {
             offsetY
         });
 
-        me.createDragProxy(rect);
+        await me.createDragProxy(rect);
 
         me.fire('dragStart', {
             clientX        : data.clientX,

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -1,5 +1,6 @@
 import BaseSortZone from '../../../toolbar/SortZone.mjs';
 import NeoArray     from  '../../../../util/Array.mjs';
+import VdomUtil     from  '../../../../util/VDom.mjs';
 
 /**
  * @class Neo.draggable.grid.header.toolbar.SortZone
@@ -22,6 +23,10 @@ class SortZone extends BaseSortZone {
          * @protected
          */
         itemMargin: '1px',
+        /**
+         * @member {Boolean} moveColumnContent=true
+         */
+        moveColumnContent: true,
         /**
          * @member {Boolean} moveVertical=false
          */
@@ -37,6 +42,59 @@ class SortZone extends BaseSortZone {
         rect.y = rect.y - parentRect.y - 1
     }
 
+    /**
+     * @param {Object}  data
+     * @param {Boolean} createComponent=true
+     * @returns {Object|Neo.draggable.DragProxyComponent}
+     */
+    async createDragProxy(data, createComponent=true) {
+        if (!this.moveColumnContent) {
+            return await super.createDragProxy(data, createComponent)
+        }
+
+        let me          = this,
+            grid        = me.owner.parent,
+            {view}      = grid,
+            gridRows    = view.getVdomRoot().cn,
+            columnIndex = me.dragElement['aria-colindex'] - 1,
+            {dataField} = view.columnPositions[columnIndex],
+            cells       = view.getColumnCells(dataField),
+            rows        = [],
+            config      = await super.createDragProxy(data, false),
+            rect        = await grid.getDomRect(),
+            row;
+
+        config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
+
+        config.style.height = rect.height + 'px';
+
+        cells.forEach((cell, index) => {
+            row = VdomUtil.clone({cls: gridRows[index].cls, cn: [cell]}); // clone to remove ids
+
+            row.style = {
+                height: view.rowHeight + 'px'
+            };
+
+            delete row.cn[0].style.left;
+
+            rows.push(row)
+        });
+
+        config.vdom =
+        {cn: [
+            {cls: ['neo-grid-container'], cn: [
+                {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
+                {cls: ['neo-grid-view'], cn: rows}
+            ]}
+        ]};
+
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
+    }
+
     /**
      * @param {Number} fromIndex
      * @param {Number} toIndex
@@ -69,6 +127,59 @@ class SortZone extends BaseSortZone {
 
         owner.parent.view.createViewData()
     }
+
+    /**
+     * @param {Object} data
+     */
+    async onDragStart(data) {
+        await super.onDragStart(data);
+
+        if (this.moveColumnContent) {
+            let me          = this,
+                {view}      = me.owner.parent,
+                columnIndex = me.dragElement['aria-colindex'] - 1,
+                {dataField} = view.columnPositions[columnIndex],
+                cells       = view.getColumnCells(dataField);
+
+            cells.forEach(cell => {
+                cell.style.display = 'none'
+            });
+
+            view.update()
+        }
+    }
+
+    /**
+     * @param {Number} index1
+     * @param {Number} index2
+     */
+    switchItems(index1, index2) {
+        if (this.moveColumnContent) {
+            let {view}          = this.owner.parent,
+                columnPositions = view._columnPositions, // no clone
+                column1Cells    = view.getColumnCells(columnPositions[index1].dataField),
+                column2Cells    = view.getColumnCells(columnPositions[index2].dataField),
+                x;
+
+            x = columnPositions[index1].x;
+            columnPositions[index1].x = columnPositions[index2].x;
+            columnPositions[index2].x = x;
+
+            NeoArray.move(columnPositions, index1, index2);
+
+            column1Cells.forEach(node => {
+                node.style.left = columnPositions[index2].x + 'px'
+            });
+
+            column2Cells.forEach(node => {
+                node.style.left = columnPositions[index1].x + 'px'
+            });
+
+            view.update()
+        }
+
+        super.switchItems(index1, index2);
+    }
 }
 
 export default Neo.setupClass(SortZone);

package/src/draggable/list/DragZone.mjs

@@ -114,12 +114,12 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
             me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 

package/src/draggable/tab/header/toolbar/SortZone.mjs

@@ -53,7 +53,7 @@ class SortZone extends BaseSortZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me      = this,
             {owner} = me,
             cls     = owner.cls || [];
@@ -61,7 +61,7 @@ class SortZone extends BaseSortZone {
         NeoArray.add(cls, 'neo-no-animation');
         owner.cls = cls;
 
-        super.onDragStart(data)
+        await super.onDragStart(data)
     }
 }
 

package/src/draggable/toolbar/DragZone.mjs

@@ -52,7 +52,7 @@ class DragZone extends BaseDragZone {
         owner.items.forEach(item => {
             wrapperCls = item.wrapperCls || [];
 
-            NeoArray[draggable ? 'add' : 'remove'](wrapperCls, 'neo-draggable');
+            NeoArray.toggle(wrapperCls, 'neo-draggable', draggable);
             item.wrapperCls = wrapperCls
         })
     }
@@ -88,12 +88,12 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
             me.dragElement = VDomUtil.find(me.owner.vdom, data.path[0].id).vdom;
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 

package/src/draggable/toolbar/SortZone.mjs

@@ -178,7 +178,7 @@ class SortZone extends DragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me         = this,
             button     = Neo.getComponent(data.path[0].id),
             {owner}    = me,
@@ -202,7 +202,7 @@ class SortZone extends DragZone {
                 startIndex             : index
             });
 
-            me.dragStart(data); // we do not want to trigger the super class call here
+            await me.dragStart(data); // we do not want to trigger the super class call here
 
             owner.items.forEach((item, index) => {
                 indexMap[index] = index;

package/src/draggable/tree/DragZone.mjs

@@ -81,7 +81,7 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} data
      */
-    onDragStart(data) {
+    async onDragStart(data) {
         let me = this;
 
         if (me.owner.draggable) {
@@ -91,7 +91,7 @@ class DragZone extends BaseDragZone {
                 cn : [VDomUtil.find(me.owner.vdom, data.path[0].id).vdom]
             };
 
-            me.dragStart(data)
+            await me.dragStart(data)
         }
     }
 }

package/src/grid/Container.mjs

@@ -70,11 +70,6 @@ class GridContainer extends BaseContainer {
          * @member {Number} rowHeight_=32
          */
         rowHeight_: 32,
-        /**
-         * @member {String|null} scrollbarId_=null
-         * @protected
-         */
-        scrollbarId_: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -125,14 +120,6 @@ class GridContainer extends BaseContainer {
         return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
     }
 
-    /**
-     * Convenience method to access the Neo.grid.Scrollbar
-     * @returns {Neo.grid.Scrollbar|null}
-     */
-    get scrollbar() {
-        return Neo.getComponent(this.scrollbarId) || Neo.get(this.scrollbarId)
-    }
-
     /**
      * Convenience method to access the Neo.grid.View
      * @returns {Neo.grid.View|null}
@@ -151,20 +138,17 @@ class GridContainer extends BaseContainer {
             {rowHeight, store} = me;
 
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
-        me.scrollbarId     = Neo.getId('grid-scrollbar');
         me.viewId          = Neo.getId('grid-view');
 
         me.items = [{
             module           : header.Toolbar,
-            gridContainer    : me,
             id               : me.headerToolbarId,
             showHeaderFilters: me.showHeaderFilters,
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module     : GridView,
-            containerId: me.id,
-            id         : me.viewId,
+            module: GridView,
+            id    : me.viewId,
             rowHeight,
             store,
             ...me.viewConfig