neo.mjs 6.18.1 → 6.18.2

package/apps/ServiceWorker.mjs

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

package/apps/colors/view/HeaderToolbar.mjs

@@ -39,31 +39,31 @@ class HeaderToolbar extends Toolbar {
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Colors',
+            labelText    : '# Colors',
             listeners    : {change: 'onChangeAmountColors'},
             maxValue     : 10,
             minValue     : 3,
-            width        : 120
+            width        : 90
         }, {
             module       : ComboBox,
             bind         : {value: data => String(data.amountColumns)},
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Columns',
+            labelText    : '# Columns',
             listeners    : {change: 'onChangeAmountColumns'},
             store        : ['5', '10', '15', '20', '26'],
-            width        : 120
+            width        : 90
         }, {
             module       : ComboBox,
             bind         : {value: data => String(data.amountRows)},
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Rows',
+            labelText    : '# Rows',
             listeners    : {change: 'onChangeAmountRows'},
             store        : ['5', '10', '15', '20'],
-            width        : 120
+            width        : 90
         }, '->', {
             handler  : 'onDetachTableButtonClick',
             iconCls  : 'fas fa-table',

package/apps/portal/view/HeaderToolbar.mjs

@@ -27,9 +27,8 @@ class HeaderToolbar extends Base {
          */
         items: [{
             cls     : ['logo'],
-            id      : 'neo-logo-button',
-            minWidth: 60,
             iconCls : 'neo-logo-blue',
+            minWidth: 60,
             route   : '/home',
             text    : 'Neo.mjs'
         }, '->', {

package/apps/portal/view/home/MainContainer.mjs

@@ -22,11 +22,22 @@ class MainContainer extends Container {
          * @member {String[]} cls=['portal-home-maincontainer']
          */
         cls: ['portal-home-maincontainer'],
+        /**
+         * @member {Object[]} domListeners
+         */
+        domListeners: [{
+            intersect(data) {
+                Neo.getComponent(data.targetId)?.activate?.()
+            },
+            scroll(event) {
+                this.toggleCls('hide-sidebar', event.scrollTop > 80)
+            }
+        }],
         /**
          * @member {Object[]} items
          */
         items: [
-            {ntype: 'component', id: 'progress'},
+            {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
             Features,
             HelloWorld,
@@ -38,16 +49,7 @@ class MainContainer extends Container {
         /**
          * @member {Boolean} scrollable=true
          */
-        scrollable: true,
-
-        domListeners: [{
-            intersect(data) {
-                Neo.getComponent(data.targetId)?.activate?.()
-            },
-            scroll(event) {
-                this.toggleCls('hide-sidebar', event.scrollTop > 80)
-            }
-        }]
+        scrollable: true
     }
 
     /**
@@ -66,7 +68,7 @@ class MainContainer extends Container {
             Neo.main.addon.IntersectionObserver.register({
                 callback : 'isVisible',
                 id,
-                observe  : ['.page'],
+                observe  : ['.portal-home-content-view'],
                 root     : `#${id}`,
                 threshold: 1.0,
                 windowId

package/apps/portal/view/home/parts/AfterMath.mjs

@@ -1,54 +1,57 @@
-import Container from '../../../../../src/container/Base.mjs';
+import BaseContainer from './BaseContainer.mjs';
 
 /**
  * @class Portal.view.home.parts.AfterMath
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class AfterMath extends Container {
+class AfterMath extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.AfterMath'
          * @protected
          */
         className: 'Portal.view.home.parts.AfterMath',
-
-        cls: ['page', 'after-math'],
-
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         */
         layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
-            flex  : 1
+            ntype: 'container',
+            flex : 1
         }, {
             cls : 'neo-h1',
             flex: 'none',
-            html: 'Additional Stuff'
+            html: 'Additional Stuff',
+            vdom: {tag: 'h1'}
         }, {
             cls : 'neo-h2',
             flex: 'none',
             html: 'More to come here',
-            // height: 200
+            vdom: {tag: 'h2'}
         }, {
             cls : 'neo-content',
             flex: 'none',
             html: 'Neo uses several cores to run the application. See the spinner on the page?',
-            // height: 200
+            vdom: {tag: 'p'}
         }, {
-            module: Container,
-            flex  : 1
+            ntype: 'container',
+            flex : 1
         }, {
-            module: Container,
+            ntype : 'container',
             cls   : 'home-footer',
             height: '40%',
+            html  : 'This is the footer',
+            vdom  : {tag: 'footer'},
+
             style : { // todo: css
                 background: 'black',
                 color     : 'white',
                 height    : '40%',
                 padding   : '15px'
-            },
-            html  : 'This is the footer'
+            }
         }]
     }
 }

package/apps/portal/view/home/parts/BaseContainer.mjs

@@ -0,0 +1,31 @@
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * Abstract base class for all views inside the landing page
+ * @class Portal.view.home.parts.BaseContainer
+ * @extends Neo.container.Base
+ * @abstract
+ */
+class BaseContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.BaseContainer'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.BaseContainer',
+        /**
+         * @member {String[]} cls=['portal-home-content-view','neo-container']
+         */
+        baseCls: ['portal-home-content-view', 'neo-container']
+    }
+
+    /**
+     * Hook which will trigger whenever the container fully gets scrolled into the visible area.
+     * Override it as needed.
+     */
+    activate() {}
+}
+
+Neo.setupClass(BaseContainer);
+
+export default BaseContainer;

