neo.mjs 8.4.2 → 8.6.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-14",
+      "datePublished": "2025-01-21",
       "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.4.2'
+                html  : 'v8.6.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -84,18 +84,6 @@ class ContentComponent extends Component {
 
         if (value) {
             me.timeout(50).then(() => {
-                me.customComponents.forEach(component => {
-                    if (!component.mounted && !component.rendering) {
-                        component.render(true)
-                    }
-                });
-
-                me.livePreviews.forEach(livePreview => {
-                    if (!livePreview.mounted && !livePreview.rendering) {
-                        livePreview.render(true)
-                    }
-                });
-
                 Neo.main.addon.IntersectionObserver.register({
                     callback: 'findTopmostItem',
                     id      : me.id,
@@ -110,7 +98,7 @@ class ContentComponent extends Component {
 
             me.livePreviews.forEach(livePreview => {
                 livePreview.mounted = false
-            });
+            })
         }
     }
 

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/MainStore.mjs

@@ -27,67 +27,21 @@ class MainStore extends Store {
     }
 
     firstnames = [
-        'Ashley',
-        'Barbara',
-        'Betty',
-        'Chris',
-        'David',
-        'Elizabeth',
-        'Jack',
-        'James',
-        'Jennifer',
-        'Jessica',
-        'Joe',
-        'John',
-        'Karen',
-        'Kelly',
-        'Kim',
-        'Linda',
-        'Lisa',
-        'Mary',
-        'Max',
-        'Michael',
-        'Nancy',
-        'Patricia',
-        'Rich',
-        'Robert',
-        'Sam',
-        'Sandra',
-        'Sarah',
-        'Susan',
-        'Thomas',
-        'Tobias'
+        'Amanda', 'Andrew', 'Anthony', 'Ashley', 'Barbara', 'Betty', 'Brian', 'Carol', 'Charles', 'Christopher',
+        'Daniel', 'David', 'Deborah', 'Donna', 'Elizabeth', 'Emily', 'George', 'Jack', 'James', 'Jennifer',
+        'Jessica', 'Joe', 'John', 'Joseph', 'Joshua', 'Karen', 'Kenneth', 'Kelly', 'Kevin', 'Kimberly',
+        'Linda', 'Lisa', 'Margaret', 'Mark', 'Mary', 'Matthew', 'Max', 'Melissa', 'Michael', 'Michelle',
+        'Nancy', 'Patricia', 'Paul', 'Richard', 'Robert', 'Ronald', 'Sam', 'Sandra', 'Sarah', 'Stephanie',
+        'Steven', 'Susan', 'Thomas', 'Timothy', 'Tobias', 'William'
     ]
 
     lastnames = [
-        'Anderson',
-        'Brown',
-        'Davis',
-        'Garcia',
-        'Gonzales',
-        'Harris',
-        'Hernandez',
-        'Jackson',
-        'Johnson',
-        'Jones',
-        'Lee',
-        'Lopez',
-        'Martin',
-        'Martinez',
-        'Miller',
-        'Moore',
-        'Perez',
-        'Rahder',
-        'Rodriguez',
-        'Smith',
-        'Taylor',
-        'Thomas',
-        'Thompson',
-        'Uhlig',
-        'Waters',
-        'White',
-        'Williams',
-        'Wilson'
+        'Adams', 'Allen', 'Anderson', 'Baker', 'Brown', 'Campbell', 'Carter', 'Clark', 'Davis', 'Flores',
+        'Garcia', 'Gonzales', 'Green', 'Hall', 'Harris', 'Hernandez', 'Hill', 'Jackson', 'Johnson', 'Jones',
+        'King', 'Lee', 'Lewis', 'Lopez', 'Martin', 'Martinez', 'Miller', 'Mitchell', 'Moore', 'Nelson',
+        'Nguyen', 'Perez', 'Rahder', 'Ramirez', 'Roberts', 'Rivera', 'Robinson', 'Rodriguez', 'Sanchez', 'Scott',
+        'Smith', 'Taylor', 'Thomas', 'Thompson', 'Torres', 'Uhlig', 'Walker', 'Waters', 'White', 'Williams',
+        'Wilson', 'Wright', 'Young'
     ]
 
     /**

package/examples/grid/cellEditing/MainContainer.mjs

@@ -106,12 +106,11 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return {
-            module        : GridContainer,
-            bind          : {store : 'stores.mainStore'},
-            cellEditing   : true,
-            parentId      : this.id,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module     : GridContainer,
+            bind       : {store: 'stores.mainStore'},
+            cellEditing: true,
+            parentId   : this.id,
+            store      : MainStore,
 
             columnDefaults: {
                 editable: true,
@@ -159,7 +158,11 @@ class MainContainer extends ConfigurationViewport {
                 dataField: 'githubId',
                 editable : false,
                 text     : 'Github Id (Non-editable)'
-            }]
+            }],
+
+            viewConfig: {
+                selectionModel: CellModel
+            }
         }
     }
 

package/examples/grid/container/MainContainer.mjs

@@ -25,7 +25,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me     = this,
+            {view} = me.exampleComponent;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -45,34 +46,34 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellmodel',
             labelText     : 'selectionModel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-columnmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-columnmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-rowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-rowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellrowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellrowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }]
@@ -80,9 +81,8 @@ class MainContainer extends ConfigurationViewport {
 
     createExampleComponent() {
         return {
-            module        : GridContainer,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module: GridContainer,
+            store : MainStore,
 
             columnDefaults: {
                 width: 200
@@ -93,7 +93,22 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'lastname',  text: 'Lastname'},
                 {dataField: 'githubId',  text: 'Github Id'},
                 {dataField: 'country',   text: 'Country'}
-            ]
+            ],
+
+            viewConfig: {
+                selectionModel: CellModel
+            }
+        }
+    }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioChange(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/nestedRecordFields/EditUserDialog.mjs

@@ -89,9 +89,9 @@ class EditUserDialog extends Dialog {
             await me.timeout(20);
 
             me.getItem('country-field')  .value   = record.country;
-            me.getItem('firstname-field').value   = record.user.firstname;
-            me.getItem('lastname-field') .value   = record.user.lastname;
-            me.getItem('selected-field') .checked = record.annotations.selected
+            me.getItem('firstname-field').value   = record['user.firstname'];
+            me.getItem('lastname-field') .value   = record['user.lastname'];
+            me.getItem('selected-field') .checked = record['annotations.selected'];
         }
     }
 
@@ -99,21 +99,33 @@ class EditUserDialog extends Dialog {
      * @param {Object} data
      */
     onCountryFieldChange(data) {
-        this.record.country = data.value.code
+        // You can also access the internal setter directly:
+        // this.record.country = data.value.code
+        // Using the API allows bulk changes
+
+        this.record.set({country: data.value.code})
     }
 
     /**
      * @param {Object} data
      */
     onFirstnameFieldChange(data) {
-        this.record.user.firstname = data.value
+        // You can also access the internal setter directly:
+        // this.record['user.firstname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {firstname: data.value}})
+
+
     }
 
     /**
      * @param {Object} data
      */
     onLastnameFieldChange(data) {
-        this.record.user.lastname = data.value
+        // You can also access the internal setter directly:
+        // this.record['user.lastname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {lastname: data.value}})
     }
 
     /**
@@ -124,11 +136,16 @@ class EditUserDialog extends Dialog {
             store = me.getStateProvider().getStore('mainStore');
 
         if (data.value === false) {
-            me.record.annotations.selected = false
+            // You can also access the internal setter directly:
+            // me.record['annotations.selected'] = false
+            // Using the API allows bulk changes
+            me.record.set({annotations: {selected: false}})
         } else {
             // Assuming we want to support a single row selection
             store.items.forEach(record => {
-                record.annotations.selected = record === me.record ? data.value : false
+                record.set({annotations: {
+                    selected: record === me.record ? data.value : false
+                }})
             })
         }
     }

package/examples/table/nestedRecordFields/MainContainerStateProvider.mjs

@@ -2,7 +2,7 @@ import MainStore     from './MainStore.mjs';
 import StateProvider from '../../../src/state/Provider.mjs';
 import Store         from '../../../src/data/Store.mjs';
 
-const countrySymbol = Symbol.for('country');
+const dataSymbol = Symbol.for('data');
 
 /**
  * @class Neo.examples.table.nestedRecordFields.MainContainerStateProvider
@@ -51,7 +51,7 @@ class MainContainerStateProvider extends StateProvider {
                 country = record.country;
 
                 // hack resetting the current value to get a new record change
-                record[countrySymbol] = null;
+                record[dataSymbol].country = null;
 
                 record.country = country
             })

package/examples/table/nestedRecordFields/MainModel.mjs

@@ -13,7 +13,7 @@ class MainModel extends Model {
             type: 'Object',
 
             fields: [{
-                name        : 'annotations.selected',
+                name        : 'selected',
                 type        : 'Boolean',
                 defaultValue: false
             }]
@@ -28,10 +28,10 @@ class MainModel extends Model {
             type: 'Object',
 
             fields: [{
-                name: 'user.firstname',
+                name: 'firstname',
                 type: 'String'
             }, {
-                name: 'user.lastname',
+                name: 'lastname',
                 type: 'String'
             }]
         }]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.4.2",
+    "version": "8.6.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -49,10 +49,10 @@
         "autoprefixer": "^10.4.20",
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^13.0.0",
+        "commander": "^13.1.0",
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
-        "fs-extra": "^11.2.0",
+        "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.3.2",
         "marked": "^15.0.6",

package/resources/data/deck/learnneo/pages/tutorials/TodoList.md

@@ -91,7 +91,7 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
+            node   = VdomUtil.find(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
             cls    = ['fa',  'fa-check'];

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -77,7 +77,7 @@ Use the utility method, replacing the statement referencing the vdom hierarchy.
 
 <pre>
     <s>view.vdom.cn[0].innerHTML = business.title;</s>
-    Neo.util.VDom.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+    Neo.util.VDom.find(view.vdom, 'title').vdom.innerHTML = business.title;
 </pre>
 
 
@@ -86,17 +86,17 @@ calling the function.
 
 Code a new class member.
 
-    findVdomChild = Neo.util.VDom.findVdomChild
+    find = Neo.util.VDom.find
 
 Then use it in the after set method. Here's how that part of the code will look afterwards.
 
 <pre style="color:gray; padding: 8px; border: thin solid lightgray;">
-findVdomChild = Neo.util.VDom.findVdomChild;
+find = Neo.util.VDom.find;
 
 afterSetBusiness(business){
     if (!business) return;
     const view = this.getReference('view');
-    this.findVdomChild(view.vdom, 'title').vdom.innerHTML = business.title;
+    this.find(view.vdom, 'title').vdom.innerHTML = business.title;
     view.update();
 }
 </pre>
@@ -129,7 +129,7 @@ Then back in the details view, update the vdom as follows.
 
 Then modify the `afterSetBusiness()` method to update the element's `src`.
 
-    this.findVdomChild(view.vdom, 'thumbnail').vdom.src = business.imageUrl;
+    this.find(view.vdom, 'thumbnail').vdom.src = business.imageUrl;
 
 ??Add the address
 
@@ -184,7 +184,7 @@ of thought and try it. If you get stuck, that code is given in the next lab step
 
 Here's one way to code it. How does this compare to your solution?
 
-    this.findVdomChild(view.vdom, 'address').vdom.cn = business
+    this.find(view.vdom, 'address').vdom.cn = business
         .address
         .map(item => ({tag: 'div', innerHTML: item}));
 

package/resources/scss/src/apps/portal/examples/TabContainer.scss

@@ -1,5 +1,9 @@
 .portal-examples-tab-container.neo-tab-container {
-
+    .neo-tab-strip {
+        .neo-active-tab-indicator {
+            background-color: #3E63DD;
+        }
+    }
 }
 
 // must not be inside the root class to honor the styling for tab button drag&drop

package/resources/scss/src/grid/View.scss

@@ -5,6 +5,10 @@
     overflow-y     : auto;
     position       : relative;
 
+    &:focus {
+        outline: none;
+    }
+
     .neo-grid-scrollbar {
         height        : 1px;
         position      : absolute;

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -320,11 +320,11 @@ Neo = globalThis.Neo = Object.assign({
      *
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
+     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
-    ns(names, create, scope) {
+    ns(names, create=false, scope) {
         names = Array.isArray(names) ? names : names.split('.');
 
         return names.reduce((prev, current) => {
@@ -342,11 +342,11 @@ Neo = globalThis.Neo = Object.assign({
      * Extended version of Neo.ns() which supports mapping into arrays.
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
+     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
-    nsWithArrays(names, create, scope) {
+    nsWithArrays(names, create=false, scope) {
         names = Array.isArray(names) ? names : names.split('.');
 
         return names.reduce((prev, current) => {

package/src/component/Base.mjs

@@ -402,9 +402,12 @@ class Component extends Base {
     }
 
     /**
-     * @member {String[]} childUpdateCache=[]
+     * If an update() gets called while a parent is updating, we store the id & distance of the
+     * requesting component inside the childUpdateCache of the parent, to get resolved once the update is done.
+     * e.g. childUpdateCache = {'neo-grid-view-1': {distance: 1, resolve: fn}}
+     * @member {Object} childUpdateCache={}
      */
-    childUpdateCache = []
+    childUpdateCache = {}
     /**
      * Stores the updateDepth while an update is running to enable checks for parent update collisions
      * @member {Number|null} currentUpdateDepth=null
@@ -1954,7 +1957,7 @@ class Component extends Base {
                             console.warn('vdom parent update conflict with:', parent, 'for:', me)
                         }
 
-                        NeoArray.add(parent.childUpdateCache, me.id);
+                        parent.childUpdateCache[me.id] = {distance, resolve};
 
                         // Adding the resolve fn to its own cache, since the parent will trigger
                         // a new update() directly on this cmp
@@ -2335,22 +2338,46 @@ class Component extends Base {
      * @protected
      */
     resolveVdomUpdate(resolve) {
-        let me = this;
+        let me                  = this,
+            hasChildUpdateCache = !Neo.isEmpty(me.childUpdateCache),
+            component;
 
         me.doResolveUpdateCache();
 
         resolve?.();
 
         if (me.needsVdomUpdate) {
-            // if a new update is scheduled, we can clear the cache => these updates are included
-            me.childUpdateCache = [];
+            if (hasChildUpdateCache) {
+                Object.entries(me.childUpdateCache).forEach(([key, value]) => {
+                    component = Neo.getComponent(key);
+
+                    // The component might already got destroyed
+                    if (component) {
+                        // Pass callbacks to the resolver cache => getting executed once the following update is done
+                        value.resolve && NeoArray.add(me.resolveUpdateCache, value.resolve);
+
+                        // Adjust the updateDepth to include the depth of all merged child updates
+                        if (me.updateDepth !== -1) {
+                            if (component.updateDepth === -1) {
+                                me.updateDepth = -1
+                            } else {
+                                // Since updateDepth is 1-based, we need to subtract 1 level
+                                me.updateDepth = me.updateDepth + value.distance + component.updateDepth - 1
+                            }
+                        }
+                    }
+                });
+
+                me.childUpdateCache = {}
+            }
 
             me.update()
-        } else if (me.childUpdateCache) {
-            [...me.childUpdateCache].forEach(id => {
-                Neo.getComponent(id)?.update();
-                NeoArray.remove(me.childUpdateCache, id)
-            })
+        } else if (hasChildUpdateCache) {
+            Object.keys(me.childUpdateCache).forEach(key => {
+                Neo.getComponent(key)?.update()
+            });
+
+            me.childUpdateCache = {}
         }
     }