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

package/examples/component/coronaHelix/CountryHelix.mjs

@@ -27,10 +27,12 @@ class CountryHelix extends Helix {
         /**
          * 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: [
@@ -74,11 +76,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,
         /**
@@ -88,16 +92,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/examples/component/coronaHelix/MainContainer.mjs

@@ -29,6 +29,7 @@ class MainContainer extends Viewport {
         helixConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/examples/component/gallery/ImageStore.mjs

@@ -18,6 +18,7 @@ class ImageStore extends Store {
         autoLoad: true,
         /**
          * @member {Neo.data.Model} model=ImageModel
+         * @reactive
          */
         model: ImageModel,
         /**

package/examples/component/helix/ImageStore.mjs

@@ -18,6 +18,7 @@ class ImageStore extends Store {
         autoLoad: true,
         /**
          * @member {Neo.data.Model} model=ImageModel
+         * @reactive
          */
         model: ImageModel,
         /**

package/examples/component/helix/Viewport.mjs

@@ -28,6 +28,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.helix.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -40,10 +41,12 @@ class Viewport extends BaseViewport {
         helixConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Boolean} showGitHubStarButton_=true
+         * @reactive
          */
         showGitHubStarButton_: true,
         /**

package/examples/component/helix/ViewportController.mjs

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

package/examples/component/multiWindowCoronaGallery/childapp/Viewport.mjs

@@ -13,6 +13,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.multiWindowCoronaGallery.childapp.Viewport',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/examples/component/multiWindowHelix/childapp/Viewport.mjs

@@ -13,6 +13,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.multiWindowHelix.childapp.Viewport',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/examples/component/wrapper/googleMaps/MapComponent.mjs

@@ -15,6 +15,7 @@ class MapComponent extends GoogleMapsComponent {
         /**
          * Center the map initially to Island
          * @member {Object} center={lat: 64.963051,lng: -19.020835}
+         * @reactive
          */
         center: {
             lat: 64.963051,
@@ -53,6 +54,7 @@ class MapComponent extends GoogleMapsComponent {
         /**
          * Ensure only Island is visible
          * @member {Number} zoom=6
+         * @reactive
          */
         zoom: 6
     }

package/examples/core/config/MainContainer.mjs

@@ -14,10 +14,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.core.config.MainContainer',
         /**
          * @member {Number|null} a_=null
+         * @reactive
          */
         a_: null,
         /**
          * @member {Number|null} b_=null
+         * @reactive
          */
         b_: null,
         /**

package/examples/dialog/DemoDialog.mjs

@@ -16,6 +16,7 @@ class DemoDialog extends Dialog {
         /**
          * Custom config to dynamically enable / disable the animateTargetId
          * @member {Boolean} animated_=true
+         * @reactive
          */
         animated_: true,
         /**
@@ -33,6 +34,7 @@ class DemoDialog extends Dialog {
         index: 1,
         /**
          * @member {Boolean} modal=true
+         * @reactive
          */
         modal: true,
         /**

package/examples/dialog/MainContainer.mjs

@@ -19,6 +19,7 @@ class MainContainer extends Viewport {
         /**
          * We are not using a container layout here
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**

package/examples/form/field/color/MainStore.mjs

@@ -25,6 +25,7 @@ class MainStore extends Store {
         ],
         /**
          * @member {Neo.data.Model} model=MainModel
+         * @reactive
          */
         model: MainModel
     }

package/examples/functional/defineComponent/Component.mjs

@@ -0,0 +1,18 @@
+import {defineComponent, useConfig, useEvent} from '../../../src/functional/_export.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Neo.examples.functional.defineComponent.Component',
+        greeting_: 'Hello'
+    },
+    createVdom(config) {
+        const [name, setName] = useConfig('World');
+
+        useEvent('click', () => setName(prev => prev === 'Neo' ? 'World' : 'Neo'));
+
+        return {
+        //  tag : 'div', // div is the default value
+            text: `${config.greeting}, ${name}!`
+        }
+    }
+});

package/examples/functional/defineComponent/MainContainer.mjs

@@ -0,0 +1,41 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MyFunctionalComponent from './Component.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.functional.defineComponent.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.functional.defineComponent.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module    : TextField,
+            clearable : true,
+            labelText : 'greeting',
+            listeners : {change: me.onConfigChange.bind(me, 'greeting')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.greeting
+        }]
+    }
+
+    /**
+     * @returns {Neo.functional.Component}
+     */
+    createExampleComponent() {
+        return {
+            module  : MyFunctionalComponent,
+            greeting: 'Hi'
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/functional/defineComponent/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.functional.defineComponent'
+});

