neo.mjs 4.0.13 → 4.0.16

package/README.md

@@ -58,7 +58,7 @@ You can switch between <a href="https://developer.mozilla.org/en-US/docs/Web/API
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/workers-setup-v4.png">
 
-The dedicated workers setup uses 4 threads (CPUs).
+The dedicated workers setup uses 3-6 threads (CPUs).
 Most parts of the frameworks as well as your apps and components live within the app worker.
 Main threads are as small and idle as possible (42KB) plus optional main thread addons.
 

package/apps/covid/view/WorldMapContainer.mjs

@@ -1,6 +1,6 @@
 import Container                   from '../../../src/container/Base.mjs';
 import NumberField                 from '../../../src/form/field/Number.mjs';
-import Toolbar                     from '../../../src/container/Toolbar.mjs';
+import Toolbar                     from '../../../src/toolbar/Base.mjs';
 import WorldMapComponent           from './WorldMapComponent.mjs';
 import WorldMapContainerController from './WorldMapContainerController.mjs';
 

package/apps/realworld2/view/HeaderToolbar.mjs

@@ -1,9 +1,9 @@
 import HeaderToolbarController from './HeaderToolbarController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.HeaderToolbar
- * @extends Neo.container.Toolbar
+ * @extends Neo.toolbar.Base
  */
 class HeaderToolbar extends Toolbar {
     static getConfig() {return {

package/apps/realworld2/view/article/FormContainer.mjs

@@ -1,7 +1,7 @@
 import ChipField from '../../../../src/form/field/Chip.mjs';
 import Container from '../../../../src/form/Container.mjs';
 import TextArea  from '../../../../src/form/field/TextArea.mjs';
-import Toolbar   from '../../../../src/container/Toolbar.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
 import TextField from '../../../../src/form/field/Text.mjs';
 
 /**

package/apps/realworld2/view/user/LoginFormContainer.mjs

@@ -1,7 +1,7 @@
 import Container     from '../../../../src/form/Container.mjs';
 import PasswordField from '../../../../src/form/field/Password.mjs';
 import TextField     from '../../../../src/form/field/Text.mjs';
-import Toolbar       from '../../../../src/container/Toolbar.mjs';
+import Toolbar       from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.user.LoginFormContainer

package/apps/realworld2/view/user/SettingsFormContainer.mjs

@@ -1,6 +1,6 @@
 import Container from '../../../../src/form/Container.mjs';
 import TextField from '../../../../src/form/field/Text.mjs';
-import Toolbar   from '../../../../src/container/Toolbar.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class RealWorld2.view.user.SettingsFormContainer

package/apps/sharedcovid/view/WorldMapContainer.mjs

@@ -1,6 +1,6 @@
 import Container                   from '../../../src/container/Base.mjs';
 import NumberField                 from '../../../src/form/field/Number.mjs';
-import Toolbar                     from '../../../src/container/Toolbar.mjs';
+import Toolbar                     from '../../../src/toolbar/Base.mjs';
 import WorldMapComponent           from './WorldMapComponent.mjs';
 import WorldMapContainerController from './WorldMapContainerController.mjs';
 

package/apps/shareddialog/view/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../src/button/Base.mjs';
 import Radio                   from '../../../src/form/field/Radio.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/apps/shareddialog2/view/MainContainer.mjs

@@ -1,6 +1,6 @@
 import Button                  from '../../../src/button/Base.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/calendar/basic/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../src/button/Base.mjs';
 import Calendar                from '../../../src/calendar/view/MainContainer.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/component/wrapper/cesiumJS/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button                  from '../../../../src/button/Base.mjs';
 import CesiumJSComponent       from '../../../../src/component/wrapper/CesiumJS.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../../src/container/Viewport.mjs';
 
 /**

package/examples/dialog/MainContainer.mjs

@@ -1,7 +1,7 @@
 import Button     from '../../src/button/Base.mjs';
 import CheckBox   from '../../src/form/field/CheckBox.mjs';
 import NeoArray   from '../../src/util/Array.mjs';
-import Toolbar    from '../../src/container/Toolbar.mjs';
+import Toolbar    from '../../src/toolbar/Base.mjs';
 import DemoDialog from './DemoDialog.mjs';
 import Viewport   from '../../src/container/Viewport.mjs';
 

package/examples/list/animate/MainContainer.mjs

@@ -4,7 +4,7 @@ import MainContainerController from './MainContainerController.mjs';
 import MainStore               from './MainStore.mjs';
 import NumberField             from '../../../src/form/field/Number.mjs';
 import TextField               from '../../../src/form/field/Text.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/remotesApi/basic/MainContainer.mjs

@@ -1,6 +1,6 @@
 import Button                  from '../../../src/button/Base.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Toolbar                 from '../../../src/container/Toolbar.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**

package/examples/todoList/version2/MainContainer.mjs

@@ -3,7 +3,7 @@ import Container     from '../../../src/container/Base.mjs';
 import TextField     from '../../../src/form/field/Text.mjs';
 import TodoList      from './TodoList.mjs';
 import TodoListStore from './TodoListStore.mjs';
-import Toolbar       from '../../../src/container/Toolbar.mjs';
+import Toolbar       from '../../../src/toolbar/Base.mjs';
 
 /**
  * @class Neo.examples.todoList.version2.MainContainer

package/examples/toolbar/paging/app.mjs

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

package/examples/toolbar/paging/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 Paging Toolbar</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/toolbar/paging/model/User.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.model.User
+ * @extends Neo.data.Model
+ */
+class User extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.model.User'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.model.User',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(User);
+
+export default User;

package/examples/toolbar/paging/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"      : "examples/toolbar/paging/app.mjs",
+    "basePath"     : "../../../",
+    "environment"  : "development",
+    "mainPath"     : "./Main.mjs",
+    "remotesApiUrl": "remotes-api.json",
+    "themes"       : ["neo-theme-dark", "neo-theme-light"]
+}

package/examples/toolbar/paging/remotes-api.json

@@ -0,0 +1,21 @@
+{
+    "namespace": "MyApp.backend",
+    "type"     : "websocket",
+    "url"      : "ws://localhost:3001",
+
+    "services": {
+        "FriendService": {
+            "methods": {
+                "getAll": {}
+            }
+        },
+        "UserService": {
+            "methods": {
+                "create" : {},
+                "destroy": {},
+                "read"   : {"params":  [{"type":  "Object"}]},
+                "update" : {}
+            }
+        }
+    }
+}

package/examples/toolbar/paging/store/Users.mjs

@@ -0,0 +1,39 @@
+import UserModel from '../model/User.mjs';
+import Store     from '../../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.store.Users
+ * @extends Neo.data.Store
+ */
+class Users extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.store.Users'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.store.Users',
+        /**
+         * @member {Object|String|null} api
+         */
+        api: 'MyApp.backend.UserService',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=UserModel
+         */
+        model: UserModel,
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [{
+            direction: 'ASC',
+            property : 'id'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Users);
+
+export default Users;

package/examples/toolbar/paging/view/AddUserDialog.mjs

@@ -0,0 +1,67 @@
+import Dialog    from '../../../../src/dialog/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.AddUserDialog
+ * @extends Neo.dialog.Base
+ */
+class AddUserDialog extends Dialog {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.AddUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.AddUserDialog',
+        /**
+         * @member {Object} containerConfig={style:{padding:'1em'}}
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * @member {Object[]} headers
+         */
+        headers: [{
+            cls  : ['neo-footer-toolbar', 'neo-toolbar'],
+            dock : 'bottom',
+            items: ['->', {
+                text: 'Submit'
+            }]
+        }],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Firstname:',
+            labelWidth: 110
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Lastname:',
+            labelWidth: 110
+        }],
+        /**
+         * @member {Boolean} resizable=false
+         */
+        resizable: false,
+        /**
+         * @member {String} title='Edit User'
+         */
+        title: 'Add User',
+        /**
+         * @member {Object} wrapperStyle={height:'300px',width:'400px'}
+         */
+        wrapperStyle: {
+            height: '300px',
+            width : '400px'
+        }
+    }}
+}
+
+Neo.applyClassConfig(AddUserDialog);
+
+export default AddUserDialog;

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -0,0 +1,44 @@
+import MainContainerController from './MainContainerController.mjs';
+import MainContainerModel      from './MainContainerModel.mjs';
+import PagingToolbar           from '../../../../src/toolbar/Paging.mjs';
+import UserTableContainer      from './UserTableContainer.mjs';
+import Viewport                from '../../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        className : 'Neo.examples.toolbar.paging.view.MainContainer',
+        autoMount : true,
+        controller: MainContainerController,
+        layout    : {ntype: 'vbox', align: 'stretch'},
+        model     : MainContainerModel,
+        style     : {padding: '20px'},
+
+        items: [{
+            ntype: 'toolbar',
+            flex : 'none',
+            items: ['->', {
+                handler: 'onAddUserButtonClick',
+                iconCls: 'fa fa-circle-plus',
+                text   : 'Add User'
+            }]
+        }, {
+            module      : UserTableContainer,
+            bind        : {store: 'stores.users'},
+            flex        : 1,
+            reference   : 'user-table',
+            wrapperStyle: {maxHeight: '300px'}
+        }, {
+            module: PagingToolbar,
+            bind  : {store: 'stores.users'},
+            flex  : 'none'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/toolbar/paging/view/MainContainerController.mjs

@@ -0,0 +1,53 @@
+import ComponentController from '../../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    /**
+     * @member {Neo.examples.toolbar.paging.view.AddUserDialog|null} addUserDialog=null
+     */
+    addUserDialog = null
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.MainContainerController'
+    }}
+
+    /**
+     * @param {Object} data
+     */
+    onAddUserButtonClick(data) {
+        let me = this;
+
+        if (!me.addUserDialog) {
+            import('./AddUserDialog.mjs').then(module => {
+                me.addUserDialog = Neo.create(module.default, {
+                    animateTargetId: data.component.id,
+                    appName        : me.component.appName,
+                    closeAction    : 'hide'
+                });
+            });
+        } else {
+            me.addUserDialog.show();
+        }
+    }
+
+    /**
+     * Sending messages through a WebSocket inside the data worker
+     * @param {Object} data
+     */
+    onUserServiceReadButtonClick(data) {
+        MyApp.backend.UserService.read().then(response => {
+            console.log(response);
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/toolbar/paging/view/MainContainerModel.mjs

@@ -0,0 +1,29 @@
+import Component from '../../../../src/model/Component.mjs';
+import UserStore from '../store/Users.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainerModel'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.MainContainerModel',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            users: {
+                module  : UserStore,
+                pageSize: 30
+            }
+        }
+    }}
+}
+
+Neo.applyClassConfig(MainContainerModel);
+
+export default MainContainerModel;

