neo.mjs 8.0.0-beta.1 → 8.0.0

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/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/EditContainer.mjs

@@ -166,7 +166,7 @@ class EditContainer extends FormContainer {
 
         // todo: we could add a confirm dialog
 
-        me.getModel().getStore('calendars').remove(me.record);
+        me.getStateProvider().getStore('calendars').remove(me.record);
         me.unmount();
     }
 

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

@@ -148,7 +148,7 @@ class List extends ComponentList {
      * @param {String[]} items
      */
     onSelect(items) {
-        this.getModel().setData('activeCalendarId', this.getItemRecordId(items[0]))
+        this.setState('activeCalendarId', this.getItemRecordId(items[0]))
     }
 
     /**

package/src/calendar/view/month/Component.mjs

@@ -39,7 +39,7 @@ class Component extends BaseComponent {
             weekStartDay : data => data.weekStartDay
         },
         /**
-         * Bound to the view model
+         * Bound to the state provider
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore_: null,
@@ -56,12 +56,12 @@ class Component extends BaseComponent {
          */
         dayNameFormat_: 'short',
         /**
-         * Bound to the view model
+         * Bound to the state provider
          * @member {String|null} eventBorder_=null
          */
         eventBorder_: null,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Neo.calendar.store.Events|null} eventStore_=null
          */
         eventStore_: null,
@@ -93,7 +93,7 @@ class Component extends BaseComponent {
          */
         isScrolling: false,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
          */
         locale_: Neo.config.locale,
@@ -120,7 +120,7 @@ class Component extends BaseComponent {
          */
         scrollTaskId: null,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
          */
         showWeekends_: true,
@@ -148,7 +148,7 @@ class Component extends BaseComponent {
         ]},
         /**
          * 0-6 => Sun-Sat
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Number} weekStartDay_=0
          */
         weekStartDay_: 0

package/src/calendar/view/settings/GeneralContainer.mjs

@@ -273,7 +273,7 @@ class GeneralContainer extends Container {
      * @param {Object} data
      */
     onDataChange(data) {
-        this.getModel().setData(data.component.name, data.value)
+        this.setState(data.component.name, data.value)
     }
 
     /**
@@ -281,7 +281,7 @@ class GeneralContainer extends Container {
      */
     onRadioDataChange(data) {
         if (data.value) {
-            this.getModel().setData(data.component.name, data.component.fieldValue)
+            this.setState(data.component.name, data.component.fieldValue)
         }
     }
 }

package/src/calendar/view/week/Component.mjs

@@ -53,7 +53,7 @@ class Component extends BaseComponent {
             weekStartDay        : data => data.weekStartDay
         },
         /**
-         * Bound to the view model
+         * Bound to the state provider
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore_: null,
@@ -68,7 +68,7 @@ class Component extends BaseComponent {
          */
         columnsVisible_: 7,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Date|null} currentDate_=null
          * @protected
          */
@@ -80,13 +80,13 @@ class Component extends BaseComponent {
          */
         dayNameFormat_: 'short',
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Boolean} enableDrag_=true
          * @protected
          */
         enableDrag_: true,
         /**
-         * Bound to the view model
+         * Bound to the state provider
          * @member {String|null} eventBorder_=null
          */
         eventBorder_: null,
@@ -95,7 +95,7 @@ class Component extends BaseComponent {
          */
         eventDragZone: null,
         /**
-         * Bound to the view model
+         * Bound to the state provider
          * @member {Neo.calendar.store.Events|null} eventStore_=null
          */
         eventStore_: null,
@@ -117,7 +117,7 @@ class Component extends BaseComponent {
          */
         intlFormat_day: null,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Intl.DateTimeFormat|null} intlFormat_time_=null
          * @protected
          */
@@ -128,12 +128,12 @@ class Component extends BaseComponent {
          */
         isUpdating: false,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
          */
         locale_: Neo.config.locale,
         /**
-         * Time in minutes. Bound to the view model.
+         * Time in minutes. Bound to the state provider.
          * @member {Number} minimumEventDuration=30
          * @protected
          */
@@ -164,7 +164,7 @@ class Component extends BaseComponent {
          */
         showEventEndTime_: false,
         /**
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
          */
         showWeekends_: true,
@@ -206,7 +206,7 @@ class Component extends BaseComponent {
         ]},
         /**
          * 0-6 => Sun-Sat
-         * Bound to the view model.
+         * Bound to the state provider.
          * @member {Number} weekStartDay_=0
          */
         weekStartDay_: 0

package/src/calendar/view/week/EventDragZone.mjs

@@ -252,7 +252,7 @@ class EventDragZone extends DragZone {
         // todo: updating a record field which is included inside a sorter should trigger collection.doSort()
         // see: https://github.com/neomjs/neo/issues/2392
 
-        owner.getModel().getStore('events').doSort();
+        owner.getStateProvider().getStore('events').doSort();
         owner.updateEvents()
     }
 

package/src/code/LivePreview.mjs

@@ -244,9 +244,9 @@ class LivePreview extends Container {
                     index = path.lastIndexOf('../');
 
                     if (index === 0) {
-                        path = '../../../../src/' + path.slice(index+3);
+                        path = '../../../../src/' + path.slice(index + 3);
                     } else {
-                        path = path.slice(0, index) + '../../../' + path.slice(index+3);
+                        path = path.slice(0, index) + '../../../' + path.slice(index + 3);
                     }
                 }
 

package/src/component/Base.mjs

@@ -15,7 +15,7 @@ import VNodeUtil        from '../util/VNode.mjs';
 const
     addUnits            = value => value == null ? value : isNaN(value) ? value : `${value}px`,
     closestController   = Symbol.for('closestController'),
-    closestModel        = Symbol.for('closestModel'),
+    closestProvider     = Symbol.for('closestProvider'),
     lengthRE            = /^\d+\w+$/,
     twoWayBindingSymbol = Symbol.for('twoWayBinding');
 
@@ -85,14 +85,14 @@ class Base extends CoreBase {
          */
         baseCls: [],
         /**
-         * Bind configs to model.Component data properties.
+         * Bind configs to state.Provider data properties.
          * Example for a button.Base:
          * @example
          * bind: {
          *     iconCls: data => `fa fa-{$data.icon}`,
          *     text   : data => data.foo.bar
          * }
-         * @see https://github.com/neomjs/neo/blob/dev/examples/model
+         * @see https://github.com/neomjs/neo/blob/dev/examples/stateProvider
          * @member {Object|null} bind=null
          */
         bind: null,
@@ -114,7 +114,7 @@ class Base extends CoreBase {
          */
         controller_: null,
         /**
-         * Convenience shortcut to access the data config of the closest model.Component.
+         * Convenience shortcut to access the data config of the closest state.Provider.
          * Read only.
          * @member {Object} data_=null
          * @protected
@@ -244,14 +244,9 @@ class Base extends CoreBase {
          */
         minWidth_: null,
         /**
-         * Optionally add a model.Component
-         * @member {Object|null} model_=null
-         */
-        model_: null,
-        /**
-         * Override specific model data properties.
+         * Override specific stateProvider data properties.
          * This will merge the content.
-         * @member {Object|null} model_=null
+         * @member {Object|null} modelData=null
          */
         modelData: null,
         /**
@@ -268,7 +263,7 @@ class Base extends CoreBase {
         needsVdomUpdate_: false,
         /**
          * If the parentId does not match a neo component id, you can manually set this value for finding
-         * view controllers or models.
+         * view controllers or state providers.
          * Use case: manually dropping components into a vdom structure
          * @member {Neo.component.Base|null} parentComponent_=null
          * @protected
@@ -324,6 +319,11 @@ class Base extends CoreBase {
          * @member {Boolean} silentVdomUpdate_=false
          */
         silentVdomUpdate_: false,
+        /**
+         * Optionally add a state.Provider to share state data with child components
+         * @member {Object|null} stateProvider_=null
+         */
+        stateProvider_: null,
         /**
          * Style attributes added to this vdom root. see: getVdomRoot()
          * @member {Object} style_=null
@@ -573,11 +573,11 @@ class Base extends CoreBase {
     afterSetConfig(key, value, oldValue) {
         let me = this;
 
-        if (Neo.currentWorker.isUsingViewModels && me[twoWayBindingSymbol] && oldValue !== undefined) {
+        if (Neo.currentWorker.isUsingStateProviders && me[twoWayBindingSymbol] && oldValue !== undefined) {
             let binding = me.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(binding.key, value)
+                this.getStateProvider()?.setData(binding.key, value)
             }
         }
     }
@@ -1167,13 +1167,12 @@ class Base extends CoreBase {
 
     /**
      * Triggered when accessing the data config
-     * Convenience shortcut which is expensive to use,
-     * since it will generate a merged parent model data map.
+     * Convenience shortcut which is expensive to use, since it will generate a merged parent state providers data map.
      * @param {Object} value
      * @protected
      */
     beforeGetData(value) {
-        return this.getModel().getHierarchyData()
+        return this.getStateProvider().getHierarchyData()
     }
 
     /**
@@ -1304,14 +1303,14 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered before the model config gets changed.
-     * Creates a model.Component instance if needed.
+     * Triggered before the stateProvider config gets changed.
+     * Creates a state.Provider instance if needed.
      * @param {Object} value
      * @param {Object} oldValue
-     * @returns {Neo.model.Component}
+     * @returns {Neo.state.Provider}
      * @protected
      */
-    beforeSetModel(value, oldValue) {
+    beforeSetStateProvider(value, oldValue) {
         oldValue?.destroy();
 
         if (value) {
@@ -1322,7 +1321,7 @@ class Base extends CoreBase {
                 defaultValues.data = me.modelData
             }
 
-            return ClassSystemUtil.beforeSetInstance(value, 'Neo.model.Component', defaultValues)
+            return ClassSystemUtil.beforeSetInstance(value, 'Neo.state.Provider', defaultValues)
         }
 
         return null
@@ -1469,9 +1468,9 @@ class Base extends CoreBase {
      * todo: unregister events
      */
     destroy(updateParentVdom=false, silent=false) {
-        let me                 = this,
-            {parent, parentId} = me,
-            parentModel        = parent?.getModel(),
+        let me                  = this,
+            {parent, parentId}  = me,
+            parentStateProvider = parent?.getStateProvider(),
             parentVdom;
 
         me.revertFocus();
@@ -1482,9 +1481,9 @@ class Base extends CoreBase {
 
         me.reference && me.getController()?.removeReference(me); // remove own reference from parent controllers
 
-        me.model = null; // triggers destroy()
+        me.stateProvider = null; // triggers destroy()
 
-        me.bind && parentModel?.removeBindings(me.id);
+        me.bind && parentStateProvider?.removeBindings(me.id);
 
         me.plugins?.forEach(plugin => {
             plugin.destroy()
@@ -1614,7 +1613,7 @@ class Base extends CoreBase {
     /**
      * Find an instance stored inside a config via optionally passing a ntype.
      * Returns this[configName] or the closest parent component with a match.
-     * Used by getController() & getModel()
+     * Used by getController() & getStateProvider()
      * @param {String} configName
      * @param {String} [ntype]
      * @returns {Neo.core.Base|null}
@@ -1681,36 +1680,6 @@ class Base extends CoreBase {
         return Rectangle.clone(result)
     }
 
-    /**
-     * Returns this.model or the closest parent model
-     * @param {String} [ntype]
-     * @returns {Neo.model.Component|null}
-     */
-    getModel(ntype) {
-        if (!Neo.currentWorker.isUsingViewModels) {
-            return null
-        }
-
-        let me = this,
-            model;
-
-        if (!ntype) {
-            model = me[closestModel];
-
-            if (model) {
-                return model
-            }
-        }
-
-        model = me.getConfigInstanceByNtype('model', ntype);
-
-        if (!ntype) {
-            me[closestModel] = model
-        }
-
-        return model
-    }
-
     /**
      * Honors different item roots for mount / render OPs
      * @returns {String}
@@ -1799,6 +1768,45 @@ class Base extends CoreBase {
         return this.down({reference: value})
     }
 
+    /**
+     * Convenience shortcut
+     * @param args
+     * @returns {*}
+     */
+    getState(...args) {
+        return this.getStateProvider().getData(...args)
+    }
+
+    /**
+     * Returns this.stateProvider or the closest parent stateProvider
+     * @param {String} [ntype]
+     * @returns {Neo.state.Provider|null}
+     */
+    getStateProvider(ntype) {
+        if (!Neo.currentWorker.isUsingStateProviders) {
+            return null
+        }
+
+        let me = this,
+            provider;
+
+        if (!ntype) {
+            provider = me[closestProvider];
+
+            if (provider) {
+                return provider
+            }
+        }
+
+        provider = me.getConfigInstanceByNtype('stateProvider', ntype);
+
+        if (!ntype) {
+            me[closestProvider] = provider
+        }
+
+        return provider
+    }
+
     /**
      * Walks up the vdom tree and returns the closest theme found
      * @returns {String}
@@ -1912,7 +1920,7 @@ class Base extends CoreBase {
     }
 
     /**
-     * We are using this method as a ctor hook here to add the initial model.Component & controller.Component parsing
+     * We are using this method as a ctor hook here to add the initial state.Provider & controller.Component parsing
      * @param {Object} config
      * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
      */
@@ -1921,8 +1929,8 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.getController()?.parseConfig(me);
-        me.getModel()     ?.parseConfig(me)
+        me.getController()   ?.parseConfig(me);
+        me.getStateProvider()?.parseConfig(me)
     }
 
     /**
@@ -2383,6 +2391,14 @@ class Base extends CoreBase {
         return this.set(values, true)
     }
 
+    /**
+     * Convenience shortcut
+     * @param args
+     */
+    setState(...args) {
+        this.getStateProvider().setData(...args)
+    }
+
     /**
      * Show the component.
      * hideMode: 'removeDom'  uses vdom removeDom.

package/src/container/Base.mjs

@@ -313,10 +313,10 @@ class Base extends Component {
             case 'NeoInstance': {
                 item.set(config);
 
-                // In case an item got created outside a VC or VM based hierarchy, there might be bindings or string
+                // In case an item got created outside a VC or stateProvider based hierarchy, there might be bindings or string
                 // based listeners which still need to get resolved.
-                item.getController()?.parseConfig(item);
-                item.getModel()     ?.parseConfig(item);
+                item.getController()   ?.parseConfig(item);
+                item.getStateProvider()?.parseConfig(item);
                 break
             }