neo.mjs 10.0.0-beta.5 → 10.0.0-beta.6

package/apps/email/view/MainView.mjs

@@ -0,0 +1,89 @@
+import Button                       from '../../../src/button/Base.mjs';
+import ComposeView                  from './ComposeView.mjs';
+import EmailsStore                  from '../store/Emails.mjs';
+import GridContainer                from '../../../src/grid/Container.mjs';
+import RowModel                     from '../../../src/selection/grid/RowModel.mjs';
+import {defineComponent, useConfig} from '../../../src/functional/_export.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Email.view.MainView',
+        cls      : ['email-main-view']
+    },
+    createVdom() {
+        const
+            [isComposing,   setIsComposing]   = useConfig(false),
+            [selectedEmail, setSelectedEmail] = useConfig(null);
+
+        const paneStyle = {
+            border : '1px solid #c0c0c0',
+            margin : '10px',
+            padding: '10px'
+        };
+
+        const onComposeClick = () => {
+            setIsComposing(true)
+        };
+
+        const onCloseCompose = () => {
+            setIsComposing(false);
+        };
+
+        const onSelectionChange = ({records}) => {
+            setSelectedEmail(records[0] || null)
+        };
+
+        return {
+            cn: [{
+                style: {...paneStyle, flex: '0 0 200px'},
+                cn: [{
+                    module : Button,
+                    handler: onComposeClick,
+                    id     : 'compose-button',
+                    text   : 'Compose',
+                    style  : {marginBottom: '10px', width: '100%'}
+                }, {
+                    text : 'Folders'
+                }]
+            }, {
+                style: {...paneStyle, flex: '1 1 600px', padding: '0'},
+                cn: [{
+                    module      : GridContainer,
+                    id          : 'email-grid',
+                    store       : EmailsStore,
+                    wrapperStyle: {height: '100%', width: '100%'},
+                    body: {
+                        selectionModel: {
+                            module   : RowModel,
+                            listeners: {selectionChange: onSelectionChange}
+                        }
+                    },
+                    columns: [
+                        {dataField: 'sender', text: 'Sender', width: 150},
+                        {dataField: 'title',  text: 'Title',  flex: 1, minWidth: 200},
+                        {
+                            cellAlign: 'right',
+                            dataField: 'dateSent',
+                            renderer : (({value}) => new Date(value).toLocaleDateString()),
+                            text     : 'Date',
+                            width    : 100
+                        }
+                    ]
+                }]
+            }, {
+                style: {...paneStyle, flex: '1 1 600px'},
+                cn: selectedEmail ? [
+                    {tag: 'h2',  text: selectedEmail.title},
+                    {tag: 'p',   text: `From: ${selectedEmail.sender}`},
+                    {tag: 'div', style: {marginTop: '10px'}, text: selectedEmail.content}
+                ] : [{
+                    text: 'Select an email to read'
+                }]
+            }, isComposing && {
+                module : ComposeView,
+                id     : 'compose-view',
+                onClose: onCloseCompose
+            }]
+        }
+    }
+});

package/apps/email/view/Viewport.mjs

@@ -1,7 +1,5 @@
-import BaseViewport          from '../../../src/container/Viewport.mjs';
-import Component             from '../../../src/component/Base.mjs';
-import TabContainer          from '../../../src/tab/Container.mjs';
-import ViewportStateProvider from './ViewportStateProvider.mjs';
+import BaseViewport from '../../../src/container/Viewport.mjs';
+import MainView     from './MainView.mjs';
 
 /**
  * @class Email.view.Viewport
@@ -14,42 +12,15 @@ class Viewport extends BaseViewport {
          * @protected
          */
         className: 'Email.view.Viewport',
-        /*
+        /**
          * @member {Object} layout={ntype:'fit'}
          */
         layout: {ntype: 'fit'},
-        /**
-         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
-         */
-        stateProvider: ViewportStateProvider,
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: TabContainer,
-            height: 300,
-            width : 500,
-            style : {flex: 'none', margin: '20px'},
-
-            itemDefaults: {
-                module: Component,
-                cls   : ['neo-examples-tab-component'],
-                style : {padding: '20px'},
-            },
-
-            items: [{
-                header: {
-                    iconCls: 'fa fa-home',
-                    text   : 'Tab 1'
-                },
-                text: 'Welcome to your new Neo App.'
-            }, {
-                header: {
-                    iconCls: 'fa fa-play-circle',
-                    text   : 'Tab 2'
-                },
-                text: 'Have fun creating something awesome!'
-            }]
+            module: MainView
         }]
     }
 }

