neo.mjs 8.8.0 → 8.9.0

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.0'
          */
-        version: '8.8.0'
+        version: '8.9.0'
     }
 
     /**

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.0'
             }]
         }],
         /**

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.0'
          */
-        version: '8.8.0'
+        version: '8.9.0'
     }
 
     /**

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.0",
     "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.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.8.0'
+    version: '8.9.0'
 };
 
 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
+            }
         }
     }
 

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