neo.mjs 8.41.0 → 8.41.2

package/apps/ServiceWorker.mjs

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

package/apps/covid/view/country/Table.mjs

@@ -42,6 +42,7 @@ class Table extends Container {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-04-06",
+      "datePublished": "2025-04-09",
       "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.41.0'
+                html  : 'v8.41.2'
             }]
         }],
         /**

package/apps/sharedcovid/view/country/Table.mjs

@@ -42,6 +42,7 @@ class Table extends Container {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/examples/ServiceWorker.mjs

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

package/examples/calendar/basic/MainContainerController.mjs

@@ -1,5 +1,4 @@
 import ComponentController from '../../../src/controller/Component.mjs';
-import NeoArray            from '../../../src/util/Array.mjs';
 
 /**
  * @class Neo.examples.calendar.basic.MainContainerController
@@ -22,7 +21,7 @@ class MainContainerController extends ComponentController {
             button        = data.component,
             component     = me.component,
             headerToolbar = me.getReference('headerToolbar'),
-            buttonText, cls, headerColor, iconCls, style, theme;
+            buttonText, headerColor, iconCls, style, theme;
 
         if (button.text === 'Theme Light') {
             buttonText  = 'Theme Dark';
@@ -36,16 +35,7 @@ class MainContainerController extends ComponentController {
             theme       = 'neo-theme-dark'
         }
 
-        cls = [...component.cls];
-
-        component.cls.forEach(item => {
-            if (item.includes('neo-theme')) {
-                NeoArray.remove(cls, item)
-            }
-        });
-
-        NeoArray.add(cls, theme);
-        component.cls = cls;
+        component.theme = theme;
 
         button.set({
             iconCls,

package/examples/grid/nestedRecordFields/EditUserDialog.mjs

@@ -1,5 +1,6 @@
 import CheckBox     from '../../../src/form/field/CheckBox.mjs';
 import CountryField from '../../../src/form/field/Country.mjs';
+import DateField    from '../../../src/form/field/Date.mjs';
 import Dialog       from '../../../src/dialog/Base.mjs';
 import TextField    from '../../../src/form/field/Text.mjs';
 
@@ -58,6 +59,11 @@ class EditUserDialog extends Dialog {
             labelText: 'Lastname',
             listeners: {change: 'up.onLastnameFieldChange'},
             reference: 'lastname-field'
+        }, {
+            module   : DateField,
+            labelText: 'Date',
+            listeners: {change: 'up.onDateFieldChange'},
+            reference: 'date-field'
         }, {
             module    : CountryField,
             bind      : {store: 'stores.countries'},
@@ -89,6 +95,7 @@ class EditUserDialog extends Dialog {
             await me.timeout(20);
 
             me.getItem('country-field')  .value   = record.country;
+            me.getItem('date-field')     .value   = record.date;
             me.getItem('firstname-field').value   = record['user.firstname'];
             me.getItem('lastname-field') .value   = record['user.lastname'];
             me.getItem('selected-field') .checked = record['annotations.selected'];
@@ -106,6 +113,17 @@ class EditUserDialog extends Dialog {
         this.record.set({country: data.value.code})
     }
 
+    /**
+     * @param {Object} data
+     */
+    onDateFieldChange(data) {
+        // You can also access the internal setter directly:
+        // this.record.country = data.value.code
+        // Using the API allows bulk changes
+
+        this.record.set({date: data.value})
+    }
+
     /**
      * @param {Object} data
      */

package/examples/grid/nestedRecordFields/MainModel.mjs

