neo.mjs 8.11.0 → 8.12.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-28",
+      "datePublished": "2025-01-29",
       "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.11.0'
+                html  : 'v8.12.0'
             }]
         }],
         /**

package/examples/ConfigurationViewport.mjs

@@ -208,13 +208,7 @@ class ConfigurationViewport extends Viewport {
         if (target === 'cmp') {
             me.exampleComponent.theme = newTheme
         } else {
-            Neo.applyDeltas(me.appName, {
-                id : me.id, // the viewport can get imported into other apps, so an id makes sense for scoping
-                cls: {
-                    add   : [newTheme],
-                    remove: [oldTheme]
-                }
-            })
+            me.app.mainView.theme = newTheme
         }
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.11.0",
+    "version": "8.12.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,7 +54,7 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.3.2",
+        "inquirer": "^12.3.3",
         "marked": "^15.0.6",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",

package/resources/scss/src/draggable/DragProxyComponent.scss

@@ -1,3 +1,12 @@
+body:has(.neo-is-dragging) {
+    cursor: move !important;
+
+    // We can not put pointer-events: none on the same level as cursor, since it prevents cursor changes
+    * {
+        pointer-events: none !important;
+    }
+}
+
 .neo-dragproxy {
     pointer-events     : none;
     position           : absolute !important;

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

@@ -0,0 +1,16 @@
+.neo-grid-header-toolbar {
+    &.neo-dragproxy {
+        height: 30px !important; // Hack to increase the height by the border-bottom height (29 + 1)
+
+        .neo-button {
+            border-right: 1px solid var(--grid-container-border-color);
+        }
+    }
+
+    &.neo-is-dragging {
+        .neo-button {
+            border-right: 1px solid var(--grid-container-border-color); // Would be missing for the last button otherwise
+            opacity     : var(--grid-header-button-opacity-is-dragging);
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+.neo-table-container:has(.neo-is-dragging) {
+    border-top-width: 1px;
+}
+
+.neo-table-header-toolbar {
+    &.neo-dragproxy {
+        border-bottom: 1px solid var(--table-container-border-color);
+        height : 31px !important; // Hack to increase the height by the border-bottom height (29 + 1)
+        padding: 0 0 1px 0;
+
+        .neo-table-header-button {
+            border-right: 1px solid var(--table-container-border-color);
+        }
+    }
+
+    &.neo-is-dragging {
+        height: 32px !important;
+
+        .neo-table-header-button {
+            border-right: 1px solid var(--table-container-border-color); // Would be missing for the last button otherwise
+            opacity     : var(--table-header-button-opacity-is-dragging);
+        }
+
+        .neo-draggable {
+            background-color          : unset;
+            height                    : 32px !important;
+            transition-duration       : 200ms;
+            transition-property       : left, top;
+            transition-timing-function: ease-out;
+        }
+    }
+}

package/resources/scss/src/grid/header/Toolbar.scss

@@ -1,6 +1,5 @@
 .neo-grid-header-toolbar {
     border-bottom: 1px solid var(--grid-container-border-color);
-    border-top   : 1px solid var(--grid-container-border-color);
     padding      : 0;
     width        : max-content;
 }

package/resources/scss/src/table/header/Button.scss

@@ -16,10 +16,6 @@
     white-space     : nowrap;
     width           : 100% !important;
 
-    &.neo-drag-over {
-        background-image: linear-gradient(green, darkgreen);;
-    }
-
     &.neo-sort-asc, &.neo-sort-desc {
         .neo-button-glyph {
             opacity: 1;

package/resources/scss/theme-dark/draggable/grid/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-dark { // .neo-grid-header-toolbar.neo-is-dragging
+    --grid-header-button-opacity-is-dragging: 0.3;
+}

package/resources/scss/theme-dark/draggable/table/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-dark { // .neo-table-header-toolbar.neo-is-dragging
+    --table-header-button-opacity-is-dragging: 0.3;
+}

package/resources/scss/theme-light/draggable/grid/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-light { // .neo-grid-header-toolbar.neo-is-dragging
+    --grid-header-button-opacity-is-dragging: 0.7;
+}

package/resources/scss/theme-light/draggable/table/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-light { // .neo-table-header-toolbar.neo-is-dragging
+    --table-header-button-opacity-is-dragging: 0.7;
+}

package/resources/scss/theme-neo-light/draggable/grid/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .neo-grid-header-toolbar.neo-is-dragging
+    --grid-header-button-opacity-is-dragging: 0.7;
+}

package/resources/scss/theme-neo-light/draggable/table/header/toolbar/SortZone.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .neo-table-header-toolbar.neo-is-dragging
+    --table-header-button-opacity-is-dragging: 0.7;
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -331,7 +331,7 @@ class Component extends Base {
          */
         style_: null,
         /**
-         * You can pass an used theme directly to any component,
+         * You can pass a used theme directly to any component,
          * to style specific component trees differently from your main view.
          * @member {String|null} theme_=null
          */
