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

package/src/core/Compare.mjs

@@ -14,118 +14,163 @@ class Compare extends Base {
     }
 
     /**
-     * @param {*} item1
-     * @param {*} item2
+     * Storing the comparison method names by data type
+     * @member {Object} map
+     */
+    static map = {
+        Array      : 'compareArrays',
+        Date       : 'compareDates',
+        Function   : 'compareFunctions',
+        Map        : 'compareMaps',
+        NeoInstance: 'compareNeoInstances',
+        Object     : 'compareObjects',
+        RegExp     : 'compareRegExps',
+        Set        : 'compareSets'
+    }
+
+    /**
+     * @param {Array} item1
+     * @param {Array} item2
      * @returns {Boolean}
      */
-    static isEqual(item1, item2) {
-        if (item1 === item2) {
-            return true;
+    static compareArrays(item1, item2) {
+        if (item1.length !== item2.length) {
+            return false
         }
 
-        let type1 = Neo.typeOf(item1),
-            type2 = Neo.typeOf(item2),
-            key;
-
-        if (type1 !== type2) {
-            return false;
+        for (const [i, v] of item1.entries()) {
+            if (!Compare.isEqual(v, item2[i])) {
+                return false
+            }
         }
 
-        switch (type1) {
-            case 'Array': {
-                if (item1.length !== item2.length) {
-                    return false;
-                }
-
-                for (const [i, v] of item1.entries()) {
-                    if (!Compare.isEqual(v, item2[i])) {
-                        return false;
-                    }
-                }
+        return true
+    }
 
-                break;
-            }
+    /**
+     * @param {Date} item1
+     * @param {Date} item2
+     * @returns {Boolean}
+     */
+    static compareDates(item1, item2) {
+        return item1.valueOf() === item2.valueOf()
+    }
 
-            case 'Date': {
-                return item1.valueOf() === item2.valueOf();
-            }
+    /**
+     * @param {Function} item1
+     * @param {Function} item2
+     * @returns {Boolean}
+     */
+    static compareFunctions(item1, item2) {
+        if (item1.name !== item2.name) {
+            return false
+        }
 
-            case 'Function': {
-                if (item1.name !== item2.name) {
-                    return false;
-                }
+        return item1.toString() === item2.toString()
+    }
 
-                return item1.toString() === item2.toString();
-            }
+    /**
+     * @param {Map} item1
+     * @param {Map} item2
+     * @returns {Boolean}
+     */
+    static compareMaps(item1, item2) {
+        if (item1.size !== item2.size) {
+            return false
+        }
 
-            case 'Map': {
-                if (item1.size !== item2.size) {
-                    return false;
-                }
+        let val2;
 
-                let val2;
+        for (const [key, val] of item1) {
+            val2 = item2.get(key);
 
-                for (const [key, val] of item1) {
-                    val2 = item2.get(key);
+            if (val2 !== val || val2 === undefined && !item2.has(key)) {
+                return false
+            }
+        }
 
-                    if (val2 !== val || val2 === undefined && !item2.has(key)) {
-                        return false;
-                    }
-                }
+        return true
+    }
 
-                break;
-            }
+    /**
+     * @param {Neo.core.Base} item1
+     * @param {Neo.core.Base} item2
+     * @returns {Boolean}
+     */
+    static compareNeoInstances(item1, item2) {
+        return item1.id === item2.id
+    }
 
-            case 'NeoInstance': {
-                if (item1.id !== item2.id) {
-                    return false;
-                }
+    /**
+     * @param {Object} item1
+     * @param {Object} item2
+     * @returns {Boolean}
+     */
+    static compareObjects(item1, item2) {
+        if (Object.keys(item1).length !== Object.keys(item2).length) {
+            return false
+        }
 
-                break;
+        for (let key in item1) {
+            if (!Compare.isEqual(item1[key], item2[key])) {
+                return false
             }
+        }
 
-            case 'Object': {
-                if (Object.keys(item1).length !== Object.keys(item2).length) {
-                    return false;
-                }
-
-                for (key in item1) {
-                    if (!Compare.isEqual(item1[key], item2[key])) {
-                        return false;
-                    }
-                }
+        return true
+    }
 
-                break;
-            }
+    /**
+     * @param {RegExp} item1
+     * @param {RegExp} item2
+     * @returns {Boolean}
+     */
+    static compareRegExps(item1, item2) {
+        return item1.toString() === item2.toString()
+    }
 
-            case 'RegExp': {
-                if (item1.toString() !== item2.toString()) {
-                    return false;
-                }
+    /**
+     * @param {Set} item1
+     * @param {Set} item2
+     * @returns {Boolean}
+     */
+    static compareSets(item1, item2) {
+        if (item1.size !== item2.size) {
+            return false
+        }
 
-                break;
+        for (let key of item1) {
+            if (!item2.has(key)) {
+                return false
             }
+        }
 
-            case 'Set': {
-                if (item1.size !== item2.size) {
-                    return false;
-                }
+        return true
+    }
 
-                for (key of item1) {
-                    if (!item2.has(key)) {
-                        return false;
-                    }
-                }
+    /**
+     * @param {*} item1
+     * @param {*} item2
+     * @returns {Boolean}
+     */
+    static isEqual(item1, item2) {
+        if (item1 === item2) {
+            return true
+        }
 
-                break;
-            }
+        let type1 = Neo.typeOf(item1),
+            type2 = Neo.typeOf(item2);
 
-            default: {
-                return item1 === item2;
-            }
+        if (type1 !== type2) {
+            return false
+        }
+
+        if (Compare.map[type1]) {
+            return Compare[Compare.map[type1]](item1, item2)
         }
 
-        return true;
+        // all other types
+        return item1 === item2
     }
 }
 

package/src/date/SelectorContainer.mjs

@@ -1,11 +1,11 @@
-import ClassSystemUtil        from '../util/ClassSystem.mjs';
-import Container              from '../container/Base.mjs';
-import DateSelectorModel      from '../selection/DateSelectorModel.mjs';
-import DayViewComponent       from './DayViewComponent.mjs';
-import DateUtil               from '../util/Date.mjs';
-import NeoArray               from '../util/Array.mjs';
-import SelectorContainerModel from './SelectorContainerModel.mjs';
-import Toolbar                from '../toolbar/Base.mjs';
+import ClassSystemUtil                from '../util/ClassSystem.mjs';
+import Container                      from '../container/Base.mjs';
+import DateSelectorModel              from '../selection/DateSelectorModel.mjs';
+import DayViewComponent               from './DayViewComponent.mjs';
+import DateUtil                       from '../util/Date.mjs';
+import NeoArray                       from '../util/Array.mjs';
+import SelectorContainerStateProvider from './SelectorContainerStateProvider.mjs';
+import Toolbar                        from '../toolbar/Base.mjs';
 
 const todayDate = new Date();
 
@@ -114,10 +114,6 @@ class SelectorContainer extends Container {
          * @member {String|null} minValue_=null
          */
         minValue_: null,
-        /**
-         * @member {Neo.model.Component} model=SelectorContainerModel
-         */
-        model: SelectorContainerModel,
         /**
          * Used for wheel events. min value = 1.
          * A higher value means lesser sensitivity for wheel events
@@ -149,6 +145,10 @@ class SelectorContainer extends Container {
          * @member {Boolean} showWeekends_=true
          */
         showWeekends_: true,
+        /**
+         * @member {Neo.state.Provider} stateProvider=SelectorContainerStateProvider
+         */
+        stateProvider: SelectorContainerStateProvider,
         /**
          * True to use sliding animations
          * @member {Boolean} useAnimations=true

package/src/date/{SelectorContainerModel.mjs → SelectorContainerStateProvider.mjs}

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

package/src/form/field/Text.mjs

@@ -1356,7 +1356,7 @@ class Text extends Base {
         let me         = this,
             oldValue   = me.value,
             inputValue = data.value,
-            vnode      = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+            vnode      = VNodeUtil.find(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
             // Update the current state (modified DOM by the user) to enable the delta-updates logic.

package/src/form/field/Time.mjs

@@ -101,9 +101,11 @@ class Time extends Picker {
         });
 
         me.list = Neo.create({
-            module      : List,
-            displayField: 'value',
-            store       : me.collection,
+            module        : List,
+            displayField  : 'value',
+            itemsFocusable: false,
+            navigator     : {eventSource: me.getInputElId()},
+            store         : me.collection,
             ...me.listConfig
         });
 

package/src/form/field/trigger/Time.mjs

@@ -62,10 +62,11 @@ class Time extends Picker {
             parentId: me.id,
             showDisc: false,
             size    : null,
+            windowId: me.windowId,
             ...me.clockConfig
         });
 
-        me.vdom.cn = [me.clock.vdom];
+        me.vdom.cn = [me.clock.createVdomReference()];
         me.update()
     }
 

package/src/layout/Base.mjs

@@ -101,18 +101,18 @@ class Base extends CoreBase {
     destroy() {
         let me = this;
 
-        me.bind && me.container.getModel()?.removeBindings(me.id);
+        me.bind && me.getStateProvider()?.removeBindings(me.id);
 
         super.destroy()
     }
 
     /**
-     * Returns the container model or its closest parent model
+     * Returns the container stateProvider or its closest parent stateProvider
      * @param {String} [ntype]
-     * @returns {Neo.model.Component|null}
+     * @returns {Neo.state.Provider|null}
      */
-    getModel(ntype) {
-        return this.container.getModel()
+    getStateProvider(ntype) {
+        return this.container.getStateProvider(ntype)
     }
 
     /**
@@ -125,7 +125,7 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.bind && me.container.getModel()?.parseConfig(me)
+        me.bind && me.container.getStateProvider()?.parseConfig(me)
     }
 
     /**

package/src/list/Base.mjs

@@ -125,7 +125,12 @@ class Base extends Component {
          */
         selectionModel_: null,
         /**
-         * Set this to true in case a select event should only update _vdom (e.g. when used inside a form.field.Select
+         * Set this to true in case a keyboard navigation should immediately select the focussed item
+         * @member {Boolean} selectOnFocus=false
+         */
+        selectOnFocus: false,
+        /**
+         * Set this to true in case a select event should only update _vdom (e.g. when used inside a form.field.ComboBox
          * @member {Boolean} silentSelect=false
          */
         silentSelect: false,
@@ -298,6 +303,7 @@ class Base extends Component {
             if (!me.hasNavigator) {
                 me.navigator = {
                     appName       : me.appName,
+                    autoClick     : me.selectOnFocus,
                     id            : me.id,
                     keepFocusIndex: me.keepFocusIndex,
                     selector      : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,

package/src/list/Color.mjs

@@ -22,13 +22,13 @@ class Color extends Base {
         baseCls: ['neo-color-list', 'neo-list'],
         /**
          * The data.Model field which contains the color value
-         * @member {String} colorField='name'
+         * @member {String} colorField_='name'
          */
-        colorField: 'name',
+        colorField_: 'name',
         /**
          * Override the formatter to apply a custom background-color styling.
          * E.g. using CSS vars for different themes
-         * @member {Function} colorField=(scope,data)=>data[scope.colorField]
+         * @member {Function} colorFormatter=(scope,data)=>data[scope.colorField]
          */
         colorFormatter: (scope,data) => data[scope.colorField]
     }

package/src/main/DomEvents.mjs

@@ -98,7 +98,7 @@ class DomEvents extends Base {
         singleton: true,
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: ['addDomListener']}
+         * @member {Object} remote
          * @protected
          */
         remote: {

package/src/main/DomUtils.mjs

@@ -1,22 +1,22 @@
 import Base from '../core/Base.mjs';
 
 const focusableTags = {
-    BODY     : 1,
-    BUTTON   : 1,
-    EMBED    : 1,
-    IFRAME   : 1,
-    INPUT    : 1,
-    OBJECT   : 1,
-    SELECT   : 1,
-    TEXTAREA : 1
+    BODY    : 1,
+    BUTTON  : 1,
+    EMBED   : 1,
+    IFRAME  : 1,
+    INPUT   : 1,
+    OBJECT  : 1,
+    SELECT  : 1,
+    TEXTAREA: 1
 };
 
 /**
- * @class Neo.main.DomUtils 
+ * @class Neo.main.DomUtils
  * @extends Neo.core.Base
  * @singleton
  */
-export default class DomUtils extends Base {
+class DomUtils extends Base {
     static config = {
         /**
          * @member {String} className='Neo.main.DomUtils'
@@ -31,42 +31,21 @@ export default class DomUtils extends Base {
      * @param {HTMLElement} el The element to start from.
      * @param {Function} filterFn A function which returns `true` when the desired element is reached.
      * @param {HTMLElement} [limit] The element to stop at. This is *not* considered for matching.
-     * @returns {Boolean}
+     * @returns {HTMLElement}
      */
     static closest(el, filterFn, limit = document.body) {
         while (el?.nodeType === Node.ELEMENT_NODE && el !== limit) {
             if (filterFn(el)) {
-                return el;
+                return el
             }
-            el = el.parentNode;
-        }
-    }
-
-    /**
-     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
-     * and all descendants for all elements for which the passed `filterFn` returns `true`.
-     * @param {HTMLElement} el The element to start from.
-     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
-     * @returns {HTMLElement[]} An array of matching elements
-     */
-    static queryAll(el, filterFn) {
-        return [el, ...el.querySelectorAll('*')].filter(filterFn);
-    }
 
-    /**
-     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
-     * and all descendants for the first element for which the passed `filterFn` returns `true`.
-     * @param {HTMLElement} el The element to start from.
-     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
-     * @returns {HTMLElement} The first matching element
-     */
-    static query(el, filterFn) {
-        return [el, ...el.querySelectorAll('*')].find(filterFn);
+            el = el.parentNode
+        }
     }
 
     static isFocusable(e) {
         // May be used as a scopeless callback, so use "DomUtils", not "this"
-        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0;
+        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0
     }
 
     static isTabbable(e) {
@@ -86,4 +65,28 @@ export default class DomUtils extends Base {
             (tabIndex != null && Number(tabIndex) >= 0) ||
             e.contentEditable === 'true'
     }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
+     * and all descendants for the first element for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
+     * @returns {HTMLElement} The first matching element
+     */
+    static query(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].find(filterFn);
+    }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
+     * and all descendants for all elements for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
+     * @returns {HTMLElement[]} An array of matching elements
+     */
+    static queryAll(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].filter(filterFn)
+    }
 }
+
+export default Neo.setupClass(DomUtils);