neo.mjs 8.14.1 → 8.14.3

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-03",
+      "datePublished": "2025-02-04",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.14.1'
+                html  : 'v8.14.3'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.14.1",
+    "version": "8.14.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/draggable/grid/header/toolbar/SortZone.scss

@@ -14,6 +14,10 @@
 .neo-dragproxy {
     .neo-grid-container {
         border: none;
+
+        * {
+            scrollbar-width: none;
+        }
     }
 
     .neo-grid-header-toolbar {
@@ -23,10 +27,6 @@
             border-right: 1px solid var(--grid-container-border-color);
         }
     }
-
-    .neo-grid-row {
-        position: unset;
-    }
 }
 
 .neo-grid-header-toolbar {

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.14.1'
+     * @default '8.14.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.14.1'
+    version: '8.14.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/container/Base.mjs

@@ -272,11 +272,11 @@ class Container extends Component {
 
                 item.reference = ref;
                 result.push(item);
-                hasWeight ||= ('weight' in item);
+                hasWeight ||= ('weight' in item)
             }
 
             if (hasWeight) {
-                result.sort(byWeight);
+                result.sort(byWeight)
             }
 
             value = result
@@ -413,7 +413,9 @@ class Container extends Component {
 
         // We need to add items into the vdom
         me.updateDepth = -1;
-        me.update()
+        me.update();
+
+        me.fire('itemsCreated', {id: me.id, items})
     }
 
     /**

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

@@ -19,7 +19,7 @@ class SortZone extends BaseSortZone {
          */
         ntype: 'grid-header-toolbar-sortzone',
         /**
-         * @member {String|null} itemMargin=null
+         * @member {String|null} itemMargin='1px'
          * @protected
          */
         itemMargin: '1px',
@@ -52,28 +52,29 @@ class SortZone extends BaseSortZone {
             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(),
+        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(),
+            viewWrapperId = Neo.getId('grid-view-wrapper'),
             row;
 
         config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
 
-        config.style.height = rect.height + 'px';
+        config.style.height = `${rect.height - 2}px`; // minus border-bottom & border-top
 
         cells.forEach((cell, index) => {
-            row = VdomUtil.clone({cls: gridRows[index].cls, cn: [cell]}); // clone to remove ids
-
-            row.style = {
-                height: view.rowHeight + 'px'
-            };
+            row = VdomUtil.clone({ // clone to remove ids
+                cls  : gridRows[index].cls,
+                cn   : [cell],
+                style: gridRows[index].style
+            });
 
             delete row.cn[0].style.left;
 
@@ -84,10 +85,24 @@ class SortZone extends BaseSortZone {
         {cn: [
             {cls: ['neo-grid-container'], cn: [
                 {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
-                {cls: ['neo-grid-view'], cn: rows}
+                {cls: ['neo-grid-view-wrapper'], id: viewWrapperId, cn: [
+                    {cls: ['neo-grid-view'], cn: rows},
+                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[1].height}}
+                ]}
             ]}
         ]};
 
+        config.listeners = {
+            mounted() {
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : viewWrapperId,
+                    value    : view.scrollPosition.y,
+                    windowId : this.windowId
+                })
+            }
+        };
+
         if (createComponent) {
             return me.dragProxy = Neo.create(config)
         }
@@ -154,31 +169,40 @@ class SortZone extends BaseSortZone {
      * @param {Number} index2
      */
     switchItems(index1, index2) {
+        super.switchItems(index1, index2);
+
         if (this.moveColumnContent) {
-            let {view}          = this.owner.parent,
+            let me              = this,
+                {itemRects}     = me,
+                {view}          = me.owner.parent,
                 columnPositions = view._columnPositions, // no clone
                 column1Cells    = view.getColumnCells(columnPositions[index1].dataField),
-                column2Cells    = view.getColumnCells(columnPositions[index2].dataField),
-                x;
+                column2Cells    = view.getColumnCells(columnPositions[index2].dataField);
 
-            x = columnPositions[index1].x;
-            columnPositions[index1].x = columnPositions[index2].x;
-            columnPositions[index2].x = x;
+            Object.assign(columnPositions[index1], {
+                width: itemRects[index2].width,
+                x    : itemRects[index2].x + 1
+            });
+
+            Object.assign(columnPositions[index2], {
+                width: itemRects[index1].width,
+                x    : itemRects[index1].x + 1
+            });
 
             NeoArray.move(columnPositions, index1, index2);
 
             column1Cells.forEach(node => {
-                node.style.left = columnPositions[index2].x + 'px'
+                node.style.left  = columnPositions[index2].x     + 'px';
+                node.style.width = columnPositions[index2].width + 'px'
             });
 
             column2Cells.forEach(node => {
-                node.style.left = columnPositions[index1].x + 'px'
+                node.style.left  = columnPositions[index1].x + 'px';
+                node.style.width = columnPositions[index1].width + 'px'
             });
 
             view.update()
         }
-
-        super.switchItems(index1, index2);
     }
 }
 

package/src/draggable/toolbar/DragZone.mjs

@@ -36,8 +36,13 @@ class DragZone extends BaseDragZone {
             {'drag:start': me.onDragStart, ...opts}
         ]);
 
-        owner.on('insert', me.onItemInsert, me);
+        owner.on({
+            insert      : me.onItemInsert,
+            itemsCreated: me.onItemsCreated,
+            scope       : me
+        });
 
+        // The toolbar items can already be created
         me.adjustToolbarItemCls(true)
     }
 
