neo.mjs 4.0.12 → 4.0.15

package/README.md

@@ -58,7 +58,7 @@ You can switch between <a href="https://developer.mozilla.org/en-US/docs/Web/API
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/workers-setup-v4.png">
 
-The dedicated workers setup uses 4 threads (CPUs).
+The dedicated workers setup uses 3-6 threads (CPUs).
 Most parts of the frameworks as well as your apps and components live within the app worker.
 Main threads are as small and idle as possible (42KB) plus optional main thread addons.
 

package/examples/model/dialog/MainContainerController.mjs

@@ -24,10 +24,7 @@ class MainContainerController extends Component {
         let me = this;
 
         if (!me.dialog) {
-            import(
-                /* webpackChunkName: 'examples/model/dialog/EditUserDialog' */
-                './EditUserDialog.mjs'
-            ).then(module => {
+            import('./EditUserDialog.mjs').then(module => {
                 me.dialog = Neo.create({
                     module         : module.default,
                     animateTargetId: me.getReference('edit-user-button').id,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.12",
+    "version": "4.0.15",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,11 +45,11 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^8.2.2",
+        "inquirer": "^8.2.4",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.12",
-        "sass": "^1.50.1",
+        "postcss": "^8.4.13",
+        "sass": "^1.51.0",
         "webpack": "^5.72.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "4.8.1",

package/resources/examples/data/ai_contacts.json

@@ -501,7 +501,6 @@
         {"id" : 498, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000498.jpg"},
         {"id" : 499, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000499.jpg"},
         {"id" : 500, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000500.jpg"},
-
         {"id" : 501, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000501.jpg"},
         {"id" : 502, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000502.jpg"},
         {"id" : 503, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000503.jpg"},
@@ -602,4 +601,4 @@
         {"id" : 599, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000599.jpg"},
         {"id" : 600, "firstname" : "John", "lastname" : "Doe",   "isOnline" : false, "image" : "ai_images/000600.jpg"}
     ]
-}
+}

package/resources/scss/src/dialog/Base.scss

@@ -23,6 +23,7 @@
     position : absolute;
     top      : 50%;
     transform: translate(-50%, -50%);
+    z-index  : 20; // ensure to be on top of table headers
 
     transition-duration       : 200ms;
     transition-property       : height, left, top, transform, width;
@@ -51,6 +52,11 @@
     position: relative;
 
     &.neo-panel {
+        .neo-footer-toolbar {
+            border    : none;
+            border-top: 1px solid v(dialog-border-color);
+        }
+
         .neo-header-toolbar {
             border       : none;
             border-bottom: 1px solid v(dialog-border-color);
@@ -84,4 +90,4 @@
             }
         }
     }
-}
+}

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

@@ -446,10 +446,11 @@ class Component extends BaseComponent {
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetMounted(value, oldValue) {
+    async afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        let me = this;
+        let me = this,
+            rect;
 
         if (value) {
             if (me.needsEventUpdate) {
@@ -457,16 +458,16 @@ class Component extends BaseComponent {
                 me.needsEventUpdate = false;
             }
 
-            setTimeout(() => {
-                me.getDomRect(me.getColumnContainer().id).then(data => {
-                    Neo.main.DomAccess.scrollBy({
-                        appName  : me.appName,
-                        direction: 'left',
-                        id       : me.getScrollContainer().id,
-                        value    : data.width * me.columnsBuffer / me.columnsVisible / 3
-                    });
-                });
-            }, 20);
+            await Neo.timeout(70);
+
+            rect = await me.getDomRect(me.getColumnContainer().id);
+
+            Neo.main.DomAccess.scrollBy({
+                appName  : me.appName,
+                direction: 'left',
+                id       : me.getScrollContainer().id,
+                value    : rect.width * me.columnsBuffer / me.columnsVisible / 3
+            });
         }
     }
 
@@ -1001,7 +1002,7 @@ class Component extends BaseComponent {
                     removeDom
                 });
 
-                Object.assign(header.cn[i], {id: headerId, removeDom});
+                Object.assign(header.cn[i],       {id: headerId, removeDom});
                 Object.assign(header.cn[i].cn[0], {html: me.intlFormat_day.format(date), id: `${headerId}_day`});
                 Object.assign(header.cn[i].cn[1], {cls: dateCls, html: currentDate, id: `${headerId}_date`});
             }

package/src/component/Base.mjs

@@ -601,7 +601,7 @@ class Base extends CoreBase {
                     // todo: the main thread reply of mount arrives after pushing the task into the queue which does not ensure the dom is mounted
                     setTimeout(() => {
                         DomEventManager.mountDomListeners(me);
-                    }, 300);
+                    }, 100);
                 }
 
                 me.fire('mounted', me.id);
@@ -1120,7 +1120,7 @@ class Base extends CoreBase {
     /**
      * Can get called after the component got rendered. See the autoMount config as well.
      */
-    mount() {
+    async mount() {
         let me = this,
             child, childIds;
 
@@ -1148,16 +1148,18 @@ class Base extends CoreBase {
 
             me.render(true);
         } else {
-            Neo.currentWorker.promiseMessage('main', {
+            await Neo.currentWorker.promiseMessage('main', {
                 action     : 'mountDom',
                 appName    : me.appName,
                 id         : me.id,
                 html       : me.vnode.outerHTML,
                 parentId   : me.parentId,
                 parentIndex: me.parentIndex
-            }).then(() => {
-                me.mounted = true;
             });
+
+            await Neo.timeout(2000);
+
+            me.mounted = true;
         }
     }
 

package/src/core/Util.mjs

@@ -197,6 +197,14 @@ class Util extends Base {
         return typeof value === 'string';
     }
 
+    /**
+     * @param {Number} time in milliseconds
+     * @returns {Promise<unknown>}
+     */
+    static timeout(time) {
+        return new Promise(resolve => setTimeout(resolve, time));
+    }
+
     /**
      * Converts any iterable (strings, numeric indices and a length property) into a true array
      * @param {Object|String} iterable
@@ -236,6 +244,7 @@ Neo.applyFromNs(Neo, Util, {
     isNumber         : 'isNumber',
     isObject         : 'isObject',
     isString         : 'isString',
+    timeout          : 'timeout',
     toArray          : 'toArray'
 }, true);
 

package/src/dialog/Base.mjs

@@ -134,9 +134,7 @@ class Base extends Panel {
 
         me.createHeader();
 
-        if (me.animateTargetId) {
-            me.animateShow();
-        }
+        me.animateTargetId && me.animateShow();
     }
 
     /**
@@ -188,27 +186,25 @@ class Base extends Panel {
             me.headerToolbar.cls = cls;
         }
 
-        if (value) {
-            import('../draggable/DragZone.mjs').then(module => {
-                DragZone = module.default;
+        value && import('../draggable/DragZone.mjs').then(module => {
+            DragZone = module.default;
+
+            if (!me.dragListenersAdded) {
+                domListeners.push(
+                    {'drag:end'  : me.onDragEnd,   scope: me, delegate: '.neo-header-toolbar'},
+                    {'drag:start': me.onDragStart, scope: me, delegate: '.neo-header-toolbar'}
+                );
 
-                if (!me.dragListenersAdded) {
+                if (me.dragZoneConfig?.alwaysFireDragMove) {
                     domListeners.push(
-                        {'drag:end'  : me.onDragEnd,   scope: me, delegate: '.neo-header-toolbar'},
-                        {'drag:start': me.onDragStart, scope: me, delegate: '.neo-header-toolbar'}
+                        {'drag:move': me.onDragMove, scope: me, delegate: '.neo-header-toolbar'}
                     );
-
-                    if (me.dragZoneConfig?.alwaysFireDragMove) {
-                        domListeners.push(
-                            {'drag:move': me.onDragMove, scope: me, delegate: '.neo-header-toolbar'}
-                        );
-                    }
-
-                    me.domListeners       = domListeners;
-                    me.dragListenersAdded = true;
                 }
-            });
-        }
+
+                me.domListeners       = domListeners;
+                me.dragListenersAdded = true;
+            }
+        });
     }
 
     /**
@@ -235,19 +231,17 @@ class Base extends Panel {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        if (value) {
-            let me = this;
-
-            if (me.animateTargetId) {
-                Neo.currentWorker.promiseMessage('main', {
-                    action : 'updateDom',
-                    appName: me.appName,
-                    deltas : [{
-                        action: 'removeNode',
-                        id    : me.getAnimateTargetId()
-                    }]
-                });
-            }
+        let me = this;
+
+        if (value && me.animateTargetId) {
+            Neo.currentWorker.promiseMessage('main', {
+                action : 'updateDom',
+                appName: me.appName,
+                deltas : [{
+                    action: 'removeNode',
+                    id    : me.getAnimateTargetId()
+                }]
+            });
         }
     }
 
@@ -258,111 +252,104 @@ class Base extends Panel {
      * @protected
      */
     afterSetResizable(value, oldValue) {
-        if (value) {
-            import('../plugin/Resizable.mjs').then(module => {
-                let me      = this,
-                    plugins = me.plugins || [];
-
-                if (!me.getPlugin({flag: 'resizable'})) {
-                    plugins.push({
-                        module       : module.default,
-                        appName      : me.appName,
-                        delegationCls: 'neo-dialog',
-                        flag         : 'resizable',
-                        ...me.resizablePluginConfig
-                    });
-
-                    me.plugins = plugins;
-                }
-            });
-        }
+        value && import('../plugin/Resizable.mjs').then(module => {
+            let me      = this,
+                plugins = me.plugins || [];
+
+            if (!me.getPlugin({flag: 'resizable'})) {
+                plugins.push({
+                    module       : module.default,
+                    appName      : me.appName,
+                    delegationCls: 'neo-dialog',
+                    flag         : 'resizable',
+                    ...me.resizablePluginConfig
+                });
+
+                me.plugins = plugins;
+            }
+        });
     }
 
     /**
      *
      */
-    animateHide() {
+    async animateHide() {
         let me      = this,
             appName = me.appName,
-            id      = me.getAnimateTargetId();
+            id      = me.getAnimateTargetId(),
+            rects   = await me.getDomRect([me.id, me.animateTargetId]);
+
+        await Neo.currentWorker.promiseMessage('main', {
+            action  : 'mountDom',
+            appName,
+            html    : `<div id="${id}" class="neo-animate-dialog neo-hide" style="height:${rects[0].height}px;left:${rects[0].left}px;top:${rects[0].top}px;width:${rects[0].width}px;"></div>`,
+            parentId: 'document.body'
+        });
 
-        me.getDomRect([me.id, me.animateTargetId]).then(rects => {
-            Neo.currentWorker.promiseMessage('main', {
-                action  : 'mountDom',
-                appName : appName,
-                html    : `<div id="${id}" class="neo-animate-dialog neo-hide" style="height:${rects[0].height}px;left:${rects[0].left}px;top:${rects[0].top}px;width:${rects[0].width}px;"></div>`,
-                parentId: 'document.body'
-            }).then(() => {
-                setTimeout(() => {
-                    Neo.currentWorker.promiseMessage('main', {
-                        action : 'updateDom',
-                        appName: appName,
-                        deltas : [{
-                            id   : id,
-                            style: {
-                                height: `${rects[1].height}px`,
-                                left  : `${rects[1].left  }px`,
-                                top   : `${rects[1].top   }px`,
-                                width : `${rects[1].width }px`
-                            }
-                        }]
-                    }).then(() => {
-                        setTimeout(() => {
-                            Neo.currentWorker.promiseMessage('main', {
-                                action : 'updateDom',
-                                appName: appName,
-                                deltas : [{
-                                    action: 'removeNode',
-                                    id    : id
-                                }]
-                            });
-                        }, 250);
-                    });
-                }, 30);
-
-                me.closeOrHide(false);
-            });
+        me.closeOrHide(false);
+
+        await Neo.timeout(30);
+
+        await Neo.currentWorker.promiseMessage('main', {
+            action: 'updateDom',
+            appName,
+            deltas: [{
+                id,
+                style: {
+                    height: `${rects[1].height}px`,
+                    left  : `${rects[1].left  }px`,
+                    top   : `${rects[1].top   }px`,
+                    width : `${rects[1].width }px`
+                }
+            }]
+        });
+
+        await Neo.timeout(250);
+
+        await Neo.currentWorker.promiseMessage('main', {
+            action: 'updateDom',
+            appName,
+            deltas: [{action: 'removeNode', id}]
         });
     }
 
     /**
      *
      */
-    animateShow() {
-        let me      = this,
-            appName = me.appName,
-            id      = me.getAnimateTargetId();
+    async animateShow() {
+        let me           = this,
+            appName      = me.appName,
+            id           = me.getAnimateTargetId(),
+            wrapperStyle = me.wrapperStyle,
+            rect         = await me.getDomRect(me.animateTargetId);
+
+        await Neo.currentWorker.promiseMessage('main', {
+            action  : 'mountDom',
+            appName,
+            html    : `<div id="${id}" class="neo-animate-dialog" style="height:${rect.height}px;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;"></div>`,
+            parentId: 'document.body'
+        });
 
-        me.getDomRect(me.animateTargetId).then(rect => {
-            Neo.currentWorker.promiseMessage('main', {
-                action  : 'mountDom',
-                appName : appName,
-                html    : `<div id="${id}" class="neo-animate-dialog" style="height:${rect.height}px;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;"></div>`,
-                parentId: 'document.body'
-            }).then(() => {
-                setTimeout(() => {
-                    Neo.currentWorker.promiseMessage('main', {
-                        action  : 'updateDom',
-                        appName : appName,
-
-                        deltas: [{
-                            id   : id,
-                            style: {
-                                height   : me.wrapperStyle?.height || '50%',
-                                left     : '50%',
-                                top      : '50%',
-                                transform: 'translate(-50%, -50%)',
-                                width    : me.wrapperStyle?.width || '50%'
-                            }
-                        }]
-                    }).then(() => {
-                        setTimeout(() => {
-                            me.show(false);
-                        }, 200);
-                    });
-                }, 30);
-            });
+        await Neo.timeout(30);
+
+        await Neo.currentWorker.promiseMessage('main', {
+            action: 'updateDom',
+            appName,
+            deltas: [{
+                id,
+                style: {
+                    height   : wrapperStyle?.height    || '50%',
+                    left     : wrapperStyle?.left      || '50%',
+                    top      : wrapperStyle?.top       || '50%',
+                    transform: wrapperStyle?.transform || 'translate(-50%, -50%)',
+                    width    : wrapperStyle?.width     || '50%'
+                }
+            }]
         });
+
+        await Neo.timeout(200);
+
+        me.show(false);
     }
 
     /**

package/src/manager/DomEvent.mjs

@@ -396,7 +396,9 @@ class DomEvent extends Base {
             });
 
             if (component.mounted) {
-                me.mountDomListeners(component);
+                setTimeout(() => {
+                    me.mountDomListeners(component);
+                }, 100)
             }
         } else {
             Logger.logError('Component.domListeners have to be an array', component);

package/src/plugin/Resizable.mjs

@@ -424,11 +424,11 @@ class Resizable extends Base {
         if (!me.dragZone) {
             me.dragZone = Neo.create({
                 module             : DragZone,
-                appName            : appName,
+                appName,
                 boundaryContainerId: owner.boundaryContainerId,
                 dragElement        : owner.vdom,
                 moveInMainThread   : false,
-                owner              : owner,
+                owner,
                 ...me.dragZoneConfig
             });
         } else {