neo.mjs 7.8.0 → 7.9.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-21",
+      "datePublished": "2024-09-27",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.8.0'
+                html  : 'v7.9.0'
             }]
         }],
         /**

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

@@ -141,7 +141,7 @@ class MainContainerController extends Controller {
      */
     onRouteDefault(data) {
         if (!this.getModel().data.currentPageRecord) {
-            this.onRouteLearnItem({itemId: 'WhyNeo-Intro'})
+            this.onRouteLearnItem({itemId: 'benefits.Introduction'})
         }
     }
 

package/examples/ServiceWorker.mjs

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

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -0,0 +1,127 @@
+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.table.nestedRecordFields.EditUserDialog
+ * @extends Neo.dialog.Base
+ */
+class EditUserDialog extends Dialog {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.model.dialog.EditUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.model.dialog.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) {
+        this.record.country = data.value.code
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        this.record.user.firstname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onLastnameFieldChange(data) {
+        this.record.user.lastname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectedFieldChange(data) {
+        this.record.annotations.selected = data.value
+    }
+}
+
+export default Neo.setupClass(EditUserDialog);

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -0,0 +1,113 @@
+import Button             from '../../../src/button/Base.mjs';
+import MainContainerModel from './MainContainerModel.mjs';
+import TableContainer     from '../../../src/table/Container.mjs';
+import Viewport           from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainer',
+        /**
+         * @member {Object|String} layout='fit'
+         */
+        layout: 'fit',
+        /**
+         * @member {Neo.model.Component} model=MainContainerModel
+         */
+        model: MainContainerModel,
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TableContainer,
+            bind  : {store : 'stores.mainStore'},
+
+            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'}
+            ]
+        }]
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getModel().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, windowId} = me,
+            {record}                    = button;
+
+        if (!dialog) {
+            import('./EditUserDialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module         : module.default,
+                    animateTargetId: button.id,
+                    appName,
+                    model          : {parent: me.getModel()},
+                    record,
+                    windowId
+                })
+            })
+        } else {
+            dialog.animateTargetId = button.id;
+            dialog.record          = record;
+
+            dialog.show()
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editRenderer({column, index, record, tableContainer}) {
+        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: tableContainer.id,
+                record,
+                text    : 'Edit',
+                windowId
+            }));
+
+        return button.vdom
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/table/nestedRecordFields/MainContainerModel.mjs

@@ -0,0 +1,61 @@
+import MainStore from './MainStore.mjs';
+import Model     from '../../../src/model/Component.mjs';
+import Store     from '../../../src/data/Store.mjs';
+
+const countrySymbol = Symbol.for('country');
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainerModel'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainerModel',
+        /**
+         * @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[countrySymbol] = null;
+
+                record.country = country
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainerModel);

package/examples/table/nestedRecordFields/MainModel.mjs

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

package/examples/table/nestedRecordFields/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.table.container.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/table/nestedRecordFields/app.mjs

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

package/examples/table/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 Table: Nested Record Fields</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/table/nestedRecordFields/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.8.0",
+    "version": "7.9.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -63,7 +63,7 @@
         "sass": "^1.79.3",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.94.0",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.1.0",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -14,6 +14,11 @@
             padding      : 0 1rem;
         }
 
+
+        @media (min-width: 1297px) {
+            padding: 0 0 0 3rem;
+        }
+
         .neo-button {
             flex           : 1 !important;
             height         : 75px;

package/src/DefaultConfig.mjs

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

package/src/data/Model.mjs

@@ -38,13 +38,6 @@ class Model extends Base {
         trackModifiedFields: false
     }
 
-    /**
-     * A property set in all data records so that they are easily identifiable.
-     * @property {Boolean} isRecord=true
-     * @readonly
-     */
-    isRecord = true
-
     /**
      * Finds a field config by a given field name
      * @param {String} name

package/src/data/RecordFactory.mjs

@@ -16,11 +16,6 @@ class RecordFactory extends Base {
          * @protected
          */
         className: 'Neo.data.RecordFactory',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * The internal record prefix for original field values.
          * Only used in case the model has trackModifiedFields set to true.
