neo.mjs 6.8.2 → 6.9.0

package/apps/route/view/MainViewController.mjs

@@ -0,0 +1,210 @@
+import Component from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Route.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Component {
+   static config = {
+      /**
+       * @member {String} className='Route.view.MainContainerController'
+       * @protected
+       */
+      className: 'Route.view.MainContainerController',
+
+
+      routes: {
+         '/home': 'handleHomeRoute',
+         '/section1': 'handleSection1Route',
+         '/section2': 'handleSection2Route',
+         '/contact': 'handleContactRoute',
+         '/users/{userId}': { handler: 'handleUserRoute', preHandler: 'doPrehandling' },
+         // '/users/{userId}' : {handler: 'handleUserRoute', preHandler: 'doPrehandling'}, //example
+         // '/users/{userId}/posts/{postId}' : {handler:'handleUserPostsRoute', preHandler: 'doPrehandlingFalse'}, //example
+         // default: 'doDefaultHandling' //optional - example
+      },
+
+      //Demo data
+      data: {
+         users: [{ id: 1, name: 'Joe Doe' }, { id: 2, name: 'Max Mustermann' }],
+         activeUser: 0
+      }
+   }
+
+   onConstructed() {
+      super.onConstructed();
+   }
+
+   /**
+    * Card sort order
+    * 0 - Contact
+    * 1 - Administration
+    * 2 - Section 1
+    * 3 - Section 2
+    * 4 - Home
+    */
+
+
+   doPrehandling(value, oldValue, params = null) {
+      const userId = parseInt(params);
+      if (userId > 0 && userId === this.data.activeUser) {
+         return true;
+      }
+
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 5;
+
+      return false;
+
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardContact(data) {
+      Neo.Main.redirectTo({ url: '#/contact' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+
+   /**
+       * @param {Object} data
+       */
+   onSwitchButtonAdministration(data) {
+
+      Neo.Main.redirectTo({ url: `#/users/${this.data.activeUser}` });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardSection1(data) {
+      Neo.Main.redirectTo({ url: '#/section1' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardSection2(data) {
+      Neo.Main.redirectTo({ url: '#/section2' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardHome(data) {
+      Neo.Main.redirectTo({ url: '#/home' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaUser1(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 1;
+      this.#removeMetaButtonSelection();
+      this.#setUsername();
+      data.component?.addCls('route_meta_button_grant_selected');
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaUser2(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 2;
+      this.#removeMetaButtonSelection();
+      this.#setUsername();
+      data.component?.addCls('route_meta_button_grant_selected');
+   }
+
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaReset(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 0;
+      this.#setUsername();
+      this.#removeMetaButtonSelection();
+   }
+
+   handleHomeRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 4;
+   }
+
+   handleSection1Route(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 2;
+   }
+
+   handleSection2Route(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 3;
+   }
+
+   handleContactRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 0;
+   }
+
+   handleUserRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 1
+   }
+
+   #removeFromButtonSelection() {
+      const buttonbar = this.getReference('buttonbar');
+      buttonbar.items.forEach(element => {
+         element.removeCls('route_button_selected');
+      });
+
+      const footer = this.getReference('footer-container');
+      footer.items.forEach(element => {
+         element.removeCls('route_button_selected');
+      });
+
+   }
+
+   #addButtonSelection(data) {
+      data.component?.addCls('route_button_selected');
+   }
+
+   #removeMetaButtonSelection(user) {
+      const buttonbar = this.getReference('metabar');
+      buttonbar.items.forEach(element => {
+         element.removeCls('route_meta_button_grant_selected');
+      });
+      this.#removeFromButtonSelection();
+      const data = {
+         component: this.getReference('home_button')
+      }
+      this.#addButtonSelection(data);
+      Neo.Main.redirectTo({ url: '#/home' });
+
+   }
+
+   #setUsername() {
+      const user = this.data.users.find(item => { return item.id === this.data.activeUser });
+
+      const centerContainer = this.getReference('center-container');
+      const adminPage = centerContainer.items[1];
+      adminPage.username = user ? user.name : '';
+
+   }
+
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/apps/route/view/MetaContainer.mjs

@@ -0,0 +1,52 @@
+import Container from '../../../src/container/Base.mjs';
+import Button from '../../../src/button/Base.mjs';
+
+/**
+ * @class Route.view.MetaContainer
+ * @extends Neo.container.Base
+ */
+class MetaContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.MetaContainer'
+         * @protected
+         */
+        className: 'Route.view.MetaContainer',
+
+        baseCls: ['route_meta', 'route_meta_color','route_meta_center', 'neo-container'],
+
+        height: 55, 
+        /**
+         * @member {Object[]} items
+         */
+        items: [
+            {
+                module: Button,
+                flex: 'none',
+                handler: 'onSwitchButtonMetaUser1',
+                cls: ['route_meta_button_grant', 'neo-button'],
+                text: 'User 1'
+            },
+            {
+                module: Button,
+                flex: 'none',
+               handler: 'onSwitchButtonMetaUser2',
+                cls: ['route_meta_button_grant', 'neo-button'],
+                text: 'User 2'
+            },
+            {
+                module: Button,
+                flex: 'none',
+                handler: 'onSwitchButtonMetaReset',
+                cls: ['route_meta_button_remove', 'neo-button'],
+                text: 'Reset User'
+            }
+        ],
+        layout: { ntype: 'hbox', align: 'stretch'  },
+
+    }
+}
+
+Neo.applyClassConfig(MetaContainer);
+
+export default MetaContainer;

package/apps/route/view/Viewport.mjs

@@ -0,0 +1,15 @@
+
+import Base from '../../../src/container/Viewport.mjs';
+import MainView from './MainView.mjs';
+
+class Viewport extends Base {
+    static config = {
+        className: 'Route.view.Viewport',
+        autoMount: true,
+        layout: { ntype: 'fit' },
+        items: [{ module: MainView }]
+    }
+    
+}
+Neo.applyClassConfig(Viewport);
+export default Viewport;

package/apps/route/view/center/CardAdministration.mjs

@@ -0,0 +1,36 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardAdministration
+ * @extends Neo.container.Base
+ */
+class CardAdministration extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardAdministration'
+         * @protected
+         */
+        className: 'Route.view.center.CardAdministration',
+        baseCls: ['route_card_simple_page', 'neo-container'],
+
+        username_: '',
+        /**
+         * @member {Object[]} items
+         */
+
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'Access Granted.'
+        }
+    }
+
+
+    afterSetUsername(value, oldValue){
+        this.vdom.innerHTML = `Access Granted to ${this.username}.`;
+    }
+}
+
+Neo.applyClassConfig(CardAdministration);
+
+export default CardAdministration;

package/apps/route/view/center/CardAdministrationDenied.mjs

@@ -0,0 +1,26 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardAdministrationDenied
+ * @extends Neo.container.Base
+ */
+class CardAdministrationDenied extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardAdministrationDenied'
+         * @protected
+         */
+        className: 'Route.view.center.CardAdministrationDenied',
+        baseCls: ['route_card_simple_page','neo-container'],
+
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'Access Denied.'
+        }
+    }
+}
+
+Neo.applyClassConfig(CardAdministrationDenied);
+
+export default CardAdministrationDenied;

package/apps/route/view/center/CardContact.mjs

@@ -0,0 +1,29 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardContact
+ * @extends Neo.container.Base
+ */
+class CardContact extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardContact'
+         * @protected
+         */
+        className: 'Route.view.center.CardContact',
+        baseCls: ['route_card_simple_page', 'neo-container'],
+
+        items: [
+            { cls : ['route_card_simple_page'], vdom: { cn: [
+                {tag: 'h1',innerHTML: 'Contact' },
+                {tag: 'a',  href: 'https://github.com/neomjs/neo', target: '_blank', innerHTML: 'please visit https://github.com/neomjs/neo'}
+            ] } } 
+        ]
+    }
+
+}
+
+Neo.applyClassConfig(CardContact);
+
+export default CardContact;