package/examples/toolbar/paging/view/UserTableContainer.mjs

@@ -0,0 +1,39 @@
+import TableContainer from '../../../../src/table/Container.mjs';
+
+/**
+ * @class Neo.examples.toolbar.paging.view.UserTableContainer
+ * @extends Neo.table.Container
+ */
+class UserTableContainer extends TableContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.UserTableContainer'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.UserTableContainer',
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            dataField: 'id',
+            text     : 'Id'
+        }, {
+            dataField: 'firstname',
+            text     : 'Firstname'
+        }, {
+            dataField: 'lastname',
+            text     : 'Lastname'
+        },  {
+            dataField: 'isOnline',
+            text     : 'Is Online'
+        }, {
+            dataField: 'image',
+            flex     : 1,
+            text     : 'Image'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(UserTableContainer);
+
+export default UserTableContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.13",
+    "version": "4.0.16",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -35,9 +35,9 @@
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "@material/mwc-button": "^0.25.3",
-        "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.5",
+        "@material/mwc-button": "^0.26.0",
+        "@material/mwc-textfield": "^0.26.0",
+        "autoprefixer": "^10.4.7",
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.2.0",
@@ -45,14 +45,14 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^8.2.2",
+        "inquirer": "^8.2.4",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.12",
-        "sass": "^1.50.1",
+        "postcss": "^8.4.13",
+        "sass": "^1.51.0",
         "webpack": "^5.72.0",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "4.8.1",
+        "webpack-dev-server": "4.9.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/dialog/Base.scss

@@ -23,6 +23,7 @@
     position : absolute;
     top      : 50%;
     transform: translate(-50%, -50%);
+    z-index  : 20; // ensure to be on top of table headers
 
     transition-duration       : 200ms;
     transition-property       : height, left, top, transform, width;

package/resources/scss/src/toolbar/Paging.scss

@@ -0,0 +1,5 @@
+.neo-paging-toolbar {
+    .neo-label {
+        font-size: 13px;
+    }
+}

package/src/calendar/view/MainContainer.mjs

@@ -5,7 +5,7 @@ import DateUtil              from '../../util/Date.mjs';
 import EditCalendarContainer from './calendars/EditContainer.mjs';
 import EditEventContainer    from './EditEventContainer.mjs';
 import MainContainerModel    from './MainContainerModel.mjs';
-import Toolbar               from '../../container/Toolbar.mjs';
+import Toolbar               from '../../toolbar/Base.mjs';
 
 const todayDate = new Date();
 

package/src/calendar/view/week/Component.mjs

@@ -446,10 +446,11 @@ class Component extends BaseComponent {
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetMounted(value, oldValue) {
+    async afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        let me = this;
+        let me = this,
+            rect;
 
         if (value) {
             if (me.needsEventUpdate) {
@@ -457,16 +458,16 @@ class Component extends BaseComponent {
                 me.needsEventUpdate = false;
             }
 
-            setTimeout(() => {
-                me.getDomRect(me.getColumnContainer().id).then(data => {
-                    Neo.main.DomAccess.scrollBy({
-                        appName  : me.appName,
-                        direction: 'left',
-                        id       : me.getScrollContainer().id,
-                        value    : data.width * me.columnsBuffer / me.columnsVisible / 3
-                    });
-                });
-            }, 20);
+            await Neo.timeout(70);
+
+            rect = await me.getDomRect(me.getColumnContainer().id);
+
+            Neo.main.DomAccess.scrollBy({
+                appName  : me.appName,
+                direction: 'left',
+                id       : me.getScrollContainer().id,
+                value    : rect.width * me.columnsBuffer / me.columnsVisible / 3
+            });
         }
     }
 
@@ -1001,7 +1002,7 @@ class Component extends BaseComponent {
                     removeDom
                 });
 
-                Object.assign(header.cn[i], {id: headerId, removeDom});
+                Object.assign(header.cn[i],       {id: headerId, removeDom});
                 Object.assign(header.cn[i].cn[0], {html: me.intlFormat_day.format(date), id: `${headerId}_day`});
                 Object.assign(header.cn[i].cn[1], {cls: dateCls, html: currentDate, id: `${headerId}_date`});
             }