neo.mjs 8.9.1 → 8.10.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-25",
+      "datePublished": "2025-01-26",
       "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.9.1'
+                html  : 'v8.10.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/container/MainContainer.mjs

@@ -25,8 +25,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me     = this,
-            {view} = me.exampleComponent;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -46,35 +46,35 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellmodel',
+            checked       : selectionModel.ntype === 'selection-grid-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-columnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
+            checked       : selectionModel.ntype === 'selection-grid-columnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-rowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-rowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }]
     }
@@ -97,6 +97,10 @@ class MainContainer extends ConfigurationViewport {
 
             viewConfig: {
                 selectionModel: CellModel
+            },
+
+            wrapperStyle: {
+                height: '250px'
             }
         }
     }
@@ -106,7 +110,7 @@ class MainContainer extends ConfigurationViewport {
      * @param {String} value
      * @param {Object} opts
      */
-    onRadioChange(config, value, opts) {
+    onRadioViewChange(config, value, opts) {
         if (opts.value === true) { // we only want to listen to check events, not uncheck
             this.exampleComponent.view[config] = value
         }

package/examples/table/cellEditing/MainContainer.mjs

@@ -44,7 +44,8 @@ class MainContainer extends ConfigurationViewport {
      * @returns {Object[]}
      */
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -64,25 +65,25 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel',
+            checked       : selectionModel.ntype === 'selection-table-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }, {
             module        : CheckBox,
@@ -106,12 +107,15 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return {
-            module        : TableContainer,
-            bind          : {store : 'stores.mainStore'},
-            cellEditing   : true,
-            parentId      : this.id,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module     : TableContainer,
+            bind       : {store: 'stores.mainStore'},
+            cellEditing: true,
+            parentId   : this.id,
+            store      : MainStore,
+
+            viewConfig: {
+                selectionModel: CellModel
+            },
 
             columnDefaults: {
                 editable: true
@@ -169,6 +173,17 @@ class MainContainer extends ConfigurationViewport {
     onPluginConfigChange(config, opts) {
         this.exampleComponent.getPlugin('table-cell-editing')[config] = opts.value
     }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioViewChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/table/container/MainContainer.mjs

@@ -27,7 +27,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -47,35 +48,35 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel',
+            checked       : selectionModel.ntype === 'selection-table-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-columnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-columnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-rowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
+            checked       : selectionModel.ntype === 'selection-table-rowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }, {
             module   : Checkbox,
@@ -88,8 +89,8 @@ class MainContainer extends ConfigurationViewport {
             checked  : false,
             labelText: 'Fit width',
             listeners: {
-                change({ value }) {
-                    const { style } = me.exampleComponent;
+                change({value}) {
+                    const {style} = me.exampleComponent;
 
                     if (value) {
                         style.width = '100%';
@@ -100,7 +101,7 @@ class MainContainer extends ConfigurationViewport {
                     }
 
                     me.exampleComponent.style = style;
-                    me.exampleComponent.update();
+                    me.exampleComponent.update()
                 }
             },
             style: {marginTop: '10px'}
@@ -112,9 +113,12 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return Neo.create(TableContainer, {
-            id            : 'myTableStoreContainer',
-            selectionModel: CellModel,
-            store         : MainStore,
+            id   : 'myTableStoreContainer',
+            store: MainStore,
+
+            viewConfig: {
+                selectionModel: CellModel
+            },
 
             columns: [
                 {dataField: 'firstname', text: 'Firstname'},
@@ -180,6 +184,17 @@ class MainContainer extends ConfigurationViewport {
     editButtonHandler(data) {
         console.log(data)
     }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioViewChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/tableFiltering/MainContainer.mjs

@@ -47,9 +47,9 @@ class MainContainer extends Viewport {
         }, {
             module           : TableContainer,
             id               : 'myTableFilterContainer',
-            selectionModel   : CellModel,
             showHeaderFilters: true,
             store            : MainStore,
+            viewConfig       : {selectionModel: CellModel},
             width            : '100%',
             wrapperStyle     : {height: '300px'},
 

package/examples/tableStore/MainContainer.mjs

@@ -60,7 +60,8 @@ class MainContainer extends Viewport {
                     for (; j < repeats; j++) {
                         for (i=0; i < countRecords; i++) {
                             record = store.items[i];
-                            Object.entries(record).forEach(([field, value]) => {
+
+                            Object.entries(record[Symbol.for('data')]).forEach(([field, value]) => {
                                 if (field !== 'githubId') {
                                     if (value.includes(string1)) {
                                         newValue = value.replace(string1, string2);
@@ -72,7 +73,7 @@ class MainContainer extends Viewport {
 
                                     record[field] = newValue; // triggers the change
                                 }
-                            });
+                            })
                         }
                     }
                 }
@@ -110,7 +111,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -127,7 +128,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -144,7 +145,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -161,7 +162,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -178,7 +179,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -186,12 +187,12 @@ class MainContainer extends Viewport {
                 }
             }]
         }, {
-            module        : TableContainer,
-            id            : 'myTableStoreContainer',
-            selectionModel: CellModel,
-            store         : MainStore,
-            width         : '100%',
-            wrapperStyle  : {height: '300px'},
+            module      : TableContainer,
+            id          : 'myTableStoreContainer',
+            store       : MainStore,
+            viewConfig  : {selectionModel: CellModel},
+            width       : '100%',
+            wrapperStyle: {height: '300px'},
 
             columns: [{
                 dataField: 'firstname',

package/examples/tableStore/MainModel.mjs

@@ -10,16 +10,16 @@ class MainModel extends Model {
 
         fields: [{
             name: 'country',
-            type: 'string'
+            type: 'html'
         }, {
             name: 'firstname',
-            type: 'string'
+            type: 'html'
         }, {
             name: 'githubId',
             type: 'string'
         }, {
             name: 'lastname',
-            type: 'string'
+            type: 'html'
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.9.1",
+    "version": "8.10.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.9.1'
+     * @default '8.10.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.9.1'
+    version: '8.10.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -213,6 +213,7 @@ class Main extends core.Base {
         }
 
         this.registerAddon(module.default);
+        await this.timeout(20); // Wait until remotes are registered
 
         return true
     }

package/src/component/Base.mjs

@@ -1684,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||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});
@@ -1696,42 +1696,6 @@ 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}
@@ -2758,6 +2722,42 @@ class Component extends Base {
 
         me.hasUnmountedVdomChanges = !mounted && me.hasBeenMounted
     }
+
+    /**
+     * 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
+    }
 }
 
 /**

package/src/grid/Container.mjs

@@ -236,20 +236,20 @@ class GridContainer extends BaseContainer {
     async addResizeObserver(mounted) {
         let me             = this,
             ResizeObserver = Neo.main?.addon?.ResizeObserver,
-            resizeParams   = {id: me.id, windowId: me.windowId};
+            {windowId}     = me,
+            resizeParams   = {id: me.id, windowId};
 
-        // Check if the remotes api is ready for slow network connections & dist/prod
         if (!ResizeObserver) {
-            await me.timeout(100);
-            await me.addResizeObserver(mounted)
+            await Neo.Main.importAddon({name: 'ResizeObserver', windowId});
+            ResizeObserver = Neo.main.addon.ResizeObserver
+        }
+
+        if (mounted) {
+            ResizeObserver.register(resizeParams);
+            await me.passSizeToView()
         } else {
-            if (mounted) {
-                ResizeObserver.register(resizeParams);
-                await me.passSizeToView()
-            } else {
-                me.initialResizeEvent = true;
-                ResizeObserver.unregister(resizeParams)
-            }
+            me.initialResizeEvent = true;
+            ResizeObserver.unregister(resizeParams)
         }
     }
 

package/src/grid/View.mjs

@@ -632,7 +632,7 @@ class GridView extends Component {
      * @returns {String}
      */
     getCellId(record, dataField) {
-        return this.id + '__' + record[this.store.keyProperty] + '__' + dataField
+        return this.id + '__' + record[this.store.getKeyProperty()] + '__' + dataField
     }
 
     /**
@@ -659,6 +659,14 @@ class GridView extends Component {
         return null
     }
 
+    /**
+     * @param {String} cellId
+     * @returns {String}
+     */
+    getDataField(cellId) {
+        return cellId.split('__')[2]
+    }
+
     /**
      * Get the matching record by passing a row id, a cell id or an id inside a grid cell.
      * @param {String} nodeId