package/apps/portal/view/home/parts/Colors.mjs

@@ -1,30 +1,29 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import LivePreview   from '../../learn/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Colors
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Colors extends Container {
+class Colors extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Colors'
          * @protected
          */
         className: 'Portal.view.home.parts.Colors',
-
-        cls: ['page', 'cool-stuff'],
-
+        /**
+         * @member {Object} responsive
+         */
         responsive: {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
@@ -42,8 +41,8 @@ class Colors extends Container {
                 flex: 'none',
                 vdom: {tag: 'p'},
                 html: [
-                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button',
-                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be',
+                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button ',
+                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
                     'undocked into their own windows. In fact, the entire demo can be undocked.'
                 ].join('')
             }, {
@@ -54,12 +53,12 @@ class Colors extends Container {
                 flex: 'none',
                 vdom: {tag: 'p'},
                 html: [
-                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as',
+                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as ',
                     'stock market trading data and medical or scientific telemetry.'
                 ].join('')
             }]
         }, {
-            module: Container,
+            ntype : 'container',
             flex  : '2',
             style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
@@ -88,7 +87,8 @@ class Colors extends Container {
     /**
      *
      */
-    activate() {
+    async activate() {
+        await this.timeout(1000);
         this.getReference('live-preview').activeView = 'preview'
     }
 }

package/apps/portal/view/home/parts/Features.mjs

@@ -1,11 +1,11 @@
-import Container  from '../../../../../src/container/Base.mjs';
-import ContentBox from '../ContentBox.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import ContentBox    from '../ContentBox.mjs';
 
 /**
  * @class Portal.view.home.parts.Features
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Features extends Container {
+class Features extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Features'
@@ -13,9 +13,9 @@ class Features extends Container {
          */
         className: 'Portal.view.home.parts.Features',
         /**
-         * @member {String[]} cls=['portal-home-features','page']
+         * @member {String[]} cls=['portal-home-features']
          */
-        cls: ['portal-home-features', 'page'],
+        cls: ['portal-home-features'],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
          */

package/apps/portal/view/home/parts/Helix.mjs

@@ -1,21 +1,17 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import LivePreview   from '../../learn/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Helix
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Helix extends Container {
+class Helix extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Helix'
          * @protected
          */
         className: 'Portal.view.home.parts.Helix',
-        /**
-         * @member {String[]} cls=['page','cool-stuff']
-         */
-        cls: ['page', 'cool-stuff'],
         /**
          * @member {Object} responsive
          */
@@ -27,7 +23,7 @@ class Helix extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
@@ -74,7 +70,7 @@ class Helix extends Container {
                 ].join('')
             }]
         }, {
-            module: Container,
+            ntype : 'container',
             flex  : '2',
             style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
@@ -104,7 +100,8 @@ class Helix extends Container {
     /**
      *
      */
-    activate() {
+    async activate() {
+        await this.timeout(1000);
         this.getReference('live-preview').activeView = 'preview'
     }
 }

package/apps/portal/view/home/parts/HelloWorld.mjs

@@ -1,11 +1,11 @@
-import Container            from '../../../../../src/container/Base.mjs';
+import BaseContainer        from './BaseContainer.mjs';
 import LivePreviewContainer from '../preview/PageCodeContainer.mjs';
 
 /**
  * @class Portal.view.home.parts.HelloWorld
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class HelloWorld extends Container {
+class HelloWorld extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.HelloWorld'
@@ -31,18 +31,16 @@ class HelloWorld extends Container {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
                 cls : 'neo-h1',
-                id  : 'neo-hello-world-h1',
                 flex: 'none',
                 html: 'Hello World',
                 vdom: {tag: 'h1'}
@@ -59,7 +57,7 @@ class HelloWorld extends Container {
             }]
         }, {
             module: LivePreviewContainer,
-            flex: 0.8,
+            flex  : 0.8,
             value : [
                 "import Container from '../../../../src/container/Base.mjs';",
                 "",

package/apps/portal/view/home/parts/How.mjs

@@ -1,16 +1,16 @@
-import Container from '../../../../../src/container/Base.mjs';
+import BaseContainer from './BaseContainer.mjs';
 
 /**
  * @class Portal.view.home.parts.How
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class How extends Container {
+class How extends BaseContainer {
     static config = {
-        className: 'Portal.view.home.parts.How',
         /**
-         * @member {String[]} cls=['page','cool-stuff']
+         * @member {String} className='Portal.view.home.parts.How'
+         * @protected
          */
-        cls: ['page', 'cool-stuff'],
+        className: 'Portal.view.home.parts.How',
         /**
          * @member {Object} responsive
          */
@@ -22,7 +22,7 @@ class How extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
@@ -48,7 +48,7 @@ class How extends Container {
                 ].join('')
             }]
         }, {
-            module: Container,
+            ntype : 'container',
             flex  : '2',
             style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -1,37 +1,39 @@
-import Button    from '../../../../../src/button/Base.mjs';
-import Container from '../../../../../src/container/Base.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import Button        from '../../../../../src/button/Base.mjs';
 
 /**
  * @class Portal.view.home.parts.MainNeo
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class MainNeo extends Container {
+class MainNeo extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.MainNeo'
          * @protected
          */
         className: 'Portal.view.home.parts.MainNeo',
-
-        cls: ['page', 'portal-home-main-neo'],
+        /**
+         * @member {String[]} cls=['portal-home-main-neo']
+         */
+        cls: ['portal-home-main-neo'],
 
         layout: {ntype: 'vbox', align: 'center', pack: 'center'},
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
-            cls   : ['vector'],
-            flex  : 'none',
+            ntype: 'container',
+            cls  : ['vector'],
+            flex : 'none',
         }, {
             cls : ['neo-h1'],
             flex: 'none',
             html: 'The High-Performance Web Framework for Next Generation Interfaces',
             vdom: {tag: 'h1'}
         }, {
-            module: Container,
-            cls   : ['button-group'],
-            flex  : 'none',
+            ntype: 'container',
+            cls  : ['button-group'],
+            flex : 'none',
 
             items: [{
                 module : Button,

package/examples/ServiceWorker.mjs

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

package/examples/model/dialog/EditUserDialog.mjs

@@ -46,14 +46,7 @@ class EditUserDialog extends Dialog {
             labelText : 'Lastname:',
             labelWidth: 110,
             listeners : {change: 'onLastnameTextFieldChange'}
-        }],
-        /**
-         * @member {Object} wrapperStyle={height: '300px',width : '400px'}
-         */
-        wrapperStyle: {
-            height: '300px',
-            width : '400px'
-        }
+        }]
     }
 }
 

package/package.json

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