neo.mjs 4.2.0 → 4.2.3

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

@@ -71,40 +71,42 @@ 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 {${opts.type}} value`
+        `     * @param {${type}} value`
     ];
 
     if (opts.oldValueParam) {
         method.push(
-        `     * @param {${opts.type}} oldValue`
+        `     * @param {${type}} oldValue`
         );
     }
 
     if (opts.returnValue) {
         method.push(
-        `     * @returns {${opts.type}}`
+        `     * @returns {${type}}`
         );
     }
 
     method.push(
-    '     * @protected',
-    '     */'
+        '     * @protected',
+        '     */'
     );
 
     if (opts.oldValueParam) {
         method.push(
-        `    ${opts.name}(value, oldValue) {`
+        `    ${name}(value, oldValue) {`
         );
     } else {
         method.push(
-        `    ${opts.name}(value) {`
+        `    ${name}(value) {`
         );
     }
 
@@ -137,7 +139,7 @@ function addHook(opts) {
                 continue;
             }
 
-            if (methodName > opts.name) {
+            if (methodName > name) {
                 for (j=i; j > 0; j--) {
                     if (contentArray[j].includes('/**')) {
                         contentArray.splice(j - 1, 0, method.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.2.0",
+    "version": "4.2.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,10 +55,10 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.8",
+        "sass": "^1.54.9",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "4.10.1",
+        "webpack-dev-server": "4.11.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/form/field/Select.scss

@@ -24,6 +24,7 @@
     }
 
     .neo-list {
+        overflow-y: auto;
         text-align: left;
 
         .neo-highlight-search {
@@ -43,4 +44,4 @@
         border-radius: v(selectfield-picker-container-border-radius);
         font-weight  : 400;
     }
-}
+}

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/form/field/Select.mjs

@@ -5,7 +5,7 @@ import Store           from '../../data/Store.mjs';
 import VDomUtil        from '../../util/VDom.mjs';
 
 /**
- * Provides a drop down list to select one or multiple items
+ * Provides a dropdown list to select one or multiple items
  * @class Neo.form.field.Select
  * @extends Neo.form.field.Picker
  */

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();
     }