neo.mjs 4.1.2 → 4.2.2

package/apps/realworld/view/FooterComponent.mjs

@@ -15,12 +15,12 @@ class FooterComponent extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tag: 'footer', cn: [
-                {cls: ['container'], cn: [
-                    {tag: 'a', cls: ['logo-font'], href: '#/', html: 'conduit'},
-                    {tag: 'span', cls: 'attribution', html: 'An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.'}
-                ]}
+        {tag: 'footer', cn: [
+            {cls: ['container'], cn: [
+                {tag: 'a', cls: ['logo-font'], href: '#/', html: 'conduit'},
+                {tag: 'span', cls: 'attribution', html: 'An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.'}
             ]}
+        ]}
     }}
 }
 

package/apps/realworld/view/HeaderComponent.mjs

@@ -36,40 +36,40 @@ class HeaderComponent extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tag: 'nav', cls: ['navbar navbar-light'], cn: [
-                {cls: ['container'], cn: [
-                    {tag: 'a',  cls: ['navbar-brand'], href: '#/', html: 'conduit'},
-                    {tag: 'ul', cls: ['nav navbar-nav', 'pull-xs-right'], cn: [
-                        {tag: 'li', cls: ['nav-item'], cn: [
-                            {tag: 'a', cls: ['nav-link'], href: '#/', html: 'Home'}
-                        ]},
-                        {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
-                            {tag: 'a', cls: ['nav-link'], href: '#/editor', cn: [
-                                {tag: 'i', cls: 'ion-compose'},
-                                {vtype: 'text', html: ' New Article'}
-                            ]}
-                        ]},
-                        {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
-                            {tag: 'a', cls: ['nav-link'], href: '#/settings', cn: [
-                                {tag: 'i', cls: 'ion-gear-a'},
-                                {vtype: 'text', html: ' Settings'}
-                            ]}
-                        ]},
-                        {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
-                            {tag: 'a', cls : ['nav-link'], href: '#/profile', cn: [
-                                {tag: 'img', cls: ['user-pic']},
-                                {vtype: 'text', html: ' Profile'}
-                            ]}
-                        ]},
-                        {tag: 'li', cls: ['nav-item'], cn: [
-                            {tag : 'a', cls : ['nav-link'], href: '#/login', html: 'Sign in'}
-                        ]},
-                        {tag: 'li', cls: ['nav-item'], cn: [
-                            {tag: 'a', cls : ['nav-link'], href: '#/register', html: 'Sign up'}
+        {tag: 'nav', cls: ['navbar navbar-light'], cn: [
+            {cls: ['container'], cn: [
+                {tag: 'a',  cls: ['navbar-brand'], href: '#/', html: 'conduit'},
+                {tag: 'ul', cls: ['nav navbar-nav', 'pull-xs-right'], cn: [
+                    {tag: 'li', cls: ['nav-item'], cn: [
+                        {tag: 'a', cls: ['nav-link'], href: '#/', html: 'Home'}
+                    ]},
+                    {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
+                        {tag: 'a', cls: ['nav-link'], href: '#/editor', cn: [
+                            {tag: 'i', cls: 'ion-compose'},
+                            {vtype: 'text', html: ' New Article'}
                         ]}
+                    ]},
+                    {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
+                        {tag: 'a', cls: ['nav-link'], href: '#/settings', cn: [
+                            {tag: 'i', cls: 'ion-gear-a'},
+                            {vtype: 'text', html: ' Settings'}
+                        ]}
+                    ]},
+                    {tag: 'li', cls: ['nav-item'], removeDom: true, cn: [
+                        {tag: 'a', cls : ['nav-link'], href: '#/profile', cn: [
+                            {tag: 'img', cls: ['user-pic']},
+                            {vtype: 'text', html: ' Profile'}
+                        ]}
+                    ]},
+                    {tag: 'li', cls: ['nav-item'], cn: [
+                        {tag : 'a', cls : ['nav-link'], href: '#/login', html: 'Sign in'}
+                    ]},
+                    {tag: 'li', cls: ['nav-item'], cn: [
+                        {tag: 'a', cls : ['nav-link'], href: '#/register', html: 'Sign up'}
                     ]}
                 ]}
             ]}
+        ]}
     }}
 
     /**

package/apps/realworld/view/HomeComponent.mjs

@@ -280,8 +280,8 @@ class HomeComponent extends Component {
                 cls: ['nav-item'],
                 id : me.id + '__nav-item_' + index,
                 cn : [{
-                    tag: 'a',
-                    cls: cls,
+                    tag : 'a',
+                    cls : cls,
                     href: '',
                     html: item.name,
                     id  : me.id + '__nav-item-link_' + index,
@@ -447,12 +447,12 @@ class HomeComponent extends Component {
         if (feeds.length < 3) {
             feeds.push({
                 active: true,
-                name  : name
+                name
             });
         } else {
             Object.assign(feeds[2], {
                 active: true,
-                name  : name
+                name
             });
         }
 

package/apps/realworld/view/MainContainerController.mjs

@@ -144,7 +144,7 @@ class MainContainerController extends ComponentController {
      */
     getArticle(slug) {
         return ArticleApi.get({
-            slug: slug
+            slug
         });
     }
 
