neo.mjs 8.7.1 → 8.8.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/nestedRecordFields/EditUserDialog.mjs

@@ -0,0 +1,154 @@
+import CheckBox     from '../../../src/form/field/CheckBox.mjs';
+import CountryField from '../../../src/form/field/Country.mjs';
+import Dialog       from '../../../src/dialog/Base.mjs';
+import TextField    from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.EditUserDialog
+ * @extends Neo.dialog.Base
+ */
+class EditUserDialog extends Dialog {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.EditUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.EditUserDialog',
+        /**
+         * @member {String} closeAction='hide'
+         */
+        closeAction: 'hide',
+        /**
+         * @member {Object} containerConfig={style:{padding:'1em'}}
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * @member {Boolean} modal=true
+         */
+        modal: true,
+        /**
+         * @member {Record|null} record_=null
+         */
+        record_: null,
+        /**
+         * @member {String} title='Edit User'
+         */
+        title: 'Edit User',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            flex      : 'none',
+            labelWidth: 110
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Firstname',
+            listeners: {change: 'up.onFirstnameFieldChange'},
+            reference: 'firstname-field'
+        }, {
+            module   : TextField,
+            labelText: 'Lastname',
+            listeners: {change: 'up.onLastnameFieldChange'},
+            reference: 'lastname-field'
+        }, {
+            module    : CountryField,
+            bind      : {store: 'stores.countries'},
+            labelText : 'Country',
+            listeners : {change: 'up.onCountryFieldChange'},
+            reference : 'country-field',
+            valueField: 'code'
+        }, {
+            module   : CheckBox,
+            labelText: 'Selected',
+            listeners: {change: 'up.onSelectedFieldChange'},
+            reference: 'selected-field',
+            style    : {marginTop: '1em'}
+        }]
+    }
+
+    /**
+     * Triggered after the record config got changed
+     * @param {Record|null} value
+     * @param {Record|null} oldValue
+     * @protected
+     */
+    async afterSetRecord(value, oldValue) {
+        if (value) {
+            let me       = this,
+                {record} = me;
+
+            // ensure the store has its data
+            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'];
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCountryFieldChange(data) {
+        // 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) {
+        // 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) {
+        // 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}})
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectedFieldChange(data) {
+        let me    = this,
+            store = me.getStateProvider().getStore('mainStore');
+
+        if (data.value === 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.set({annotations: {
+                    selected: record === me.record ? data.value : false
+                }})
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(EditUserDialog);

package/examples/grid/nestedRecordFields/MainModel.mjs

@@ -0,0 +1,54 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.MainModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'annotations',
+            type: 'Object',
+
+            fields: [{
+                name        : 'selected',
+                type        : 'Boolean',
+                defaultValue: false
+            }]
+        }, {
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'edit',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'user',
+            type: 'Object',
+
+            fields: [{
+                name: 'firstname',
+                type: 'String'
+            }, {
+                name: 'lastname',
+                type: 'String'
+            }]
+        }],
+        /**
+         * @member {Boolean} trackModifiedFields=true
+         */
+        trackModifiedFields: true
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/grid/nestedRecordFields/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.grid.nestedRecordFields.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country : 'DE',
+            githubId: 'tobiu',
+
+            user: {
+                firstname: 'Tobias',
+                lastname : 'Uhlig'
+            }
+        }, {
+            annotations: {
+                selected: true
+            },
+
+            country : 'US',
+            githubId: 'rwaters',
+
+            user: {
+                firstname: 'Rich',
+                lastname : 'Waters'
+            }
+        }, {
+            country : 'DE',
+            githubId: 'mrsunshine',
+
+            user: {
+                firstname: 'Nils',
+                lastname : 'Dehl'
+            }
+        }, {
+            country : 'US',
+            githubId: 'camtnbikerrwc',
+
+            user: {
+                firstname: 'Gerard',
+                lastname : 'Horan'
+            }
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -0,0 +1,152 @@
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Button                from '../../../src/button/Base.mjs';
+import GridContainer         from '../../../src/grid/Container.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.Viewport',
+        /**
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         */
+        stateProvider: ViewportStateProvider,
+        /**
+         * @member {Object} style={padding:'1em'}
+         */
+        style: {padding: '1em'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype    : 'toolbar',
+            flex     : 'none',
+            reference: 'switch-theme-button',
+            style    : {marginBottom: '1em'},
+
+            items: ['->', {
+                handler: 'up.onSwitchThemeButtonClick',
+                iconCls: 'fas fa-moon',
+                text   : 'Dark Theme'
+            }]
+        }, {
+            module: GridContainer,
+            bind  : {store : 'stores.mainStore'},
+
+            columnDefaults: {
+                width: 200
+            },
+
+            columns: [
+                {dataField: 'user.firstname', text: 'Firstname'},
+                {dataField: 'user.lastname',  text: 'Lastname'},
+                {dataField: 'githubId',       text: 'Github Id'},
+                {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
+                {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
+            ],
+
+            viewConfig: {
+                highlightModifiedCells: true
+            }
+        }]
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getStateProvider().getStore('countries');
+
+        if (countryStore.getCount() > 0) {
+            return countryStore.get(record.country).name
+        }
+
+        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
+     */
+    editRenderer({column, gridContainer, index, record}) {
+        let me                  = this,
+            {appName, windowId} = me,
+            widgetId            = `${column.id}-widget-${index}`,
+            button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                module  : Button,
+                appName,
+                handler : 'up.editButtonHandler',
+                parentId: gridContainer.id,
+                record,
+                text    : 'Edit',
+                windowId
+            }));
+
+        me.view.updateDepth = -1;
+
+        return button.createVdomReference()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSwitchThemeButtonClick(data) {
+        let me          = this,
+            button      = data.component,
+            isDarkTheme = me.theme === 'neo-theme-dark',
+            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/ViewportStateProvider.mjs

@@ -0,0 +1,62 @@
+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
+ */
+class ViewportStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.ViewportStateProvider'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.ViewportStateProvider',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            countries: {
+                module     : Store,
+                autoLoad   : true,
+                keyProperty: 'code',
+                listeners  : {load: 'onCountryStoreLoad'},
+                url        : '../../../resources/examples/data/countries.json',
+
+                model: {
+                    fields: [
+                        {name: 'code'},
+                        {name: 'name'}
+                    ]
+                }
+            },
+            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/grid/nestedRecordFields/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Neo.examples.grid.nestedRecordFields'
+})

package/examples/grid/nestedRecordFields/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Grid: Nested Record Fields</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/grid/nestedRecordFields/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/grid/nestedRecordFields/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"]
+}

