neo.mjs 8.12.0 → 8.14.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.12.0'
+         * @member {String} version='8.14.0'
          */
-        version: '8.12.0'
+        version: '8.14.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-29",
+      "datePublished": "2025-02-03",
       "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.12.0'
+                html  : 'v8.14.0'
             }]
         }],
         /**

package/apps/realworld2/view/article/PreviewList.mjs

@@ -46,8 +46,8 @@ class PreviewList extends List {
 
         if (!silent) {
             me.promiseUpdate().then(() => {
-                me.fire('createItems');
-            });
+                me.fire('createItems')
+            })
         }
     }
 }

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/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.12.0'
+         * @member {String} version='8.14.0'
          */
-        version: '8.12.0'
+        version: '8.14.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/grid/nestedRecordFields/Viewport.mjs

@@ -32,13 +32,19 @@ class Viewport extends BaseViewport {
             style    : {marginBottom: '1em'},
 
             items: ['->', {
+                handler: 'up.onSwitchDragModeButtonClick',
+                iconCls: 'far fa-square',
+                style  : {marginRight: '1em'},
+                text   : 'Drag column headers only'
+            }, {
                 handler: 'up.onSwitchThemeButtonClick',
                 iconCls: 'fas fa-sun',
                 text   : 'Light Theme'
             }]
         }, {
-            module: GridContainer,
-            bind  : {store : 'stores.mainStore'},
+            module   : GridContainer,
+            bind     : {store : 'stores.mainStore'},
+            reference: 'grid',
 
             columnDefaults: {
                 width: 200
@@ -108,10 +114,10 @@ class Viewport extends BaseViewport {
     /**
      * @param {Object} data
      */
-    editRenderer({column, gridContainer, index, record}) {
+    editRenderer({column, gridContainer, record, rowIndex}) {
         let me                  = this,
             {appName, windowId} = me,
-            widgetId            = `${column.id}-widget-${index}`,
+            widgetId            = `${column.id}-widget-${rowIndex}`,
             button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                 module  : Button,
                 appName,
@@ -127,6 +133,23 @@ class Viewport extends BaseViewport {
         return button.createVdomReference()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onSwitchDragModeButtonClick(data) {
+        let button     = data.component,
+            grid       = this.getReference('grid'),
+            {sortZone} = grid.headerToolbar;
+
+        if (button.iconCls === 'fas fa-check') {
+            button.set({iconCls: 'far fa-square'});
+            sortZone.moveColumnContent = true
+        } else {
+            button.set({iconCls: 'fas fa-check'});
+            sortZone.moveColumnContent = false
+        }
+    }
+
     /**
      * @param {Object} data
      */

package/examples/table/container/MainContainer.mjs

@@ -127,10 +127,10 @@ class MainContainer extends ConfigurationViewport {
                 {
                     dataField: 'edit',
                     text     : 'Edit Action',
-                    renderer({column, index}) {
+                    renderer({column, rowIndex}) {
                         const
                             me       = this,
-                            widgetId = `${column.id}-widget-${index}`,
+                            widgetId = `${column.id}-widget-${rowIndex}`,
                             button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                                 module  : Button,
                                 appName : me.appName,
@@ -146,10 +146,10 @@ class MainContainer extends ConfigurationViewport {
                 }, {
                     dataField: 'menu',
                     text     : 'Menu',
-                    renderer({column, record, index}) {
+                    renderer({column, record, rowIndex}) {
                         const
                             me       = this,
-                            widgetId = `${column.id}-widget-${index}`,
+                            widgetId = `${column.id}-widget-${rowIndex}`,
                             button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
                                 ntype   : 'button',
                                 appName : me.appName,

package/examples/table/covid/Util.mjs

@@ -133,7 +133,7 @@ class Util extends Base {
         imageName = map[imageName] || imageName;
 
         if (Neo.config.isGitHubPages) {
-            let path = `../../../../resources/images/flaticon/country_flags/png/${imageName}.png`;
+            let path = `../../../../resources_pub/images/flaticon/country_flags/png/${imageName}.png`;
 
             if (Neo.config.environment !== 'development') {
                 path = `../../${path}`
@@ -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/table/nestedRecordFields/Viewport.mjs

@@ -104,10 +104,10 @@ class Viewport extends BaseViewport {
     /**
      * @param {Object} data
      */
-    editRenderer({column, index, record, tableContainer}) {
+    editRenderer({column, record, rowIndex, tableContainer}) {
         let me                  = this,
             {appName, windowId} = me,
-            widgetId            = `${column.id}-widget-${index}`,
+            widgetId            = `${column.id}-widget-${rowIndex}`,
             button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                 module  : Button,
                 appName,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.12.0",
+    "version": "8.14.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.3",
+        "inquirer": "^12.4.1",
         "marked": "^15.0.6",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",

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

@@ -1,9 +1,11 @@
 body:has(.neo-is-dragging) {
-    cursor: move !important;
+    cursor     : move !important;
+    user-select: none !important;
 
     // We can not put pointer-events: none on the same level as cursor, since it prevents cursor changes
     * {
         pointer-events: none !important;
+        user-select   : none !important;
     }
 }
 
@@ -13,6 +15,7 @@ body:has(.neo-is-dragging) {
     transform          : none !important;
     transition-duration: 0ms;
     transition-property: none;
+    user-select        : none !important;
     will-change        : left, top;
     z-index            : 1000;
 

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

@@ -1,5 +1,22 @@
-.neo-grid-header-toolbar {
-    &.neo-dragproxy {
+.neo-grid-container {
+    &:has(.neo-is-dragging) {
+        .neo-grid-cell {
+            opacity   : .8;
+            transition: left 200ms ease-out;
+
+            &:last-child {
+                border-right-width : 1px;
+            }
+        }
+    }
+}
+
+.neo-dragproxy {
+    .neo-grid-container {
+        border: none;
+    }
+
+    .neo-grid-header-toolbar {
         height: 30px !important; // Hack to increase the height by the border-bottom height (29 + 1)
 
         .neo-button {
@@ -7,6 +24,12 @@
         }
     }
 
+    .neo-grid-row {
+        position: unset;
+    }
+}
+
+.neo-grid-header-toolbar {
     &.neo-is-dragging {
         .neo-button {
             border-right: 1px solid var(--grid-container-border-color); // Would be missing for the last button otherwise

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -701,7 +701,7 @@ function autoGenerateGetSet(proto, key) {
                 // every set call has to delete the matching symbol
                 delete me[configSymbol][key];
 
-                if (key !== 'items') {
+                if (key !== 'items' && key !== 'vnode') {
                     value = Neo.clone(value, true, true)
                 }
 

package/src/calendar/view/YearComponent.mjs

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

package/src/calendar/view/month/Component.mjs

@@ -689,7 +689,7 @@ class Component extends BaseComponent {
                     week.header && container.cn.unshift(week.header)
                 }
 
-                me.promiseUpdate(me.vdom).then(() => {
+                me.promiseUpdate().then(() => {
                     Neo.main.DomAccess.scrollTo({
                         direction: 'top',
                         id       : me.vdom.cn[1].id,

package/src/calendar/view/week/EventDragZone.mjs

@@ -156,8 +156,10 @@ class EventDragZone extends DragZone {
 
     /**
      * @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,
             vdom      = me.dragProxyConfig?.vdom,
@@ -199,7 +201,11 @@ class EventDragZone extends DragZone {
             width : `${data.width}px`
         });
 
-        me.dragProxy = Neo.create(config)
+        if (createComponent) {
+            return me.dragProxy = Neo.create(config)
+        }
+
+        return config
     }
 
     /**
@@ -491,35 +497,32 @@ class EventDragZone extends DragZone {
     /**
      * @param {Object} data
      */
-    dragStart(data) {
-        let me = this,
-            eventDuration, offsetX, offsetY;
-
-        me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]).then(rects => {
-            eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000;
-            offsetX       = data.clientX - rects[0].left;
+    async dragStart(data) {
+        let me            = this,
+            rects         = await me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]),
+            eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000,
+            offsetX       = data.clientX - rects[0].left,
             offsetY       = data.clientY - rects[0].top;
 
-            Object.assign(me, {
-                columnHeight   : rects[1].height,
-                columnTop      : rects[1].top,
-                dragElementRect: rects[0],
-                eventDuration  : Math.round(eventDuration / me.intervalSize) * me.intervalSize,
-                offsetX,
-                offsetY
-            });
-
-            me.createDragProxy(rects[0]);
-
-            me.fire('dragStart', {
-                dragElementRect: rects[0],
-                id             : me.id,
-                offsetX,
-                offsetY
-            });
-
-            me.dragMove(data)
-        })
+        Object.assign(me, {
+            columnHeight   : rects[1].height,
+            columnTop      : rects[1].top,
+            dragElementRect: rects[0],
+            eventDuration  : Math.round(eventDuration / me.intervalSize) * me.intervalSize,
+            offsetX,
+            offsetY
+        });
+
+        await me.createDragProxy(rects[0]);
+
+        me.fire('dragStart', {
+            dragElementRect: rects[0],
+            id             : me.id,
+            offsetX,
+            offsetY
+        });
+
+        me.dragMove(data)
     }
 
     /**

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -175,7 +175,7 @@ class DragDrop extends Base {
     /**
      * @param {Object} data
      */
-    onColumnDragStart(data) {
+    async onColumnDragStart(data) {
         let me = this;
 
         if (me.isActiveCalendar() && me.isTopLevelColumn(data.targetPath)) {
@@ -214,26 +214,26 @@ class DragDrop extends Base {
             me[newRecordSymbol] = record;
 
             // wait until the new event got mounted
-            me.timeout(50).then(() => {
-                eventId     = owner.getEventId(record.id);
-                dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
-
-                eventDragZone = me.getEventDragZone({
-                    dragElement,
-                    enableResizingAcrossOppositeEdge: true,
-                    eventRecord                     : record,
-                    proxyParentId                   : data.path[0].id
-                });
-
-                owner.getPlugin(me.resizablePluginType).onDragStart(data);
-                eventDragZone.dragStart(data);
-
-                me.timeout(50).then(() => {
-                    me.isDragging && Neo.applyDeltas(me.appName, {
-                        id   : eventId,
-                        style: {opacity: 0}
-                    })
-                })
+            await me.timeout(50);
+
+            eventId     = owner.getEventId(record.id);
+            dragElement = VDomUtil.find(owner.vdom, eventId).vdom;
+
+            eventDragZone = me.getEventDragZone({
+                dragElement,
+                enableResizingAcrossOppositeEdge: true,
+                eventRecord                     : record,
+                proxyParentId                   : data.path[0].id
+            });
+
+            owner.getPlugin(me.resizablePluginType).onDragStart(data);
+            await eventDragZone.dragStart(data);
+
+            await me.timeout(50);
+
+            me.isDragging && Neo.applyDeltas(me.appName, {
+                id   : eventId,
+                style: {opacity: 0}
             })
         }
     }