neo.mjs 8.11.0 → 8.13.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.13.0'
          */
-        version: '8.11.0'
+        version: '8.13.0'
     }
 
     /**

package/apps/colors/view/TableContainer.mjs

@@ -57,7 +57,7 @@ class TableContainer extends Container {
                     dock     : 'left',
                     minWidth : 40,
                     text     : '#',
-                    renderer : data => ({cls: ['neo-index-column', 'neo-table-cell'], html: data.index + 1}),
+                    renderer : data => ({cls: ['neo-index-column', 'neo-table-cell'], html: data.rowIndex + 1}),
                     width    : 40
                 }],
                 currentChar;

package/apps/covid/Util.mjs

@@ -40,7 +40,7 @@ class Util extends Base {
         let value = data.value;
 
         if (!Neo.isNumber(value)) {
-            return value || 'N/A';
+            return value || 'N/A'
         }
 
         value = Math.round(value / 100);
@@ -48,7 +48,7 @@ class Util extends Base {
 
         value = value.toFixed(2) + ' %';
 
-        return value.toLocaleString(Util.locales);
+        return value.toLocaleString(Util.locales)
     }
 
     /**
@@ -67,7 +67,7 @@ class Util extends Base {
 
         value = value.toLocaleString(Util.locales);
 
-        return typeof color !== 'string' ? value : `<span style="color:${color};">${value}</span>`;
+        return typeof color !== 'string' ? value : `<span style="color:${color};">${value}</span>`
     }
 
     /**
@@ -136,25 +136,25 @@ class Util extends Base {
             let path = `../../../../resources_pub/images/flaticon/country_flags/png/${imageName}.png`;
 
             if (Neo.config.environment !== 'development') {
-                path = `../../${path}`;
+                path = `../../${path}`
             }
 
-            return path;
+            return path
         }
 
-        return `https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/flaticon/country_flags/png/${imageName}.png`
     }
 
     /**
      * @param {Object} data
-     * @param {Number} data.index
+     * @param {Number} data.rowIndex
      * @returns {Object}
      */
     static indexRenderer(data) {
         return {
             cls : ['neo-index-column', 'neo-table-cell'],
-            html: data.index + 1
-        };
+            html: data.rowIndex + 1
+        }
     }
 }
 

package/apps/portal/index.html

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

package/apps/sharedcovid/Util.mjs

@@ -147,13 +147,13 @@ class Util extends Base {
 
     /**
      * @param {Object} data
-     * @param {Number} data.index
+     * @param {Number} data.rowIndex
      * @returns {Object}
      */
     static indexRenderer(data) {
         return {
             cls : ['neo-index-column', 'neo-table-cell'],
-            html: data.index + 1
+            html: data.rowIndex + 1
         }
     }
 }

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.13.0'
          */
-        version: '8.11.0'
+        version: '8.13.0'
     }
 
     /**

package/examples/grid/covid/Util.mjs

@@ -147,13 +147,13 @@ class Util extends Base {
 
     /**
      * @param {Object} data
-     * @param {Number} data.index
+     * @param {Number} data.rowIndex
      * @returns {Object}
      */
     static indexRenderer(data) {
         return {
-            cls : ['neo-index-column', 'neo-grid-cell'],
-            html: data.index + 1
+            cls : ['neo-index-column', 'neo-table-cell'],
+            html: data.rowIndex + 1
         }
     }
 }

package/examples/table/covid/Util.mjs

@@ -147,13 +147,13 @@ class Util extends Base {
 
     /**
      * @param {Object} data
-     * @param {Number} data.index
+     * @param {Number} data.rowIndex
      * @returns {Object}
      */
     static indexRenderer(data) {
         return {
             cls : ['neo-index-column', 'neo-table-cell'],
-            html: data.index + 1
+            html: data.rowIndex + 1
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.11.0",
+    "version": "8.13.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.13.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.11.0'
+    version: '8.13.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
     }
 }