@@ -30,7 +25,84 @@ class RecordFactory extends Base {
         /**
          * @member {String} recordNamespace='Neo.data.record'
          */
-        recordNamespace: 'Neo.data.record'
+        recordNamespace: 'Neo.data.record',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object} data.config
+     * @param {Object} data.field
+     * @param {Neo.data.RecordFactory} data.me
+     * @param {Neo.data.Model} data.model
+     * @param {String} data.path=''
+     */
+    createField({config, field, me, model, path=''}) {
+        let value     = Neo.ns(field.mapping || field.name, false, config),
+            fieldName = field.name.split('.').pop(),
+            symbol    = Symbol.for(fieldName),
+            fieldPath, parsedValue, properties;
+
+        if (field.fields) {
+            field.fields.forEach(childField => {
+                fieldPath = path.split('.');
+                fieldPath = fieldPath.filter(Boolean);
+                fieldPath.push(field.name);
+
+                this.createField({config, field: childField, me, model, path: fieldPath.join('.')})
+            })
+        } else {
+            if (value === undefined && Object.hasOwn(field, 'defaultValue')) {
+                value = field.defaultValue
+            }
+
+            parsedValue = instance.parseRecordValue(me, field, value, config);
+
+            properties = {
+                [symbol]: {
+                    value   : Neo.clone(parsedValue, true),
+                    writable: true
+                },
+                [fieldName]: {
+                    configurable: true,
+                    enumerable  : true,
+                    get() {
+                        return this[symbol]
+                    },
+                    set(value) {
+                        let oldValue = this[symbol];
+
+                        value = instance.parseRecordValue(me, field, value);
+
+                        if (!Neo.isEqual(value, oldValue)) {
+                            this[symbol] = value;
+
+                            me._isModified = true;
+                            me._isModified = instance.isModified(me, model.trackModifiedFields);
+
+                            instance.onRecordChange({
+                                fields: [{name: field.name, oldValue, value}],
+                                model,
+                                record: me
+                            })
+                        }
+                    }
+                }
+            };
+
+            // adding the original value of each field
+            if (model.trackModifiedFields) {
+                properties[instance.ovPrefix + field.name] = {
+                    value: parsedValue
+                }
+            }
+
+            Object.defineProperties(path ? Neo.ns(path, true, me) : me, properties)
+        }
     }
 
     /**
@@ -67,8 +139,7 @@ class RecordFactory extends Base {
                     static name = 'Record'
 
                     constructor(config) {
-                        let me = this,
-                            properties;
+                        let me = this;
 
                         Object.defineProperties(me, {
                             _isModified: {
@@ -79,57 +150,7 @@ class RecordFactory extends Base {
 
                         if (Array.isArray(model.fields)) {
                             model.fields.forEach(field => {
-                                let value  = config[field.mapping || field.name],
-                                    symbol = Symbol.for(field.name),
-                                    parsedValue;
-
-                                if (!Object.hasOwn(config, field.name) && Object.hasOwn(field, 'defaultValue')) {
-                                    value = field.defaultValue
-                                }
-
-                                parsedValue = instance.parseRecordValue(me, field, value, config);
-
-                                properties = {
-                                    [symbol]: {
-                                        value   : parsedValue,
-                                        writable: true
-                                    },
-                                    [field.name]: {
-                                        configurable: true,
-                                        enumerable  : true,
-                                        get() {
-                                            return this[symbol]
-                                        },
-                                        set(value) {
-                                            let me       = this,
-                                                oldValue = me[symbol];
-
-                                            value = instance.parseRecordValue(me, field, value);
-
-                                            if (!Neo.isEqual(value, oldValue)) {
-                                                me[symbol] = value;
-
-                                                me._isModified = true;
-                                                me._isModified = instance.isModified(me, model.trackModifiedFields);
-
-                                                instance.onRecordChange({
-                                                    fields: [{name: field.name, oldValue, value}],
-                                                    model,
-                                                    record: me
-                                                })
-                                            }
-                                        }
-                                    }
-                                };
-
-                                // adding the original value of each field
-                                if (model.trackModifiedFields) {
-                                    properties[instance.ovPrefix + field.name] = {
-                                        value: parsedValue
-                                    }
-                                }
-
-                                Object.defineProperties(me, properties)
+                                instance.createField({config, field, me, model})
                             })
                         }
                     }
@@ -151,8 +172,8 @@ class RecordFactory extends Base {
                     }
                 };
 
-                Object.defineProperty(cls.prototype, 'isRecord', { value : true });
-                Object.defineProperty(cls, 'isClass', { vale : true });
+                Object.defineProperty(cls.prototype, 'isRecord', {value: true});
+                Object.defineProperty(cls, 'isClass', {value: true});
 
                 return ns[key]
             }

package/src/data/Store.mjs

@@ -309,6 +309,13 @@ class Store extends Base {
         RecordFactory.createRecord(config)
     }
 
+    /**
+     * @returns {String}
+     */
+    getKeyProperty() {
+        return this.keyProperty || this.model.keyProperty
+    }
+
     /**
      * @param {Object} opts={}
      * @param {Object} opts.data

package/src/form/field/CheckBox.mjs

@@ -456,14 +456,19 @@ class CheckBox extends Base {
      */
     getGroupValue() {
         let form   = this.getClosestForm(),
-            fields = ComponentManager.find({path: this.getPath()}),
-            value  = [];
+            path   = this.getPath(),
+            value  = [],
+            fields;
 
-        fields.forEach(field => {
-            if (field.checked && field.getClosestForm() === form) {
-                NeoArray.add(value, field.value)
-            }
-        });
+        if (path) {
+            fields = ComponentManager.find({path});
+
+            fields.forEach(field => {
+                if (field.checked && field.getClosestForm() === form) {
+                    NeoArray.add(value, field.value)
+                }
+            })
+        }
 
         return value
     }

