neo.mjs 10.0.0-beta.5 → 10.0.0

package/apps/colors/view/GridContainer.mjs

@@ -13,10 +13,12 @@ class GridContainer extends BaseGridContainer {
         className: 'Colors.view.GridContainer',
         /**
          * @member {Number|null} amountColumns_=null
+         * @reactive
          */
         amountColumns_: null,
         /**
          * @member {Number|null} amountRows_=null
+         * @reactive
          */
         amountRows_: null,
         /**
@@ -29,6 +31,7 @@ class GridContainer extends BaseGridContainer {
         },
         /**
          * @member {String[]} cls=['colors-grid-container']
+         * @reactive
          */
         cls: ['colors-grid-container']
     }

package/apps/colors/view/HeaderToolbar.mjs

@@ -16,10 +16,12 @@ class HeaderToolbar extends Toolbar {
         className: 'Colors.view.HeaderToolbar',
         /**
          * @member {String[]} cls=['colors-header-toolbar']
+         * @reactive
          */
         cls: ['colors-header-toolbar'],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'center', pack: 'start', wrap: 'wrap'},
         /**

package/apps/colors/view/Viewport.mjs

@@ -19,10 +19,12 @@ class Viewport extends BaseViewport {
         className: 'Colors.view.Viewport',
         /**
          * @member {String[]} cls=['colors-viewport']
+         * @reactive
          */
         cls: ['colors-viewport'],
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -49,6 +51,7 @@ class Viewport extends BaseViewport {
         }],
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider
     }

package/apps/covid/view/FooterContainer.mjs

@@ -13,14 +13,17 @@ class FooterContainer extends Container {
         className: 'Covid.view.FooterContainer',
         /**
          * @member {Number} height=20
+         * @reactive
          */
         height: 25,
         /**
          * @member {Object} layout={ntype: 'hbox'}
+         * @reactive
          */
         layout: {ntype: 'hbox'},
         /**
          * @member {String} reference='footer'
+         * @reactive
          */
         reference: 'footer',
         /**

package/apps/covid/view/GalleryContainer.mjs

@@ -22,6 +22,7 @@ class GalleryContainer extends Container {
         baseCls: ['neo-gallery-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component|null} controller=GalleryContainerController
+         * @reactive
          */
         controller: GalleryContainerController,
         /**
@@ -34,6 +35,7 @@ class GalleryContainer extends Container {
         galleryConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/apps/covid/view/GalleryContainerController.mjs

@@ -14,6 +14,7 @@ class GalleryContainerController extends ComponentController {
         /**
          * @member {Neo.component.Gallery|null} gallery_=null
          * @protected
+         * @reactive
          */
         gallery_: null
     }

package/apps/covid/view/HeaderContainer.mjs