package/examples/table/nestedRecordFields/{MainContainer.mjs → Viewport.mjs}

@@ -1,35 +1,42 @@
-import Button                     from '../../../src/button/Base.mjs';
-import MainContainerStateProvider from './MainContainerStateProvider.mjs';
-import TableContainer             from '../../../src/table/Container.mjs';
-import Viewport                   from '../../../src/container/Viewport.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Button                from '../../../src/button/Base.mjs';
+import TableContainer        from '../../../src/table/Container.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
- * @class Neo.examples.table.nestedRecordFields.MainContainer
+ * @class Neo.examples.table.nestedRecordFields.Viewport
  * @extends Neo.container.Viewport
  */
-class MainContainer extends Viewport {
+class Viewport extends BaseViewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainer'
+         * @member {String} className='Neo.examples.table.nestedRecordFields.Viewport'
          * @protected
          */
-        className: 'Neo.examples.table.nestedRecordFields.MainContainer',
+        className: 'Neo.examples.table.nestedRecordFields.Viewport',
         /**
-         * @member {Object|String} layout='fit'
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
-        layout: 'fit',
+        stateProvider: ViewportStateProvider,
         /**
-         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @member {Object} style={padding:'1em'}
          */
-        stateProvider: MainContainerStateProvider,
-        /**
-         * @member {Object} style={padding:'20px'}
-         */
-        style: {padding: '20px'},
+        style: {padding: '1em'},
         /**
          * @member {Object[]} items
          */
         items: [{
+            ntype    : 'toolbar',
+            flex     : 'none',
+            reference: 'switch-theme-button',
+            style    : {marginBottom: '1em'},
+
+            items: ['->', {
+                handler: 'up.onSwitchThemeButtonClick',
+                iconCls: 'fas fa-moon',
+                text   : 'Dark Theme'
+            }]
+        }, {
             module: TableContainer,
             bind  : {store : 'stores.mainStore'},
 
@@ -69,10 +76,10 @@ class MainContainer extends Viewport {
      * @param {Object} data
      */
     editButtonHandler(data) {
-        let me                          = this,
-            button                      = data.component,
-            {appName, dialog, windowId} = me,
-            {record}                    = button;
+        let me       = this,
+            button   = data.component,
+            {appName, dialog, theme, windowId} = me,
+            {record} = button;
 
         if (!dialog) {
             import('./EditUserDialog.mjs').then(module => {
@@ -82,6 +89,7 @@ class MainContainer extends Viewport {
                     appName,
                     stateProvider  : {parent: me.getStateProvider()},
                     record,
+                    theme,
                     windowId
                 })
             })
@@ -114,6 +122,27 @@ class MainContainer extends Viewport {
 
         return button.createVdomReference()
     }
+
+    /**
+     * @param {Object} data
+     */
+    onSwitchThemeButtonClick(data) {
+        let me          = this,
+            button      = data.component,
+            isDarkTheme = me.theme === 'neo-theme-dark',
+            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(MainContainer);
+export default Neo.setupClass(Viewport);

package/examples/table/nestedRecordFields/{MainContainerStateProvider.mjs → ViewportStateProvider.mjs}

@@ -5,16 +5,16 @@ import Store         from '../../../src/data/Store.mjs';
 const dataSymbol = Symbol.for('data');
 
 /**
- * @class Neo.examples.table.nestedRecordFields.MainContainerStateProvider
+ * @class Neo.examples.table.nestedRecordFields.ViewportStateProvider
  * @extends Neo.state.Provider
  */
-class MainContainerStateProvider extends StateProvider {
+class ViewportStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainerStateProvider'
+         * @member {String} className='Neo.examples.table.nestedRecordFields.ViewportStateProvider'
          * @protected
          */
-        className: 'Neo.examples.table.nestedRecordFields.MainContainerStateProvider',
+        className: 'Neo.examples.table.nestedRecordFields.ViewportStateProvider',
         /**
          * @member {Object} stores
          */
@@ -59,4 +59,4 @@ class MainContainerStateProvider extends StateProvider {
     }
 }
 
-export default Neo.setupClass(MainContainerStateProvider);
+export default Neo.setupClass(ViewportStateProvider);

package/examples/table/nestedRecordFields/app.mjs

@@ -1,6 +1,6 @@
-import MainContainer from './MainContainer.mjs';
+import Viewport from './Viewport.mjs';
 
 export const onStart = () => Neo.app({
-    mainView: MainContainer,
+    mainView: Viewport,
     name    : 'Neo.examples.table.nestedRecordFields'
-});
+})

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.7.1",
+    "version": "8.8.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -22,6 +22,22 @@
     height    : 100%;
     overflow-x: visible;
 
+    .neo-grid-cell {
+        &.neo-is-modified {
+            &:after {
+                border-color: transparent var(--grid-cell-ismodified-color) transparent transparent;
+                border-style: solid;
+                border-width: 0 var(--grid-cell-ismodified-size) var(--grid-cell-ismodified-size) 0;
+                content     : '';
+                height      : 0;
+                position    : absolute;
+                right       : 0;
+                top         : 0;
+                width       : 0;
+            }
+        }
+    }
+
     &.neo-is-scrolling * {
         pointer-events: none !important;
     }

package/resources/scss/src/grid/header/Button.scss

@@ -2,6 +2,7 @@
     align-items     : center;
     background-color: var(--grid-header-button-background-color);
     background-image: var(--grid-header-button-background-image);
+    border-radius   : 0;
     border-width    : 0;
     color           : var(--grid-header-button-color);
     cursor          : pointer;
@@ -13,7 +14,6 @@
     height          : 29px; // Webkit => Safari can not handle 100%
     justify-content : flex-end;
     margin          : 0;
-    padding         : 7px 10px 6px;
     white-space     : nowrap;
 
     &:not(:last-child) {
@@ -69,6 +69,8 @@
     }
 
     .neo-button-text {
+        color         : var(--grid-header-button-color);
         pointer-events: none;
+        text-transform: none;
     }
 }

package/resources/scss/src/table/View.scss

@@ -13,9 +13,9 @@
 
             &.neo-is-modified {
                 &:after {
-                    border-color: transparent orange transparent transparent;
+                    border-color: transparent var(--table-cell-ismodified-color) transparent transparent;
                     border-style: solid;
-                    border-width: 0 10px 10px 0;
+                    border-width: 0 var(--table-cell-ismodified-size) var(--table-cell-ismodified-size) 0;
                     content     : '';
                     height      : 0;
                     position    : absolute;

package/resources/scss/src/table/header/Button.scss

@@ -1,6 +1,7 @@
 .neo-table-header-button {
     align-items     : center;
     background-color: var(--table-header-button-background-color);
+    background-image: var(--table-header-button-background-image);
     border-width    : 0;
     color           : var(--table-header-button-color);
     cursor          : pointer;
@@ -15,8 +16,6 @@
     white-space     : nowrap;
     width           : 100% !important;
 
-    background-image: var(--table-header-button-background-image);
-
     &.neo-drag-over {
         background-image: linear-gradient(green, darkgreen);;
     }

package/resources/scss/theme-dark/grid/View.scss

@@ -1,5 +1,7 @@
 :root .neo-theme-dark { // .neo-grid-view
     --grid-cell-background-color-hover                    : #54595c;
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #64B5F6;
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #4f558a;

package/resources/scss/theme-dark/table/View.scss

@@ -1,5 +1,7 @@
 :root .neo-theme-dark { // .neo-table-view
     --table-cell-background-color-hover                    : #54595c;
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #64B5F6;
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #4f558a;

package/resources/scss/theme-light/grid/View.scss

@@ -2,6 +2,8 @@
 
 :root .neo-theme-light { // .neo-grid-view
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/resources/scss/theme-light/table/View.scss

@@ -2,6 +2,8 @@
 
 :root .neo-theme-light { // .neo-table-view
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/resources/scss/theme-neo-light/grid/View.scss

@@ -2,6 +2,8 @@
 
 :root .neo-theme-neo-light { // .neo-grid-view
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/resources/scss/theme-neo-light/table/View.scss

@@ -2,6 +2,8 @@
 
 :root .neo-theme-neo-light { // .neo-table-view
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -66,10 +66,10 @@ Neo = globalThis.Neo = Object.assign({
      *
      * // e.g. Neo.core.Util.isObject => Neo.isObject
      * @memberOf module:Neo
-     * @param {Neo|Neo.core.Base} target The target class or singleton Instance or Neo
-     * @param {Neo.core.Base} namespace The class containing the methods
-     * @param {Object} config
-     * @param {Boolean} [bind] set this to true in case you want to bind methods to the "from" namespace
+     * @param {Neo|Neo.core.Base} target    The target class or singleton Instance or Neo
+     * @param {Neo.core.Base}     namespace The class containing the methods
+     * @param {Object}            config
+     * @param {Boolean}           [bind]    set this to true in case you want to bind methods to the "from" namespace
      * @returns {Object} target
      */
     applyFromNs(target, namespace, config, bind) {
@@ -104,7 +104,7 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * Copies all keys of defaults into target, in case they don't already exist
      * @memberOf module:Neo
-     * @param {Object} target The target object
+     * @param {Object} target   The target object
      * @param {Object} defaults The object containing the keys you want to copy
      * @returns {Object} target
      */
@@ -120,6 +120,35 @@ Neo = globalThis.Neo = Object.assign({
         return target
     },
 
+    /**
+     * Assigns a new value to a given nested objects path.
+     * It will create the path structure or parts of it, in case it does not exist.
+     * @example
+     * Neo.assignToNs('annotations.selected', false, record)
+     *
+     * @memberOf module:Neo
+     * @param {String[]|String} path             The path string containing dots or an Array of the string parts
+     * @param {*}               value            The new value to assign to the leaf node
+     * @param {Object}          scope=globalThis Set a different starting point as globalThis
+     * @param {Boolean}         force=true       false will only assign default values (assign if old value === undefined)
+     */
+    assignToNs(path, value, scope=globalThis, force=true) {
+        path = Array.isArray(path) ? path : path.split('.');
+
+        let key;
+
+        if (path.length > 1) {
+            key   = path.pop();
+            scope = Neo.ns(path, true, scope)
+        } else {
+            key = path
+        }
+
+        if (force || scope[key] === undefined) {
+            scope[key] = value
+        }
+    },
+
     /**
      * Converts kebab-case strings into camel-case
      * @memberOf module:Neo
@@ -143,7 +172,7 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * @memberOf module:Neo
      * @param {Object|Array|*} obj
-     * @param {Boolean} deep=false Set this to true in case you want to clone nested objects as well
+     * @param {Boolean} deep=false               Set this to true in case you want to clone nested objects as well
      * @param {Boolean} ignoreNeoInstances=false returns existing instances if set to true
      * @returns {Object|Array|*} the cloned input
      */
@@ -214,7 +243,7 @@ Neo = globalThis.Neo = Object.assign({
      * });
      * @memberOf module:Neo
      * @param {String|Object|Neo.core.Base} className
-     * @param {Object} [config]
+     * @param {Object}                      [config]
      * @returns {Neo.core.Base|null} The new class instance
      * @tutorial 02_ClassSystem
      */
@@ -263,7 +292,7 @@ Neo = globalThis.Neo = Object.assign({
      * Checks if there is a set method for a given property key inside the prototype chain
      * @memberOf module:Neo
      * @param {Neo.core.Base} proto The top level prototype of a class
-     * @param {String} key the property key to test
+     * @param {String}        key   The property key to test
      * @returns {Boolean}
      */
     hasPropertySetter(proto, key) {
@@ -319,9 +348,9 @@ Neo = globalThis.Neo = Object.assign({
      * // return globalThis.Neo.button.Base;
      *
      * @memberOf module:Neo
-     * @param {Array|String} names The class name string containing dots or an Array of the string 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
+     * @param {String[]|String} names        The class name string containing dots or an Array of the string 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=false, scope) {
@@ -341,9 +370,9 @@ 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=false Set create to true to create empty objects for non-existing parts
-     * @param {Object} [scope] Set a different starting point as globalThis
+     * @param {Array|String} names        The class name string containing dots or an Array of the string 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=false, scope) {
@@ -383,7 +412,7 @@ Neo = globalThis.Neo = Object.assign({
      * });
      * @memberOf module:Neo
      * @param {String|Object} ntype
-     * @param {Object} [config]
+     * @param {Object}        [config]
      * @returns {Neo.core.Base}
      * @see {@link module:Neo.create create}
      */
@@ -575,7 +604,7 @@ const ignoreMixin = [
 
 /**
  * @param {Neo.core.Base} cls
- * @param {Array} mixins
+ * @param {Array}         mixins
  * @private
  */
 function applyMixins(cls, mixins) {
@@ -614,7 +643,7 @@ function applyMixins(cls, mixins) {
 /**
  * Creates get / set methods for class configs ending with an underscore
  * @param {Neo.core.Base} proto
- * @param {String} key
+ * @param {String}        key
  * @private
  * @tutorial 02_ClassSystem
  */
@@ -708,8 +737,8 @@ function autoGenerateGetSet(proto, key) {
 
 /**
  * @param {Boolean} create
- * @param {Object} current
- * @param {Object} prev
+ * @param {Object}  current
+ * @param {Object}  prev
  * @returns {Object|undefined}
  */
 function createArrayNs(create, current, prev) {

package/src/data/RecordFactory.mjs

@@ -4,6 +4,7 @@ import Model  from './Model.mjs';
 
 const
     dataSymbol         = Symbol.for('data'),
+    isModifiedSymbol   = Symbol.for('isModified'),
     originalDataSymbol = Symbol.for('originalData');
 
 let instance;
@@ -34,27 +35,17 @@ class RecordFactory extends Base {
     /**
      * Assigns model based default values to a data object
      * @param {Object}         data
-     * @param {Record}         record
      * @param {Neo.data.Model} model
      * @returns {Object}
      */
-    assignDefaultValues(data, record, model) {
-        let {hasNestedFields} = model,
-            scope;
-
+    assignDefaultValues(data, model) {
         model.fieldsMap.forEach((field, fieldName) => {
             if (Object.hasOwn(field, 'defaultValue')) {
-                if (hasNestedFields && fieldName.includes('.')) {
-                    let nsArray = fieldName.split('.');
-
-                    fieldName = nsArray.pop();
-                    scope     = Neo.ns(nsArray, true, data)
-                } else {
-                    scope = data
-                }
-
-                if (scope[fieldName] === undefined) {
-                    scope[fieldName] = field.defaultValue
+                // We could always use Neo.assignToNs() => the check is just for improving the performance
+                if (model.hasNestedFields) {
+                    Neo.assignToNs(fieldName, field.defaultValue, data, false)
+                } else if (data[fieldName] === undefined) {
+                    data[fieldName] = field.defaultValue
                 }
             }
         });
@@ -65,18 +56,18 @@ class RecordFactory extends Base {
     /**
      * @param {Object} data
      * @param {Object} data.field
-     * @param {Neo.data.RecordFactory} data.me
      * @param {Neo.data.Model} data.model
      * @param {String} data.path=''
+     * @param {Object} data.proto
      */
-    createField({field, me, model, path=''}) {
+    createField({field, model, path='', proto}) {
         let fieldName = field.name,
             fieldPath = path === '' ? fieldName : `${path}.${fieldName}`,
             properties;
 
         if (field.fields) {
             field.fields.forEach(childField => {
-                this.createField({field: childField, me, model, path: fieldPath})
+                this.createField({field: childField, model, path: fieldPath, proto})
             })
         } else {
             properties = {
@@ -99,7 +90,9 @@ class RecordFactory extends Base {
                         if (!Neo.isEqual(value, oldValue)) {
                             instance.setRecordData({fieldName: fieldPath, model, record: me, value});
 
-                            me._isModified = me.isModified;
+                            if (!model.trackModifiedFields) {
+                                me[isModifiedSymbol] = true
+                            }
 
                             instance.onRecordChange({
                                 fields: [{name: fieldPath, oldValue, value}],
@@ -111,7 +104,7 @@ class RecordFactory extends Base {
                 }
             };
 
-            Object.defineProperties(me, properties)
+            Object.defineProperties(proto, properties)
         }
     }
 
@@ -155,10 +148,10 @@ class RecordFactory extends Base {
                         let me = this;
 
                         if (model.trackModifiedFields) {
-                            return Neo.isEqual(me[dataSymbol], me[originalDataSymbol])
+                            return !Neo.isEqual(me[dataSymbol], me[originalDataSymbol])
                         }
 
-                        return me._isModified
+                        return me[isModifiedSymbol]
                     }
 
                     /**
@@ -167,7 +160,7 @@ class RecordFactory extends Base {
                     constructor(config) {
                         let me = this;
 
-                        config = instance.assignDefaultValues(config, me, model);
+                        config = instance.assignDefaultValues(config, model);
 
                         if (model.trackModifiedFields) {
                             me[originalDataSymbol] = {};
@@ -175,7 +168,7 @@ class RecordFactory extends Base {
                         }
 
                         me.setSilent(config); // We do not want to fire change events when constructing
-                        me._isModified = false
+                        me[isModifiedSymbol] = false
                     }
 
                     /**
@@ -186,7 +179,7 @@ class RecordFactory extends Base {
                         let me = this;
 
                         // Check if the field getter does exist
-                        if (!me.__proto__.hasOwnProperty(fieldName)) {
+                        if (!Object.hasOwn(me.__proto__, fieldName)) {
                             Logger.logError('The record does not contain the field', fieldName, me)
                         }
 
@@ -210,6 +203,15 @@ class RecordFactory extends Base {
                         return null
                     }
 
+                    /**
+                     * Bulk-update multiple record fields at once
+                     * @param {Object} fields
+                     */
+                    reset(fields) {
+                        this.setOriginal(fields);
+                        this.set(fields)
+                    }
+
                     /**
                      * Bulk-update multiple record fields at once
                      * @param {Object} fields
@@ -247,7 +249,7 @@ class RecordFactory extends Base {
 
                 if (Array.isArray(model.fields)) {
                     model.fields.forEach(field => {
-                        instance.createField({field, me: cls.prototype, model})
+                        instance.createField({field, model, proto: cls.prototype})
                     })
                 }
 
@@ -261,23 +263,6 @@ class RecordFactory extends Base {
         }
     }
 
-    /**
-     * @param {Object} record
-     * @returns {Boolean} true in case a change was found
-     */
-    isModified(record) {
-        return record.isModified
-    }
-
-    /**
-     * @param {Object} record
-     * @param {String} fieldName
-     * @returns {Boolean|null} null in case the model does not use trackModifiedFields, true in case a change was found
-     */
-    isModifiedField(record, fieldName) {
-        return record.isModifiedField(fieldName)
-    }
-
     /**
      * Tests if a given object is an instance of a class created by this factory
      * @param {Object} record
@@ -386,6 +371,10 @@ class RecordFactory extends Base {
      * @protected
      */
     setRecordData({fieldName, model, record, useOriginalData=false, value}) {
+        if (useOriginalData && !model.trackModifiedFields) {
+            return
+        }
+
         let scope = useOriginalData ? originalDataSymbol : dataSymbol;
 
         if (model.hasNestedFields && fieldName.includes('.')) {
@@ -411,9 +400,13 @@ class RecordFactory extends Base {
      * @param {Boolean}        data.useOriginalData=false true will apply changes to the originalData symbol
      */
     setRecordFields({changedFields=[], fields, model, record, silent=false, useOriginalData=false}) {
-        let {fieldsMap} = model,
+        let {fieldsMap, trackModifiedFields} = model,
             fieldExists, oldValue;
 
+        if (!trackModifiedFields && useOriginalData) {
+            return
+        }
+
         Object.entries(fields).forEach(([key, value]) => {
             fieldExists = fieldsMap.has(key);
 
@@ -435,8 +428,8 @@ class RecordFactory extends Base {
                 if (!Neo.isEqual(oldValue, value)) {
                     instance.setRecordData({fieldName: key, model, record, useOriginalData, value});
 
-                    if (!useOriginalData) {
-                        record._isModified = true
+                    if (!trackModifiedFields && !useOriginalData) {
+                        record[isModifiedSymbol] = true
                     }
 
                     changedFields.push({name: key, oldValue, value})
@@ -444,7 +437,7 @@ class RecordFactory extends Base {
             }
         });
 
-        if (!silent && Object.keys(changedFields).length > 0) {
+        if (!silent && !useOriginalData && Object.keys(changedFields).length > 0) {
             Neo.get(model.storeId)?.onRecordChange({fields: changedFields, model, record})
         }
     }

package/src/grid/View.mjs

@@ -72,6 +72,10 @@ class GridView extends Component {
          * @protected
          */
         columnPositions_: [],
+        /**
+         * @member {Boolean} highlightModifiedCells_=false
+         */
+        highlightModifiedCells_: false,
         /**
          * @member {Boolean} isScrolling_=false
          */
@@ -432,6 +436,12 @@ class GridView extends Component {
             cellCls.push('neo-' + column.cellAlign)
         }
 
+        if (me.highlightModifiedCells) {
+            if (record.isModifiedField(dataField)) {
+                cellCls.push('neo-is-modified')
+            }
+        }
+
         if (!cellId) {
             cellId = me.getCellId(record, column.dataField)
         }
@@ -803,9 +813,9 @@ class GridView extends Component {
             fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,
             {gridContainer}  = me,
-            {selectionModel} = gridContainer,
+            {selectionModel} = gridContainer.view,
             {vdom}           = me,
-            cellId, cellNode, column, index, scope;
+            cellId, cellNode, cellStyle, cellVdom, column, index;
 
         if (fieldNames.includes(me.colspanField)) {
             index = me.store.indexOf(record);
@@ -821,14 +831,22 @@ class GridView extends Component {
                     cellId   = me.getCellId(record, field.name);
                     cellNode = VDomUtil.find(vdom, cellId);
 
-                    // the vdom might not exist yet => nothing to do in this case
+                    // The vdom might not exist yet => nothing to do in this case
                     if (cellNode?.vdom) {
+                        cellStyle   = cellNode.vdom.style;
                         column      = me.getColumn(field.name);
                         index       = cellNode.index;
+                        cellVdom    = me.applyRendererOutput({cellId, column, gridContainer, index, record});
                         needsUpdate = true;
-                        scope       = column.rendererScope || gridContainer;
 
-                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, gridContainer, index, record})
+                        // The cell-positioning logic happens outside applyRendererOutput()
+                        // We need to preserve these styles
+                        Object.assign(cellVdom.style, {
+                            left : cellStyle.left,
+                            width: cellStyle.width
+                        });
+
+                        cellNode.parentNode.cn[index] = cellVdom
                     }
                 }
             })

package/src/table/View.mjs

@@ -154,7 +154,7 @@ class View extends Component {
             cellCls.push('neo-' + column.cellAlign)
         }
 
-        if (me.highlightModifiedCells && me.store.model.trackModifiedFields) {
+        if (me.highlightModifiedCells) {
             if (record.isModifiedField(dataField)) {
                 cellCls.push('neo-is-modified')
             }