@@ -98,16 +103,25 @@ class DragZone extends BaseDragZone {
     }
 
     /**
-     * @param {Object} data
-     * @param {Number} data.index
+     * @param {Object}             data
+     * @param {Number}             data.index
      * @param {Neo.component.Base} data.item
      */
     onItemInsert(data) {
-        let {item} = data,
-            cls    = item.cls || [];
+        let {item}     = data,
+            wrapperCls = item.wrapperCls || [];
+
+        NeoArray.add(wrapperCls, 'neo-draggable');
+        item.wrapperCls = wrapperCls
+    }
 
-        NeoArray.add(cls, 'neo-draggable');
-        item.cls = cls
+    /**
+     * @param {Object}               data
+     * @param {String}               data.id
+     * @param {Neo.component.Base[]} data.items
+     */
+    onItemsCreated(data) {console.log('onItemsCreated');
+        this.adjustToolbarItemCls(true)
     }
 }
 

package/src/draggable/toolbar/SortZone.mjs

@@ -61,6 +61,14 @@ class SortZone extends DragZone {
          * @protected
          */
         reversedLayoutDirection: false,
+        /**
+         * @member {Number} scrollLeft=0
+         */
+        scrollLeft: 0,
+        /**
+         * @member {Number} scrollTop=0
+         */
+        scrollTop: 0,
         /**
          * Internal flag: onDragStart() will set the value to horizontal or vertical, depending on the current layout.
          * @member {String} sortDirection='horizontal'
@@ -142,35 +150,38 @@ class SortZone extends DragZone {
      * @param {Object} data
      */
     onDragMove(data) {
-        if (this.itemRects) { // the method can trigger before we got the client rects from the main thread
-            let me          = this,
-                moveFactor  = 0.55, // we can not use 0.5, since items would jump back & forth
-                index       = me.currentIndex,
-                {itemRects} = me,
-                maxItems    = itemRects.length - 1,
-                reversed    = me.reversedLayoutDirection,
-                delta, itemWidth;
-
-            if (me.sortDirection === 'horizontal') {
-                delta     = data.clientX - me.offsetX - itemRects[index].left;
-                itemWidth = 'width'
-            } else {
-                delta     = data.clientY - me.offsetY - itemRects[index].top;
-                itemWidth = 'height'
-            }
+        // the method can trigger before we got the client rects from the main thread
+        if (!this.itemRects) {
+            return
+        }
 
-            if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
-                if (Math.abs(delta) > itemRects[index - 1][itemWidth] * moveFactor) {
-                    me.currentIndex--;
-                    me.switchItems(index, me.currentIndex)
-                }
+        let me          = this,
+            moveFactor  = 0.55, // we can not use 0.5, since items would jump back & forth
+            index       = me.currentIndex,
+            {itemRects} = me,
+            maxItems    = itemRects.length - 1,
+            reversed    = me.reversedLayoutDirection,
+            delta, itemWidth;
+
+        if (me.sortDirection === 'horizontal') {
+            delta     = data.clientX + me.scrollLeft - me.offsetX - itemRects[index].left;
+            itemWidth = 'width'
+        } else {
+            delta     = data.clientY + me.scrollTop  - me.offsetY - itemRects[index].top;
+            itemWidth = 'height'
+        }
+
+        if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
+            if (Math.abs(delta) > itemRects[index - 1][itemWidth] * moveFactor) {
+                me.currentIndex--;
+                me.switchItems(index, me.currentIndex)
             }
+        }
 
-            else if (index < maxItems && (!reversed && delta > 0 || reversed && delta < 0)) {
-                if (Math.abs(delta) > itemRects[index + 1][itemWidth] * moveFactor) {
-                    me.currentIndex++;
-                    me.switchItems(index, me.currentIndex)
-                }
+        else if (index < maxItems && (!reversed && delta > 0 || reversed && delta < 0)) {
+            if (Math.abs(delta) > itemRects[index + 1][itemWidth] * moveFactor) {
+                me.currentIndex++;
+                me.switchItems(index, me.currentIndex)
             }
         }
     }

package/src/grid/Container.mjs

@@ -506,8 +506,11 @@ class GridContainer extends BaseContainer {
     /**
      * @param {Object} data
      */
-    onScroll(data) {
-        this.view.scrollPosition = {x: data.scrollLeft, y: this.view.scrollPosition.y}
+    onScroll({scrollLeft}) {
+        let me = this;
+
+        me.headerToolbar.scrollLeft = scrollLeft;
+        me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y}
     }
 
     /**

package/src/grid/header/Toolbar.mjs

@@ -34,6 +34,10 @@ class Toolbar extends BaseToolbar {
          * @member {String} role='row'
          */
         role: 'row',
+        /**
+         * @member {Number} scrollLeft_=0
+         */
+        scrollLeft_: 0,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -62,13 +66,14 @@ class Toolbar extends BaseToolbar {
 
         if (value && !me.sortZone) {
             import('../../draggable/grid/header/toolbar/SortZone.mjs').then(module => {
-                let {appName, id, windowId} = me;
+                let {appName, id, scrollLeft, windowId} = me;
 
                 me.sortZone = Neo.create({
                     module             : module.default,
                     appName,
                     boundaryContainerId: id,
                     owner              : me,
+                    scrollLeft,
                     windowId,
                     ...me.sortZoneConfig
                 })
@@ -108,6 +113,18 @@ class Toolbar extends BaseToolbar {
         }
     }
 
+    /**
+     * Triggered after the scrollLeft config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetScrollLeft(value, oldValue) {
+        if (oldValue !== undefined && this.sortZone) {
+            this.sortZone.scrollLeft = value
+        }
+    }
+
     /**
      * Triggered after the sortable config got changed
      * @param {Boolean} value

package/src/main/DomAccess.mjs

@@ -932,19 +932,19 @@ class DomAccess extends Base {
 
     /**
      * @param {Object} data
-     * @param {String} data.direction left, top
+     * @param {String} data.direction='top' left, top
      * @param {String} data.id
      * @param {Number} data.value
      * @returns {Object} obj.id => the passed id
      */
-    scrollTo(data) {
-        let node = this.getElement(data.id);
+    scrollTo({direction='top', id, value}) {
+        let node = this.getElement(id);
 
         if (node) {
-            node[`scroll${Neo.capitalize(data.direction)}`] = data.value
+            node[`scroll${Neo.capitalize(direction)}`] = value
         }
 
-        return {id: data.id}
+        return {id}
     }
 
     /**