@@ -19,10 +19,12 @@ class HeaderContainer extends Container {
         baseCls: ['covid-header-container'],
         /**
          * @member {Number} height=70
+         * @reactive
          */
         height: 120,
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/apps/covid/view/HelixContainer.mjs

@@ -22,6 +22,7 @@ class HelixContainer extends Container {
         baseCls: ['neo-helix-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component|null} controller=HelixContainerController
+         * @reactive
          */
         controller: HelixContainerController,
         /**
@@ -34,6 +35,7 @@ class HelixContainer extends Container {
         helixConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/apps/covid/view/HelixContainerController.mjs

@@ -14,6 +14,7 @@ class HelixContainerController extends ComponentController {
         /**
          * @member {Neo.component.Helix|null} helix_=null
          * @protected
+         * @reactive
          */
         helix_: null
     }

package/apps/covid/view/MainContainer.mjs

@@ -22,6 +22,7 @@ class MainContainer extends Viewport {
         baseCls: ['covid-viewport', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
@@ -83,10 +84,12 @@ class MainContainer extends Viewport {
         }, FooterContainer],
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider
     }

package/apps/covid/view/TableContainer.mjs

@@ -27,10 +27,12 @@ class TableContainer extends Container {
         },
         /**
          * @member {Neo.controller.Component|null} controller=TableContainerController
+         * @reactive
          */
         controller: TableContainerController,
         /**
          * @member {Object} countryRecord_=null
+         * @reactive
          */
         countryRecord_: null,
         /**
@@ -48,6 +50,7 @@ class TableContainer extends Container {
         tableConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/apps/covid/view/TableContainerController.mjs

@@ -45,6 +45,7 @@ class TableContainerController extends ComponentController {
         /**
          * @member {Neo.table.Container|null} table_=null
          * @protected
+         * @reactive
          */
         table_: null
     }

package/apps/covid/view/WorldMapContainer.mjs

@@ -17,10 +17,12 @@ class WorldMapContainer extends Container {
         className: 'Covid.view.WorldMapContainer',
         /**
          * @member {Neo.controller.Component} controller=WorldMapContainerController
+         * @reactive
          */
         controller: WorldMapContainerController,
         /**
          * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**

package/apps/covid/view/country/Gallery.mjs

@@ -25,6 +25,7 @@ class CountryGallery extends Gallery {
         },
         /**
          * @member {String|null} country_=null
+         * @reactive
          */
         country_: null,
         /**
@@ -34,6 +35,7 @@ class CountryGallery extends Gallery {
         itemHeight: 280,
         /**
          * @member {Object} itemTpl_
+         * @reactive
          */
         itemTpl:
         {cls: ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'], tabIndex: '-1', cn: [
@@ -86,6 +88,7 @@ class CountryGallery extends Gallery {
         selectOnMount: false,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore
     }

package/apps/covid/view/country/Helix.mjs

@@ -25,15 +25,18 @@ class CountryHelix extends Helix {
         },
         /**
          * @member {String|null} country_=null
+         * @reactive
          */
         country_: null,
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY=1.2
+         * @reactive
          */
         deltaY: 1.2,
         /**
          * @member {Object} itemTpl_
+         * @reactive
          */
         itemTpl:
         {cls: ['surface', 'neo-helix-item'], style: {}, tabIndex: '-1', cn: [
@@ -77,11 +80,13 @@ class CountryHelix extends Helix {
         /**
          * The radius of the Helix in px
          * @member {Number} radius=2500
+         * @reactive
          */
         radius: 2500,
         /**
          * The rotationAngle of the Helix in degrees
          * @member {Number} rotationAngle=720
+         * @reactive
          */
         rotationAngle: 720,
         /**
@@ -91,16 +96,19 @@ class CountryHelix extends Helix {
         showCloneInfo: false,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateY=500
+         * @reactive
          */
         translateY: 500,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateZ_=-2300
+         * @reactive
          */
         translateZ: -2300
     }

package/apps/covid/view/country/HistoricalDataTable.mjs

@@ -80,6 +80,7 @@ class HistoricalDataTable extends Container {
         }],
         /**
          * @member {Neo.data.Store} store=HistoricalData
+         * @reactive
          */
         store: HistoricalData
     }

package/apps/covid/view/country/Table.mjs

@@ -104,10 +104,12 @@ class Table extends Container {
         }],
         /**
          * @member {String|null} country_=null
+         * @reactive
          */
         country_: null,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore
     }

package/apps/covid/view/mapboxGl/Component.mjs

@@ -17,6 +17,7 @@ class Component extends BaseComponent {
         accessToken: 'pk.eyJ1IjoidG9iaXUiLCJhIjoiY2s4dTlsdHA5MDRmYzNtcGxlczFpcGVncyJ9.qcmzDjpdyQeLtz9z7d7CkA',
         /**
          * @member {Object} center={lat: 40, lng: 20}
+         * @reactive
          */
         center: {lat: 40, lng: 20},
         /**

package/apps/covid/view/mapboxGl/Container.mjs

@@ -22,6 +22,7 @@ class Container extends BaseContainer {
         ntype: 'covid-mapboxgl-container',
         /**
          * @member {Neo.controller.Component} controller=ContainerController
+         * @reactive
          */
         controller: ContainerController,
         /**
@@ -88,6 +89,7 @@ class Container extends BaseContainer {
         }],
         /**
          * @member {Object} layout={ntype: 'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
 

package/apps/email/EPIC_PLAN.md

@@ -0,0 +1,58 @@
+# EPIC: Refactor and Enhance the Email App
+
+This document outlines the plan for refactoring the `apps/email` application into a showcase for the Neo.mjs functional component architecture and multi-window capabilities.
+
+## Architectural Milestones & Key Learnings
+
+This epic has driven significant architectural improvements to the functional component system. For a full understanding of the current state, review this ticket:
+
+-   **[#ticket-functional-recursive-config-diffing.md](/.github/ticket-functional-recursive-config-diffing.md):** A plan for a future enhancement to make the diffing logic recursive, allowing for deep, declarative control over nested component configurations.
+
+---
+
+## Phase 1: Foundation and Basic Layout (Completed)
+
+**Goal:** Implement the main 3-pane layout as a functional `MainView` component and set it as the content of the existing classic `Viewport`.
+
+**Learnings & Decisions:**
+-   **Interoperability:** Kept the classic `Viewport` and embedded the new functional `MainView` component, showcasing seamless integration.
+-   **Naming:** Renamed `Main.mjs` to `MainView.mjs` for clarity.
+
+---
+
+## Phase 2: Email List View (Completed)
+
+**Goal:** Implement the email list pane using a `Neo.grid.Container`.
+
+**Learnings & Decisions:**
+-   **Complex Component Integration:** Discovered that complex classic components require specific configs (e.g., `wrapperStyle`) to manage their own layout when nested inside functional components.
+-   **Stateful Child Problem:** Uncovered the core issue of stateful children (stores, columns) being re-created on every parent render. This led directly to the architectural work on VDOM diffing.
+
+---
+
+## Phase 3: Email Detail View (Completed)
+
+**Goal:** Display the content of a selected email from the grid.
+-   Implemented a `selection.RowModel` on the grid and used a `useConfig` state variable (`selectedEmail`) to drive a conditional render of the detail pane.
+
+---
+
+## Phase 4: Compose Email Functionality (Next)
+
+**Goal:** Implement the ability to compose a new email, initially within the main window.
+
+**Proposed Plan:**
+1.  **Compose Button:** Add a `Neo.button.Base` to the "Folders" pane.
+2.  **State Management:** Use `useConfig` in `MainView` to manage an `isComposing` boolean state.
+3.  **Compose View:** Create a new functional component, `view/ComposeView.mjs`, containing the form for the new email.
+4.  **Conditional Rendering:** Use the `isComposing` flag to conditionally render the `ComposeView` as an overlay on top of the main view.
+5.  **Event Handling:** The "Compose" button will set `isComposing` to `true`. The `ComposeView` will have a "Close" button that sets it back to `false`.
+6.  **Overlay Implementation:** We will build a custom functional overlay for this, as it's a good exercise and provides maximum flexibility.
+
+---
+
+## Phase 5: Multi-Window Detach
+
+**Goal:** Implement the "detach" functionality to move the compose view into a separate browser window.
+**Sub-Tasks:** *(To be defined)*
+

package/apps/email/neo-config.json

@@ -4,6 +4,6 @@
     "environment": "development",
     "mainPath": "./Main.mjs",
     "themes": [
-        "neo-theme-light"
+        "neo-theme-dark"
     ]
-}
+}

package/apps/email/store/Emails.mjs

@@ -15,7 +15,17 @@ class Emails extends Store {
         /**
          * @member {Neo.data.Model} model=Email
          */
-        model: EmailModel
+        model: EmailModel,
+        /**
+         * @member {Object[]} data
+         */
+        data: [
+            {id: 1, sender: 'John Doe', title: 'Hello World!', content: 'This is the first email.', dateSent: '2025-07-15T10:00:00Z'},
+            {id: 2, sender: 'Jane Smith', title: 'Re: Project Update', content: 'Here is the project update you requested.', dateSent: '2025-07-15T11:30:00Z'},
+            {id: 3, sender: 'Peter Jones', title: 'Lunch tomorrow?', content: 'Are we still on for lunch tomorrow at 12:30?', dateSent: '2025-07-15T12:15:00Z'},
+            {id: 4, sender: 'Mary Williams', title: 'Your order has shipped', content: 'Your order #12345 has shipped and will arrive in 3-5 business days.', dateSent: '2025-07-14T15:45:00Z'},
+            {id: 5, sender: 'David Brown', title: 'Quick question', content: 'I have a quick question about the new feature.', dateSent: '2025-07-14T09:20:00Z'}
+        ]
     }
 }
 

package/apps/email/view/ComposeView.mjs

@@ -0,0 +1,44 @@
+import Button            from '../../../src/button/Base.mjs';
+import TextField         from '../../../src/form/field/Text.mjs';
+import TextAreaField     from '../../../src/form/field/TextArea.mjs';
+import {defineComponent} from '../../../src/functional/_export.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Email.view.ComposeView',
+        cls      : ['email-compose-view']
+    },
+    createVdom({onClose}) {
+        const fieldStyle = {
+            marginBottom: '10px'
+        };
+
+        return {
+            cn: [{
+                module    : TextField,
+                id        : 'compose-to',
+                labelText : 'To:',
+                labelWidth: 80,
+                style     : fieldStyle
+            }, {
+                module    : TextField,
+                id        : 'compose-subject',
+                labelText : 'Subject:',
+                labelWidth: 80,
+                style     : fieldStyle
+            }, {
+                module   : TextAreaField,
+                id       : 'compose-body',
+                labelText: 'Body:',
+                height   : 200,
+                style    : fieldStyle
+            }, {
+                module : Button,
+                handler: onClose,
+                id     : 'compose-close-button',
+                style  : {alignSelf: 'flex-end'},
+                text   : 'Close'
+            }]
+        }
+    }
+});

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
     }