neo.mjs 8.0.0-beta.1 → 8.0.0

package/apps/ServiceWorker.mjs

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

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
@@ -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,15 +119,16 @@ 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.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});
+        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});
+        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered});
+        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});
 
+        container.updateDepth = 2;
         container.update();
 
         container = me.getReference('last-update');
@@ -239,7 +240,7 @@ class MainContainerController extends ComponentController {
                 record = value && store.find('country', value)?.[0];
             }
 
-            this.getModel().setData({
+            this.setState({
                 country      : value,
                 countryRecord: record || null
             });
@@ -268,7 +269,7 @@ class MainContainerController extends ComponentController {
             return
         }
 
-        me.getModel().setData({
+        me.setState({
             country: country || null
         });
 
@@ -290,7 +291,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/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-11-21",
+      "datePublished": "2024-12-14",
       "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",

package/apps/portal/view/Viewport.mjs

@@ -1,9 +1,9 @@
-import BaseViewport       from '../../../src/container/Viewport.mjs';
-import Container          from '../../../src/container/Base.mjs';
-import HeaderToolbar      from './HeaderToolbar.mjs';
-import NeoArray           from '../../../src/util/Array.mjs';
-import ViewportController from './ViewportController.mjs';
-import ViewportModel      from './ViewportModel.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import HeaderToolbar         from './HeaderToolbar.mjs';
+import NeoArray              from '../../../src/util/Array.mjs';
+import ViewportController    from './ViewportController.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
  * @class Portal.view.Viewport
@@ -55,10 +55,6 @@ class Viewport extends BaseViewport {
                 {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
         }],
-        /**
-         * @member {Neo.model.Component} model=ViewportModel
-         */
-        model: ViewportModel,
         /**
          * @member {Boolean} monitorSize=true
          */
@@ -67,7 +63,11 @@ class Viewport extends BaseViewport {
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
          */
-        size_: null
+        size_: null,
+        /**
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         */
+        stateProvider: ViewportStateProvider
     }
 
     /**
@@ -96,7 +96,7 @@ class Viewport extends BaseViewport {
             NeoArray.add(   cls, 'portal-size-' + value);
             me.cls = cls;
 
-            me.model.setData({size: value});
+            me.stateProvider.setData({size: value});
 
             me.controller.size = value
         }

package/apps/portal/view/ViewportStateProvider.mjs

@@ -0,0 +1,27 @@
+import StateProvider from '../../../src/state/Provider.mjs';
+
+/**
+ * @class Portal.view.ViewportStateProvider
+ * @extends Neo.state.Provider
+ */
+class ViewportStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.ViewportStateProvider'
+         * @protected
+         */
+        className: 'Portal.view.ViewportStateProvider',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * Values are: large, medium, small, xSmall, null
+             * @member {String|null} size
+             */
+            size: null
+        }
+    }
+}
+
+export default Neo.setupClass(ViewportStateProvider);

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.0.0-beta.1'
+                html  : 'v8.0.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -174,7 +174,7 @@ class ContentComponent extends Component {
     async doFetchContent(record) {
         let me                  = this,
             {appName, windowId} = me,
-            path                = me.getModel().getData('contentPath'),
+            path                = me.getStateProvider().getData('contentPath'),
             baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
 
         path += `/pages/${record.id.replaceAll('.', '/')}.md`;
@@ -380,7 +380,7 @@ class ContentComponent extends Component {
             }
         });
 
-        me.getModel().getStore('contentSections').data = storeData;
+        me.getStateProvider().getStore('contentSections').data = storeData;
 
         return contentArray.join('\n')
     }

package/apps/portal/view/learn/ContentTreeList.mjs

@@ -83,7 +83,7 @@ class ContentTreeList extends TreeList {
     onStoreLoad() {
         super.onStoreLoad();
 
-        this.getModel().data.countPages = this.store.getCount()
+        this.getStateProvider().data.countPages = this.store.getCount()
     }
 }
 

package/apps/portal/view/learn/MainContainer.mjs

@@ -1,10 +1,10 @@
-import Container               from '../../../../src/container/Base.mjs';
-import ContentTreeList         from './ContentTreeList.mjs';
-import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.mjs';
-import PageContainer           from './PageContainer.mjs';
-import PageSectionsContainer   from './PageSectionsContainer.mjs';
-import Splitter                from '../../../../src/component/Splitter.mjs';
+import Container                  from '../../../../src/container/Base.mjs';
+import ContentTreeList            from './ContentTreeList.mjs';
+import MainContainerController    from './MainContainerController.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import PageContainer              from './PageContainer.mjs';
+import PageSectionsContainer      from './PageSectionsContainer.mjs';
+import Splitter                   from '../../../../src/component/Splitter.mjs';
 
 /**
  * @class Portal.view.learn.MainContainer
@@ -64,9 +64,9 @@ class MainContainer extends Container {
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
-         * @member {Neo.model.Component} model=MainContainerModel
+         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
          */
-        model: MainContainerModel
+        stateProvider: MainContainerStateProvider
     }
 }