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

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/resources/data/deck/training/pages/2022-12-27T21-55-23-144Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-28T17-11-34-653Z.md

@@ -13,18 +13,18 @@ Give it the `ntype:'yelp-businesses-tabs',`.
 
 It needs *two* tabs, with the tab button text set to 'Map' and 'Table'.
 
-Remember that a tab is configured with the `tabButtonConfig`, and you'll use the
+Remember that a tab is configured with the `header`, and you'll use the
 `html` config as a placeholder to indicate that a map and a table will eventually
 be used. The generated class already has two tabs. 
 
-The first tab shoudl end up looking like this. 
+The first tab should end up looking like this. 
 
     {
-        ntype: 'component',
-        html: 'The map goes here',
-        tabButtonConfig: {
+        ntype : 'component',
+        html  : 'The map goes here',
+        header: {
             text: 'Map'
-        },
+        }
     }
 
 

package/resources/data/deck/training/pages/2022-12-29T18-36-08-226Z.md

@@ -33,7 +33,7 @@ to inspect it, and run methods on it.
 Now add a new tab: 
 
     tabContainer.add({
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Hi there!'
         },
@@ -103,4 +103,4 @@ and change the value.
 Clear the console and do another _Ctrl-right-click_, then right-click on the button component logged in 
 the console and choose _Store object as global variable_. It'll use a value like _temp1_.
 
-Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.
+Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.

package/resources/data/deck/training/pages/2022-12-29T18-36-56-893Z.md

@@ -80,7 +80,7 @@ class MainContainer extends Viewport {
             },
 
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
@@ -88,7 +88,7 @@ class MainContainer extends Viewport {
                     innerHTML: 'Welcome to your new Neo App.'
                 }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-08-919Z.md

@@ -26,13 +26,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-20-344Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2023-01-01T21-11-58-025Z.md

@@ -14,12 +14,12 @@ class Simple extends Base {
 items: [{
     module: Simple
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 
 }, {
     module: Simple
     foo: 2, // This value is used for the instance
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 }],
-</pre>
+</pre>

package/resources/data/deck/training/pages/2023-01-16T20-24-09-690Z.md

@@ -1,23 +1,23 @@
 A tab container is a card-layout container with a tab bar and styled buttons.
 Do not specify a `layout` for tab containers.
 
-The buttons are configured via `tabButtonConfig`
+The buttons are configured via `header`
 
     activeIndex: 2,
     tabBarPosition: 'left', // top, right, bottom, left
     itemDefaults: { module: Button },
     items: [{
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Tab 1'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-play-circle',
             text: 'Tab 2'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-bell',
             text: 'Tab 3'
         }

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -19,7 +19,7 @@ in the `afterSetBusiness()` method.
     items: [{
         module: Component,
         reference: 'view',
-        tabButtonConfig: {
+        header: {
             text: 'View'
         },
         style: {
@@ -33,7 +33,7 @@ in the `afterSetBusiness()` method.
         }
     }, {
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         }
     }]
@@ -192,4 +192,4 @@ Here's one way to code it. How does this compare to your solution?
 
 The view tab will become more and more complicated as we add content.
 It should be refactored into its own view class to isolate that complexity.
-We won't bother, but on a project that would be the right thing to do.
+We won't bother, but on a project that would be the right thing to do.

package/resources/data/deck/training/pages/2023-02-05T17-45-40-114Z.md

@@ -16,7 +16,7 @@ Configure the form to use vbox, along with some other configs.
     {
         module: Form,
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         },
         style: {

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.0.0-alpha.2'
+     * @default '8.0.0-beta.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.0.0-alpha.2'
+    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);

package/src/calendar/view/SettingsContainer.mjs

@@ -89,44 +89,29 @@ class SettingsContainer extends Container {
             items: [{
                 module: () => import('./settings/GeneralContainer.mjs'),
                 flag  : 'general',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'General'
-                }
+                header: {text: 'General'},
+                style : {padding: '20px'}
             }, {
-                ntype: 'component',
-                flag : 'day',
-                html : 'Day',
-                style: {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Day'
-                }
+                ntype : 'component',
+                flag  : 'day',
+                header: {text: 'Day'},
+                html  : 'Day',
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/WeekContainer.mjs'),
                 flag  : 'week',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Week'
-                }
+                header: {text: 'Week'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/MonthContainer.mjs'),
                 flag  : 'month',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Month'
-                }
+                header: {text: 'Month'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/YearContainer.mjs'),
                 flag  : 'year',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Year'
-                }
+                header: {text: 'Year'},
+                style : {padding: '20px'}
             }],
 
             listeners: {

package/src/calendar/view/YearComponent.mjs

@@ -44,7 +44,7 @@ class YearComponent extends Component {
          */
         cachedUpdate: null,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore_: null,
@@ -73,7 +73,7 @@ class YearComponent extends Component {
          */
         eventIndicatorMedium_: 2,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Neo.calendar.store.Events|null} eventStore_=null
          */
         eventStore_: null,
@@ -94,7 +94,7 @@ class YearComponent extends Component {
          */
         isUpdating_: false,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
          */
         locale_: Neo.config.locale,
@@ -131,7 +131,7 @@ class YearComponent extends Component {
          */
         showDisabledDays_: true,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
          */
         showWeekends_: true,
@@ -166,7 +166,7 @@ class YearComponent extends Component {
         ]},
         /**
          * 0-6 => Sun-Sat
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Number} weekStartDay_=0
          */
         weekStartDay_: 0

package/src/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,11 @@ class ColorsList extends List {
         bind: {
             store: 'stores.colors'
         },
+        /**
+         * Set this to true in case a keyboard navigation should immediately select the focussed item
+         * @member {Boolean} selectOnFocus=true
+         */
+        selectOnFocus: true,
         /**
          * @member {Boolean} useWrapperNode=false
          */