neo.mjs 6.8.3 → 6.9.1

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.3'
+         * @member {String} version='6.9.1'
          */
-        version: '6.8.3'
+        version: '6.9.1'
     }
 
     /**

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() {

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/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,40 @@ 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,
+
+                    // Embed a tooltip request into the DOM
+                    vdom  : {
+                        data : {
+                            'neo-tooltip' : 'The Label'
+                        }
+                    }
+                },
+                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.3",
+    "version": "6.9.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -47,7 +47,7 @@
         "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^11.0.0",
+        "commander": "^11.1.0",
         "cssnano": "^6.0.1",
         "envinfo": "^7.10.0",
         "fs-extra": "^11.1.1",
@@ -56,9 +56,9 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",
-        "sass": "^1.69.1",
+        "sass": "^1.69.3",
         "showdown": "^2.1.0",
-        "webpack": "^5.88.2",
+        "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",
         "webpack-hook-plugin": "^1.0.7",

package/resources/data/learnneo/content.json

@@ -1,26 +1,26 @@
 {
     "data": [{
         "id"      : 1,
-        "isLeaf"  : false,
-        "name"    : "Hello",
+        "isLeaf"  : true,
+        "name"    : "Why neo.mjs",
         "parentId": null,
-        "path"    : null
+        "path"    : "whyneo.md"
     }, {
         "id"      : 2,
-        "isLeaf"  : true,
-        "name"    : "Max",
-        "parentId": 1,
+        "isLeaf"  : false,
+        "name"    : "Class Definitions and Config",
+        "parentId": null,
         "path"    : null
     }, {
         "id"      : 3,
         "isLeaf"  : false,
-        "name"    : "Hello",
-        "parentId": null,
+        "name"    : "Class Basics",
+        "parentId": 2,
         "path"    : null
     }, {
         "id"      : 4,
         "isLeaf"  : true,
-        "name"    : "Torsten",
+        "name"    : "Classes, Properties, and Methods",
         "parentId": 3,
         "path"    : null
     }]

package/resources/data/learnneo/pages/whyneo.md

@@ -0,0 +1,76 @@
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<div type="expander" caption="Multi-Threaded">
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers. 
+Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
+has four threads:
+<ol>
+<li>The _main_ thread, where DOM updates are applied
+<li>An _application_ web-worker where normal application locic is run
+    <li>A _data_ web-worker were HTTP and socket calls are run
+<li>A _view_ web-worker that manages delta updates
+</ol>
+</div>
+
+<div type="expander" caption="Extreme Speed">
+<p>
+The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
+</p>
+<p>
+By contrast, other JavaScript frameworks run in a single thread. That means 
+in a typical framework all business logic, data handling, and DOM rendering compete for 
+CPU reasources.
+</p>
+<p>
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+</p>
+<p>
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+</p>
+</div>
+
+<div type="expander" caption="Quick Application Development">
+<p>
+Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
+changes. This makes it easy to handle value validation and transformation, and react to changes. 
+</p>
+<p>
+Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
+bindable data. For example, if two components are bound to the same propery, a change to the 
+property will automatically be applied to both components.
+</p>
+</div>
+
+<div type="expander" caption="Multi-Window Applications">
+<p>
+Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
+application run in multiple browser windows; those windows could be moved to multiple monitors.
+</p>
+<p>
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+</p>
+</div>
+
+<div type="expander" caption="Open-Source and Standards-Based">
+<p>
+Neo.mjs is an open-source library. Features needed for the community can be added to the
+library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
+all Neo.mjs classes can be extended.
+</p>
+<p>
+Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
+syntax, and there's no need for special pre-compilers or WebPack modules.
+That means fewer dependencies and easier configuration. Furthermore, the use of
+standard JavaScript makes debugging easier: any statement you write while developing your
+applcation can also be run in the debugging console.
+</p>
+</div>

package/resources/scss/src/apps/route/CenterContainer.scss

@@ -0,0 +1,29 @@
+.route {
+    
+    background-color: white;
+
+    .route_center {
+
+        max-width: 95%;
+
+        margin-left:  20px;
+        margin-right: 20px;
+        margin-top: 0px;
+        margin-bottom: 10px;
+
+        border-top-width: .5px;
+        border-top-color: #757575;
+        border-top-style: solid;
+     
+        border-bottom-width: .5px;
+        border-bottom-color: #757575;
+        border-bottom-style: solid;
+
+        .route_card_simple_page {
+            text-align: center;
+        }
+    
+    }
+
+
+} 

package/resources/scss/src/apps/route/HeaderContainer.scss

@@ -0,0 +1,122 @@
+.route {
+    .route_header {
+        height: 242px;
+    }
+
+    .center {
+        display: inline-block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
+    .centerPanel {
+        margin-left: auto;
+        margin-right: auto;
+        width: auto;
+        min-height: 50px;
+    }
+
+    .headline-caption {
+        color: #535353;
+        font-family: 'Georgia', 'Times New Roman', serif;
+        font-size: 32px;
+        font-weight: normal;
+        text-align: center;
+        margin-top: 32px;
+        max-height: 70px;
+    }
+
+    .route_buttonbar {
+        min-height: 70px;
+    }
+
+    .route_button {
+        height: 50px;
+        min-width: 150px;
+        border: none;
+        margin-left: 10px;
+        float: left;
+
+        .neo-button-text {
+            color: #535353;
+            font-family: 'Georgia', 'Times New Roman', serif !important;
+            font-weight: normal;
+            font-size: 14px;
+            text-align: center;
+            text-transform: none;
+
+        }
+    }
+
+    .route_button_selected {
+        border-bottom: 1px;
+        border-bottom-style: solid;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+
+    .iconTischtennis {
+        background: url('../../../../../../resources/images/route/tischtennis_40.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconFussball {
+        margin-top: 4px !important;
+        background: url('../../../../../../resources/images/route/fussball_38.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 26px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconLeichtathletik {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/leichtathletik_37.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconSchach {
+        background: url('../../../../../../resources/images/route/schach_17.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        width: 17px;
+        height: 28px;
+
+    }
+
+    .iconLogo {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/logo.jpg');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconBogen {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/bogen.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+}

package/resources/scss/src/apps/route/MainView.scss

@@ -0,0 +1,3 @@
+.route{
+    background-color: yellow;
+}

package/resources/scss/src/apps/route/MetaContainer.scss

@@ -0,0 +1,44 @@
+.route {
+    .route_meta {
+        height: 100px !important;
+        margin: 5px;
+        padding: 25px;
+        border-style: solid;
+    }
+    .route_meta_center {
+        display: inline-block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
+    .route_meta_color {
+        background-color: lightblue;
+    }
+
+    .route_meta_button_grant{
+        height: 50px;
+        min-width: 150px;
+        margin: 0px;
+        border: 0px;
+        float: left;
+        background-color: lightgreen;        
+        margin-left: 5px;
+        
+    }
+
+    .route_meta_button_grant_selected{
+        background-color: greenyellow !important;
+    }
+
+    .route_meta_button_remove{
+        height: 50px;
+        min-width: 150px;
+        margin: 0px;
+        border: 0px;
+        float: left;
+        background-color: lightcoral;        
+        margin-left: 50px;
+    }
+
+}

package/resources/scss/src/apps/route/_all.scss

@@ -0,0 +1 @@
+

package/resources/scss/src/component/Toast.scss

@@ -1,12 +1,10 @@
 .neo-toast {
-    z-index         : 20; // ensure to be on top of table headers
     align-items     : center;
     background-color: var(--toast-background-color);
     border-radius   : 0.5rem;
     box-shadow      : 0 0.25rem 0.5rem var(--toast-shadow-color);
     color           : var(--toast-color);
     display         : flex;
-    position        : fixed;
     transition      : bottom .3s ease-out, top .3s ease-out;
 
     .neo-toast-inner {
@@ -90,6 +88,7 @@
 /* Toast positions */
 .neo-toast-tr {
     right: 1rem;
+    left : auto;
     top  : 1rem;
 }
 
@@ -107,6 +106,7 @@
 .neo-toast-br {
     bottom: 1rem;
     right : 1rem;
+    left  : auto;
 }
 
 .neo-toast-bc {

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.8.3'
+     * @default '6.9.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.8.3'
+    version: '6.9.1'
 };
 
 Object.assign(DefaultConfig, {