package/src/form/field/ComboBox.mjs

@@ -346,6 +346,7 @@ class ComboBox extends Picker {
             role          : 'listbox',
             selectionModel: {stayInList: false},
             store         : me.store,
+            windowId      : me.windowId,
             ...me.listConfig
         });
 
@@ -580,18 +581,18 @@ class ComboBox extends Picker {
     }
 
     /**
-     * @param {Object} record
+     * @param {Object} data
      * @protected
      */
-    onListItemNavigate(record) {
-        let {activeIndex} = record;
+    onListItemNavigate(data) {
+        let {activeIndex} = data;
 
         if (activeIndex >= 0) {
             let me      = this,
                 {store} = me;
 
-            me.activeRecord   = store.getAt(activeIndex);
-            me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty];
+            me.activeRecord   = data.record || store.getAt(activeIndex);
+            me.activeRecordId = me.activeRecord[store.getKeyProperty()];
 
             // Update typeahead hint (which updates DOM), or update DOM
             me.typeAhead ? me.updateTypeAheadValue(me.lastManualInput) : me.update()
@@ -737,7 +738,7 @@ class ComboBox extends Picker {
                 if (match && inputHintEl) {
                     inputHintEl.value = value + match[displayField].substr(value.length);
                     me.activeRecord   = match;
-                    me.activeRecordId = match[store.keyProperty || store.model.keyProperty]
+                    me.activeRecordId = match[store.getKeyProperty()]
                 }
             }
 
@@ -771,7 +772,7 @@ class ComboBox extends Picker {
  * The select event fires when a list item gets selected
  * @event select
  * @param {Object} record
- * @param {value} record[store.keyProperty]
+ * @param {value} record[store.getKeyProperty()]
  * @returns {Object}
  */
 

package/src/grid/View.mjs

@@ -95,9 +95,9 @@ class View extends Component {
 
             for (; j < colCount; j++) {
                 column         = columns[j];
-                rendererValue  = record[column.field];
+                rendererValue  = Neo.ns(column.field, false, record);
 
-                if (rendererValue === undefined) {
+                if (rendererValue === null || rendererValue === undefined) {
                     rendererValue = ''
                 }
 

package/src/list/Base.mjs

@@ -689,7 +689,7 @@ class Base extends Component {
     getItemRecordId(vnodeId) {
         let itemId   = vnodeId.split('__')[1],
             {model}  = this.store,
-            keyField = model?.getField(model.keyProperty),
+            keyField = model?.getField(this.getKeyProperty()),
             keyType  = keyField?.type?.toLowerCase();
 
         if (keyType === 'int' || keyType === 'integer') {

package/src/model/Component.mjs

@@ -155,10 +155,19 @@ class Component extends Base {
      */
     beforeSetStores(value, oldValue) {
         if (value) {
-            let controller = this.component.getController();
+            let me         = this,
+                controller = me.getController();
 
             Object.entries(value).forEach(([key, storeValue]) => {
                 controller?.parseConfig(storeValue);
+
+                // support mapping string based listeners into the model instance
+                Object.entries(storeValue.listeners || {}).forEach(([listenerKey,listener]) => {
+                    if (Neo.isString(listener) && Neo.isFunction(me[listener])) {
+                        storeValue.listeners[listenerKey] = me[listener].bind(me)
+                    }
+                })
+
                 value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
             })
         }

package/src/table/View.mjs

@@ -1,4 +1,5 @@
 import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
 import VDomUtil  from '../util/VDom.mjs';
 
 /**
@@ -35,6 +36,10 @@ class View extends Component {
          * @member {Object} recordVnodeMap={}
          */
         recordVnodeMap: {},
+        /**
+         * @member {String} selectedRecordField='annotations.selected'
+         */
+        selectedRecordField: 'annotations.selected',
         /**
          * @member {Neo.data.Store|null} store=null
          */
@@ -86,7 +91,7 @@ class View extends Component {
             cellCls     = ['neo-table-cell'],
             colspan     = record[me.colspanField],
             {dataField} = column,
-            fieldValue  = record[dataField],
+            fieldValue  = Neo.ns(dataField, false, record),
             hasStore    = tableContainer.store?.model, // todo: remove as soon as all tables use stores (examples table)
             {vdom}      = me,
             cellConfig, rendererOutput;
@@ -189,6 +194,10 @@ class View extends Component {
 
             trCls = me.getTrClass(record, i);
 
+            if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+                NeoArray.add(selectedRows, id)
+            }
+
             if (selectedRows?.includes(id)) {
                 trCls.push('neo-selected');
 
@@ -432,11 +441,12 @@ class View extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange(opts) {
-        let me             = this,
-            fieldNames     = opts.fields.map(field => field.name),
-            needsUpdate    = false,
-            tableContainer = me.parent,
-            {vdom}         = me,
+        let me               = this,
+            fieldNames       = opts.fields.map(field => field.name),
+            needsUpdate      = false,
+            tableContainer   = me.parent,
+            {selectionModel} = tableContainer,
+            {vdom}           = me,
             cellId, cellNode, column, index, scope;
 
         if (fieldNames.includes(me.colspanField)) {
@@ -444,17 +454,23 @@ class View extends Component {
             me.createViewData(me.store.items)
         } else {
             opts.fields.forEach(field => {
-                cellId   = me.getCellId(opts.record, field.name);
-                cellNode = VDomUtil.findVdomChild(vdom, cellId);
+                if (field.name === me.selectedRecordField) {
+                    if (selectionModel.ntype === 'selection-table-rowmodel') {
+                        selectionModel[!field.value && selectionModel.singleSelect ? 'deselect' : 'select'](me.getRowId(opts.record))
+                    }
+                } else {
+                    cellId   = me.getCellId(opts.record, field.name);
+                    cellNode = VDomUtil.findVdomChild(vdom, cellId);
 
-                // the vdom might not exist yet => nothing to do in this case
-                if (cellNode?.vdom) {
-                    column      = me.getColumn(field.name);
-                    index       = cellNode.index;
-                    needsUpdate = true;
-                    scope       = column.rendererScope || tableContainer;
+                    // the vdom might not exist yet => nothing to do in this case
+                    if (cellNode?.vdom) {
+                        column      = me.getColumn(field.name);
+                        index       = cellNode.index;
+                        needsUpdate = true;
+                        scope       = column.rendererScope || tableContainer;
 
-                    cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                    }
                 }
             })
         }

package/src/table/header/Button.mjs

@@ -1,6 +1,7 @@
-import BaseButton from '../../button/Base.mjs';
-import NeoArray   from '../../util/Array.mjs';
-import TextField  from '../../form/field/Text.mjs';
+import BaseButton        from '../../button/Base.mjs';
+import NeoArray          from '../../util/Array.mjs';
+import TextField         from '../../form/field/Text.mjs';
+import {resolveCallback} from '../../util/Function.mjs';
 
 /**
  * @class Neo.table.header.Button
@@ -75,6 +76,10 @@ class Button extends BaseButton {
          * @protected
          */
         isSorted_: null,
+        /**
+         * @member {Function|String|null} renderer_='cellRenderer'
+         */
+        renderer_: 'cellRenderer',
         /**
          * Scope to execute the column renderer.
          * Defaults to the matching table.Container
@@ -261,7 +266,31 @@ class Button extends BaseButton {
      * @protected
      */
     beforeSetCellAlign(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues');
+        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues')
+    }
+
+    /**
+     * Triggered before the renderer config gets changed
+     * @param {Function|String|null} value
+     * @param {Function|String|null} oldValue
+     * @protected
+     */
+    beforeSetRenderer(value, oldValue) {
+        return resolveCallback(value, this).fn
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.button.Base} data.column
+     * @param {String} data.dataField
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @param {Neo.table.Container} data.tableContainer
+     * @param {Number|String} data.value
+     * @returns {*}
+     */
+    cellRenderer(data) {
+        return data.value
     }
 
     /**
@@ -461,20 +490,6 @@ class Button extends BaseButton {
         me.cls       = cls;
         me._isSorted = null
     }
-
-    /**
-     * @param {Object} data
-     * @param {Neo.button.Base} data.column
-     * @param {String} data.dataField
-     * @param {Number} data.index
-     * @param {Object} data.record
-     * @param {Neo.table.Container} data.tableContainer
-     * @param {Number|String} data.value
-     * @returns {*}
-     */
-    renderer(data) {
-        return data.value
-    }
 }
 
 export default Neo.setupClass(Button);