neo.mjs 8.41.1 → 8.42.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/examples/ServiceWorker.mjs

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

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,
+            {dialog} = me,
+            button   = data.component,
+            {appName, record, theme, windowId} = 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 = button.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.component.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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.41.1",
+    "version": "8.42.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -65,7 +65,7 @@
         "sass": "^1.86.3",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.99.3",
+        "webpack": "^5.99.5",
         "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.1'
+     * @default '8.42.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.41.1'
+    version: '8.42.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -811,7 +811,7 @@ class Collection extends Base {
     /**
      * Returns the first item which matches the property and value
      * @param {Object|String} property
-     * @param {String|Number} [value] Only required in case the first param is a string
+     * @param {Number|String} [value] Only required in case the first param is a string
      * @returns {Object} Returns the first found item or null
      */
     findFirst(property, value) {
@@ -828,7 +828,7 @@ class Collection extends Base {
 
     /**
      * Returns the object associated to the key, or null if there is none.
-     * @param key
+     * @param {Number|String} key
      * @returns {Object|null}
      */
     get(key) {

package/src/component/Base.mjs

@@ -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 = {theme: me.theme, ...me.itemDefaults},
+            defaults = {...me.itemDefaults},
             lazyLoadItem, module;
 
         if (defaults) {
@@ -319,6 +319,7 @@ class Container extends Component {
         switch (Neo.typeOf(item)) {
             case 'NeoClass': {
                 item = Neo.create({
+                    theme: item.config.theme || me.theme,
                     ...defaults,
                     module: item,
                     ...config
@@ -350,7 +351,8 @@ class Container extends Component {
                 lazyLoadItem = module && !module.isClass && Neo.isFunction(module);
 
                 if (module && !lazyLoadItem) {
-                    item.className = module.prototype.className
+                    item.className = module.prototype.className;
+                    item.theme     = defaults.theme || module.config.theme || me.theme
                 }
 
                 if (item.handlerScope === 'this') {

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

@@ -104,6 +104,9 @@ class Component extends Column {
                 windowId
             });
 
+            view.getController()   ?.parseConfig(component);
+            view.getStateProvider()?.parseConfig(component);
+
             me.map.set(id, component)
         }
 

package/src/manager/Component.mjs

@@ -35,7 +35,7 @@ class Component extends Manager {
         let me = this;
 
         Neo.first        = me.getFirst.bind(me); // alias
-        Neo.getComponent = me.getById.bind(me)   // alias
+        Neo.getComponent = me.get     .bind(me)  // alias
     }
 
     /**
@@ -157,7 +157,7 @@ class Component extends Manager {
     }
 
     /**
-     * @param {Array} path
+     * @param {Object[]} path
      * @returns {String|null} the component id in case there is a match
      */
     findParentComponent(path) {
@@ -179,11 +179,20 @@ class Component extends Manager {
 
     /**
      * Returns the object associated to the key, or null if there is none.
-     * @param key
+     * @param {Number|String} key
+     * @param {Boolean}       [includeWrapperNodes=true]
      * @returns {Neo.component.Base|null}
      */
-    get(key) {
-        return this.wrapperNodes.get(key) || super.get(key)
+    get(key, includeWrapperNodes=true) {
+        if (includeWrapperNodes) {
+            let wrapperNode = this.wrapperNodes.get(key);
+
+            if (wrapperNode) {
+                return wrapperNode
+            }
+        }
+
+        return super.get(key)
     }
 
     /**
@@ -333,7 +342,7 @@ class Component extends Manager {
         let parentIds = [];
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (component) {
                 parentIds.push(component.id)
@@ -369,13 +378,13 @@ class Component extends Manager {
      */
     getParents(component) {
         if (Neo.isString(component)) {
-            component = this.getById(component)
+            component = this.get(component)
         }
 
         let parents = [];
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (component) {
                 parents.push(component)
@@ -509,7 +518,7 @@ class Component extends Manager {
      * @returns {Neo.component.Base|Neo.component.Base[]|null}
      */
     up(componentId, config, returnFirstMatch=true) {
-        let component   = this.getById(componentId),
+        let component   = this.get(componentId),
             returnArray = [],
             configArray, configLength, matchArray;
 
@@ -525,7 +534,7 @@ class Component extends Manager {
         configLength = configArray.length;
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (!component) {
                 return returnFirstMatch ? null : returnArray

package/src/util/Logger.mjs

@@ -163,7 +163,7 @@ class Logger extends Base {
                 component;
 
             data.path.forEach(item => {
-                component = Neo.getComponent(item.id);
+                component = Neo.getComponent(item.id, false);
 
                 if (component) {
                     if (!isGroupSet) {