neo.mjs 8.0.0-alpha.2 → 8.0.0-beta.2

package/examples/fields/MainContainer.mjs

@@ -29,260 +29,229 @@ class MainContainer extends Container {
             margin: '20px'
         },
 
-        items: [
-            {
-                ntype: 'container',
+        items: [{
+            ntype: 'container',
 
-                itemDefaults: {
-                    flex      : '0 1 auto',
-                    labelWidth: '70px'
-                },
-
-                layout: {
-                    ntype: 'vbox'
-                },
+            itemDefaults: {
+                flex      : '0 1 auto',
+                labelWidth: '70px'
+            },
 
-                items: [
-                    {
-                        ntype    : 'pickerfield',
-                        id       : 'myPickerfield',
-                        labelText: 'Picker',
-                        width    : 220
-                    },
-                    {
-                        module : Button,
-                        iconCls: 'fa fa-minus',
-                        style  : {marginTop: '20px'},
-                        text   : 'Remove Triggers',
-                        width  : 120,
-                        handler: function() {
-                            let field = Neo.getComponent('myPickerfield');
-                            field.triggers = [];
-                        }
-                    },
-                    {
-                        module : Button,
-                        iconCls: 'fa fa-plus',
-                        text   : 'Add Trigger',
-                        width  : 120,
-                        handler: function() {
-                            let field         = Neo.getComponent('myPickerfield'),
-                                fieldTriggers = field.triggers || [],
-                                triggers      = [...fieldTriggers]; // ensure to clone the array to not edit the internal oldValue by reference
+            layout: {
+                ntype: 'vbox'
+            },
 
-                            triggers.push({
-                                id     : Neo.getId('picker'),
-                                cls    : 'fa fa-caret-down',
-                                handler: 'onPickerTriggerClick'
-                            });
+            items: [{
+                ntype    : 'pickerfield',
+                id       : 'myPickerfield',
+                labelText: 'Picker',
+                width    : 220
+            }, {
+                module : Button,
+                iconCls: 'fa fa-minus',
+                style  : {marginTop: '20px'},
+                text   : 'Remove Triggers',
+                width  : 120,
+                handler: function() {
+                    let field = Neo.getComponent('myPickerfield');
+                    field.triggers = [];
+                }
+            }, {
+                module : Button,
+                iconCls: 'fa fa-plus',
+                text   : 'Add Trigger',
+                width  : 120,
+                handler: function() {
+                    let field         = Neo.getComponent('myPickerfield'),
+                        fieldTriggers = field.triggers || [],
+                        triggers      = [...fieldTriggers]; // ensure to clone the array to not edit the internal oldValue by reference
 
-                            field.triggers = triggers;
-                        }
-                    }
-                ],
+                    triggers.push({
+                        id     : Neo.getId('picker'),
+                        cls    : 'fa fa-caret-down',
+                        handler: 'onPickerTriggerClick'
+                    });
 
-                tabButtonConfig: {
-                    iconCls: 'fas fa-list',
-                    text   : 'Picker'
+                    field.triggers = triggers;
                 }
+            }],
+
+            header: {
+                iconCls: 'fas fa-list',
+                text   : 'Picker'
+            }
+        }, {
+            ntype: 'container',
+
+            itemDefaults: {
+                flex      : '0 1 auto',
+                labelWidth: '70px'
             },
-            {
-                ntype: 'container',
 
-                itemDefaults: {
-                    flex      : '0 1 auto',
-                    labelWidth: '70px'
-                },
+            layout: {
+                ntype: 'vbox'
+            },
 
-                layout: {
-                    ntype: 'vbox'
-                },
+            items: [{
+                ntype    : 'checkboxfield',
+                checked  : true,
+                labelText: 'Option 1',
+                name     : 'group1'
+            }, {
+                ntype    : 'checkboxfield',
+                labelText: 'Option 2',
+                name     : 'group1'
+            }, {
+                ntype    : 'checkboxfield',
+                labelText: 'Option 3',
+                name     : 'group1'
+            }, {
+                ntype         : 'checkboxfield',
+                checked       : true,
+                hideValueLabel: false,
+                labelText     : 'Group 2',
+                name          : 'group2',
+                style         : {marginTop: '20px'},
+                valueLabelText: 'Option 1'
+            }, {
+                ntype         : 'checkboxfield',
+                hideValueLabel: false,
+                labelText     : '',
+                name          : 'group2',
+                valueLabelText: 'Option 2'
+            }, {
+                ntype         : 'checkboxfield',
+                hideValueLabel: false,
+                labelText     : '',
+                name          : 'group2',
+                valueLabelText: 'Option 3'
+            }],
 
-                items: [
-                    {
-                        ntype    : 'checkboxfield',
-                        checked  : true,
-                        labelText: 'Option 1',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype    : 'checkboxfield',
-                        labelText: 'Option 2',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype    : 'checkboxfield',
-                        labelText: 'Option 3',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype         : 'checkboxfield',
-                        checked       : true,
-                        hideValueLabel: false,
-                        labelText     : 'Group 2',
-                        name          : 'group2',
-                        style         : {marginTop: '20px'},
-                        valueLabelText: 'Option 1'
-                    },
-                    {
-                        ntype         : 'checkboxfield',
-                        hideValueLabel: false,
-                        labelText     : '',
-                        name          : 'group2',
-                        valueLabelText: 'Option 2'
-                    },
-                    {
-                        ntype         : 'checkboxfield',
-                        hideValueLabel: false,
-                        labelText     : '',
-                        name          : 'group2',
-                        valueLabelText: 'Option 3'
-                    }
-                ],
+            header: {
+                iconCls: 'fas fa-check-square',
+                text   : 'CheckBox'
+            }
+        }, {
+            ntype: 'container',
 
-                tabButtonConfig: {
-                    iconCls: 'fas fa-check-square',
-                    text   : 'CheckBox'
-                }
+            itemDefaults: {
+                flex      : '0 1 auto',
+                labelWidth: '70px'
             },
-            {
-                ntype: 'container',
 
-                itemDefaults: {
-                    flex      : '0 1 auto',
-                    labelWidth: '70px'
-                },
+            layout: {
+                ntype: 'vbox'
+            },
 
-                layout: {
-                    ntype: 'vbox'
-                },
+            items: [{
+                ntype    : 'radiofield',
+                checked  : true,
+                labelText: 'Option 1',
+                name     : 'group1'
+            }, {
+                ntype    : 'radiofield',
+                labelText: 'Option 2',
+                name     : 'group1'
+            }, {
+                ntype    : 'radiofield',
+                labelText: 'Option 3',
+                name     : 'group1'
+            }, {
+                ntype         : 'radiofield',
+                checked       : true,
+                hideValueLabel: false,
+                labelText     : 'Group 2',
+                name          : 'group2',
+                style         : {marginTop: '20px'},
+                valueLabelText: 'Option 1'
+            }, {
+                ntype         : 'radiofield',
+                hideValueLabel: false,
+                labelText     : '',
+                name          : 'group2',
+                valueLabelText: 'Option 2'
+            }, {
+                ntype         : 'radiofield',
+                hideValueLabel: false,
+                labelText     : '',
+                name          : 'group2',
+                valueLabelText: 'Option 3'
+            }],
 
-                items: [
-                    {
-                        ntype    : 'radiofield',
-                        checked  : true,
-                        labelText: 'Option 1',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype    : 'radiofield',
-                        labelText: 'Option 2',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype    : 'radiofield',
-                        labelText: 'Option 3',
-                        name     : 'group1'
-                    },
-                    {
-                        ntype         : 'radiofield',
-                        checked       : true,
-                        hideValueLabel: false,
-                        labelText     : 'Group 2',
-                        name          : 'group2',
-                        style         : {marginTop: '20px'},
-                        valueLabelText: 'Option 1'
-                    },
-                    {
-                        ntype         : 'radiofield',
-                        hideValueLabel: false,
-                        labelText     : '',
-                        name          : 'group2',
-                        valueLabelText: 'Option 2'
-                    },
-                    {
-                        ntype         : 'radiofield',
-                        hideValueLabel: false,
-                        labelText     : '',
-                        name          : 'group2',
-                        valueLabelText: 'Option 3'
-                    }
-                ],
+            header: {
+                iconCls: 'far fa-circle',
+                text   : 'Radio'
+            }
+        }, {
+            ntype: 'container',
 
-                tabButtonConfig: {
-                    iconCls: 'far fa-circle',
-                    text   : 'Radio'
-                }
+            itemDefaults: {
+                flex      : '0 1 auto',
+                labelWidth: '120px'
             },
-            {
-                ntype: 'container',
 
-                itemDefaults: {
-                    flex      : '0 1 auto',
-                    labelWidth: '120px'
-                },
+            layout: {
+                ntype: 'vbox'
+            },
 
-                layout: {
-                    ntype: 'vbox'
-                },
+            items: [{
+                ntype    : 'rangefield',
+                labelText: '0-20, Step 1',
+                maxValue : 20,
+                minValue : 0,
+                value    : 10
+            }, {
+                ntype    : 'rangefield',
+                labelText: '0-20, Step 5',
+                maxValue : 20,
+                minValue : 0,
+                stepSize : 5,
+                value    : 10
+            }],
 
-                items: [
-                    {
-                        ntype    : 'rangefield',
-                        labelText: '0-20, Step 1',
-                        maxValue : 20,
-                        minValue : 0,
-                        value    : 10
-                    },
-                    {
-                        ntype    : 'rangefield',
-                        labelText: '0-20, Step 5',
-                        maxValue : 20,
-                        minValue : 0,
-                        stepSize : 5,
-                        value    : 10
-                    }
-                ],
+            header: {
+                iconCls: 'fa fa-exchange-alt',
+                text   : 'Range'
+            }
+        }, {
+            ntype: 'container',
 
-                tabButtonConfig: {
-                    iconCls: 'fa fa-exchange-alt',
-                    text   : 'Range'
-                }
+            itemDefaults: {
+                flex      : '0 1 auto',
+                labelWidth: '120px'
             },
-            {
-                ntype: 'container',
 
-                itemDefaults: {
-                    flex      : '0 1 auto',
-                    labelWidth: '120px'
-                },
-
-                layout: {
-                    ntype: 'vbox'
-                },
+            layout: {
+                ntype: 'vbox'
+            },
 
-                items: [
-                    {
-                        ntype    : 'numberfield',
-                        labelText: '0-20, Step 1',
-                        maxValue : 20,
-                        minValue : 0,
-                        value    : 10
-                    },
-                    {
-                        ntype    : 'numberfield',
-                        labelText: '0-20, Step 5',
-                        maxValue : 20,
-                        minValue : 0,
-                        stepSize : 5,
-                        value    : 10
-                    }
-                ],
-                tabButtonConfig: {
-                    iconCls: 'fa fa-sort-numeric-up',
-                    text   : 'Number'
-                }
+            items: [{
+                ntype    : 'numberfield',
+                labelText: '0-20, Step 1',
+                maxValue : 20,
+                minValue : 0,
+                value    : 10
+            }, {
+                ntype    : 'numberfield',
+                labelText: '0-20, Step 5',
+                maxValue : 20,
+                minValue : 0,
+                stepSize : 5,
+                value    : 10
+            }],
+            header: {
+                iconCls: 'fa fa-sort-numeric-up',
+                text   : 'Number'
+            }
+        }, {
+            header: {
+                iconCls: 'fa fa-calendar',
+                text   : 'Date'
             },
-            {
-                tabButtonConfig: {
-                    iconCls: 'fa fa-calendar',
-                    text   : 'Date'
-                },
-                vdom: {
-                    innerHTML: 'todo'
-                }
+            vdom: {
+                innerHTML: 'todo'
             }
-        ]
+        }]
     }
 }
 

package/examples/preloadingAssets/view/MainContainer.mjs

@@ -37,7 +37,7 @@ class MainContainer extends Viewport {
             },
 
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-user-astronaut',
                     text   : 'Bob'
                 },
@@ -47,7 +47,7 @@ class MainContainer extends Viewport {
                     src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/examples/ai_images/000150.jpg'
                 }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-user-ninja',
                     text   : 'Alice'
                 },

package/examples/{model → stateProvider}/advanced/MainContainer.mjs

@@ -1,29 +1,29 @@
-import ComponentModel          from '../../../src/model/Component.mjs';
 import DisplayField            from '../../../src/form/field/Display.mjs';
 import MainContainerController from './MainContainerController.mjs'
 import Panel                   from '../../../src/container/Panel.mjs';
+import StateProvider           from '../../../src/state/Provider.mjs';
 import TextField               from '../../../src/form/field/Text.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
- * @class Neo.examples.model.advanced.MainContainer
+ * @class Neo.examples.stateProvider.advanced.MainContainer
  * @extends Neo.container.Viewport
  */
 class MainContainer extends Viewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.advanced.MainContainer'
+         * @member {String} className='Neo.examples.stateProvider.advanced.MainContainer'
          * @protected
          */
-        className: 'Neo.examples.model.advanced.MainContainer',
+        className: 'Neo.examples.stateProvider.advanced.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
         controller: MainContainerController,
         /**
-         * @member {Object|Neo.model.Component} model
+         * @member {Object|Neo.state.Provider} stateProvider
          */
-        model: {
+        stateProvider: {
             data: {
                 button1Text: 'Button 1',
                 button3Text: 'Button 3'
@@ -42,7 +42,7 @@ class MainContainer extends Viewport {
             module   : Panel,
             reference: 'panel',
 
-            model: {
+            stateProvider: {
                 data: {
                     button2Text: 'Button 2'
                 }
@@ -64,7 +64,7 @@ class MainContainer extends Viewport {
 
                 items: [{
                     ntype: 'label',
-                    text : 'model.Component: advanced'
+                    text : 'state.Provider: advanced'
                 }, {
                     ntype: 'component',
                     flex : 1
@@ -142,14 +142,14 @@ class MainContainer extends Viewport {
                 text   : 'Add a third button & textfield'
             }, {
                 ntype  : 'button',
-                handler: 'onLogMainModelIntoConsoleButtonClick',
+                handler: 'onLogMainStateProviderIntoConsoleButtonClick',
                 style  : {marginTop: '1em'},
-                text   : 'Log main model into console'
+                text   : 'Log main stateProvider into console'
             }, {
                 ntype  : 'button',
-                handler: 'onLogChildModelIntoConsoleButtonClick',
+                handler: 'onLogChildStateProviderIntoConsoleButtonClick',
                 style  : {marginTop: '1em'},
-                text   : 'Log child model into console'
+                text   : 'Log child stateProvider into console'
             }]
         }]
     }

package/examples/{model → stateProvider}/advanced/MainContainerController.mjs

@@ -1,16 +1,16 @@
 import Controller from '../../../src/controller/Component.mjs';
 
 /**
- * @class Neo.examples.model.advanced.MainContainerController
+ * @class Neo.examples.stateProvider.advanced.MainContainerController
  * @extends Neo.controller.Component
  */
 class MainContainerController extends Controller {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.advanced.MainContainerController'
+         * @member {String} className='Neo.examples.stateProvider.advanced.MainContainerController'
          * @protected
          */
-        className: 'Neo.examples.model.advanced.MainContainerController'
+        className: 'Neo.examples.stateProvider.advanced.MainContainerController'
     }
 
     /**
@@ -81,15 +81,15 @@ class MainContainerController extends Controller {
     /**
      * @param {Object} data
      */
-    onLogChildModelIntoConsoleButtonClick(data) {
-        console.log(this.getReference('panel').model)
+    onLogChildStateProviderIntoConsoleButtonClick(data) {
+        console.log(this.getReference('panel').stateProvider)
     }
 
     /**
      * @param {Object} data
      */
-    onLogMainModelIntoConsoleButtonClick(data) {
-        console.log(this.getModel())
+    onLogMainStateProviderIntoConsoleButtonClick(data) {
+        console.log(this.getStateProvider())
     }
 
     /**
@@ -124,14 +124,14 @@ class MainContainerController extends Controller {
      */
     updateButton1Text(value) {
         // test to access a child model instead to check if the data value bubbles up
-        this.getReference('panel').getModel().setData('button1Text', value)
+        this.getReference('panel').setState('button1Text', value)
     }
 
     /**
      * @param {String} value
      */
     updateButton2Text(value) {
-        this.getReference('panel').getModel().setData({
+        this.getReference('panel').setState({
             button2Text: value
         })
     }
@@ -140,7 +140,7 @@ class MainContainerController extends Controller {
      * @param {String} value
      */
     updateButton3Text(value) {
-        this.getModel().data['button3Text'] = value
+        this.getStateProvider().data['button3Text'] = value
     }
 }
 

package/examples/stateProvider/advanced/app.mjs

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

package/examples/{model/dialog → stateProvider/advanced}/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <title>model.Component: dialog</title>
+    <title>state.Provider: advanced</title>
 </head>
 <body>
     <script src="../../../src/MicroLoader.mjs" type="module"></script>

package/examples/{model/inline → stateProvider/advanced}/neo-config.json

@@ -1,5 +1,5 @@
 {
-    "appPath"    : "examples/model/inline/app.mjs",
+    "appPath"    : "examples/stateProvider/advanced/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",

package/examples/{model → stateProvider}/dialog/EditUserDialog.mjs

@@ -3,16 +3,16 @@ import EditUserDialogController from './EditUserDialogController.mjs';
 import TextField                from '../../../src/form/field/Text.mjs';
 
 /**
- * @class Neo.examples.model.dialog.EditUserDialog
+ * @class Neo.examples.stateProvider.dialog.EditUserDialog
  * @extends Neo.dialog.Base
  */
 class EditUserDialog extends Dialog {
     static config = {
         /**
-         * @member {String} className='Neo.examples.model.dialog.EditUserDialog'
+         * @member {String} className='Neo.examples.stateProvider.dialog.EditUserDialog'
          * @protected
          */
-        className: 'Neo.examples.model.dialog.EditUserDialog',
+        className: 'Neo.examples.stateProvider.dialog.EditUserDialog',
         /**
          * @member {Object} containerConfig={style:{padding:'1em'}}
          */