package/examples/functional/defineComponent/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Functional Component</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/functional/defineComponent/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/functional/defineComponent/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/functional/hostComponent/Component.mjs

@@ -0,0 +1,32 @@
+import {defineComponent, useConfig} from '../../../src/functional/_export.mjs';
+import Button                       from '../../../src/button/Base.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Neo.examples.functional.hostComponent.Component'
+    },
+    createVdom() {
+        const [count, setCount] = useConfig(0);
+
+        const style = {
+            display       : 'flex',
+            flexDirection : 'column',
+            alignItems    : 'center',
+            justifyContent: 'center',
+            fontSize      : '20px'
+        };
+
+        return {style, cn: [
+            {
+                tag : 'p',
+                text: `Button clicked ${count} times`
+            }, {
+                module : Button,
+                id     : 'myButtonModule',
+                theme  : 'neo-theme-neo-light',
+                text   : 'Click Me (Neo Button)',
+                handler: () => setCount(prev => prev + 1)
+            }
+        ]}
+    }
+});

package/examples/functional/hostComponent/MainContainer.mjs

@@ -0,0 +1,48 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MyFunctionalComponent from './Component.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.functional.hostComponent.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.functional.hostComponent.MainContainer',
+        configItemLabelWidth: 120,
+        configItemWidth     : 300,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    async createConfigurationComponents() {
+        // Wait one micro task queue tick, to ensure the fn render Effect is done
+        await Promise.resolve();
+
+        const button = Neo.getComponent('myButtonModule');
+
+        return [{
+            module    : TextField,
+            clearable : true,
+            labelText : 'Button Text',
+            style     : {marginTop: '10px'},
+            value     : button.text,
+
+            listeners : {
+                change({value}) {
+                    button.text = value
+                }
+            }
+        }]
+    }
+
+    /**
+     * @returns {Neo.functional.Component}
+     */
+    createExampleComponent() {
+        return {
+            module: MyFunctionalComponent
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/functional/hostComponent/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.functional.hostComponent'
+});

package/examples/functional/hostComponent/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Functional Component Hosting Component</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/functional/hostComponent/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/functional/hostComponent/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/grid/animatedRowSorting/Viewport.mjs

