neo.mjs 6.18.1 → 6.18.3

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.3'
          */
-        version: '6.18.1'
+        version: '6.18.3'
     }
 
     /**

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

@@ -1,11 +1,10 @@
-import AfterMath  from './parts/AfterMath.mjs';
-import Colors     from './parts/Colors.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Features   from './parts/Features.mjs';
-import Helix      from './parts/Helix.mjs';
-import How        from './parts/How.mjs';
-import HelloWorld from './parts/HelloWorld.mjs';
-import MainNeo    from './parts/MainNeo.mjs';
+import AfterMath from './parts/AfterMath.mjs';
+import Colors    from './parts/Colors.mjs';
+import Container from '../../../../src/container/Base.mjs';
+import Features  from './parts/Features.mjs';
+import Helix     from './parts/Helix.mjs';
+import How       from './parts/How.mjs';
+import MainNeo   from './parts/MainNeo.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
@@ -22,14 +21,24 @@ 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,
             Helix,
             Colors,
             How,
@@ -38,16 +47,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 +66,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,38 @@
+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'],
+        /**
+         * @member {Object} responsiveConfig
+         */
+        responsiveConfig: {
+            medium: {maxWidth: 840},
+            large : {minWidth: 841}
+        }
+    }
+
+    /**
+     * 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 '../../../../../src/code/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'},
@@ -70,7 +69,7 @@ class Colors extends Container {
                 reference: 'live-preview',
 
                 value: [
-                    "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
+                    "import Viewport from '../../apps/colors/view/Viewport.mjs';",
                     "",
                     "class MainView extends Viewport {",
                     "    static config = {",
@@ -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 '../../../../../src/code/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'},
@@ -85,7 +81,7 @@ class Helix extends Container {
                 reference: 'live-preview',
 
                 value: [
-                    "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
+                    "import Viewport from '../../examples/component/multiWindowHelix/Viewport.mjs';",
                     "",
                     "class MainView extends Viewport {",
                     "    static config = {",
@@ -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/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/apps/portal/view/learn/ContentView.mjs

@@ -1,5 +1,5 @@
 import Component   from '../../../../src/component/Base.mjs';
-import LivePreview from './LivePreview.mjs';
+import LivePreview from '../../../../src/code/LivePreview.mjs';
 import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 
 const
@@ -124,6 +124,8 @@ class ContentView extends Component {
                 // Create LivePreview for each iteration, set value to neoDivs[key]
                 Neo.create(LivePreview, {
                     appName        : me.appName,
+                    autoMount      : true,
+                    autoRender     : true,
                     parentComponent: me,
                     parentId       : key,
                     value          : neoDivs[key],

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.3'
          */
-        version: '6.18.1'
+        version: '6.18.3'
     }
 
     /**

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.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,12 +52,12 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.23",
-        "marked": "^13.0.0",
+        "inquirer": "^9.3.2",
+        "marked": "^13.0.1",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "sass": "^1.77.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -121,8 +121,8 @@ actually used in the example, and the import root path is different to reflect t
 Neo.mjs library relative to the examples.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/ComponentModels.md

@@ -4,9 +4,9 @@ A _view model_ — `Neo.model.Component` — instance holds properties t
 can be bound to component properties.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import TextField from  '../../../../src/form/field/Text.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import TextField from  '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -56,9 +56,9 @@ usually coded as separate classes.)
 Below is another example.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import Panel     from  '../../../../src/container/Panel.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import Panel     from  '../container/Panel.mjs';
 
 class MyPanel extends Panel {
     static config = {