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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.0.0-beta.1",
+    "version": "8.0.0-beta.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,7 +55,7 @@
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.1.0",
-        "marked": "^15.0.2",
+        "marked": "^15.0.3",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",

package/resources/data/deck/learnneo/pages/guides/{ViewModels.md → StateProviders.md}

@@ -1,19 +1,14 @@
-View models (VMs) in Neo.mjs are state providers.
-
 While Components can manage their own state using the Class Config System,
 you want to use VMs as soon as you want to share data properties with multiple child Components.
 
 Rules of thumb:
-1. Leaf Components inside the Component Tree (Container items) will most likely not need a VM.
-2. We can define multiple VMs as needed (they do communicate).
+1. Leaf Components inside the Component Tree (Container items) will not need a state provider.
+2. We can define multiple state providers as needed (they do communicate).
 3. We want to define shared state data properties as low inside the component tree as possible.
 
-We often reference a VM as `model.Component` (the class name inside Neo.mjs),
-other libraries or frameworks often call them Stores.
-
-Since we also have Data Stores (tabular data), we chose to use the name VM to avoid confusion.
+Other libraries or frameworks often call state providers "Stores".
 
-## Inline Models
+## Inline State Providers
 ### Direct Bindings
 <pre data-neo>
 import Button    from '../button/Base.mjs';
@@ -23,7 +18,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm1.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello',
                 world: 'world!'
@@ -43,11 +38,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -56,7 +51,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-We use a Container with a VM containing the data props `hello` and `world`.
+We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 2 Labels which bind their `text` config to a data prop directly.
 
 We can easily bind 1:1 to specific data props using the following syntax:</br>
@@ -71,7 +66,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm2.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello',
                 world: 'world!'