@@ -52,7 +52,7 @@ class Viewport extends BaseViewport {
             store       : MainStore,
             wrapperStyle: {maxWidth: '902px'},
 
-            bodyConfig: {
+            body: {
                 animatedRowSorting: true
             },
 

package/examples/grid/bigData/ControlsContainer.mjs

@@ -17,6 +17,7 @@ class ControlsContainer extends Container {
         className: 'Neo.examples.grid.bigData.ControlsContainer',
         /**
          * @member {String[]} cls=['neo-examples-bigdata-controls-container']
+         * @reactive
          */
         cls: ['neo-examples-bigdata-controls-container'],
         /**
@@ -170,10 +171,12 @@ class ControlsContainer extends Container {
         }],
         /**
          * @member {Object} layout={ntype:'vbox'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**
          * @member {String} tag='aside'
+         * @reactive
          */
         tag: 'aside'
     }

package/examples/grid/bigData/GridContainer.mjs

@@ -15,12 +15,13 @@ class GridContainer extends BaseGridContainer {
         className: 'Neo.examples.grid.bigData.GridContainer',
         /**
          * @member {Number} amountColumns_=50
+         * @reactive
          */
         amountColumns_: 50,
         /**
-         * @member {Object} bodyConfig
+         * @member {Object} body
          */
-        bodyConfig: {
+        body: {
             bufferColumnRange: 3,
             bufferRowRange   : 5
         },
@@ -35,6 +36,7 @@ class GridContainer extends BaseGridContainer {
         },
         /**
          * @member {Object[]} store=MainStore
+         * @reactive
          */
         store: MainStore
     }

package/examples/grid/bigData/MainContainer.mjs

@@ -15,10 +15,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.grid.bigData.MainContainer',
         /**
          * @member {String[]} cls=['neo-examples-bigdata-maincontainer']
+         * @reactive
          */
         cls: ['neo-examples-bigdata-maincontainer'],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/examples/grid/bigData/MainModel.mjs

@@ -13,6 +13,7 @@ class MainModel extends Model {
         className: 'Neo.examples.grid.bigData.MainModel',
         /**
          * @member {Number} amountColumns_=50
+         * @reactive
          */
         amountColumns_: 50
     }

package/examples/grid/bigData/MainStore.mjs

@@ -14,10 +14,12 @@ class MainStore extends Store {
         className: 'Neo.examples.grid.bigData.MainStore',
         /**
          * @member {Number} amountColumns_=50
+         * @reactive
          */
         amountColumns_: 50,
         /**
          * @member {Number} amountRows_=1000
+         * @reactive
          */
         amountRows_: 1000,
         /**
@@ -34,6 +36,7 @@ class MainStore extends Store {
         }],
         /**
          * @member {Neo.data.Model} model=Model
+         * @reactive
          */
         model: Model
     }

package/examples/grid/cellEditing/MainContainer.mjs

@@ -114,7 +114,7 @@ class MainContainer extends ConfigurationViewport {
             store       : MainStore,
             wrapperStyle: {maxWidth: '1002px'},
 
-            bodyConfig: {
+            body: {
                 selectionModel: CellModel
             },
 

package/examples/grid/container/MainContainer.mjs

@@ -88,7 +88,7 @@ class MainContainer extends ConfigurationViewport {
                 width: 200
             },
 
-            bodyConfig: {
+            body: {
                 selectionModel: CellModel
             },
 

package/examples/grid/covid/GridContainer.mjs

@@ -16,6 +16,7 @@ class GridContainer extends BaseGridContainer {
         className: 'Neo.examples.grid.covid.GridContainer',
         /**
          * @member {String[]} cls=['covid-country-grid']
+         * @reactive
          */
         cls: ['covid-country-grid'],
         /**
@@ -99,10 +100,12 @@ class GridContainer extends BaseGridContainer {
         }],
         /**
          * @member {Neo.controller.Component} controller=GridContainerController
+         * @reactive
          */
         controller: GridContainerController,
         /**
          * @member {Object[]} store=Store
+         * @reactive
          */
         store: Store
     }

package/examples/grid/covid/MainContainer.mjs

@@ -14,10 +14,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.grid.covid.MainContainer',
         /**
          * @member {Object[]} items=[GridContainer]
+         * @reactive
          */
         items: [GridContainer],
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**

package/examples/grid/covid/Store.mjs

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

package/examples/grid/nestedRecordFields/EditUserDialog.mjs

@@ -29,14 +29,17 @@ class EditUserDialog extends Dialog {
         },
         /**
          * @member {Boolean} modal=true
+         * @reactive
          */
         modal: true,
         /**
          * @member {Record|null} record_=null
+         * @reactive
          */
         record_: null,
         /**
          * @member {String} title='Edit User'
+         * @reactive
          */
         title: 'Edit User',
         /**

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -17,10 +17,12 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.grid.nestedRecordFields.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         * @reactive
          */
         stateProvider: ViewportStateProvider,
         /**
@@ -51,7 +53,7 @@ class Viewport extends BaseViewport {
             bind     : {store: 'stores.mainStore'},
             reference: 'grid',
 
-            bodyConfig: {
+            body: {
                 highlightModifiedCells: true
             },
 

package/examples/list/animate/List.mjs

@@ -13,15 +13,18 @@ class List extends BaseList {
         className: 'Neo.examples.list.animate.List',
         /**
          * @member {Boolean} animate=true
+         * @reactive
          */
         animate: true,
         /**
          * @member {String[]} cls=['neo-examples-list-animate']
+         * @reactive
          */
         cls: ['neo-examples-list-animate'],
         /**
          * Value in px
          * @member {Number} itemHeight=200
+         * @reactive
          */
         itemHeight: 200,
         /**
@@ -31,6 +34,7 @@ class List extends BaseList {
         /**
          * Value in px
          * @member {Number} itemWidth=300
+         * @reactive
          */
         itemWidth: 300
     }

package/examples/list/animate/MainContainer.mjs

@@ -20,10 +20,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.list.animate.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
+         * @reactive
          */
         controller: MainContainerController,
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**

package/examples/list/circle/MainStore.mjs

@@ -25,6 +25,7 @@ class MainStore extends Store {
         ],
         /**
          * @member {Neo.data.Model} model=MainModel
+         * @reactive
          */
         model: MainModel,
         /**

package/examples/list/color/MainStore.mjs

@@ -25,6 +25,7 @@ class MainStore extends Store {
         ],
         /**
          * @member {Neo.data.Model} model=MainModel
+         * @reactive
          */
         model: MainModel
     }