@@ -406,9 +406,9 @@ class MainContainerController extends ComponentController {
             module = await module();
 
             me[key] = Neo.create({
-                module   : module.default,
-                parentId : me.component.id,
-                reference: reference
+                module  : module.default,
+                parentId: me.component.id,
+                reference
             });
         }
 

package/apps/realworld/view/article/Component.mjs

@@ -233,8 +233,8 @@ class Component extends BaseComponent {
 
                 VDomUtil.getByFlag(vdom, 'body').cn[0] = {
                     cn: [{
-                        tag : 'p',
-                        html: html
+                        tag: 'p',
+                        html
                     }]
                 };
 

package/apps/realworld/view/article/PreviewComponent.mjs

@@ -267,7 +267,7 @@ class PreviewComponent extends Component {
             favorited = !me.favorited;
 
         me.set({
-            favorited     : favorited,
+            favorited,
             favoritesCount: favorited ? (me.favoritesCount + 1) : (me.favoritesCount - 1)
         });
     }

package/apps/realworld/view/article/TagListComponent.mjs

@@ -78,8 +78,8 @@ class TagListComponent extends Component {
     afterSetActiveTag(value, oldValue) {
         if (oldValue !== undefined) {
             this.fire('tagChange', {
-                oldValue: oldValue,
-                value   : value
+                oldValue,
+                value
             });
         }
     }

package/apps/realworld2/view/MainContainer.mjs

@@ -46,7 +46,7 @@ class MainContainer extends Viewport {
             ntype    : 'container',
             flex     : 1,
             items    : [],
-            layout   : {ntype: 'card'},
+            layout   : {ntype: 'card', activeIndex: null},
             reference: 'cards'
         }, {
             module: FooterComponent

package/apps/realworld2/view/MainContainerController.mjs

@@ -209,8 +209,8 @@ class MainContainerController extends ComponentController {
 
         if (!card) {
             card = me.getReference('cards').add({
-                module   : module,
-                reference: reference
+                module,
+                reference
             });
         }
 

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Sep 07, 2022",
+        "id"          : 53,
+        "image"       : "the-secret-of-successfully-using-multi-window-webgl-canvas.png",
+        "name"        : "The secret of successfully using multi window WebGL Canvas",
+        "provider"    : "Medium",
+        "publisher"   : "",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://tobiasuhlig.medium.com/the-secret-of-successfully-using-multi-window-webgl-canvas-5a2d05555ad1?source=friends_link&sk=d24ec0ec25aa6678d5fd1f59aaf09007"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/buildScripts/addConfig.mjs

@@ -0,0 +1,400 @@
+#!/usr/bin/env node
+
+import chalk       from 'chalk';
+import { Command } from 'commander/esm.mjs';
+import envinfo     from 'envinfo';
+import fs          from 'fs-extra';
+import inquirer    from 'inquirer';
+import os          from 'os';
+import path        from 'path';
+
+const
+    __dirname   = path.resolve(),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    program     = new Command(),
+    programName = `${packageJson.name} add-config`;
+
+/**
+ * Adds a comma to the last element of the contentArray
+ * @param {String[]} contentArray
+ * @param {Number} index=contentArray.length - 1
+ * @returns {String[]}
+ */
+function addComma(contentArray, index=contentArray.length - 1) {
+    contentArray[index] += ',';
+    return contentArray;
+}
+
+/**
+ * Adds a config to the given index of the contentArray
+ * @param {Object} opts
+ * @param {String} opts.configName
+ * @param {String} opts.defaultValue
+ * @param {String[]} opts.contentArray
+ * @param {Boolean} opts.isLastConfig
+ * @param {Number} opts.index
+ * @param {String} opts.type
+ * @returns {String[]}
+ */
+function addConfig(opts) {
+    if (opts.type === 'String' && opts.defaultValue !== 'null') {
+        opts.defaultValue = `'${opts.defaultValue}'`;
+    }
+
+    const config = [
+        '        /**',
+        `         * @member {${opts.type}} ${opts.configName}_=${opts.defaultValue}`,
+        '         */',
+        `        ${opts.configName}_: ${opts.defaultValue}`
+    ];
+
+    !opts.isLastConfig && addComma(config);
+
+    opts.contentArray.splice(opts.index, 0, config.join(os.EOL));
+    return opts.contentArray;
+}
+
+/**
+ * Adds a config hook at the matching index
+ * @param {Object} opts
+ * @param {String} opts.comment
+ * @param {String[]} opts.contentArray
+ * @param {String} opts.name
+ * @param {Boolean} opts.oldValueParam
+ * @param {Boolean} opts.returnValue
+ * @param {String} opts.type
+ * @returns {String[]}
+ */
+function addHook(opts) {
+    let contentArray = opts.contentArray,
+        i            = 0,
+        inserted     = false,
+        name         = opts.name,
+        len          = contentArray.length,
+        type         = opts.type,
+        j, methodName, nextLine,
+
+    method = [
+        '',
+        '    /**',
+        `     * ${opts.comment}`,
+        `     * @param {${type}} value`
+    ];
+
+    if (opts.oldValueParam) {
+        method.push(
+        `     * @param {${type}} oldValue`
+        );
+    }
+
+    if (opts.returnValue) {
+        method.push(
+        `     * @returns {${type}}`
+        );
+    }
+
+    method.push(
+        '     * @protected',
+        '     */'
+    );
+
+    if (opts.oldValueParam) {
+        method.push(
+        `    ${name}(value, oldValue) {`
+        );
+    } else {
+        method.push(
+        `    ${name}(value) {`
+        );
+    }
+
+    if (opts.returnValue) {
+        method.push(
+        '        return value;'
+        );
+    } else {
+        method.push(
+        '        '
+        );
+    }
+
+    method.push(
+        '    }'
+    );
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('}}')) {
+            break;
+        }
+    }
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('*/')) {
+            nextLine   = contentArray[i + 1]
+            methodName = nextLine.substring(0, nextLine.indexOf('(')).trim();
+
+            if (methodName === 'construct') {
+                continue;
+            }
+
+            if (methodName > name) {
+                for (j=i; j > 0; j--) {
+                    if (contentArray[j].includes('/**')) {
+                        contentArray.splice(j - 1, 0, method.join(os.EOL));
+                        inserted = true;
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+
+    if (!inserted) {
+        for (i=contentArray.length - 1; i > 0; i--) {
+            if (contentArray[i].includes('}')) {
+                contentArray.splice(i, 0, method.join(os.EOL));
+                break;
+            }
+        }
+    }
+
+    return contentArray;
+}
+
+
+/**
+ * Makes the first character of a string uppercase
+ * @param {String} value
+ * @returns {Boolean|String} Returns false for non string inputs
+ */
+function capitalize(value) {
+    return value[0].toUpperCase() + value.slice(1);
+}
+
+program
+    .name(programName)
+    .version(packageJson.version)
+    .option('-i, --info', 'print environment debug info')
+    .option('-c, --className <value>')
+    .option('-d, --defaultValue <value>')
+    .option('-h, --hooks <value>')
+    .option('-n, --configName <value>')
+    .option('-t, --type <value>')
+    .allowUnknownOption()
+    .on('--help', () => {
+        console.log('\nIn case you have any issues, please create a ticket here:');
+        console.log(chalk.cyan(process.env.npm_package_bugs_url));
+    })
+    .parse(process.argv);
+
+const programOpts = program.opts();
+
+if (programOpts.info) {
+    console.log(chalk.bold('\nEnvironment Info:'));
+    console.log(`\n  current version of ${packageJson.name}: ${packageJson.version}`);
+    console.log(`  running from ${cwd}`);
+
+    envinfo
+        .run({
+            System     : ['OS', 'CPU'],
+            Binaries   : ['Node', 'npm', 'Yarn'],
+            Browsers   : ['Chrome', 'Edge', 'Firefox', 'Safari'],
+            npmPackages: ['neo.mjs']
+        }, {
+            duplicates  : true,
+            showNotFound: true
+        })
+        .then(console.log);
+} else {
+    console.log(chalk.green(programName));
+
+    let answers = {},
+        answer;
+
+    if (!programOpts.className) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'className',
+            message: 'Please choose the namespace of your class:',
+            default: 'Covid.view.MainContainer'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let className = programOpts.className || answers.className,
+        ns        = className.split('.'),
+        root      = ns.shift().toLowerCase(),
+        classPath = path.resolve(cwd, root === 'neo' ? 'src' : `apps/${root}`, `${ns.join('/')}.mjs`);
+
+    if (!fs.existsSync(path.resolve(classPath))) {
+        console.log(chalk.red(`File not found for ${className} => ${classPath}`));
+        process.exit(1);
+    }
+
+    if (!programOpts.configName) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'configName',
+            message: 'Please enter a name for your class config:'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let configName = programOpts.configName || answers.configName;
+
+    if (configName.endsWith('_')) {
+        configName = configName.slice(0, -1);
+    }
+
+    let uConfigName = capitalize(configName);
+
+    if (!programOpts.type) {
+        answer = await inquirer.prompt({
+            type   : 'list',
+            name   : 'type',
+            message: 'Please choose a type for your class config:',
+            default: 'Custom',
+            choices: [
+                'Custom',
+                'Object',
+                'Object[]',
+                'Number',
+                'Number[]',
+                'String',
+                'String[]'
+            ]
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (answers.type === 'Custom') {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'type',
+            message: 'Please enter the type for your class config:'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (!programOpts.defaultValue) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'defaultValue',
+            message: 'Please enter a defaultValue:',
+            default: 'null'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (!programOpts.hooks) {
+        answer = await inquirer.prompt({
+            type   : 'checkbox',
+            name   : 'hooks',
+            message: 'Please choose the hooks for your class config:',
+            choices: [`afterSet${uConfigName}()`, `beforeGet${uConfigName}()`, `beforeSet${uConfigName}()`],
+            default: [`afterSet${uConfigName}()`]
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let defaultValue = programOpts.defaultValue || answers.defaultValue,
+        hooks        = programOpts.hooks        || answers.hooks,
+        type         = programOpts.type         || answers.type,
+        contentArray = fs.readFileSync(classPath).toString().split(os.EOL),
+        i            = 0,
+        len          = contentArray.length,
+        codeLine, existingConfigName, j, nextLine;
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('static getConfig')) {
+            break;
+        }
+    }
+
+    for (; i < len; i++) {
+        codeLine = contentArray[i];
+
+        if (codeLine.includes('}}')) {
+            addComma(contentArray, i - 1);
+            addConfig({
+                configName,
+                defaultValue,
+                contentArray,
+                index       : i,
+                isLastConfig: true,
+                type
+            });
+            break;
+        }
+
+        if (codeLine.includes('*/')) {
+            nextLine           = contentArray[i + 1]
+            existingConfigName = nextLine.substring(0, nextLine.indexOf(':')).trim();
+
+            if (existingConfigName === 'className' || existingConfigName === 'ntype') {
+                continue;
+            }
+
+            if (existingConfigName > configName) {
+                for (j=i; j > 0; j--) {
+                    if (contentArray[j].includes('/**')) {
+                        addConfig({
+                            configName,
+                            contentArray,
+                            defaultValue,
+                            index       : j,
+                            isLastConfig: false,
+                            type
+                        });
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+
+    if (hooks.includes(`afterSet${uConfigName}()`)) {
+        addHook({
+            comment      : `Triggered after the ${configName} config got changed`,
+            contentArray,
+            name         : `afterSet${uConfigName}`,
+            oldValueParam: true,
+            returnValue  : false,
+            type
+        });
+    }
+
+    if (hooks.includes(`beforeGet${uConfigName}()`)) {
+        addHook({
+            comment      : `Gets triggered when accessing the value of the ${configName} config`,
+            contentArray,
+            name         : `beforeGet${uConfigName}`,
+            oldValueParam: false,
+            returnValue  : true,
+            type
+        });
+    }
+
+    if (hooks.includes(`beforeSet${uConfigName}()`)) {
+        addHook({
+            comment      : `Triggered before the ${configName} config gets changed`,
+            contentArray,
+            name         : `beforeSet${uConfigName}`,
+            oldValueParam: true,
+            returnValue  : true,
+            type
+        });
+    }
+
+    fs.writeFileSync(classPath, contentArray.join(os.EOL));
+}

package/buildScripts/createClass.mjs

@@ -114,6 +114,7 @@ if (programOpts.info) {
             choices: [
                 'component.Base',
                 'container.Base',
+                'container.Viewport',
                 'controller.Component',
                 'core.Base',
                 'data.Model',
@@ -583,6 +584,13 @@ if (programOpts.info) {
             `        className: '${className}'`
         );
 
+        baseClass === 'container.Viewport' && addComma(classContent).push(
+            "        /**",
+            "         * @member {Boolean} autoMount=true",
+            "         */",
+            "        autoMount: true"
+        );
+
         baseClass === 'table.Container' && addComma(classContent).push(
             "        /**",
             "         * @member {Object[]} columns",

package/examples/grid/container/MainContainer.mjs

@@ -0,0 +1,102 @@
+import CellColumnModel       from '../../../src/selection/grid/CellColumnModel.mjs';
+import CellColumnRowModel    from '../../../src/selection/grid/CellColumnRowModel.mjs';
+import CellModel             from '../../../src/selection/grid/CellModel.mjs';
+import CellRowModel          from '../../../src/selection/grid/CellRowModel.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import ColumnModel           from '../../../src/selection/grid/ColumnModel.mjs';
+import GridContainer         from '../../../src/grid/Container.mjs';
+import MainStore             from './MainStore.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import RowModel              from '../../../src/selection/grid/RowModel.mjs';
+
+/**
+ * @class Neo.examples.grid.container.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className           : 'Neo.examples.grid.container.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 130,
+        configPanelFlex     : 1.5,
+        exampleComponentFlex: 3,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    createConfigurationComponents() {
+        let me = this;
+
+        const selectionModelRadioDefaults = {
+            module        : Radio,
+            hideValueLabel: false,
+            labelText     : '',
+            name          : 'selectionModel',
+            width         : 350
+        };
+
+        return [{
+            module   : NumberField,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 800,
+            minValue : 225,
+            stepSize : 5,
+            value    : me.exampleComponent.height
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.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',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
+            valueLabelText: 'Column'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-rowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
+            valueLabelText: 'Row'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.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',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            valueLabelText: 'Cell & Row'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            valueLabelText: 'Cell & Column & Row'
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(GridContainer, {
+            selectionModel: CellModel,
+            store         : MainStore,
+
+            columnDefaults: {
+                width: 200
+            },
+
+            columns: [
+                {field: 'firstname', text: 'Firstname'},
+                {field: 'lastname',  text: 'Lastname'},
+                {field: 'githubId',  text: 'Github Id'},
+                {field: 'country',   text: 'Country'}
+            ]
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/grid/container/MainModel.mjs

@@ -0,0 +1,29 @@
+import Model  from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.container.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static getConfig() {return {
+        className: 'Neo.examples.grid.container.MainModel',
+
+        fields: [{
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainModel);
+
+export default MainModel;

package/examples/grid/container/MainStore.mjs

@@ -0,0 +1,55 @@
+import Store from '../../../src/data/Store.mjs';
+import Model from './MainModel.mjs';
+
+/**
+ * @class Neo.examples.grid.container.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static getConfig() {return {
+        className  : 'Neo.examples.grid.container.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country  : 'Germany',
+            firstname: 'Tobias',
+            githubId : 'tobiu',
+            lastname : 'Uhlig'
+        },
+        {
+            country  : 'USA',
+            firstname: 'Rich',
+            githubId : 'rwaters',
+            lastname : 'Waters'
+        },
+        {
+            country  : 'Germany',
+            firstname: 'Nils',
+            githubId : 'mrsunshine',
+            lastname : 'Dehl'
+        },
+        {
+            country  : 'USA',
+            firstname: 'Gerard',
+            githubId : 'camtnbikerrwc',
+            lastname : 'Horan'
+        },
+        {
+            country  : 'Slovakia',
+            firstname: 'Jozef',
+            githubId : 'jsakalos',
+            lastname : 'Sakalos'
+        },
+        {
+            country  : 'Germany',
+            firstname: 'Bastian',
+            githubId : 'bhaustein',
+            lastname : 'Haustein'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainStore);
+
+export default MainStore;

package/examples/grid/container/app.mjs

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

package/examples/grid/container/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 GridContainer</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

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

package/examples/table/container/MainModel.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.1.2",
+    "version": "4.2.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -11,6 +11,7 @@
         "neo-cc": "./buildScripts/createClass.mjs"
     },
     "scripts": {
+        "add-config": "node ./buildScripts/addConfig.mjs",
         "build-all": "node ./buildScripts/buildAll.mjs -f -n",
         "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
         "build-my-apps": "node ./buildScripts/webpack/buildMyApps.mjs -f",

package/resources/scss/src/grid/Container.scss

@@ -1,6 +1,7 @@
 .neo-grid-container {
     border        : 1px solid v(grid-container-border-color);
     border-spacing: 0;
+    color         : v(grid-container-color);
     font-size     : 13px;
     font-weight   : 400;
     height        : 100%;
@@ -32,7 +33,7 @@
 
     .neo-grid-row:nth-child(even) {
         .neo-grid-cell {
-            background-color: #323232;
+            background-color: v(grid-container-cell-background-color-even);
         }
     }
 
@@ -56,8 +57,8 @@
     }
 
     .neo-grid-cell, .neo-grid-header-cell {
-        border-bottom: 1px solid #2b2b2b;
-        border-right : 1px solid #2b2b2b;
+        border-bottom: 1px solid v(grid-container-border-color);
+        border-right : 1px solid v(grid-container-border-color);
         height       : inherit;
         min-width    : 300px;
 
@@ -73,7 +74,7 @@
 
     .neo-grid-cell {
         align-items     : center;
-        background-color: #3c3f41;
+        background-color: v(grid-container-cell-background-color);
         display         : flex;
         height          : 32px !important;
         max-height      : 32px !important;

package/src/data/connection/WebSocket.mjs

@@ -17,6 +17,7 @@ class Socket extends Base {
     maxReconnectAttempts = 5
     /**
      * @member {Object} messageCallbacks={}
+     * @protected
      */
     messageCallbacks = {}
     /**

package/src/grid/View.mjs

@@ -41,7 +41,7 @@ class View extends Component {
 
         // console.log('createViewData', me.id, inputData);
 
-        if (container.selectionModel?.ntype === 'selection-table-rowmodel') {
+        if (container.selectionModel?.ntype === 'selection-grid-rowmodel') {
             selectedRows = container.selectionModel.items || [];
         }
 

package/src/grid/header/Button.mjs

@@ -16,6 +16,16 @@ class Button extends BaseButton {
      */
     field = null
 
+    static getStaticConfig() {return {
+        /**
+         * Valid values for align
+         * @member {String[]} alignValues: ['left', 'center', 'right']
+         * @protected
+         * @static
+         */
+        alignValues: ['left', 'center', 'right']
+    }}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.grid.header.Button'
@@ -27,6 +37,11 @@ class Button extends BaseButton {
          * @protected
          */
         ntype: 'grid-header-button',
+        /**
+         * Alignment of the matching table cells. Valid values are left, center, right
+         * @member {String} align_='left'
+         */
+        align_: 'left',
         /**
          * @member {String[]} cls=['neo-grid-header-button']
          */
@@ -98,6 +113,16 @@ class Button extends BaseButton {
         });
     }
 
+    /**
+     * Triggered before the align config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetAlign(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'align', 'alignValues');
+    }
+
     /**
      * @protected
      */

package/src/selection/grid/CellColumnModel.mjs

@@ -66,13 +66,13 @@ class CellColumnModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me   = this,
-            id   = ColumnModel.getCellId(data.path),
+        let me = this,
+            id = ColumnModel.getCellId(data.path),
             columnNodeIds, index, tbodyNode;
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -91,15 +91,15 @@ class CellColumnModel extends CellModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             view          = me.view,
-            dataFields    = view.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            fields        = view.columns.map(c => c.field),
+            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, tbodyNode;
 
         while (newIndex < 0) {
-            newIndex += dataFields.length;
+            newIndex += fields.length;
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/grid/CellColumnRowModel.mjs

@@ -72,7 +72,7 @@ class CellColumnRowModel extends CellRowModel {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -91,15 +91,15 @@ class CellColumnRowModel extends CellRowModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             view          = me.view,
-            dataFields    = view.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            fields        = view.columns.map(c => c.field),
+            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, tbodyNode;
 
         while (newIndex < 0) {
-            newIndex += dataFields.length;
+            newIndex += fields.length;
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/grid/CellModel.mjs

@@ -45,21 +45,19 @@ class CellModel extends Model {
      */
     onCellClick(data) {
         let me   = this,
-            id   = null,
             path = data.path,
             i    = 0,
-            len  = path.length;
+            len  = path.length,
+            id;
 
         for (; i < len; i++) {
-            if (path[i].tagName === 'td') {
+            if (path[i].cls.includes('neo-grid-cell')) {
                 id = path[i].id;
                 break;
             }
         }
 
-        if (id) {
-            me.toggleSelection(id);
-        }
+        id && me.toggleSelection(id);
     }
 
     /**
@@ -99,7 +97,7 @@ class CellModel extends Model {
             view          = me.view,
             idArray       = data.path[0].id.split('__'),
             currentColumn = idArray[2],
-            dataFields    = view.columns.map(c => c.dataField),
+            dataFields    = view.columns.map(c => c.field),
             newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
             id;
 
@@ -148,14 +146,12 @@ class CellModel extends Model {
             id   = me.id,
             view = me.view;
 
-        if (view.keys) {
-            view.keys._keys.push(
-                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
-            );
-        }
+        view.keys?._keys.push(
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+        );
     }
 
     /**
@@ -166,14 +162,12 @@ class CellModel extends Model {
             id   = me.id,
             view = me.view;
 
-        if (view.keys) {
-            view.keys.removeKeys([
-                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
-            ]);
-        }
+        view.keys?.removeKeys([
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+        ]);
 
         super.unregister();
     }

package/src/selection/grid/ColumnModel.mjs

@@ -51,7 +51,7 @@ class ColumnModel extends Model {
             len  = eventPath.length;
 
         for (; i < len; i++) {
-            if (eventPath[i].tagName === 'td') {
+            if (eventPath[i].cls.includes('neo-grid-cell')) {
                 id = eventPath[i].id;
                 break;
             }
@@ -61,15 +61,15 @@ class ColumnModel extends Model {
     }
 
     /**
-     * todo: move to table.Container or view
+     * todo: move to grid.Container or view
      * @param {String} cellId
-     * @param {Array} columns
+     * @param {Object[]} columns
      * @returns {Number} index
      */
     static getColumnIndex(cellId, columns) {
         let idArray       = cellId.split('__'),
             currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.dataField);
+            dataFields    = columns.map(c => c.field);
 
         return dataFields.indexOf(currentColumn);
     }
@@ -78,13 +78,13 @@ class ColumnModel extends Model {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me   = this,
-            id   = ColumnModel.getCellId(data.path),
+        let me = this,
+            id = ColumnModel.getCellId(data.path),
             columnNodeIds, index, tbodyNode;
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.select(columnNodeIds);
@@ -114,18 +114,18 @@ class ColumnModel extends Model {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             view          = me.view,
-            dataFields    = view.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            fields        = view.columns.map(c => c.field),
+            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, id, tbodyNode;
 
         while (newIndex < 0) {
-            newIndex += dataFields.length;
+            newIndex += fields.length;
         }
 
-        idArray[2] = dataFields[newIndex];
+        idArray[2] = fields[newIndex];
         id = idArray.join('__');
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.select(columnNodeIds);
@@ -142,17 +142,15 @@ class ColumnModel extends Model {
             id   = me.id,
             view = me.view;
 
-        if (view.keys) {
-            view.keys._keys.push({
-                fn   : 'onKeyDownLeft',
-                key  : 'Left',
-                scope: id
-            }, {
-                fn   : 'onKeyDownRight',
-                key  : 'Right',
-                scope: id
-            });
-        }
+        view.keys?._keys.push({
+            fn   : 'onKeyDownLeft',
+            key  : 'Left',
+            scope: id
+        }, {
+            fn   : 'onKeyDownRight',
+            key  : 'Right',
+            scope: id
+        });
     }
 
 
@@ -164,17 +162,15 @@ class ColumnModel extends Model {
             id   = me.id,
             view = me.view;
 
-        if (view.keys) {
-            view.keys.removeKeys([{
-                fn   : 'onKeyDownLeft',
-                key  : 'Left',
-                scope: id
-            }, {
-                fn   : 'onKeyDownRight',
-                key  : 'Right',
-                scope: id
-            }]);
-        }
+        view.keys?.removeKeys([{
+            fn   : 'onKeyDownLeft',
+            key  : 'Left',
+            scope: id
+        }, {
+            fn   : 'onKeyDownRight',
+            key  : 'Right',
+            scope: id
+        }]);
 
         super.unregister();
     }