@@ -98,11 +93,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -111,7 +106,7 @@ class MainView extends Container {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-We use a Container with a VM containing the data props `hello` and `world`.
+We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 3 Labels which bind their `text` config to a combination of both data props.
 
 We are showcasing 3 different ways how you can define your binding (resulting in the same output).
@@ -124,12 +119,15 @@ We also added 2 Buttons to change the value of each data prop, so that we can se
 update right away.
 
 Let us take a look at the Button handler:</br>
-`data.component.getModel().setData({world: 'Neo.mjs!'})`
+`data.component.setState({world: 'Neo.mjs!'})`
+
+This is a shortcut syntax for:</br>
+`data.component.getStateProvider().setData({world: 'Neo.mjs!'})`
 
-data.component equals to the Button instance itself. Since the Button instance does not have its own VM,
-`getModel()` will return the closest VM inside the parent chain.
+data.component equals to the Button instance itself. Since the Button instance does not have its own stateProvider,
+`getStateProvider()` will return the closest stateProvider inside the parent chain.
 
-### Nested Inline Models
+### Nested Inline State Providers
 <pre data-neo>
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
@@ -138,7 +136,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm3.MainView',
-        model: {
+        stateProvider: {
             data: {
                 hello: 'Hello'
             }
@@ -146,7 +144,7 @@ class MainView extends Container {
         layout: 'fit',
         items : [{
             module: Container,
-            model: {
+            stateProvider: {
                 data: {
                     world: 'world!'
                 }
@@ -172,11 +170,11 @@ class MainView extends Container {
                 }
             }, {
                 module : Button,
-                handler: data => data.component.getModel().setData({hello: 'Hi'}),
+                handler: data => data.component.setState({hello: 'Hi'}),
                 text   : 'Change Hello'
             }, {
                 module : Button,
-                handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+                handler: data => data.component.setState({world: 'Neo.mjs!'}),
                 text   : 'Change World'
             }],
             layout: {ntype: 'vbox', align: 'start'}
@@ -191,15 +189,15 @@ The output of this demo is supposed to exactly look the same like the previous d
 This time we nest our Labels into a Container with a fit layout.
 Just for demo purposes, we want to avoid overnesting inside real apps.
 
-Our top level VM now only contains the `hello` data prop, and we added a second VM inside the nested Container
-which contains the `world` data prop.
+Our top level stateProvider now only contains the `hello` data prop, and we added a second stateProvider inside the 
+nested Container which contains the `world` data prop.
 
-As a result, the bindings for all 3 Labels contain a combination of data props which live inside different VMs.
+As a result, the bindings for all 3 Labels contain a combination of data props which live inside different stateProviders.
 As long as these VMs are inside the parent hierarchy this works fine.
 
-The same goes for the Button handlers: `setData()` will find the closest matching data prop inside the VM parent chain.
+The same goes for the Button handlers: `setData()` will find the closest matching data prop inside the stateProvider parent chain.
 
-We can even change data props which live inside different VMs at once. As easy as this:</br>
+We can even change data props which live inside different stateProviders at once. As easy as this:</br>
 `setData({hello: 'foo', world: 'bar'})`
 
 Hint: Modify the example code (Button handler) to try it out right away!
@@ -213,7 +211,7 @@ import Label     from '../component/Label.mjs';
 class MainView extends Container {
     static config = {
         className: 'Guides.vm4.MainView',
-        model: {
+        stateProvider: {
             data: {
                 user: {
                     firstname: 'Tobias',
@@ -235,11 +233,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({user: {firstname: 'Max'}}),
+            handler: data => data.component.setState({user: {firstname: 'Max'}}),
             text   : 'Change Firstname'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({'user.lastname': 'Rahder'}),
+            handler: data => data.component.setState({'user.lastname': 'Rahder'}),
             text   : 'Change Lastname'
         }],
         layout: {ntype: 'vbox', align: 'start'}
@@ -247,7 +245,7 @@ class MainView extends Container {
 }
 MainView = Neo.setupClass(MainView);
 </pre>
-Data props inside VMs can be nested. Our VM contains a `user` data prop as an object,
+Data props inside VMs can be nested. Our stateProvider contains a `user` data prop as an object,
 which contains the nested props `firstname` and `lastname`.
 
 We can bind to these nested props like before:</br>
@@ -256,10 +254,10 @@ We can bind to these nested props like before:</br>
 Any change of a nested data prop will directly get reflected into the bound components.
 
 We can update a nested data prop with passing its path:</br>
-`data => data.component.getModel().setData({'user.lastname': 'Rahder'})`
+`data => data.component.setState({'user.lastname': 'Rahder'})`
 
 Or we can directly pass the object containing the change(s):</br>
-`data => data.component.getModel().setData({user: {firstname: 'Max'}})`
+`data => data.component.setState({user: {firstname: 'Max'}})`
 
 Hint: This will not override left out nested data props (lastname in this case).
 
@@ -277,15 +275,11 @@ class EditUserDialogController extends Controller {
     }
 
     onFirstnameTextFieldChange(data) {
-        this.getModel().setData({
-            'user.firstname': data.value || ''
-        })
+        this.setState({'user.firstname': data.value || ''})
     }
 
     onLastnameTextFieldChange(data) {
-        this.getModel().setData({
-            'user.lastname': data.value || ''
-        })
+        this.setState({'user.lastname': data.value || ''})
     }
 }
 EditUserDialogController = Neo.setupClass(EditUserDialogController);
@@ -327,8 +321,8 @@ class MainContainerController extends Controller {
                 appName        : me.component.appName,
                 closeAction    : 'hide',
 
-                model: {
-                    parent: me.getModel()
+                stateProvider: {
+                    parent: me.getStateProvider()
                 }
             })
         } else {
@@ -342,7 +336,7 @@ class MainView extends Viewport {
     static config = {
         className : 'Guides.vm5.MainView',
         controller: MainContainerController,
-        model: {
+        stateProvider: {
             data: {
                 user: {
                     firstname: 'Tobias',
@@ -386,19 +380,19 @@ class MainView extends Viewport {
 MainView = Neo.setupClass(MainView);
 </pre>
 
-## Class based Models
-When your models contain many data props or need custom logic, you can easily move them into their own classes.
+## Class based State Providers
+When your stateProviders contain many data props or need custom logic, you can easily move them into their own classes.
 
 ### Direct Bindings
 <pre data-neo>
-import Button    from '../button/Base.mjs';
-import Container from '../container/Base.mjs';
-import Label     from '../component/Label.mjs';
-import ViewModel from '../model/Component.mjs';
+import Button        from '../button/Base.mjs';
+import Container     from '../container/Base.mjs';
+import Label         from '../component/Label.mjs';
+import StateProvider from '../state/Provider.mjs';
 
-class MainViewModel extends ViewModel {
+class MainViewStateProvider extends StateProvider {
     static config = {
-        className: 'Guides.vm6.MainViewModel',
+        className: 'Guides.vm6.MainViewStateProvider',
         data: {
             hello: 'Hello',
             world: 'world!'
@@ -410,12 +404,12 @@ class MainViewModel extends ViewModel {
         Neo.Main.log({value: `onDataPropertyChange: key: ${key}, value: ${value}, oldValue: ${oldValue}`})
     }
 }
-MainViewModel = Neo.setupClass(MainViewModel);
+MainViewStateProvider = Neo.setupClass(MainViewStateProvider);
 
 class MainView extends Container {
     static config = {
-        className: 'Guides.vm6.MainView',
-        model    : MainViewModel, // directly assign the imported module
+        className    : 'Guides.vm6.MainView',
+        stateProvider: MainViewStateProvider, // directly assign the imported module
 
         itemDefaults: {
             module: Label,
@@ -431,11 +425,11 @@ class MainView extends Container {
             }
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({hello: 'Hi'}),
+            handler: data => data.component.setState({hello: 'Hi'}),
             text   : 'Change Hello'
         }, {
             module : Button,
-            handler: data => data.component.getModel().setData({world: 'Neo.mjs!'}),
+            handler: data => data.component.setState({world: 'Neo.mjs!'}),
             text   : 'Change World'
         }],
         layout: {ntype: 'vbox', align: 'start'}

package/resources/data/deck/learnneo/tree.json

@@ -1,48 +1,48 @@
 {"data": [
-    {"name": "Welcome!",                                    "parentId": null,                                 "id": "Welcome" },
-    {"name": "Benefits",                                    "parentId": null,                "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                           "parentId": "Benefits",                           "id": "benefits.Introduction"},
-        {"name": "Off the Main Thread",                     "parentId": "Benefits",                           "id": "benefits.Multi-Threading"},
-        {"name": "Extreme Speed",                           "parentId": "Benefits",                           "id": "benefits.Speed"},
-        {"name": "Multi-Window Applications",               "parentId": "Benefits",                           "id": "benefits.Multi-Window"},
-        {"name": "Quick Application Development",           "parentId": "Benefits",                           "id": "benefits.Quick"},
-        {"name": "Complexity and Effort",                   "parentId": "Benefits",                           "id": "benefits.Effort"},
-        {"name": "Forms Engine",                            "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",           "parentId": "Benefits",                           "id": "benefits.Features"},
-    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                   "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
-        {"name": "Workspaces and Applications",             "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
-        {"name": "Describing a View",                       "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
-        {"name": "Events",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
-        {"name": "Component References",                    "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
-        {"name": "Extending Classes",                       "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
-        {"name": "Config",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
-        {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
-    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
-        {"name": "Earthquakes",                             "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
-        {"name": "Todo List",                               "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
-    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
-        {"name": "Instance Lifecycle",                      "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
-        {"name": "User Input (Forms)",                      "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
-        {"name": "Component and Container Basics",          "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
-        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",                            "id": "guides.ViewModels"},
-        {"name": "Custom Components",                       "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
-        {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
-            {"name": "Custom Events",                       "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
-            {"name": "DOM Events",                          "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
-        {"name": "Portal App",                              "parentId": "InDepth",                            "id": "guides.PortalApp"},
-        {"name": "Tables (Stores)",                         "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
-        {"name": "Multi-Window Applications",               "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
-        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
-            {"name": "Introduction",                        "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
-            {"name": "Example",                             "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
-        {"name": "Mixins",                                  "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
-    {"name": "JavaScript Classes",                          "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",        "parentId": "JavaScript",                         "id": "javascript.Classes"},
-        {"name": "Overriding Methods",                      "parentId": "JavaScript",                         "id": "javascript.Overrides"},
-        {"name": "Other JavaScript Class Features",         "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
-        {"name": "Super",                                   "parentId": "JavaScript",                         "id": "javascript.Super"},
-        {"name": "New Node",                                "parentId": "JavaScript",                         "id": "javascript.NewNode"}
+    {"name": "Welcome!",                                   "parentId": null,                                 "id": "Welcome" },
+    {"name": "Benefits",                                   "parentId": null,                "isLeaf": false, "id": "Benefits"},
+        {"name": "Introduction ",                          "parentId": "Benefits",                           "id": "benefits.Introduction"},
+        {"name": "Off the Main Thread",                    "parentId": "Benefits",                           "id": "benefits.Multi-Threading"},
+        {"name": "Extreme Speed",                          "parentId": "Benefits",                           "id": "benefits.Speed"},
+        {"name": "Multi-Window Applications",              "parentId": "Benefits",                           "id": "benefits.Multi-Window"},
+        {"name": "Quick Application Development",          "parentId": "Benefits",                           "id": "benefits.Quick"},
+        {"name": "Complexity and Effort",                  "parentId": "Benefits",                           "id": "benefits.Effort"},
+        {"name": "Forms Engine",                           "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
+        {"name": "Features and Benefits Summary",          "parentId": "Benefits",                           "id": "benefits.Features"},
+    {"name": "Getting Started",                            "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
+        {"name": "Setup",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
+        {"name": "Workspaces and Applications",            "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
+        {"name": "Describing a View",                      "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
+        {"name": "Events",                                 "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
+        {"name": "Component References",                   "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
+        {"name": "Extending Classes",                      "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
+        {"name": "Config",                                 "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
+        {"name": "Shared Bindable Data",                   "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
+    {"name": "Tutorials",                                  "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
+        {"name": "Rock Scissors Paper",                    "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
+        {"name": "Earthquakes",                            "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
+        {"name": "Todo List",                              "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
+    {"name": "Guides",                                     "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
+        {"name": "Instance Lifecycle",                     "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
+        {"name": "User Input (Forms)",                     "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
+        {"name": "Component and Container Basics",         "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
+        {"name": "Layouts",                                "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
+        {"name": "Shared Bindable Data (State Providers)", "parentId": "InDepth",                            "id": "guides.StateProviders"},
+        {"name": "Custom Components",                      "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
+        {"name": "Events",                                 "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
+            {"name": "Custom Events",                      "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
+            {"name": "DOM Events",                         "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                             "parentId": "InDepth",                            "id": "guides.PortalApp"},
+        {"name": "Tables (Stores)",                        "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
+        {"name": "Multi-Window Applications",              "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
+        {"name": "Main Thread Addons",                     "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
+            {"name": "Introduction",                       "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
+            {"name": "Example",                            "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
+        {"name": "Mixins",                                 "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
+    {"name": "JavaScript Classes",                         "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
+        {"name": "Classes, Properties, and Methods",       "parentId": "JavaScript",                         "id": "javascript.Classes"},
+        {"name": "Overriding Methods",                     "parentId": "JavaScript",                         "id": "javascript.Overrides"},
+        {"name": "Other JavaScript Class Features",        "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
+        {"name": "Super",                                  "parentId": "JavaScript",                         "id": "javascript.Super"},
+        {"name": "New Node",                               "parentId": "JavaScript",                         "id": "javascript.NewNode"}
 ]}

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.0.0-beta.1'
+     * @default '8.0.0-beta.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.0.0-beta.1'
+    version: '8.0.0-beta.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -272,11 +272,11 @@ class Base extends Component {
     afterSetMenu(value, oldValue) {
         if (value) {
             import('../menu/List.mjs').then(module => {
-                let me         = this,
-                    isArray    = Array.isArray(value),
-                    items      = isArray ? value : value.items,
-                    menuConfig = isArray ? {} : value,
-                    model      = me.getModel(),
+                let me            = this,
+                    isArray       = Array.isArray(value),
+                    items         = isArray ? value : value.items,
+                    menuConfig    = isArray ? {} : value,
+                    stateProvider = me.getStateProvider(),
                     {appName, theme, windowId} = me,
 
                     config = Neo.merge({
@@ -295,8 +295,8 @@ class Base extends Component {
                     config.items = items
                 }
 
-                if (model) {
-                    config.model = {parent: model}
+                if (stateProvider) {
+                    config.stateProvider = {parent: stateProvider}
                 }
 
                 me.menuList = Neo.create(config)

package/src/calendar/view/EditEventContainer.mjs

@@ -45,7 +45,7 @@ class EditEventContainer extends FormContainer {
          */
         endTimeFieldConfig: null,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Intl.DateTimeFormat|null} intlFormat_time=null
          * @protected
          */
@@ -177,7 +177,7 @@ class EditEventContainer extends FormContainer {
 
                 store: {
                     module  : CalendarStore,
-                    sourceId: me.model.getStore('calendars').id
+                    sourceId: me.stateProvider.getStore('calendars').id
                 },
 
                 ...me.calendarFieldConfig
@@ -250,7 +250,7 @@ class EditEventContainer extends FormContainer {
     onDeleteButtonClick(data) {
         let me = this;
 
-        me.getModel().getStore('events').remove(me.record);
+        me.getStateProvider().getStore('events').remove(me.record);
         me.unmount()
     }
 

package/src/calendar/view/MainContainer.mjs

@@ -1,11 +1,11 @@
-import CalendarsContainer    from './calendars/Container.mjs';
-import Container             from '../../container/Base.mjs';
-import DateSelector          from '../../component/DateSelector.mjs';
-import DateUtil              from '../../util/Date.mjs';
-import EditCalendarContainer from './calendars/EditContainer.mjs';
-import EditEventContainer    from './EditEventContainer.mjs';
-import MainContainerModel    from './MainContainerModel.mjs';
-import Toolbar               from '../../toolbar/Base.mjs';
+import CalendarsContainer         from './calendars/Container.mjs';
+import Container                  from '../../container/Base.mjs';
+import DateSelector               from '../../component/DateSelector.mjs';
+import DateUtil                   from '../../util/Date.mjs';
+import EditCalendarContainer      from './calendars/EditContainer.mjs';
+import EditEventContainer         from './EditEventContainer.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import Toolbar                    from '../../toolbar/Base.mjs';
 
 const todayDate = new Date();
 
@@ -102,10 +102,6 @@ class MainContainer extends Container {
          * @protected
          */
         layout: {ntype: 'vbox', align: 'stretch'},
-        /**
-         * @member {Neo.calendar.view.MainContainerModel} model=MainContainerModel
-         */
-        model: MainContainerModel,
         /**
          * @member {Neo.calendar.view.Component|null} monthComponent=null
          */
@@ -139,6 +135,10 @@ class MainContainer extends Container {
          * @member {Number} sideBarWidth=220
          */
         sideBarWidth: 220,
+        /**
+         * @member {Neo.calendar.view.MainContainerStateProvider} stateProvider=MainContainerStateProvider
+         */
+        stateProvider: MainContainerStateProvider,
         /**
          * @member {Boolean} useSettingsContainer_=true
          */
@@ -326,12 +326,12 @@ class MainContainer extends Container {
             let me = this;
 
             me._editCalendarContainer = value = Neo.create({
-                module  : EditCalendarContainer,
-                appName : me.appName,
-                model   : {parent: me.getModel()},
-                owner   : me,
-                width   : 250,
-                windowId: me.windowId,
+                module       : EditCalendarContainer,
+                appName      : me.appName,
+                owner        : me,
+                stateProvider: {parent: me.getStateProvider()},
+                width        : 250,
+                windowId     : me.windowId,
                 ...me.editCalendarContainerConfig
             })
         }
@@ -349,12 +349,12 @@ class MainContainer extends Container {
             let me = this;
 
             me._editEventContainer = value = Neo.create({
-                module  : EditEventContainer,
-                appName : me.appName,
-                model   : {parent: me.getModel()},
-                owner   : me,
-                width   : 250,
-                windowId: me.windowId,
+                module       : EditEventContainer,
+                appName      : me.appName,
+                owner        : me,
+                stateProvider: {parent: me.getStateProvider()},
+                width        : 250,
+                windowId     : me.windowId,
                 ...me.editEventContainerConfig
             })
         }
@@ -600,7 +600,7 @@ class MainContainer extends Container {
      * @param {String} data.value
      */
     onDateSelectorChange(data) {
-        data.oldValue !== undefined && this.getModel().setData('currentDate', new Date(`${data.value}T00:00:00.000Z`))
+        data.oldValue !== undefined && this.setState('currentDate', new Date(`${data.value}T00:00:00.000Z`))
     }
 
     /**
@@ -621,7 +621,7 @@ class MainContainer extends Container {
      * @param data
      */
     onTodayButtonClick(data) {
-        this.model.setData({
+        this.stateProvider.setData({
             currentDate: todayDate
         })
     }
@@ -656,7 +656,7 @@ class MainContainer extends Container {
 
         map[me.activeView]();
 
-        me.model.setData({currentDate})
+        me.stateProvider.setData({currentDate})
     }
 }
 

package/src/calendar/view/{MainContainerModel.mjs → MainContainerStateProvider.mjs}

@@ -1,21 +1,21 @@
 import CalendarsStore from '../store/Calendars.mjs';
 import ColorsStore    from '../store/Colors.mjs';
 import EventsStore    from '../store/Events.mjs';
-import Component      from '../../../src/model/Component.mjs';
+import StateProvider  from '../../../src/state/Provider.mjs';
 
 const todayDate = new Date();
 
 /**
- * @class Neo.calendar.view.MainContainerModel
- * @extends Neo.model.Component
+ * @class Neo.calendar.view.MainContainerStateProvider
+ * @extends Neo.state.Provider
  */
-class MainContainerModel extends Component {
+class MainContainerStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Neo.calendar.view.MainContainerModel'
+         * @member {String} className='Neo.calendar.view.MainContainerStateProvider'
          * @protected
          */
-        className: 'Neo.calendar.view.MainContainerModel',
+        className: 'Neo.calendar.view.MainContainerStateProvider',
         /**
          * @member {Object} data
          */
@@ -168,4 +168,4 @@ class MainContainerModel extends Component {
     }
 }
 
-export default Neo.setupClass(MainContainerModel);
+export default Neo.setupClass(MainContainerStateProvider);