neo.mjs 8.8.0 → 8.9.1

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.8.0'
+                html  : 'v8.9.1'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -33,8 +33,8 @@ class Viewport extends BaseViewport {
 
             items: ['->', {
                 handler: 'up.onSwitchThemeButtonClick',
-                iconCls: 'fas fa-moon',
-                text   : 'Dark Theme'
+                iconCls: 'fas fa-sun',
+                text   : 'Light Theme'
             }]
         }, {
             module: GridContainer,
@@ -133,7 +133,7 @@ class Viewport extends BaseViewport {
     onSwitchThemeButtonClick(data) {
         let me          = this,
             button      = data.component,
-            isDarkTheme = me.theme === 'neo-theme-dark',
+            isDarkTheme = me.theme !== 'neo-theme-light',
             theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
 
         button.set({

package/examples/grid/nestedRecordFields/neo-config.json

@@ -3,5 +3,6 @@
     "basePath"        : "../../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"]
+    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"],
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
 }

package/examples/table/nestedRecordFields/Viewport.mjs

@@ -33,8 +33,8 @@ class Viewport extends BaseViewport {
 
             items: ['->', {
                 handler: 'up.onSwitchThemeButtonClick',
-                iconCls: 'fas fa-moon',
-                text   : 'Dark Theme'
+                iconCls: 'fas fa-sun',
+                text   : 'Light Theme'
             }]
         }, {
             module: TableContainer,
@@ -129,7 +129,7 @@ class Viewport extends BaseViewport {
     onSwitchThemeButtonClick(data) {
         let me          = this,
             button      = data.component,
-            isDarkTheme = me.theme === 'neo-theme-dark',
+            isDarkTheme = me.theme !== 'neo-theme-light',
             theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
 
         button.set({

package/examples/table/nestedRecordFields/neo-config.json

@@ -2,5 +2,6 @@
     "appPath"    : "examples/table/nestedRecordFields/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs"
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.8.0",
+    "version": "8.9.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -970,12 +970,24 @@ class Component extends Base {
      */
     afterSetTheme(value, oldValue) {
         if (value || oldValue !== undefined) {
-            let cls = this.cls;
+            let me          = this,
+                {cls}       = me,
+                needsUpdate = false;
 
-            NeoArray.remove(cls, oldValue);
-            value && NeoArray.add(cls, value);
+            if (oldValue && cls.includes(oldValue)) {
+                NeoArray.remove(cls, oldValue);
+                needsUpdate = true
+            }
 
-            this.cls = cls
+            // We do not need to add a DOM based CSS selector, in case the theme is already inherited
+            if (value !== me.parent?.theme) {
+                value && NeoArray.add(cls, value);
+                needsUpdate = true
+            }
+
+            if (needsUpdate) {
+                me.cls = cls
+            }
         }
     }
 
@@ -1672,7 +1684,7 @@ class Component extends Base {
      * Convenience shortcut
      * @param {String[]|String} id=this.id
      * @param {String} appName=this.appName
-     * @returns {Promise<Neo.util.Rectangle>}
+     * @returns {Promise<Neo.util.Rectangle||Neo.util.Rectangle[]>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
         let result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
@@ -1684,6 +1696,42 @@ class Component extends Base {
         return Rectangle.clone(result)
     }
 
+    /**
+     * In case you are sure a DOMRect exists, use getDomRect()
+     * Otherwise you can wait for it using this method.
+     * @example:
+     *     await this.render(true);
+     *     await this.waitForDomRect();
+     * @param {Object}          opts
+     * @param {String}          opts.appName=this.appName
+     * @param {Number}          opts.attempts=10 Reruns in case the rect height or width equals 0
+     * @param {Number}          opts.delay=50    Time in ms before checking again
+     * @param {String[]|String} opts.id=this.id
+     * @returns {Promise<Neo.util.Rectangle||Neo.util.Rectangle[]>}
+     */
+    async waitForDomRect({appName=this.appName, attempts=10, delay=50, id=this.id}) {
+        let me     = this,
+            result = await me.getDomRect(id, appName),
+            reRun  = false;
+
+        if (Array.isArray(result)) {
+            result.forEach(rect => {
+                if (rect.height < 1 || rect.width < 1) {
+                    reRun = true
+                }
+            })
+        } else if (result.height < 1 || result.width < 1) {
+            reRun = true
+        }
+
+        if (reRun && attempts > 0) {
+            await me.timeout(delay);
+            return await me.waitForDomRect({appName, attempts: attempts-1, delay, id})
+        }
+
+        return result
+    }
+
     /**
      * Honors different item roots for mount / render OPs
      * @returns {String}

package/src/container/Base.mjs

@@ -216,6 +216,22 @@ class Container extends Component {
         }
     }
 
+    /**
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        value && this.items?.forEach(item => {
+            if (!Neo.isString(item)) {
+                item.theme = value
+            }
+        })
+    }
+
     /**
      * Triggered after the windowId config got changed
      * @param {Number|null} value

package/src/dialog/Base.mjs

@@ -411,11 +411,23 @@ class Dialog extends Panel {
 
         rect = await me.getDomRect(me.animateTargetId);
 
+        if (style.left || style.top) {
+            let tempStyle = {...style};
+
+            // Ensure that the initial mounting happens outside the visible area
+            delete style.left;
+            delete style.top;
+
+            me.style = style;
+
+            // Silent update & ensure that a given starting position won't get lost
+            me._style = style = tempStyle
+        }
+
         // rendered outside the visible area
         await me.render(true);
-        await me.timeout(150);
 
-        let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
+        let [dialogRect, bodyRect] = await me.waitForDomRect({id: [me.id, 'document.body']});
 
         // Move to cover the animation target
         await Neo.applyDeltas(appName, {