neo.mjs 4.1.1 → 4.2.1

package/buildScripts/createClass.mjs

@@ -114,6 +114,7 @@ if (programOpts.info) {
             choices: [
                 'component.Base',
                 'container.Base',
+                'container.Viewport',
                 'controller.Component',
                 'core.Base',
                 'data.Model',
@@ -576,15 +577,22 @@ if (programOpts.info) {
             " */",
             `class ${file} extends ${baseFileName} {`,
             "    static getConfig() {return {",
-            "        /*",
+            "        /**",
             `         * @member {String} className='${className}'`,
             "         * @protected",
             "         */",
             `        className: '${className}'`
         );
 
+        baseClass === 'container.Viewport' && addComma(classContent).push(
+            "        /**",
+            "         * @member {Boolean} autoMount=true",
+            "         */",
+            "        autoMount: true"
+        );
+
         baseClass === 'table.Container' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} columns",
             "         */",
             "        columns: [{",
@@ -597,7 +605,7 @@ if (programOpts.info) {
         );
 
         baseClass === 'data.Model' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} fields",
             "         */",
             "        fields: [{",
@@ -607,14 +615,14 @@ if (programOpts.info) {
         );
 
         baseClass === 'container.Base' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} items",
             "         */",
             "        items: []"
         );
 
         baseClass === 'tab.Container' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} items",
             "         */",
             "        items: [{",
@@ -635,7 +643,7 @@ if (programOpts.info) {
         );
 
         isSingleton && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Boolean} singleton=true",
             "         * @protected",
             "         */",
@@ -643,7 +651,7 @@ if (programOpts.info) {
         );
 
         baseClass === 'component.Base' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object} _vdom",
             "         */",
             "        _vdom:",

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.1",
+    "version": "4.2.1",
     "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",
@@ -50,11 +51,11 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.0",
+        "inquirer": "^9.1.1",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.7",
+        "sass": "^1.54.8",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.10.1",

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

@@ -1,11 +1,12 @@
 .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%;
     line-height   : 19px;
-    overflow      : hidden;
+    overflow      : auto;
 
     .neo-grid-row {
         display   : flex;
@@ -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/resources/scss/src/grid/header/Button.scss

@@ -20,6 +20,12 @@
         border-right: 1px solid v(grid-container-border-color);
     }
 
+    &.neo-locked { // todo: for testing, will get removed once the header toolbar is outside of the scroll region
+        position: sticky;
+        top     : 0;
+        z-index : 5001;
+    }
+
     &.neo-drag-over {
         background-image: linear-gradient(green, darkgreen);;
     }

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

@@ -2,4 +2,6 @@
     border-bottom: 2px solid v(grid-container-border-color);
     border-top   : 1px solid v(grid-container-border-color);
     padding      : 0;
+    position     : sticky;
+    top          : 0;
 }

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 || [];
         }
 
@@ -120,7 +120,7 @@ class View extends Component {
 
                     if (column.dock === 'left') {
                         config.style.left = dockLeftMargin + 'px';
-                        dockLeftMargin += (column.width + 1); // todo: borders fix
+                        dockLeftMargin += column.width;
                     }
                 }
 

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