@@ -26,6 +26,9 @@ class MainModel extends Model {
         }, {
             name: 'country',
             type: 'String'
+        }, {
+            name: 'date',
+            type: 'String'
         }, {
             name: 'edit',
             type: 'String'

package/examples/grid/nestedRecordFields/MainStore.mjs

@@ -13,6 +13,7 @@ class MainStore extends Store {
 
         data: [{
             country : 'DE',
+            date    : '2025-04-15',
             githubId: 'tobiu',
 
             user: {
@@ -25,6 +26,7 @@ class MainStore extends Store {
             },
 
             country : 'US',
+            date    : '2025-04-16',
             githubId: 'rwaters',
 
             user: {
@@ -33,6 +35,7 @@ class MainStore extends Store {
             }
         }, {
             country : 'DE',
+            date    : '2025-04-17',
             githubId: 'mrsunshine',
 
             user: {
@@ -41,6 +44,7 @@ class MainStore extends Store {
             }
         }, {
             country : 'US',
+            date    : '2025-04-18',
             githubId: 'camtnbikerrwc',
 
             user: {

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -1,6 +1,7 @@
 import BaseViewport          from '../../../src/container/Viewport.mjs';
 import Button                from '../../../src/button/Base.mjs';
 import GridContainer         from '../../../src/grid/Container.mjs';
+import ViewportController    from './ViewportController.mjs';
 import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
@@ -14,6 +15,10 @@ class Viewport extends BaseViewport {
          * @protected
          */
         className: 'Neo.examples.grid.nestedRecordFields.Viewport',
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController,
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
@@ -32,12 +37,12 @@ class Viewport extends BaseViewport {
             style    : {marginBottom: '1em'},
 
             items: ['->', {
-                handler: 'up.onSwitchDragModeButtonClick',
+                handler: 'onSwitchDragModeButtonClick',
                 iconCls: 'far fa-square',
                 style  : {marginRight: '1em'},
                 text   : 'Drag column headers only'
             }, {
-                handler: 'up.onSwitchThemeButtonClick',
+                handler: 'onSwitchThemeButtonClick',
                 iconCls: 'fas fa-sun',
                 text   : 'Light Theme'
             }]
@@ -54,10 +59,11 @@ class Viewport extends BaseViewport {
                 {dataField: 'user.firstname', text: 'Firstname'},
                 {dataField: 'user.lastname',  text: 'Lastname'},
                 {dataField: 'githubId',       text: 'Github Id'},
+                {dataField: 'date',           text: 'Date'},
                 {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
                 {dataField: 'edit',           text: 'Edit Action', component: {
                     module : Button,
-                    handler: 'up.editButtonHandler',
+                    handler: 'editButtonHandler',
                     text   : 'Edit'
                 }}
             ],
@@ -68,11 +74,6 @@ class Viewport extends BaseViewport {
         }]
     }
 
-    /**
-     * @member {Neo.dialog.Base|null} dialog=null
-     */
-    dialog = null
-
     /**
      * @param {Object} data
      */
@@ -85,73 +86,6 @@ class Viewport extends BaseViewport {
 
         return ''
     }
-
-    /**
-     * @param {Object} data
-     */
-    editButtonHandler(data) {
-        let me       = this,
-            button   = data.component,
-            {appName, dialog, theme, windowId} = me,
-            {record} = button;
-
-        if (!dialog) {
-            import('./EditUserDialog.mjs').then(module => {
-                me.dialog = Neo.create({
-                    module         : module.default,
-                    animateTargetId: button.id,
-                    appName,
-                    stateProvider  : {parent: me.getStateProvider()},
-                    record,
-                    theme,
-                    windowId
-                })
-            })
-        } else {
-            dialog.animateTargetId = button.id;
-            dialog.record          = record;
-
-            dialog.show()
-        }
-    }
-
-    /**
-     * @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
-     */
-    onSwitchThemeButtonClick(data) {
-        let me          = this,
-            button      = data.component,
-            isDarkTheme = me.theme !== 'neo-theme-light',
-            theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
-
-        button.set({
-            iconCls: isDarkTheme ? 'fa fa-moon' : 'fa fa-sun',
-            text   : isDarkTheme ? 'Dark Theme' : 'Light Theme'
-        });
-
-        me.theme = theme;
-
-        if (me.dialog) {
-            me.dialog.theme = theme
-        }
-    }
 }
 
 export default Neo.setupClass(Viewport);

package/examples/grid/nestedRecordFields/ViewportController.mjs

@@ -0,0 +1,110 @@
+import Component from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.ViewportController'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.ViewportController'
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    editButtonHandler(data) {
+        let me       = this,
+            button   = data.component,
+            {appName, dialog, theme, windowId} = me,
+            {record} = button;
+
+        if (!dialog) {
+            import('./EditUserDialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module         : module.default,
+                    animateTargetId: button.id,
+                    appName,
+                    stateProvider  : {parent: me.getStateProvider()},
+                    record,
+                    theme,
+                    windowId
+                })
+            })
+        } else {
+            dialog.animateTargetId = button.id;
+            dialog.record          = record;
+
+            dialog.show()
+        }
+    }
+
+    /**
+     * @param {Record[]} items
+     */
+    onCountryStoreLoad(items) {
+        let me        = this,
+            mainStore = me.getStore('mainStore'),
+            country;
+
+        // if the main table store is already loaded, the country field renderer had no data
+        if (mainStore.getCount() > 0) {
+            mainStore.items.forEach(record => {
+                country = record.country;
+
+                // hack resetting the current value to get a new record change
+                record.toJSON().country = null;
+
+                record.country = country
+            })
+        }
+    }
+
+    /**
+     * @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
+     */
+    onSwitchThemeButtonClick(data) {
+        let me          = this,
+            button      = data.component,
+            isDarkTheme = me.theme !== 'neo-theme-light',
+            theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
+
+        button.set({
+            iconCls: isDarkTheme ? 'fa fa-moon' : 'fa fa-sun',
+            text   : isDarkTheme ? 'Dark Theme' : 'Light Theme'
+        });
+
+        me.theme = theme;
+
+        if (me.dialog) {
+            me.dialog.theme = theme
+        }
+    }
+}
+
+export default Neo.setupClass(ViewportController);

package/examples/grid/nestedRecordFields/ViewportStateProvider.mjs

@@ -2,8 +2,6 @@ import MainStore     from './MainStore.mjs';
 import StateProvider from '../../../src/state/Provider.mjs';
 import Store         from '../../../src/data/Store.mjs';
 
-const dataSymbol = Symbol.for('data');
-
 /**
  * @class Neo.examples.grid.nestedRecordFields.ViewportStateProvider
  * @extends Neo.state.Provider
@@ -36,27 +34,6 @@ class ViewportStateProvider extends StateProvider {
             mainStore: MainStore
         }
     }
-
-    /**
-     * @param {Record[]} items
-     */
-    onCountryStoreLoad(items) {
-        let me        = this,
-            mainStore = me.getStore('mainStore'),
-            country;
-
-        // if the main table store is already loaded, the country field renderer had no data
-        if (mainStore.getCount() > 0) {
-            mainStore.items.forEach(record => {
-                country = record.country;
-
-                // hack resetting the current value to get a new record change
-                record[dataSymbol].country = null;
-
-                record.country = country
-            })
-        }
-    }
 }
 
 export default Neo.setupClass(ViewportStateProvider);

package/examples/table/covid/TableContainer.mjs

@@ -37,6 +37,7 @@ class TableContainer extends BaseTableContainer {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.41.0",
+    "version": "8.41.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,7 +57,7 @@
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.5.2",
-        "marked": "^15.0.7",
+        "marked": "^15.0.8",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
@@ -65,7 +65,7 @@
         "sass": "^1.86.3",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.98.0",
+        "webpack": "^5.99.3",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.1",
         "webpack-hook-plugin": "^1.0.7",

package/src/DefaultConfig.mjs

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

package/src/calendar/view/MainContainer.mjs

@@ -289,6 +289,26 @@ class MainContainer extends Container {
         }
     }
 
+    /**
+     * Triggered after the theme config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        let me = this;
+
+        if (me._editCalendarContainer) {
+            me._editCalendarContainer.theme = value
+        }
+
+        if (me._editEventContainer) {
+            me._editEventContainer.theme = value
+        }
+    }
+
     /**
      * Triggered after the useSettingsContainer config got changed
      * @param {Boolean} value
@@ -330,6 +350,7 @@ class MainContainer extends Container {
                 appName      : me.appName,
                 owner        : me,
                 stateProvider: {parent: me.getStateProvider()},
+                theme        : me.theme,
                 width        : 250,
                 windowId     : me.windowId,
                 ...me.editCalendarContainerConfig
@@ -353,6 +374,7 @@ class MainContainer extends Container {
                 appName      : me.appName,
                 owner        : me,
                 stateProvider: {parent: me.getStateProvider()},
+                theme        : me.theme,
                 width        : 250,
                 windowId     : me.windowId,
                 ...me.editEventContainerConfig

package/src/component/Base.mjs

@@ -1582,11 +1582,11 @@ class Component extends Base {
             me.isVdomUpdating = false;
             reject?.()
         }).then(data => {
-            me.isVdomUpdating = false;
-
-            // checking if the component got destroyed before the update cycle is done
+            // Checking if the component got destroyed before the update cycle is done
             if (me.id) {
-                me.vnode = data.vnode;
+                // It is crucial to delegate the vnode tree before resolving the cycle
+                me.vnode          = data.vnode;
+                me.isVdomUpdating = false;
 
                 deltas = data.deltas;
 
@@ -2316,7 +2316,7 @@ class Component extends Base {
             {useVdomWorker} = Neo.config;
 
         // Verify that the critical rendering path => CSS files for the new tree is in place
-        if (currentWorker.countLoadingThemeFiles !== 0) {
+        if (autoMount && currentWorker.countLoadingThemeFiles !== 0) {
             currentWorker.on('themeFilesLoaded', function() {
                 !me.mounted && me.render(mount)
             }, me, {once: true});

package/src/container/Base.mjs

@@ -303,7 +303,7 @@ class Container extends Component {
     createItem(item, index) {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
-            defaults = {...me.itemDefaults},
+            defaults = {theme: me.theme, ...me.itemDefaults},
             lazyLoadItem, module;
 
         if (defaults) {

package/src/core/Observable.mjs

@@ -1,4 +1,5 @@
 import Base              from './Base.mjs';
+import NeoArray          from '../util/Array.mjs';
 import {resolveCallback} from '../util/Function.mjs';
 
 /**
@@ -182,7 +183,7 @@ class Observable extends Base {
 
                 // remove the listener if the scope no longer exists
                 if (cb.scope && !cb.scope.id) {
-                    listeners[name].splice(i, 1)
+                    NeoArray.remove(listeners[name], handler)
                 } else {
                     if (!me.suspendEvents) {
                         // Object event format. Inject firer reference in as 'source'
@@ -191,7 +192,7 @@ class Observable extends Base {
                         }
 
                         // remove the listener if it has the once flag
-                        handler.once && listeners[name].splice(i, 1)
+                        handler.once && NeoArray.remove(listeners[name], handler);
 
                         if (Neo.isNumber(delay) && delay > 0) {
                             me.delayedCallback(cb, handler.data ? args.concat(handler.data) : args, delay)

package/src/grid/column/Component.mjs

@@ -83,6 +83,7 @@ class Component extends Column {
         }
 
         componentConfig = me.applyRecordConfigs(componentConfig, record);
+        componentConfig = {...componentConfig};
 
         if (component) {
             delete componentConfig.className;
@@ -103,6 +104,9 @@ class Component extends Column {
                 windowId
             });
 
+            view.getController()   ?.parseConfig(component);
+            view.getStateProvider()?.parseConfig(component);
+
             me.map.set(id, component)
         }
 

package/src/grid/header/Toolbar.mjs

@@ -155,6 +155,12 @@ class Toolbar extends BaseToolbar {
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
+        me.items.forEach(item => {
+            if (!Object.hasOwn(item, 'sortable')) {
+                item.sortable = me.sortable
+            }
+        });
+
         super.createItems();
 
         let {items} = me,
@@ -170,7 +176,6 @@ class Toolbar extends BaseToolbar {
             if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
             if (item.width)    {style.width    = item.width    + 'px'}
 
-            item.sortable = me.sortable;
             item.wrapperStyle = style
         });
 

package/src/table/header/Toolbar.mjs

@@ -128,6 +128,12 @@ class Toolbar extends BaseToolbar {
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
+        me.items.forEach(item => {
+            if (!Object.hasOwn(item, 'sortable')) {
+                item.sortable = me.sortable
+            }
+        });
+
         super.createItems();
 
         let dockLeftWidth  = 0,
@@ -156,7 +162,6 @@ class Toolbar extends BaseToolbar {
                 item.vdom.cls = [] // remove the button cls from the th tag
             }
 
-            item.sortable = me.sortable;
             item.wrapperStyle = style;
 
             // inverse loop direction

package/src/calendar/README.md

@@ -1,2 +0,0 @@
-# Development in progress
-Currently, scheduled for the v4.x release