package/apps/email/view/ViewportStateProvider.mjs

@@ -1,11 +1,11 @@
-import EmailStore from '../store/Emails.mjs';
-import Provider   from '../../../src/state/Provider.mjs';
+import EmailStore    from '../store/Emails.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
 
 /**
  * @class Email.view.ViewportStateProvider
  * @extends Neo.state.Provider
  */
-class ViewportStateProvider extends Provider {
+class ViewportStateProvider extends StateProvider {
     static config = {
         /**
          * @member {String} className='Email.view.ViewportStateProvider'

package/apps/form/store/SideNav.mjs

@@ -14,6 +14,7 @@ class SideNav extends Store {
         className: 'Form.store.SideNav',
         /**
          * @member {Neo.data.Model} model=SideNavModel
+         * @reactive
          */
         model: SideNavModel
     }

package/apps/form/view/FormContainer.mjs

@@ -22,6 +22,7 @@ class FormContainer extends BaseFormContainer {
         baseCls: ['form-form-container', 'neo-container'],
         /**
          * @member {Neo.controller.Component} controller=FormContainerController
+         * @reactive
          */
         controller: FormContainerController,
         /**

package/apps/form/view/FormPageContainer.mjs

@@ -19,6 +19,7 @@ class FormPageContainer extends FormContainer {
         },
         /**
          * @member {Object} layout={ntype:'vbox'}
+         * @reactive
          */
         layout: {ntype: 'vbox'},
         /**
@@ -27,6 +28,7 @@ class FormPageContainer extends FormContainer {
         style: {overflow: 'auto'},
         /**
          * @member {String} tag='div'
+         * @reactive
          */
         tag: 'div' // using a div instead of a form tag
     }

package/apps/form/view/SideNavList.mjs

@@ -22,6 +22,7 @@ class SideNavList extends List {
         itemsFocusable: true,
         /**
          * @member {Boolean} useHeaders=true
+         * @reactive
          */
         useHeaders: true
     }

package/apps/form/view/Viewport.mjs

@@ -17,6 +17,7 @@ class Viewport extends BaseViewport {
         className: 'Form.view.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -46,10 +47,12 @@ class Viewport extends BaseViewport {
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider
     }

package/apps/portal/childapps/preview/MainContainer.mjs

@@ -13,6 +13,7 @@ class MainContainer extends Viewport {
         className: 'PortalPreview.MainContainer',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-07-09",
+      "datePublished": "2025-07-18",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/store/BlogPosts.mjs

@@ -22,10 +22,12 @@ class BlogPosts extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=BlogPost
+         * @reactive
          */
         model: BlogPost,
         /**
          * @member {Object[]} sorters=[{property: 'id', direction: 'DESC'}]
+         * @reactive
          */
         sorters: [{
             property : 'id',

package/apps/portal/store/Content.mjs

@@ -14,6 +14,7 @@ class Content extends Store {
         className: 'Portal.store.Content',
         /**
          * @member {Neo.data.Model} model=ContentModel
+         * @reactive
          */
         model: ContentModel
     }

package/apps/portal/store/ContentSections.mjs

@@ -14,6 +14,7 @@ class ContentSections extends Store {
         className: 'Portal.store.ContentSections',
         /**
          * @member {Neo.data.Model} model=ContentSectionModel
+         * @reactive
          */
         model: ContentSectionModel
     }

package/apps/portal/store/Examples.mjs

@@ -18,6 +18,7 @@ class Examples extends Store {
         keyProperty: 'id',
         /**
          * @member {Neo.data.Model} model=Example
+         * @reactive
          */
         model: Example
     }

package/apps/portal/view/HeaderToolbar.mjs

@@ -13,6 +13,7 @@ class HeaderToolbar extends Base {
         className: 'Portal.view.HeaderToolbar',
         /**
          * @member {String[]} cls=['portal-header-toolbar']
+         * @reactive
          */
         cls: ['portal-header-toolbar'],
         /**

package/apps/portal/view/Viewport.mjs

@@ -26,10 +26,12 @@ class Viewport extends BaseViewport {
         className: 'Portal.view.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
@@ -57,15 +59,18 @@ class Viewport extends BaseViewport {
         }],
         /**
          * @member {Boolean} monitorSize=true
+         * @reactive
          */
         monitorSize: true,
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
+         * @reactive
          */
         size_: null,
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider
     }

package/apps/portal/view/ViewportController.mjs

@@ -29,6 +29,7 @@ class ViewportController extends Controller {
         ntype: 'viewport-controller',
         /**
          * @member {Number|null} activeIndex_=null
+         * @reactive
          */
         activeIndex_: null,
         /**
@@ -37,6 +38,7 @@ class ViewportController extends Controller {
         defaultHash: '/home',
         /**
          * @member {String} mainContentLayout_='card'
+         * @reactive
          */
         mainContentLayout_: 'card',
         /**
@@ -56,6 +58,7 @@ class ViewportController extends Controller {
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
+         * @reactive
          */
         size_: null
     }
@@ -316,8 +319,11 @@ class ViewportController extends Controller {
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube
                 if (container.layout.ntype !== 'layout-cube') {
-                    container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true};
-                    await me.timeout(200);
+                    container.setSilent({
+                        layout: {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
+                    });
+                    await container.promiseUpdate();
+                    await me.timeout(50);
                 }
 
                 container.layout.activeIndex = index;

package/apps/portal/view/about/Container.mjs

@@ -14,6 +14,7 @@ class Container extends Base {
         className: 'Portal.view.about.Container',
         /**
          * @member {String[]} cls=['portal-about-container']
+         * @reactive
          */
         cls: ['portal-about-container'],
         /**
@@ -57,6 +58,7 @@ class Container extends Base {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'center'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'center'}
     }

package/apps/portal/view/about/MemberContainer.mjs

@@ -14,30 +14,37 @@ class MemberContainer extends Container {
         className: 'Portal.view.about.MemberContainer',
         /**
          * @member {String[]} cls=['portal-about-member-container']
+         * @reactive
          */
         cls: ['portal-about-member-container'],
         /**
          * @member {String|null} location_=null
+         * @reactive
          */
         location_: null,
         /**
          * @member {String|null} name_=null
+         * @reactive
          */
         name_: null,
         /**
          * @member {String|null} picture_=null
+         * @reactive
          */
         picture_: null,
         /**
          * @member {String|null} profileGitHub_=null
+         * @reactive
          */
         profileGitHub_: null,
         /**
          * @member {String|null} profileLinkedIn_=null
+         * @reactive
          */
         profileLinkedIn_: null,
         /**
          * @member {String|null} teamRole_=null
+         * @reactive
          */
         teamRole_: null,
         /**

package/apps/portal/view/blog/Container.mjs

@@ -15,6 +15,7 @@ class Container extends BaseContainer {
         className: 'Portal.view.blog.Container',
         /**
          * @member {String[]} cls=['portal-blog-container']
+         * @reactive
          */
         cls: ['portal-blog-container'],
         /**
@@ -40,6 +41,7 @@ class Container extends BaseContainer {
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/apps/portal/view/blog/List.mjs

@@ -38,10 +38,12 @@ class List extends BaseList {
         preloadImages: 5,
         /**
          * @member {Neo.data.Store} store=BlogPosts
+         * @reactive
          */
         store: BlogPosts,
         /**
          * @member {Boolean} useWrapperNode=true
+         * @reactive
          */
         useWrapperNode: true,
         /**

package/apps/portal/view/examples/List.mjs

@@ -45,6 +45,7 @@ class List extends BaseList {
         sourceBaseUrl: 'https://github.com/neomjs/neo/tree/dev/',
         /**
          * @member {Boolean} useWrapperNode=true
+         * @reactive
          */
         useWrapperNode: true,
         /**

package/apps/portal/view/examples/TabContainer.mjs

@@ -16,6 +16,7 @@ class TabContainer extends Container {
         className: 'Portal.view.examples.TabContainer',
         /**
          * @member {Number|null} activeIndex=null
+         * @reactive
          */
         activeIndex: null,
         /**
@@ -24,6 +25,7 @@ class TabContainer extends Container {
         baseCls: ['portal-examples-tab-container', 'neo-tab-container'],
         /**
          * @member {Neo.controller.Component} controller=TabContainerController
+         * @reactive
          */
         controller: TabContainerController,
         /**
@@ -79,10 +81,12 @@ class TabContainer extends Container {
         }],
         /**
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true,
         /**
          * @member {String} tabBarPosition='left'
+         * @reactive
          */
         tabBarPosition: 'left',
     }

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

@@ -18,14 +18,17 @@ class ContentBox extends Base {
         baseCls: ['portal-content-box'],
         /**
          * @member {String[]|null} content_=null
+         * @reactive
          */
         content_: null,
         /**
          * @member {String|null} header_=null
+         * @reactive
          */
         header_: null,
         /**
          * @member {String|null} route_=null
+         * @reactive
          */
         route_: null,
         /**

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

@@ -30,36 +30,44 @@ class FeatureSection extends Container {
          * If you want to use the LivePreview, use the config livePreviewCode.
          * For custom content, use this config instead.
          * @member {Object[]|null} contentItems_=null
+         * @reactive
          */
         contentItems_: null,
         /**
          * @member {String|null} headline_=null
+         * @reactive
          */
         headline_: null,
         /**
          * Can either contain a route or a URL
          * @member {String|null} learnMoreRoute_=null
+         * @reactive
          */
         learnMoreRoute_: null,
         /**
          * @member {String|null} livePreviewCode_=null
+         * @reactive
          */
         livePreviewCode_: null,
         /**
          * @member {String|null} paragraph_=null
+         * @reactive
          */
         paragraph_: null,
         /**
          * @member {String|null} subHeadline_=null
+         * @reactive
          */
         subHeadline_: null,
         /**
          * Valid values: 'start' or 'end'
          * @member {String} textContainerPosition_='start'
+         * @reactive
          */
         textContainerPosition_: 'start',
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**

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

@@ -15,6 +15,7 @@ class FooterContainer extends Container {
         className: 'Portal.view.home.FooterContainer',
         /**
          * @member {String[]} cls=['portal-home-footer-container']
+         * @reactive
          */
         cls: ['portal-home-footer-container'],
         /**
@@ -107,15 +108,17 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.0.0-beta.5'
+                text  : 'v10.0.0-beta.6'
             }]
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {String} tag='footer'
+         * @reactive
          */
         tag: 'footer'
     }

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

@@ -19,6 +19,7 @@ class MainContainer extends Container {
         className: 'Portal.view.home.MainContainer',
         /**
          * @member {String[]} cls=['portal-home-maincontainer']
+         * @reactive
          */
         cls: ['portal-home-maincontainer'],
         /**
@@ -59,6 +60,7 @@ class MainContainer extends Container {
         ],
         /**
          * @member {Boolean} scrollable=true
+         * @reactive
          */
         scrollable: true
     }

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

@@ -14,10 +14,12 @@ class AfterMath extends BaseContainer {
         className: 'Portal.view.home.parts.AfterMath',
         /**
          * @member {String[]} cls=['portal-home-aftermath']
+         * @reactive
          */
         cls: ['portal-home-aftermath'],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
         /**

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

@@ -15,6 +15,7 @@ class BaseContainer extends Container {
         className: 'Portal.view.home.parts.BaseContainer',
         /**
          * @member {String[]} cls=['portal-home-content-view','neo-container']
+         * @reactive
          */
         baseCls: ['portal-home-content-view', 'neo-container']
     }

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

@@ -13,14 +13,17 @@ class Colors extends FeatureSection {
         className: 'Portal.view.home.parts.Colors',
         /**
          * @member {String[]} cls=['portal-home-parts-colors']
+         * @reactive
          */
         cls: ['portal-home-parts-colors'],
         /**
          * @member {String} headline='Amazing Potential'
+         * @reactive
          */
         headline: 'Amazing Potential',
         /**
          * @member {String} learnMoreRoute='https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8'
+         * @reactive
          */
         learnMoreRoute: 'https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8',
         /**
@@ -48,6 +51,7 @@ class Colors extends FeatureSection {
         ].join(''),
         /**
          * @member {String} subHeadline='Socket Data'
+         * @reactive
          */
         subHeadline: 'Shared Socket Data'
     }

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

@@ -14,10 +14,12 @@ class Features extends BaseContainer {
         className: 'Portal.view.home.parts.Features',
         /**
          * @member {String[]} cls=['portal-home-features']
+         * @reactive
          */
         cls: ['portal-home-features'],
         /**
          * @member {Object|String} layout='grid'
+         * @reactive
          */
         layout: 'grid',
         /**