package/apps/route/view/center/CardHome.mjs

@@ -0,0 +1,26 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardHome
+ * @extends Neo.container.Base
+ */
+class CardHome extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardHome'
+         * @protected
+         */
+        className: 'Route.view.center.CardHome',
+        baseCls: ['route_card_simple_page','neo-container'],
+
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'This is the landing page of the example.'
+        }
+    }
+}
+
+Neo.applyClassConfig(CardHome);
+
+export default CardHome;

package/apps/route/view/center/CardSection1.mjs

@@ -0,0 +1,26 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardSection1
+ * @extends Neo.container.Base
+ */
+class CardSection1 extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardSection1'
+         * @protected
+         */
+        className: 'Route.view.center.CardSection1',
+        baseCls: ['route_card_simple_page','neo-container'],
+
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'This is section 1 of the example.'
+        }        
+    }
+}
+
+Neo.applyClassConfig(CardSection1);
+
+export default CardSection1;

package/apps/route/view/center/CardSection2.mjs

@@ -0,0 +1,27 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class Route.view.center.CardSection2
+ * @extends Neo.container.Base
+ */
+class CardSection2 extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardSection2'
+         * @protected
+         */
+        className: 'Route.view.center.CardSection2',
+        baseCls: ['route_card_simple_page','neo-container'],
+
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'This is section 2 of the example.'
+        }  
+
+    }
+}
+
+Neo.applyClassConfig(CardSection2);
+
+export default CardSection2;

package/examples/ConfigurationViewport.mjs

