neo.mjs 8.10.1 → 8.12.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-27",
+      "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.10.1'
+                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.10.1'
+         * @member {String} version='8.12.0'
          */
-        version: '8.10.1'
+        version: '8.12.0'
     }
 
     /**

package/examples/table/container/MainContainer.mjs

@@ -100,8 +100,7 @@ class MainContainer extends ConfigurationViewport {
                         style.tableLayout = '';
                     }
 
-                    me.exampleComponent.style = style;
-                    me.exampleComponent.update()
+                    me.exampleComponent.style = style
                 }
             },
             style: {marginTop: '10px'}

package/examples/tableFiltering/MainContainer.mjs

@@ -68,7 +68,7 @@ class MainContainer extends Viewport {
 
                     store: {
                         autoLoad   : true,
-                        keyProperty: 'name',
+                        keyProperty: 'code',
                         url        : '../../resources/examples/data/countries.json',
 
                         model: {

package/examples/tableFiltering/MainStore.mjs

@@ -12,16 +12,16 @@ class MainStore extends Store {
         model      : Model,
 
         data: [
-            {id:  1, country: 'Germany',       firstname: 'Tobias',  isOnline: true,  lastname: 'Uhlig',    luckyNumber: 1, specialDate: '2020-08-10'},
-            {id:  2, country: 'United States', firstname: 'Rich',    isOnline: false, lastname: 'Waters',   luckyNumber: 2, specialDate: '2020-08-09'},
-            {id:  3, country: 'Germany',       firstname: 'Nils',    isOnline: true,  lastname: 'Dehl',     luckyNumber: 3, specialDate: '2020-08-09'},
-            {id:  4, country: 'United States', firstname: 'Gerard',  isOnline: true,  lastname: 'Horan',    luckyNumber: 1, specialDate: '2020-08-10'},
-            {id:  5, country: 'Slovakia',      firstname: 'Jozef',   isOnline: false, lastname: 'Sakalos',  luckyNumber: 2, specialDate: '2020-08-08'},
-            {id:  6, country: 'Germany',       firstname: 'Bastian', isOnline: false, lastname: 'Haustein', luckyNumber: 3, specialDate: '2020-08-10'},
-            {id:  7, country: 'United States', firstname: 'Durlabh', isOnline: true,  lastname: 'Jain',     luckyNumber: 1, specialDate: '2020-08-08'},
-            {id:  8, country: 'Canada',        firstname: 'Kevin',   isOnline: true,  lastname: 'Cassidy',  luckyNumber: 2, specialDate: '2020-08-10'},
-            {id:  9, country: 'UK',            firstname: 'Nikola',  isOnline: true,  lastname: 'Markovic', luckyNumber: 3, specialDate: '2020-08-09'},
-            {id: 10, country: 'United States', firstname: 'Hyle',    isOnline: false, lastname: 'Campbell', luckyNumber: 1, specialDate: '2020-08-10'}
+            {id:  1, country: 'Germany',       firstname: 'Tobias',  isOnline: true,  lastname: 'Uhlig',    luckyNumber: 1, specialDate: '2025-08-10'},
+            {id:  2, country: 'United States', firstname: 'Rich',    isOnline: false, lastname: 'Waters',   luckyNumber: 2, specialDate: '2025-08-09'},
+            {id:  3, country: 'Germany',       firstname: 'Nils',    isOnline: true,  lastname: 'Dehl',     luckyNumber: 3, specialDate: '2025-08-09'},
+            {id:  4, country: 'United States', firstname: 'Gerard',  isOnline: true,  lastname: 'Horan',    luckyNumber: 1, specialDate: '2025-08-10'},
+            {id:  5, country: 'Slovakia',      firstname: 'Jozef',   isOnline: false, lastname: 'Sakalos',  luckyNumber: 2, specialDate: '2025-08-08'},
+            {id:  6, country: 'Germany',       firstname: 'Bastian', isOnline: false, lastname: 'Haustein', luckyNumber: 3, specialDate: '2025-08-10'},
+            {id:  7, country: 'United States', firstname: 'Durlabh', isOnline: true,  lastname: 'Jain',     luckyNumber: 1, specialDate: '2025-08-08'},
+            {id:  8, country: 'Canada',        firstname: 'Kevin',   isOnline: true,  lastname: 'Cassidy',  luckyNumber: 2, specialDate: '2025-08-10'},
+            {id:  9, country: 'UK',            firstname: 'Nikola',  isOnline: true,  lastname: 'Markovic', luckyNumber: 3, specialDate: '2025-08-09'},
+            {id: 10, country: 'United States', firstname: 'Hyle',    isOnline: false, lastname: 'Campbell', luckyNumber: 1, specialDate: '2025-08-10'}
         ]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.10.1",
+    "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/View.scss

@@ -102,21 +102,3 @@
         }
     }
 }
-
-.neo-selection-cellcolumnmodel,
-.neo-selection-cellcolumnrowmodel,
-.neo-selection-cellmodel,
-.neo-selection-cellrowmodel,
-.neo-selection-columnmodel,
-.neo-selection-rowmodel {
-    .neo-grid-row {
-        &:focus {
-            outline: 0;
-        }
-        .neo-grid-cell {
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}

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/View.scss

@@ -1,4 +1,8 @@
 .neo-table-view {
+    &:focus {
+        outline: none;
+    }
+
     .neo-center {
         text-align: center;
     }
@@ -71,21 +75,3 @@
         }
     }
 }
-
-.neo-selection-cellcolumnmodel,
-.neo-selection-cellcolumnrowmodel,
-.neo-selection-cellmodel,
-.neo-selection-cellrowmodel,
-.neo-selection-columnmodel,
-.neo-selection-rowmodel {
-    .neo-table-row {
-        &:focus {
-            outline: 0;
-        }
-        .neo-table-cell {
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}

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.10.1'
+     * @default '8.12.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.10.1'
+    version: '8.12.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -158,13 +158,19 @@ class Main extends core.Base {
     /**
      * Request specific accessible window attributes by path into the app worker.
      * Keep in mind that this excludes anything DOM related or instances.
-     * Example: Neo.Main.getByPath({path: 'navigator.language'}).then(data => {})
+     * In case your path matches a method, you can also pass params for it.
+     * @example:
+     *     Neo.Main.getByPath({path: 'navigator.language'}).then(data => {})
+     * @example:
+     *     Neo.Main.getByPath({path: 'CSS.supports', params: ['display: flex']}).then(data => {})
      * @param {Object} data
+     * @param {Array}  data.params=[]
      * @param {String} data.path
      * @returns {*}
      */
-    getByPath(data) {
-        return Neo.nsWithArrays(data.path)
+    getByPath({params=[], path}) {
+        let target = Neo.nsWithArrays(path);
+        return Neo.isFunction(target) ? target(...params) : target
     }
 
     /**

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/form/field/ComboBox.mjs

@@ -450,10 +450,7 @@ class ComboBox extends Picker {
     fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
-            params;
-
-        if (!(me.forceSelection && !value)) {
-            params = {component: me, oldValue, value};
+            params        = {component: me, oldValue, value};
 
             me.fire('change', params);
 
@@ -464,7 +461,6 @@ class ComboBox extends Picker {
                     }
                 })
             }
-        }
     }
 
     /**