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

package/.github/CODING_GUIDELINES.md

@@ -272,16 +272,16 @@ items: [HeaderContainer, {
     style      : {margin: '10px', marginTop: 0},
   
     items: [{
-        module         : () => import('./TableContainer.mjs'),
-        reference      : 'table-container',
-        tabButtonConfig: {
+        module   : () => import('./TableContainer.mjs'),
+        reference: 'table-container',
+        header   : {
             iconCls: 'fa fa-table',
             route  : 'mainview=table',
             text   : 'Table'
         }
     }, {
-        module         : () => import('./mapboxGl/Container.mjs'),
-        tabButtonConfig: {
+        module: () => import('./mapboxGl/Container.mjs'),
+        header: {
             iconCls: 'fa fa-globe-americas',
             route  : 'mainview=mapboxglmap',
             text   : 'Mapbox GL Map'

package/.github/CONCEPT.md

@@ -368,7 +368,7 @@ items: [HeaderContainer, {
             listeners: {leafItemClick: 'onApiListLeafClick'},
             reference: 'api-treelist',
 
-            tabButtonConfig: {
+            header: {
                 iconCls: 'fa fa-code',
                 text   : 'API'
             }
@@ -377,7 +377,7 @@ items: [HeaderContainer, {
             listeners: {leafItemClick: 'onTutorialListLeafClick'},
             reference: 'tutorials-treelist',
 
-            tabButtonConfig: {
+            header: {
                 iconCls: 'fa fa-hands-helping',
                 text   : 'Tutorials'
             }
@@ -386,7 +386,7 @@ items: [HeaderContainer, {
             listeners: {leafItemClick: 'onExamplesListLeafClick'},
             reference: 'examples-treelist',
 
-            tabButtonConfig: {
+            header: {
                 iconCls: 'fa fa-desktop',
                 text   : 'Examples'
             }
@@ -437,14 +437,14 @@ items: [{
         flex       : 3,
 
         items: [{
-            ntype          : 'component',
-            cls            : ['neo-examples-tab-component'],
-            style          : {padding: '20px'},
-            tabButtonConfig: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
-            vdom           : {innerHTML: 'todo'}
+            ntype : 'component',
+            cls   : ['neo-examples-tab-component'],
+            header: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
+            style : {padding: '20px'},
+            vdom  : {innerHTML: 'todo'}
         }, {
-            module         : PreviewList,
-            tabButtonConfig: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}
+            module: PreviewList,
+            header: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}
         }]
     }, {
         module: TagListComponent,

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-alpha.2'
+         * @member {String} version='8.0.0-beta.2'
          */
-        version: '8.0.0-alpha.2'
+        version: '8.0.0-beta.2'
     }
 
     /**

package/apps/colors/view/Viewport.mjs

@@ -1,10 +1,10 @@
-import BaseViewport       from '../../../src/container/Viewport.mjs';
-import BarChartComponent  from './BarChartComponent.mjs';
-import HeaderToolbar      from './HeaderToolbar.mjs';
-import PieChartComponent  from './PieChartComponent.mjs';
-import TableContainer     from './TableContainer.mjs';
-import ViewportController from './ViewportController.mjs';
-import ViewportModel      from './ViewportModel.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import BarChartComponent     from './BarChartComponent.mjs';
+import HeaderToolbar         from './HeaderToolbar.mjs';
+import PieChartComponent     from './PieChartComponent.mjs';
+import TableContainer        from './TableContainer.mjs';
+import ViewportController    from './ViewportController.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
  * @class Colors.view.Viewport
@@ -46,9 +46,9 @@ class Viewport extends BaseViewport {
             reference: 'bar-chart'
         }],
         /**
-         * @member {Neo.model.Component} model=ViewportModel
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
-        model: ViewportModel
+        stateProvider: ViewportStateProvider
     }
 }
 

package/apps/colors/view/ViewportController.mjs

@@ -48,7 +48,7 @@ class ViewportController extends Controller {
 
         url = `${basePath}apps/colors/childapps/widget/index.html?name=${name}`;
 
-        if (me.getModel().getData('openWidgetsAsPopups')) {
+        if (me.getStateProvider().getData('openWidgetsAsPopups')) {
             let widget                     = me.getReference(name),
                 winData                    = await Neo.Main.getWindowData({windowId} ),
                 rect                       = await me.component.getDomRect(widget.vdom.id), // using the vdom id to always get the top-level node
@@ -152,7 +152,7 @@ class ViewportController extends Controller {
      * @param {Object} data
      */
     onChangeOpenWidgetsAsPopups(data) {
-        this.getModel().setData('openWidgetsAsPopups', data.value)
+        this.setState('openWidgetsAsPopups', data.value)
     }
 
     /**
@@ -206,7 +206,7 @@ class ViewportController extends Controller {
         let me           = this,
             intervalTime = 1000 / 60; // assuming 60 FPS
 
-        me.getModel().setData({isUpdating: true});
+        me.setState({isUpdating: true});
 
         if (!me.intervalId) {
             me.intervalId = setInterval(() => {
@@ -221,7 +221,7 @@ class ViewportController extends Controller {
     onStopButtonClick(data) {
         let me = this;
 
-        me.getModel().setData({isUpdating: false});
+        me.setState({isUpdating: false});
 
         if (me.intervalId) {
             clearInterval(me.intervalId);
@@ -244,11 +244,11 @@ class ViewportController extends Controller {
      * @param {Number|Object|null} value The new VM data property value
      */
     updateDataProperty(data, name, value) {
-        let model = this.getModel();
+        let stateProvider = this.getStateProvider();
 
-        model.setData(name, value);
+        stateProvider.setData(name, value);
 
-        if (data.oldValue !== null && !model.getData('isUpdating')) {
+        if (data.oldValue !== null && !stateProvider.getData('isUpdating')) {
             this.updateWidgets()
         }
     }
@@ -265,7 +265,7 @@ class ViewportController extends Controller {
         } else {
             // Depending on the delay of the Socket Connection,
             // the next data package could still contain the old settings
-            if (this.getModel().getData('amountRows') === records.length) {
+            if (this.getStateProvider().getData('amountRows') === records.length) {
                 store.data = records
             }
         }
@@ -275,13 +275,13 @@ class ViewportController extends Controller {
      *
      */
     updateWidgets() {
-        let me    = this,
-            model = me.getModel();
+        let me            = this,
+            stateProvider = me.getStateProvider();
 
         Colors.backend.ColorService.read({
-            amountColors : model.getData('amountColors'),
-            amountColumns: model.getData('amountColumns'),
-            amountRows   : model.getData('amountRows')
+            amountColors : stateProvider.getData('amountColors'),
+            amountColumns: stateProvider.getData('amountColumns'),
+            amountRows   : stateProvider.getData('amountRows')
         }).then(response => {
             if (!me.isDestroyed) {
                 let {data} = response;

package/apps/colors/view/{ViewportModel.mjs → ViewportStateProvider.mjs}

@@ -1,17 +1,17 @@
-import Component   from '../../../src/model/Component.mjs';
-import ColorsStore from '../store/Colors.mjs';
+import ColorsStore   from '../store/Colors.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
 
 /**
- * @class Colors.view.ViewportModel
- * @extends Neo.model.Component
+ * @class Colors.view.ViewportStateProvider
+ * @extends Neo.state.Provider
  */
-class ViewportModel extends Component {
+class ViewportStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Colors.view.ViewportModel'
+         * @member {String} className='Colors.view.ViewportStateProvider'
          * @protected
          */
-        className: 'Colors.view.ViewportModel',
+        className: 'Colors.view.ViewportStateProvider',
         /**
          * @member {Object} data
          */
@@ -48,4 +48,4 @@ class ViewportModel extends Component {
     }
 }
 
-export default Neo.setupClass(ViewportModel);
+export default Neo.setupClass(ViewportStateProvider);

package/apps/covid/view/MainContainer.mjs

@@ -1,9 +1,9 @@
-import FooterContainer         from './FooterContainer.mjs';
-import HeaderContainer         from './HeaderContainer.mjs';
-import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.mjs';
-import TabContainer            from '../../../src/tab/Container.mjs';
-import Viewport                from '../../../src/container/Viewport.mjs';
+import FooterContainer            from './FooterContainer.mjs';
+import HeaderContainer            from './HeaderContainer.mjs';
+import MainContainerController    from './MainContainerController.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import TabContainer               from '../../../src/tab/Container.mjs';
+import Viewport                   from '../../../src/container/Viewport.mjs';
 
 /**
  * @class Covid.view.MainContainer
@@ -36,45 +36,45 @@ class MainContainer extends Viewport {
             style      : {margin: '10px', marginTop: 0},
 
             items: [{
-                module         : () => import('./TableContainer.mjs'),
-                reference      : 'table-container',
-                tabButtonConfig: {
+                module   : () => import('./TableContainer.mjs'),
+                reference: 'table-container',
+                header   : {
                     iconCls: 'fa fa-table',
                     route  : 'mainview=table',
                     text   : 'Table'
                 }
             }, {
-                module         : () => import('./mapboxGl/Container.mjs'),
-                tabButtonConfig: {
+                module: () => import('./mapboxGl/Container.mjs'),
+                header: {
                     iconCls: 'fa fa-globe-americas',
                     route  : 'mainview=mapboxglmap',
                     text   : 'Mapbox GL Map'
                 }
             }, {
-                module         : () => import('./WorldMapContainer.mjs'),
-                tabButtonConfig: {
+                module: () => import('./WorldMapContainer.mjs'),
+                header: {
                     iconCls: 'fa fa-globe-americas',
                     route  : 'mainview=worldmap',
                     text   : 'World Map'
                 }
             }, {
-                module         : () => import('./GalleryContainer.mjs'),
-                tabButtonConfig: {
+                module: () => import('./GalleryContainer.mjs'),
+                header: {
                     iconCls: 'fa fa-images',
                     route  : 'mainview=gallery',
                     text   : 'Gallery'
                 }
             }, {
-                module         : () => import('./HelixContainer.mjs'),
-                tabButtonConfig: {
+                module: () => import('./HelixContainer.mjs'),
+                header: {
                     iconCls: 'fa fa-dna',
                     route  : 'mainview=helix',
                     text   : 'Helix'
                 }
             }, {
-                module         : () => import('./AttributionComponent.mjs'),
-                reference      : 'attribution',
-                tabButtonConfig: {
+                module   : () => import('./AttributionComponent.mjs'),
+                reference: 'attribution',
+                header   : {
                     iconCls: 'fa fa-copyright',
                     route  : 'mainview=attribution',
                     text   : 'Attribution'
@@ -86,9 +86,9 @@ class MainContainer extends Viewport {
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
-         * @member {Neo.model.Component} model=MainContainerModel
+         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          */
-        model: MainContainerModel
+        stateProvider: MainContainerStateProvider
     }
 }
 

package/apps/covid/view/MainContainerController.mjs

@@ -119,16 +119,14 @@ class MainContainerController extends ComponentController {
     applySummaryData(data) {
         let me        = this,
             container = me.getReference('total-stats'),
-            vdom      = container.vdom;
+            vdom;
 
         me.summaryData = data;
 
-        vdom.cn[0].cn[1].html = Util.formatNumber({value: data.cases});
-        vdom.cn[1].cn[1].html = Util.formatNumber({value: data.active});
-        vdom.cn[2].cn[1].html = Util.formatNumber({value: data.recovered});
-        vdom.cn[3].cn[1].html = Util.formatNumber({value: data.deaths});
-
-        container.update();
+        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});     container.items[0].update();
+        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});    container.items[1].update();
+        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered}); container.items[2].update();
+        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});    container.items[3].update();
 
         container = me.getReference('last-update');
         vdom      = container.vdom;
@@ -239,7 +237,7 @@ class MainContainerController extends ComponentController {
                 record = value && store.find('country', value)?.[0];
             }
 
-            this.getModel().setData({
+            this.setState({
                 country      : value,
                 countryRecord: record || null
             });
@@ -268,7 +266,7 @@ class MainContainerController extends ComponentController {
             return
         }
 
-        me.getModel().setData({
+        me.setState({
             country: country || null
         });
 
@@ -290,7 +288,7 @@ class MainContainerController extends ComponentController {
                 me.mapboxglMapHasData = true;
             }
 
-            countryRecord = me.getModel().data.countryRecord;
+            countryRecord = me.getStateProvider().data.countryRecord;
             countryRecord && MainContainerController.selectMapboxGlCountry(activeView, countryRecord);
 
             activeView.autoResize();

package/apps/covid/view/{MainContainerModel.mjs → MainContainerStateProvider.mjs}

@@ -1,16 +1,16 @@
-import Component from '../../../src/model/Component.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
 
 /**
- * @class Covid.view.MainContainerModel
- * @extends Neo.model.Component
+ * @class Covid.view.MainContainerStateProvider
+ * @extends Neo.state.Provider
  */
-class MainContainerModel extends Component {
+class MainContainerStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Covid.view.MainContainerModel'
+         * @member {String} className='Covid.view.MainContainerStateProvider'
          * @protected
          */
-        className: 'Covid.view.MainContainerModel',
+        className: 'Covid.view.MainContainerStateProvider',
         /**
          * @member {Object} data
          */
@@ -45,4 +45,4 @@ class MainContainerModel extends Component {
     }
 }
 
-export default Neo.setupClass(MainContainerModel);
+export default Neo.setupClass(MainContainerStateProvider);

package/apps/covid/view/TableContainer.mjs

@@ -127,7 +127,7 @@ class TableContainer extends Container {
                         reference: 'line-chart',
                     }],
 
-                    tabButtonConfig: {
+                    header: {
                         iconCls: 'fa fa-chart-line',
                         text   : 'Chart'
                     }
@@ -150,7 +150,7 @@ class TableContainer extends Container {
             parentId : me.id,
             reference: 'historical-data-table',
 
-            tabButtonConfig: {
+            header: {
                 iconCls: 'fa fa-table',
                 text   : 'Table'
             },

package/apps/covid/view/TableContainerController.mjs

@@ -97,7 +97,7 @@ class TableContainerController extends ComponentController {
             }
 
             // the array is sorted by date ASC
-            Object.assign(dataArray[0], {
+            dataArray[0] && Object.assign(dataArray[0], {
                 dailyActive   : dataArray[0].active,
                 dailyCases    : dataArray[0].cases,
                 dailyDeaths   : dataArray[0].deaths,

package/apps/form/view/FormContainerController.mjs

@@ -30,14 +30,14 @@ class FormContainerController extends Component {
      * @param {Object} data
      */
     onNextPageButtonClick(data) {
-        this.getModel().data.activeIndex++;
+        this.getStateProvider().data.activeIndex++;
     }
 
     /**
      * @param {Object} data
      */
     onPrevPageButtonClick(data) {
-        this.getModel().data.activeIndex--;
+        this.getStateProvider().data.activeIndex--;
     }
 
     /**

package/apps/form/view/SideNavList.mjs

@@ -64,14 +64,14 @@ class SideNavList extends List {
     }
 
     /**
-     * Saves activeIndex & activeTitle into the closest view model
+     * Saves activeIndex & activeTitle into the closest stateProvider
      * @param {String[]} items
      */
     onSelect(items) {
         let me     = this,
             record = me.store.get(me.getItemRecordId(items[0]));
 
-        me.getModel().setData({
+        me.setState({
             activeIndex: record.cardIndex,
             activeTitle: record.name
         })
@@ -89,7 +89,7 @@ class SideNavList extends List {
             }
         });
 
-        this.getModel().data.maxIndex = maxIndex;
+        this.getStateProvider().data.maxIndex = maxIndex;
 
         super.onStoreLoad()
     }

package/apps/form/view/Viewport.mjs

@@ -1,8 +1,8 @@
-import BaseViewport       from '../../../src/container/Viewport.mjs';
-import FormContainer      from './FormContainer.mjs';
-import SideNavList        from './SideNavList.mjs';
-import ViewportController from './ViewportController.mjs';
-import ViewportModel      from './ViewportModel.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import FormContainer         from './FormContainer.mjs';
+import SideNavList           from './SideNavList.mjs';
+import ViewportController    from './ViewportController.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
  * @class Form.view.Viewport
@@ -49,9 +49,9 @@ class Viewport extends BaseViewport {
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
-         * @member {Neo.model.Component} model=ViewportModel
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
-        model: ViewportModel
+        stateProvider: ViewportStateProvider
     }
 }
 

package/apps/form/view/ViewportController.mjs

@@ -32,7 +32,7 @@ class ViewportController extends Component {
      */
     async onValidatePageButtonClick(data) {
         let me          = this,
-            activeIndex = me.getModel().data.activeIndex,
+            activeIndex = me.getStateProvider().data.activeIndex,
             activeCard  = me.getReference('pages-container').items[activeIndex],
             formValues  = await activeCard.getSubmitValues();
 
@@ -48,10 +48,10 @@ class ViewportController extends Component {
      */
     async updateRecordValidityState(pageIndex=null) {
         let me             = this,
-            model          = me.getModel(),
+            stateProvider  = me.getStateProvider(),
             pagesContainer = me.getReference('pages-container'),
             sideNav        = me.getReference('side-nav'),
-            store          = model.getStore('sideNav'),
+            store          = stateProvider.getStore('sideNav'),
             i              = 0,
             len            = pagesContainer.items.length,
             formState, listIndex, page;
@@ -63,7 +63,7 @@ class ViewportController extends Component {
 
         for (; i < len; i++) {
             page      = pagesContainer.items[i];
-            listIndex = sideNav.getActiveIndex(i);
+            listIndex = sideNav.getSelectedIndex(i);
             formState = await page.getFormState();
 
             store.getAt(listIndex).formState = formState

package/apps/form/view/{ViewportModel.mjs → ViewportStateProvider.mjs}

@@ -1,17 +1,17 @@
-import Component    from '../../../src/model/Component.mjs';
-import SideNavStore from '../store/SideNav.mjs'
+import SideNavStore  from '../store/SideNav.mjs'
+import StateProvider from '../../../src/state/Provider.mjs';
 
 /**
- * @class Form.view.ViewportModel
- * @extends Neo.model.Component
+ * @class Form.view.ViewportStateProvider
+ * @extends Neo.state.Provider
  */
-class ViewportModel extends Component {
+class ViewportStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Form.view.ViewportModel'
+         * @member {String} className='Form.view.ViewportStateProvider'
          * @protected
          */
-        className: 'Form.view.ViewportModel',
+        className: 'Form.view.ViewportStateProvider',
         /**
          * @member {Object} data
          */
@@ -90,4 +90,4 @@ class ViewportModel extends Component {
     }
 }
 
-export default Neo.setupClass(ViewportModel);
+export default Neo.setupClass(ViewportStateProvider);

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-10-18",
+      "datePublished": "2024-11-29",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/examples_devmode.json

@@ -53,9 +53,9 @@
 }, {
     "id"       : 15,
     "image"    : "devmode/model-component-example.png",
-    "name"     : "View Models Example",
-    "sourceUrl": "examples/model/advanced",
-    "url"      : "examples/model/advanced/index.html"
+    "name"     : "State Provider Example",
+    "sourceUrl": "examples/stateProvider/advanced",
+    "url"      : "examples/stateProvider/advanced/index.html"
 }, {
     "id"       : 14,
     "image"    : "devmode/dragdrop.png",

package/apps/portal/resources/data/examples_dist_dev.json

@@ -53,9 +53,9 @@
 }, {
     "id"       : 14,
     "image"    : "devmode/model-component-example.png",
-    "name"     : "View Models Example",
-    "sourceUrl": "examples/model/advanced",
-    "url"      : "dist/development/examples/model/advanced/index.html"
+    "name"     : "State Provider Example",
+    "sourceUrl": "examples/stateProvider/advanced",
+    "url"      : "dist/development/examples/stateProvider/advanced/index.html"
 }, {
     "id"       : 13,
     "image"    : "devmode/dragdrop.png",

package/apps/portal/resources/data/examples_dist_prod.json

@@ -53,9 +53,9 @@
 }, {
     "id"       : 14,
     "image"    : "devmode/model-component-example.png",
-    "name"     : "View Models Example",
-    "sourceUrl": "examples/model/advanced",
-    "url"      : "dist/production/examples/model/advanced/index.html"
+    "name"     : "State Provider Example",
+    "sourceUrl": "examples/stateProvider/advanced",
+    "url"      : "dist/production/examples/stateProvider/advanced/index.html"
 }, {
     "id"       : 13,
     "image"    : "devmode/dragdrop.png",