@@ -1119,11 +1119,7 @@ class Component extends Base {
             }
         }
 
-        if (me.isVdomUpdating || me.silentVdomUpdate) {
-            me.needsVdomUpdate = true
-        } else if (me.mounted) {
-            me.updateCls(value, oldValue)
-        }
+        me.update()
     }
 
     /**

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

@@ -0,0 +1,74 @@
+import BaseSortZone from '../../../toolbar/SortZone.mjs';
+import NeoArray     from  '../../../../util/Array.mjs';
+
+/**
+ * @class Neo.draggable.grid.header.toolbar.SortZone
+ * @extends Neo.draggable.toolbar.SortZone
+ */
+class SortZone extends BaseSortZone {
+    static config = {
+        /**
+         * @member {String} className='Neo.draggable.grid.header.toolbar.SortZone'
+         * @protected
+         */
+        className: 'Neo.draggable.grid.header.toolbar.SortZone',
+        /**
+         * @member {String} ntype='grid-header-toolbar-sortzone'
+         * @protected
+         */
+        ntype: 'grid-header-toolbar-sortzone',
+        /**
+         * @member {String|null} itemMargin=null
+         * @protected
+         */
+        itemMargin: '1px',
+        /**
+         * @member {Boolean} moveVertical=false
+         */
+        moveVertical: false
+    }
+
+    /**
+     * @param {Neo.util.Rectangle} rect
+     * @param {Neo.util.Rectangle} parentRect
+     */
+    adjustProxyRectToParent(rect, parentRect) {
+        rect.x = rect.x - parentRect.x - 1;
+        rect.y = rect.y - parentRect.y - 1
+    }
+
+    /**
+     * @param {Number} fromIndex
+     * @param {Number} toIndex
+     */
+    moveTo(fromIndex, toIndex) {
+        super.moveTo(fromIndex, toIndex);
+
+        // It is crucial to use _columns to not get a shallow copy
+        NeoArray.move(this.owner.parent._columns, fromIndex, toIndex);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDragEnd(data) {
+        await super.onDragEnd(data);
+
+        let {owner} = this;
+
+        owner.items.forEach((item, index) => {
+            item.vdom['aria-colindex'] = index + 1; // 1 based
+        });
+
+        owner.updateDepth = 2;
+        owner.update();
+
+        await owner.passSizeToView();
+
+        await this.timeout(20);
+
+        owner.parent.view.createViewData()
+    }
+}
+
+export default Neo.setupClass(SortZone);

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

@@ -0,0 +1,70 @@
+import BaseSortZone from '../../../toolbar/SortZone.mjs';
+import NeoArray     from  '../../../../util/Array.mjs';
+
+/**
+ * @class Neo.draggable.table.header.toolbar.SortZone
+ * @extends Neo.draggable.toolbar.SortZone
+ */
+class SortZone extends BaseSortZone {
+    static config = {
+        /**
+         * @member {String} className='Neo.draggable.table.header.toolbar.SortZone'
+         * @protected
+         */
+        className: 'Neo.draggable.table.header.toolbar.SortZone',
+        /**
+         * @member {String} ntype='table-header-toolbar-sortzone'
+         * @protected
+         */
+        ntype: 'table-header-toolbar-sortzone',
+        /**
+         * @member {String|null} itemMargin=null
+         * @protected
+         */
+        itemMargin: '-2px 1px 1px 1px',
+        /**
+         * @member {Boolean} moveVertical=false
+         */
+        moveVertical: false,
+        /**
+         * @member {Number} offsetY=0
+         */
+        offsetY: 5
+    }
+
+    /**
+     * @param {Neo.util.Rectangle} rect
+     * @param {Neo.util.Rectangle} parentRect
+     */
+    adjustProxyRectToParent(rect, parentRect) {
+        rect.x = rect.x - parentRect.x - 1;
+        rect.y = rect.y - parentRect.y
+    }
+
+    /**
+     * @param {Number} fromIndex
+     * @param {Number} toIndex
+     */
+    moveTo(fromIndex, toIndex) {
+        super.moveTo(fromIndex, toIndex);
+
+        // It is crucial to use _columns to not get a shallow copy
+        NeoArray.move(this.owner.parent._columns, fromIndex, toIndex);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDragEnd(data) {
+        await super.onDragEnd(data);
+
+        let {owner} = this;
+
+        owner.updateDepth = 2;
+        owner.update();
+
+        owner.parent.view.createViewData()
+    }
+}
+
+export default Neo.setupClass(SortZone);

package/src/draggable/toolbar/SortZone.mjs

@@ -31,6 +31,11 @@ class SortZone extends DragZone {
          * @protected
          */
         indexMap: null,
+        /**
+         * @member {String|null} itemMargin=null
+         * @protected
+         */
+        itemMargin: null,
         /**
          * @member {Array|null} itemRects=null
          * @protected
@@ -96,11 +101,12 @@ class SortZone extends DragZone {
             owner.style = ownerStyle;
 
             owner.items.forEach((item, index) => {
-                itemStyle = item.style || {};
+                itemStyle = item.wrapperStyle || {};
 
                 Object.assign(itemStyle, {
                     height  : itemStyles[index].height || null,
                     left    : null,
+                    margin  : null,
                     position: null,
                     top     : null,
                     width   : itemStyles[index].width || null
@@ -110,7 +116,7 @@ class SortZone extends DragZone {
                     itemStyle.visibility = null
                 }
 
-                item.style = itemStyle
+                item.wrapperStyle = itemStyle
             });
 
             if (me.startIndex !== me.currentIndex) {
@@ -202,8 +208,8 @@ class SortZone extends DragZone {
                 indexMap[index] = index;
 
                 itemStyles.push({
-                    height: item.style?.height,
-                    width : item.style?.width
+                    height: item.height ? `${item.height}px` :  item.style?.height,
+                    width : item.width  ? `${item.width}px`  :  item.style?.width
                 })
             });
 
@@ -221,12 +227,15 @@ class SortZone extends DragZone {
                 me.itemRects = itemRects;
 
                 owner.items.forEach((item, index) => {
-                    itemStyle = item.style || {};
+                    itemStyle = item.wrapperStyle || {};
                     rect      = itemRects[index];
 
-                    item.style = Object.assign(itemStyle, {
+                    me.adjustProxyRectToParent?.(rect, me.ownerRect);
+
+                    item.wrapperStyle = Object.assign(itemStyle, {
                         height  : `${rect.height}px`,
                         left    : `${rect.left}px`,
+                        margin  : me.itemMargin,
                         position: 'absolute',
                         top     : `${rect.top}px`,
                         width   : `${rect.width}px`
@@ -235,9 +244,9 @@ class SortZone extends DragZone {
 
                 // we need to add a short (1 frame) delay to ensure the item has switched to an absolute position
                 me.timeout(5).then(() => {
-                    itemStyle = button.style || {};
+                    itemStyle = button.wrapperStyle || {};
                     itemStyle.visibility = 'hidden';
-                    button.style = itemStyle
+                    button.wrapperStyle = itemStyle
                 })
             })
         }
@@ -288,14 +297,14 @@ class SortZone extends DragZone {
      * @param {Object} rect
      */
     updateItem(index, rect) {
-        let me      = this,
-            item    = me.owner.items[me.indexMap[index]],
-            {style} = item;
+        let me             = this,
+            item           = me.owner.items[me.indexMap[index]],
+            {wrapperStyle} = item;
 
-        style.left = `${rect.left}px`;
-        style.top  = `${rect.top}px`;
+        wrapperStyle.left = `${rect.left}px`;
+        wrapperStyle.top  = `${rect.top}px`;
 
-        item.style = style
+        item.wrapperStyle = wrapperStyle
     }
 }
 

package/src/grid/header/Button.mjs

@@ -45,10 +45,6 @@ class Button extends BaseButton {
          * @member {String} defaultSortDirection='ASC'
          */
         defaultSortDirection: 'ASC',
-        /**
-         * @member {Boolean} draggable_=true
-         */
-        draggable_: true,
         /**
          * @member {Object} editorConfig=null
          */
@@ -100,43 +96,6 @@ class Button extends BaseButton {
         sortable_: true
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.draggable && me.addDomListeners({
-            dragend  : me.onDragEnd,
-            dragenter: me.onDragEnter,
-            dragleave: me.onDragLeave,
-            dragover : me.onDragOver,
-            dragstart: me.onDragStart,
-            drop     : me.onDrop,
-            scope    : me
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -315,74 +274,6 @@ class Button extends BaseButton {
         me.isSorted = map[me.isSorted + '']
     }
 
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            gridContainer  = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        gridContainer.createViewData(gridContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @param {Object} data
      */

package/src/grid/header/Toolbar.mjs

@@ -21,6 +21,10 @@ class Toolbar extends BaseToolbar {
          * @member {String[]} baseCls=['neo-grid-header-toolbar','neo-toolbar']
          */
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {Neo.grid.Container|null} gridContainer=null
          */
@@ -40,6 +44,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -50,6 +56,31 @@ class Toolbar extends BaseToolbar {
         {'aria-rowindex': 1, cn: [{cn: []}]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/grid/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -98,6 +129,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/main/DomEvents.mjs

@@ -194,7 +194,7 @@ class DomEvents extends Base {
 
     /**
      * Local domEvent listener
-     * @param {Object} event
+     * @param {Event} event
      */
     domEventListener(event) {
         let me       = this,
@@ -211,40 +211,7 @@ class DomEvents extends Base {
                 }
             };
 
-        // console.log('domEventListener', event.type, target.id, target.value, event);
-
         switch (event.type) {
-            case 'dragend':
-                me.dragElementId = null;
-                break
-            case 'dragenter':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragleave':
-                if (me.dragElementId === target.id) {
-                    return // ignore target and source to be the same
-                }
-                break
-            case 'dragover':
-                me.onDragOver(event);
-                event.preventDefault();
-                break
-            case 'dragstart':
-                me.dragElementId = target.id;
-                break
-            case 'drop':
-                if (!me.dragElementId || me.dragElementId === target.id) {
-                    return // drop fires twice by default & drop should not trigger on the drag element
-                }
-                if (event.stopPropagation) {
-                    event.stopPropagation() // stops the browser from redirecting.
-                }
-                event.preventDefault();
-                config.data.srcId = me.dragElementId;
-                me.dragElementId = null;
-                break
             case 'mousemove':
                 Object.assign(config.data, me.getMouseEventData(event));
                 break
@@ -427,10 +394,10 @@ class DomEvents extends Base {
      * @param {Object} event
      */
     onBeforeUnload(event) {
-        let manager = Neo.worker.Manager;
+        let {Manager} = Neo.worker;
 
-        manager.appNames.forEach(appName => {
-            manager.broadcast({action: 'disconnect', appName, windowId: manager.windowId})
+        Manager.appNames.forEach(appName => {
+            Manager.broadcast({action: 'disconnect', appName, windowId: Manager.windowId})
         })
     }
 
@@ -498,13 +465,6 @@ class DomEvents extends Base {
         me.testPathInclusion(event, preventClickTargets) && event.preventDefault()
     }
 
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        event.dataTransfer.dropEffect = 'move'
-    }
-
     /**
      * @param {FocusEvent} event
      */
@@ -616,13 +576,11 @@ class DomEvents extends Base {
      * @param {Event} event
      */
     onOrientationChange(event) {
-        const
-            {orientation} = screen,
+        let {orientation} = screen,
             {angle, type} = orientation,
-            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
-            {Manager}     = Neo.worker;
+            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape';
 
-        Manager.sendMessage('app', {
+        Neo.worker.Manager.sendMessage('app', {
             action: 'orientationChange',
             data  : {angle, layout, type}
         })
@@ -633,7 +591,9 @@ class DomEvents extends Base {
      */
     onScroll(event) {
         let {clientHeight, clientWidth, scrollLeft, scrollTop} = event.target;
-event.preventDefault();
+
+        event.preventDefault();
+
         this.sendMessageToApp({
             ...this.getEventData(event),
             clientHeight,

package/src/main/addon/DragDrop.mjs

@@ -196,17 +196,13 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragEnd(event) {
         let me          = this,
             parsedEvent = me.getEventData(event),
             isDrop      = me.pathIncludesDropZone(parsedEvent.targetPath);
 
-        DomAccess.setBodyCls({
-            remove: ['neo-unselectable']
-        });
-
         if (me.bodyCursorStyle) {
             DomAccess.setStyle({
                 id   : 'document.body',
@@ -254,7 +250,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragMove(event) {
         let me        = this,
@@ -290,17 +286,14 @@ class DragDrop extends Base {
                 }
             }
 
-            if (!me.moveHorizontal) {
-                left = me.dragProxyRect.x
+            if (me.moveHorizontal) {
+                me.dragProxyElement.style.left = `${left}px`
             }
 
-            me.dragProxyElement.style.left = `${left}px`;
 
-            if (!me.moveVertical) {
-                top = me.dragProxyRect.y
+            if (me.moveVertical) {
+                me.dragProxyElement.style.top = `${top}px`
             }
-
-            me.dragProxyElement.style.top = `${top}px`
         }
 
         if (!me.dragProxyElement || me.alwaysFireDragMove) {
@@ -318,16 +311,12 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onDragStart(event) {
         let me   = this,
             rect = event.target.getBoundingClientRect();
 
-        DomAccess.setBodyCls({
-            add: ['neo-unselectable']
-        });
-
         Object.assign(me, {
             dragProxyRect: rect,
             offsetX      : event.detail.clientX - rect.left,
@@ -341,7 +330,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseEnter(event) {
         let me = this;
@@ -356,7 +345,7 @@ class DragDrop extends Base {
     }
 
     /**
-     * @param {Object} event
+     * @param {Event} event
      */
     onMouseLeave(event) {
         let me = this;

package/src/selection/grid/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(c => c.dataField)
+        return this.view.parent.columns.map(column => column.dataField)
     }
 }
 

package/src/selection/table/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(c => c.dataField)
+        return this.view.parent.columns.map(column => column.dataField)
     }
 }
 

package/src/table/Container.mjs

@@ -192,7 +192,7 @@ class Container extends BaseContainer {
                 headerToolbar.createItems()
             }
 
-            me.view?.createViewData(me.store.items)
+            me.view?.createViewData()
         }
     }
 
@@ -407,12 +407,12 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @param {Array} inputData
+     *
      */
-    createViewData(inputData) {
+    createViewData() {
         let me = this;
 
-        me.view.createViewData(inputData);
+        me.view.createViewData();
 
         if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
             me.applyCustomScrollbarsCss()
@@ -478,7 +478,7 @@ class Container extends BaseContainer {
         let me = this;
 
         if (me.rendered) {
-            me.createViewData(data);
+            me.createViewData();
 
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
@@ -486,7 +486,7 @@ class Container extends BaseContainer {
         } else {
             me.on('rendered', () => {
                 me.timeout(50).then(() => {
-                    me.createViewData(data)
+                    me.createViewData()
                 })
             }, me, {once: true})
         }

package/src/table/View.mjs

@@ -310,17 +310,17 @@ class View extends Component {
     }
 
     /**
-     * @param {Object[]} inputData
+     *
      */
-    createViewData(inputData) {
-        let me             = this,
-            amountRows     = inputData.length,
-            i              = 0,
-            rows           = [],
-            {selectedRows} = me;
-
-        for (; i < amountRows; i++) {
-            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
+    createViewData() {
+        let me                    = this,
+            {selectedRows, store} = me,
+            countRecords          = store.getCount(),
+            i                     = 0,
+            rows                  = [];
+
+        for (; i < countRecords; i++) {
+            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
         }
 
         me.vdom.cn = rows;

package/src/table/header/Button.mjs

@@ -110,43 +110,6 @@ class Button extends BaseButton {
         ]}
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.draggable && me.addDomListeners({
-            dragend  : me.onDragEnd,
-            dragenter: me.onDragEnter,
-            dragleave: me.onDragLeave,
-            dragover : me.onDragOver,
-            dragstart: me.onDragStart,
-            drop     : me.onDrop,
-            scope    : me
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -413,74 +376,6 @@ class Button extends BaseButton {
         me.isSorted = map[me.isSorted + '']
     }
 
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            tableContainer = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        tableContainer.createViewData(tableContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @protected
      */

package/src/table/header/Toolbar.mjs

@@ -17,9 +17,13 @@ class Toolbar extends BaseToolbar {
          */
         ntype: 'table-header-toolbar',
         /**
-         * @member {String[]} baseCls=['table-header-toolbar']
+         * @member {String[]} baseCls=['neo-table-header-toolbar']
          */
-        baseCls: ['table-header-toolbar'],
+        baseCls: ['neo-table-header-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {String} layout='base'
          */
@@ -35,6 +39,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -47,6 +53,31 @@ class Toolbar extends BaseToolbar {
         ]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/table/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value
@@ -84,6 +115,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/util/Rectangle.mjs

@@ -309,7 +309,7 @@ export default class Rectangle extends DOMRect {
 
     /**
      * Returns a clone of this Rectangle expanded according to the edges array.
-     * @param {Number}Number[]} edges
+     * @param {Number[]} edges
      * @returns {Rectangle}
      */
     expand(edges) {