@@ -107,7 +107,7 @@ class ConfigurationViewport extends Viewport {
 
             items: [{
                 module: Container,
-                layout: {ntype: 'vbox'},
+                layout: {ntype: 'vbox', align: null},
                 style : {overflowY: 'auto', padding: '10px'},
                 cls   : ['neo-configuration-panel-body'],
                 itemDefaults: {

package/examples/ServiceWorker.mjs

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

package/examples/form/field/select/MainContainer.mjs

@@ -15,8 +15,7 @@ class MainContainer extends ConfigurationViewport {
         className             : 'Neo.examples.form.field.select.MainContainer',
         autoMount             : true,
         configItemLabelWidth  : 160,
-        exampleContainerConfig: {style: {position: 'relative'}},
-        layout                : {ntype: 'hbox', align: 'stretch'}
+        exampleContainerConfig: {style: {position: 'relative'}}
     }
 
     createConfigurationComponents() {
@@ -111,6 +110,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'placeholderText',
             listeners: {change: me.onConfigChange.bind(me, 'placeholderText')},
             value    : me.exampleComponent.placeholderText
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.readOnly,
+            labelText: 'readOnly',
+            listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.typeAhead,

package/examples/table/container/MainContainer.mjs

@@ -122,7 +122,8 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'githubId',  text: 'Github Id'},
                 {dataField: 'country',   text: 'Country'},
                 {
-                    text: 'Edit Action',
+                    dataField: 'edit',
+                    text     : 'Edit Action',
                     renderer: ({ column, index }) => {
                         const
                             widgetId = `${column.id}-widget-${index}`,
@@ -138,7 +139,8 @@ class MainContainer extends ConfigurationViewport {
                     }
                 },
                 {
-                    text : 'Menu',
+                    dataField: 'menu',
+                    text     : 'Menu',
                     renderer({ column, record, index }) {
                         const
                             widgetId = `${column.id}-widget-${index}`,

package/examples/table/container/MainModel.mjs

@@ -9,6 +9,9 @@ class MainModel extends Model {
         className: 'Neo.examples.table.container.MainModel',
 
         fields: [{
+            name: 'colspan',
+            type: 'Object'
+        }, {
             name: 'country',
             type: 'String'
         }, {

package/examples/table/container/MainStore.mjs

@@ -16,36 +16,36 @@ class MainStore extends Store {
             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'
+        }, {
+            colspan  : {firstname: 3},
+            country  : 'Germany',
+            firstname: 'Colspan 3',
+            githubId : 'random'
         }]
     }
 }

package/examples/todoList/version1/MainComponent.mjs

@@ -17,9 +17,9 @@ class MainComponent extends Component {
         width    : 300,
 
         /**
-         * @member {Object[]} data
+         * @member {Object[]} items
          */
-        data: [
+        items: [
             {id: 1, done: true,  text: 'Todo Item 1'},
             {id: 2, done: false, text: 'Todo Item 2'},
             {id: 3, done: false, text: 'Todo Item 3'}
@@ -51,14 +51,14 @@ class MainComponent extends Component {
             {input: me.onInputFieldChange, delegate: 'todo-input'}
         ]);
 
-        me.createItems(me.data || []);
+        me.createItems(me.items || []);
     }
 
-    createItems(data) {
+    createItems(items) {
         let me = this,
             cls;
 
-        data.forEach(item => {
+        items.forEach(item => {
             cls = ['todo-item'];
 
             if (item.done) {

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

@@ -28,12 +28,14 @@ class MainContainer extends Viewport {
             items: ['->', {
                 handler: 'onAddUserButtonClick',
                 iconCls: 'fa fa-circle-plus',
-                text   : 'Add User'
+                text   : 'Add User',
+                tooltip: 'Open a dialog and edit a new user'
             }, {
                 handler: 'onShowFiltersButtonClick',
                 iconCls: 'fa fa-filter',
                 style  : {marginLeft: '2px'},
-                text   : 'Show Filters'
+                text   : 'Show Filters',
+                tooltip: 'Show filters for the user'
             }]
         }, {
             module      : UserTableContainer,
@@ -44,7 +46,33 @@ class MainContainer extends Viewport {
         }, {
             module: PagingToolbar,
             bind  : {store: 'stores.users'},
-            flex  : 'none'
+            flex  : 'none',
+
+            // We want to apply custom configs to the provided item references
+            items: {
+                'nav-button-first': {
+                    tooltip: 'Go to first page'
+                },
+                'nav-button-prev' : {
+                    tooltip: 'Go to previous page'
+                },
+                'nav-button-next' : {
+                    tooltip: 'Go to next page'
+                },
+                'nav-button-last' : {
+                    tooltip: 'Go to last page'
+                },
+
+                // These two have been moved to the start of the Toolbar by their weights
+                label: {
+                    style : {marginLeft: 0},
+                    weight: -10000
+                },
+                rowsPerPage: {
+                    tooltip: 'Set the number of rows to display in a page',
+                    weight : -999
+                }
+            }
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.8.2",
+    "version": "6.9.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {