neo.mjs 8.0.0-beta.1 → 8.0.0

package/src/{model/Component.mjs → state/Provider.mjs}

@@ -8,11 +8,11 @@ const dataVariableRegex   = /data((?!(\.[a-z_]\w*\(\)))\.[a-z_]\w*)+/gi,
       variableNameRegex   = /^\w*/;
 
 /**
- * An optional component (view) model for adding bindings to configs
- * @class Neo.model.Component
+ * An optional component state provider for adding bindings to configs
+ * @class Neo.state.Provider
  * @extends Neo.core.Base
  */
-class Component extends Base {
+class Provider extends Base {
     /**
      * True automatically applies the core.Observable mixin
      * @member {Boolean} observable=true
@@ -22,15 +22,15 @@ class Component extends Base {
 
     static config = {
         /**
-         * @member {String} className='Neo.model.Component'
+         * @member {String} className='Neo.state.Provider'
          * @protected
          */
-        className: 'Neo.model.Component',
+        className: 'Neo.state.Provider',
         /**
-         * @member {String} ntype='component-model'
+         * @member {String} ntype='state-provider'
          * @protected
          */
-        ntype: 'component-model',
+        ntype: 'state-provider',
         /**
          * @member {Object|null} bindings_=null
          * @protected
@@ -67,7 +67,7 @@ class Component extends Base {
          */
         formulas_: null,
         /**
-         * @member {Neo.model.Component|null} parent_=null
+         * @member {Neo.state.Provider|null} parent_=null
          */
         parent_: null,
         /**
@@ -80,13 +80,13 @@ class Component extends Base {
      * @param {Object} config
      */
     construct(config) {
-        Neo.currentWorker.isUsingViewModels = true;
+        Neo.currentWorker.isUsingStateProviders = true;
         super.construct(config);
         this.bindings = {}
     }
 
     /**
-     * Adds a given key/value combination on this model level.
+     * Adds a given key/value combination on this stateProvider level.
      * The method is used by setData() & setDataAtSameLevel()
      * in case the  data property does not exist yet.
      * @param {String} key
@@ -138,8 +138,8 @@ class Component extends Base {
 
     /**
      * Triggered before the parent config gets changed
-     * @param {Neo.model.Component|null} value
-     * @param {Neo.model.Component|null} oldValue
+     * @param {Neo.state.Provider|null} value
+     * @param {Neo.state.Provider|null} oldValue
      * @protected
      */
     beforeSetParent(value, oldValue) {
@@ -161,7 +161,7 @@ class Component extends Base {
             Object.entries(value).forEach(([key, storeValue]) => {
                 controller?.parseConfig(storeValue);
 
-                // support mapping string based listeners into the model instance
+                // support mapping string based listeners into the stateProvider instance
                 Object.entries(storeValue.listeners || {}).forEach(([listenerKey,listener]) => {
                     if (Neo.isString(listener) && Neo.isFunction(me[listener])) {
                         storeValue.listeners[listenerKey] = me[listener].bind(me)
@@ -190,7 +190,7 @@ class Component extends Base {
 
     /**
      * Registers a new binding in case a matching data property does exist.
-     * Otherwise it will use the closest model with a match.
+     * Otherwise, it will use the closest stateProvider with a match.
      * @param {String} componentId
      * @param {String} key
      * @param {String} value
@@ -201,25 +201,25 @@ class Component extends Base {
             data    = me.getDataScope(key),
             scope   = data.scope,
             keyLeaf = data.key,
-            bindingScope, parentModel;
+            bindingScope, parentStateProvider;
 
         if (scope?.hasOwnProperty(keyLeaf)) {
             bindingScope = Neo.ns(`${key}.${componentId}`, true, me.bindings);
             bindingScope[value] = formatter
         } else {
-            parentModel = me.getParent();
+            parentStateProvider = me.getParent();
 
-            if (parentModel) {
-                parentModel.createBinding(componentId, key, value, formatter)
+            if (parentStateProvider) {
+                parentStateProvider.createBinding(componentId, key, value, formatter)
             } else {
-                console.error('No model.Component found with the specified data property', componentId, keyLeaf, value)
+                console.error('No state.Provider found with the specified data property', componentId, keyLeaf, value)
             }
         }
     }
 
     /**
      * Registers a new binding in case a matching data property does exist.
-     * Otherwise, it will use the closest model with a match.
+     * Otherwise, it will use the closest stateProvider with a match.
      * @param {String} componentId
      * @param {String} formatter
      * @param {String} value
@@ -341,29 +341,29 @@ class Component extends Base {
     }
 
     /**
-     * Access the closest data property inside the VM parent chain.
+     * Access the closest data property inside the parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} originModel=this for internal usage only
+     * @param {Neo.state.Provider} originStateProvider=this for internal usage only
      * @returns {*} value
      */
-    getData(key, originModel=this) {
+    getData(key, originStateProvider=this) {
         let me      = this,
             data    = me.getDataScope(key),
             {scope} = data,
             keyLeaf = data.key,
-            parentModel;
+            parentStateProvider;
 
         if (scope?.hasOwnProperty(keyLeaf)) {
             return scope[keyLeaf]
         }
 
-        parentModel = me.getParent();
+        parentStateProvider = me.getParent();
 
-        if (!parentModel) {
-            console.error(`data property '${key}' does not exist.`, originModel)
+        if (!parentStateProvider) {
+            console.error(`data property '${key}' does not exist.`, originStateProvider)
         }
 
-        return parentModel.getData(key, originModel)
+        return parentStateProvider.getData(key, originStateProvider)
     }
 
     /**
@@ -471,8 +471,8 @@ class Component extends Base {
     }
 
     /**
-     * Get the closest model inside the components parent tree
-     * @returns {Neo.model.Component|null}
+     * Get the closest stateProvider inside the components parent tree
+     * @returns {Neo.state.Provider|null}
      */
     getParent() {
         let {parent} = this;
@@ -481,56 +481,56 @@ class Component extends Base {
             return parent
         }
 
-        return this.component.parent?.getModel() || null
+        return this.component.parent?.getStateProvider() || null
     }
 
     /**
      * Access the closest store inside the VM parent chain.
      * @param {String} key
-     * @param {Neo.model.Component} originModel=this for internal usage only
+     * @param {Neo.state.Provider} originStateProvider=this for internal usage only
      * @returns {Neo.data.Store}
      */
-    getStore(key, originModel=this) {
+    getStore(key, originStateProvider=this) {
         let me       = this,
             {stores} = me,
-            parentModel;
+            parentStateProvider;
 
         if (stores?.hasOwnProperty(key)) {
             return stores[key]
         }
 
-        parentModel = me.getParent();
+        parentStateProvider = me.getParent();
 
-        if (!parentModel) {
-            console.error(`store '${key}' not found inside this model or parents.`, originModel)
+        if (!parentStateProvider) {
+            console.error(`store '${key}' not found inside this stateProvider or parents.`, originStateProvider)
         }
 
-        return parentModel.getStore(key, originModel)
+        return parentStateProvider.getStore(key, originStateProvider)
     }
 
     /**
      * Internal method to avoid code redundancy.
      * Use setData() or setDataAtSameLevel() instead.
      *
-     * Passing an originModel param will try to set each key on the closest property match
-     * inside the parent model chain => setData()
-     * Not passing it will set all values on the model where the method gets called => setDataAtSameLevel()
+     * Passing an originStateProvider param will try to set each key on the closest property match
+     * inside the parent stateProvider chain => setData()
+     * Not passing it will set all values on the stateProvider where the method gets called => setDataAtSameLevel()
      * @param {Object|String} key
      * @param {*} value
-     * @param {Neo.model.Component} [originModel]
+     * @param {Neo.state.Provider} [originStateProvider]
      * @protected
      */
-    internalSetData(key, value, originModel) {
+    internalSetData(key, value, originStateProvider) {
         let me = this,
-            data, keyLeaf, parentModel, scope;
+            data, keyLeaf, parentStateProvider, scope;
 
         if (Neo.isObject(value) && !value.isRecord) {
             Object.entries(value).forEach(([dataKey, dataValue]) => {
-                me.internalSetData(`${key}.${dataKey}`, dataValue, originModel)
+                me.internalSetData(`${key}.${dataKey}`, dataValue, originStateProvider)
             })
         } else if (Neo.isObject(key)) {
             Object.entries(key).forEach(([dataKey, dataValue]) => {
-                me.internalSetData(dataKey, dataValue, originModel)
+                me.internalSetData(dataKey, dataValue, originStateProvider)
             })
         } else {
             data    = me.getDataScope(key);
@@ -540,13 +540,13 @@ class Component extends Base {
             if (scope?.hasOwnProperty(keyLeaf)) {
                 scope[keyLeaf] = value
             } else {
-                if (originModel) {
-                    parentModel = me.getParent();
+                if (originStateProvider) {
+                    parentStateProvider = me.getParent();
 
-                    if (parentModel) {
-                        parentModel.internalSetData(key, value, originModel)
+                    if (parentStateProvider) {
+                        parentStateProvider.internalSetData(key, value, originStateProvider)
                     } else {
-                        originModel.addDataProperty(key, value)
+                        originStateProvider.addDataProperty(key, value)
                     }
                 } else {
                     me.addDataProperty(key, value)
@@ -586,24 +586,24 @@ class Component extends Base {
     onDataPropertyChange(key, value, oldValue) {
         let me      = this,
             binding = me.bindings && Neo.ns(key, false, me.bindings),
-            component, config, hierarchyData, model;
+            component, config, hierarchyData, stateProvider;
 
         if (binding) {
             hierarchyData = {};
 
             Object.entries(binding).forEach(([componentId, configObject]) => {
-                component = Neo.getComponent(componentId) || Neo.get(componentId); // timing issue: the cmp might not be registered inside manager.Component yet
-                config    = {};
-                model     = component.getModel() || me;
+                component     = Neo.getComponent(componentId) || Neo.get(componentId); // timing issue: the cmp might not be registered inside manager.Component yet
+                config        = {};
+                stateProvider = component.getStateProvider() || me;
 
-                if (!hierarchyData[model.id]) {
-                    hierarchyData[model.id] = model.getHierarchyData()
+                if (!hierarchyData[stateProvider.id]) {
+                    hierarchyData[stateProvider.id] = stateProvider.getHierarchyData()
                 }
 
                 Object.entries(configObject).forEach(([configField, formatter]) => {
-                    // we can not call me.callFormatter(), since a data property inside a parent model
-                    // could have changed which is relying on data properties inside a closer model
-                    config[configField] = model.callFormatter(formatter, hierarchyData[model.id])
+                    // we can not call me.callFormatter(), since a data property inside a parent stateProvider
+                    // could have changed which is relying on data properties inside a closer stateProvider
+                    config[configField] = stateProvider.callFormatter(formatter, hierarchyData[stateProvider.id])
                 });
 
                 component?.set(config)
@@ -645,19 +645,17 @@ class Component extends Base {
     }
 
     /**
-     * Removes all bindings for a given component id inside this model
-     * as well as inside all parent models.
+     * Removes all bindings for a given component id inside this stateProvider as well as inside all parent stateProviders.
      * @param {String} componentId
      */
     removeBindings(componentId) {
-        let me          = this,
-            parentModel = me.getParent();
+        let me = this;
 
         Object.entries(me.bindings).forEach(([dataProperty, binding]) => {
             delete binding[componentId]
         });
 
-        parentModel?.removeBindings(componentId)
+        me.getParent()?.removeBindings(componentId)
     }
 
     /**
@@ -672,7 +670,7 @@ class Component extends Base {
 
         if (formulas) {
             if (!initialRun && (!data.key || !data.value)) {
-                console.warn('[ViewModel:formulas] missing key or value', data.key, data.value)
+                console.warn('[StateProvider:formulas] missing key or value', data.key, data.value)
             }
 
             for ([key, value] of Object.entries(formulas)) {
@@ -720,7 +718,7 @@ class Component extends Base {
     }
 
     /**
-     * The method will assign all values to the closest model where it finds an existing key.
+     * The method will assign all values to the closest stateProvider where it finds an existing key.
      * In case no match is found inside the parent chain, a new data property will get generated.
      * @param {Object|String} key
      * @param {*} value
@@ -731,7 +729,7 @@ class Component extends Base {
 
     /**
      * Use this method instead of setData() in case you want to enforce
-     * setting all keys on this instance instead of looking for matches inside parent models.
+     * setting all keys on this instance instead of looking for matches inside parent stateProviders.
      * @param {Object|String} key
      * @param {*} value
      */
@@ -740,4 +738,4 @@ class Component extends Base {
     }
 }
 
-export default Neo.setupClass(Component);
+export default Neo.setupClass(Provider);

package/src/tooltip/Base.mjs

@@ -200,21 +200,22 @@ class Base extends Container {
                 windowId    : app.mainView.windowId,
                 listeners : {
                     // Reconfigure on over a target
-                    async targetOver({ target, data }) {
-                        const me = this;
+                    targetOver({ target, data }) {
+                        let me = this,
+                            config, key;
 
                         // Revert last pointerOver config set to initial setting.
-                        me.set(me.resetCfg);
+                        me.setSilent(me.resetCfg);
                         me.resetCfg = {};
 
                         // Use the tooltip config block that the target was configured with
                         // to reconfigure this instance, or if there was none, check the
                         // data-neo-tooltip property for a text string.
-                        const config = target?._tooltip || { text : data.target.data.neoTooltip };
+                        config = target?._tooltip || {text: data.target.data.neoTooltip};
 
                         // Cache things we have to reset
-                        for (const key in config) {
-                            me.resetCfg[key] = me[key];
+                        for (key in config) {
+                            me.resetCfg[key] = me[key]
                         }
 
                         // Set ourself up as the target wants
@@ -227,6 +228,15 @@ class Base extends Container {
         return singletons[app.name]
     }
 
+    // Used as a delegate filter to activate on targets which have a tooltip configuration
+    static delegateFilter(path) {
+        for (let i = 0, { length } = path; i < length; i++) {
+            if (path[i].cls.includes('neo-uses-shared-tooltip') || path[i].data['neoTooltip']) {
+                return i
+            }
+        }
+    }
+
     /**
      * Instantly hides the tooltip
      */
@@ -277,22 +287,12 @@ class Base extends Container {
             if (me.mounted) {
                 me.show();
                 me.alignTo()
-            }
-            else {
+            } else {
                 me.showDelayed(data)
             }
         }
     }
 
-    // Used as a delegate filter to activate on targets which have a tooltip configuration
-    static delegateFilter(path) {
-        for (let i = 0, { length } = path; i < length; i++) {
-            if (path[i].cls.includes('neo-uses-shared-tooltip') || path[i].data['neoTooltip']) {
-                return i
-            }
-        }
-    }
-
     /**
      * @param {Object} data
      */

package/src/tree/Accordion.mjs

@@ -1,8 +1,8 @@
+import ClassSystemUtil    from '../util/ClassSystem.mjs';
+import NeoArray           from '../util/Array.mjs';
 import TreeList           from '../tree/List.mjs';
-import TreeAccordionModel from "../selection/TreeAccordionModel.mjs";
-import NeoArray           from "../util/Array.mjs";
-import ClassSystemUtil    from "../util/ClassSystem.mjs";
-import VDomUtil           from "../util/VDom.mjs";
+import TreeAccordionModel from '../selection/TreeAccordionModel.mjs';
+import VDomUtil           from '../util/VDom.mjs';
 
 /**
  * @class Neo.tree.Accordion
@@ -38,11 +38,6 @@ class AccordionTree extends TreeList {
          * @member {String[]} baseCls=['neo-tree-accordion']
          */
         baseCls: ['neo-tree-list'],
-        /**
-         * Set to false to hide the initial root item
-         * @member {Boolean} firstParentIsVisible=true
-         */
-        firstParentIsVisible_: true,
         /**
          * Define the field names for the store to show header, text and icon
          * @member {Object} fields={header:'name',icon:'iconCls',text:'content'}
@@ -52,6 +47,11 @@ class AccordionTree extends TreeList {
             icon  : 'iconCls',
             text  : 'content'
         },
+        /**
+         * Set to false to hide the initial root item
+         * @member {Boolean} firstParentIsVisible=true
+         */
+        firstParentIsVisible_: true,
         /**
          * Set to false will auto expand root parent items and disallow collapsing
          * @member {Boolean} rootParentIsCollapsible=false
@@ -109,10 +109,12 @@ class AccordionTree extends TreeList {
      * @param {Boolean} oldValue
      */
     afterSetFirstParentIsVisible(value, oldValue) {
-        this[!value ? 'addCls' : 'removeCls']('first-parent-not-visible');
+        let firstRecord = this.store.first();
+
+        this.toggleCls('first-parent-not-visible', !value);
 
-        if (this.store.first()) {
-            this.store.first().visible = value
+        if (firstRecord) {
+            firstRecord.visible = value
         }
     }
 
@@ -154,7 +156,7 @@ class AccordionTree extends TreeList {
         store.items.forEach((record) => {
             const itemId   = me.getItemId(record[me.getKeyProperty()]),
                   vdom     = me.getVdomChild(itemId),
-                  itemVdom = VDomUtil.getByFlag(vdom, 'icon');
+                  itemVdom = VDomUtil.getByFlag(vdom, 'iconCls');
 
             if (record.isLeaf) {
                 itemVdom.removeDom = hide

package/src/vdom/Helper.mjs

@@ -276,8 +276,6 @@ class Helper extends Base {
             childNode    = childNodes[i];
             oldChildNode = oldChildNodes[i + indexDelta];
 
-            // console.log(childNode?.id, oldChildNode?.id);
-
             if (!childNode && !oldChildNode) {
                 break
             }
@@ -556,7 +554,7 @@ class Helper extends Base {
     }
 
     /**
-     * Creates a flap map of the tree, containing ids as keys and infos as values
+     * Creates a flat map of the tree, containing ids as keys and infos as values
      * @param {Object}         config
      * @param {Neo.vdom.VNode} config.vnode
      * @param {Neo.vdom.VNode} [config.parentNode=null]

package/src/worker/App.mjs

@@ -52,10 +52,10 @@ class App extends Base {
      */
     data = null
     /**
-     * @member {Boolean} isUsingViewModels=false
+     * @member {Boolean} isUsingStateProviders=false
      * @protected
      */
-    isUsingViewModels = false
+    isUsingStateProviders = false
     /**
      * We are storing the params of insertThemeFiles() calls here, in case the method does get triggered
      * before the json theme structure got loaded.

package/apps/portal/view/ViewportModel.mjs

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

package/examples/model/extendedClass/MainContainerModel.mjs

@@ -1,24 +0,0 @@
-import Model from '../../../src/model/Component.mjs';
-
-/**
- * @class Neo.examples.model.extendedClass.MainContainerModel
- * @extends Neo.model.Component
- */
-class MainContainerModel extends Model {
-    static config = {
-        /**
-         * @member {String} className='Neo.examples.model.extendedClass.MainContainerModel'
-         * @protected
-         */
-        className: 'Neo.examples.model.extendedClass.MainContainerModel',
-        /**
-         * @member {Object} data
-         */
-        data: {
-            button1Text: 'Button 1',
-            button2Text: 'Button 2'
-        }
-    }
-}
-
-export default Neo.setupClass(MainContainerModel);

package/examples/model/inlineNoModel/README.md

@@ -1,8 +0,0 @@
-This example covers the same business logic as examples/model/inline.
-
-Instead of using a model.Component (view model) instance, the view controller is storing the data properties directly.
-
-Compare the MainContainer.mjs as well as the MainContainerController.mjs files inside both examples to get the idea.
-
-While this implementation is beautifully easy, it does get a lot more complex in case you want to use nested data
-or a nested view model & controller hierarchy.

package/examples/model/inlineNoModel/app.mjs

@@ -1,6 +0,0 @@
-import MainContainer from './MainContainer.mjs';
-
-export const onStart = () => Neo.app({
-    mainView: MainContainer,
-    name    : 'Neo.examples.model.inlineNoModel'
-});

package/examples/model/inlineNoModel/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>inline example without using a model.Component</title>
-</head>
-<body>
-    <script src="../../../src/MicroLoader.mjs" type="module"></script>
-</body>
-</html>

package/examples/model/inlineNoModel/neo-config.json

@@ -1,7 +0,0 @@
-{
-    "appPath"    : "examples/model/inlineNoModel/app.mjs",
-    "basePath"   : "../../../",
-    "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-dark"]
-}

package/examples/model/nestedData/app.mjs

@@ -1,6 +0,0 @@
-import MainContainer from './MainContainer.mjs';
-
-export const onStart = () => Neo.app({
-    mainView: MainContainer,
-    name    : 'Neo.examples.model.nestedData'
-});

package/examples/model/nestedData/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>model.Component: nested data</title>
-</head>
-<body>
-    <script src="../../../src/MicroLoader.mjs" type="module"></script>
-</body>
-</html>

package/examples/model/nestedData/neo-config.json

@@ -1,7 +0,0 @@
-{
-    "appPath"    : "examples/model/nestedData/app.mjs",
-    "basePath"   : "../../../",
-    "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-dark"]
-}

package/examples/model/table/MainContainerModel.mjs

@@ -1,24 +0,0 @@
-import MainStore from './MainStore.mjs';
-import Model     from '../../../src/model/Component.mjs';
-
-/**
- * @class Neo.examples.model.table.MainContainerModel
- * @extends Neo.model.Component
- */
-class MainContainerModel extends Model {
-    static config = {
-        /**
-         * @member {String} className='Neo.examples.model.table.MainContainerModel'
-         * @protected
-         */
-        className: 'Neo.examples.model.table.MainContainerModel',
-        /**
-         * @member {Object} stores
-         */
-        stores: {
-            main: MainStore
-        }
-    }
-}
-
-export default Neo.setupClass(MainContainerModel);

package/examples/model/table/app.mjs

@@ -1,6 +0,0 @@
-import MainContainer from './MainContainer.mjs';
-
-export const onStart = () => Neo.app({
-    mainView: MainContainer,
-    name    : 'Neo.examples.model.table'
-});