neo.mjs 6.8.3 → 6.9.0

package/src/button/Base.mjs

@@ -51,7 +51,7 @@ class Base extends Component {
         editRoute: true,
         /**
          * Shortcut for domListeners={click:handler}
-         * A string based value assumes that the handlerFn lives inside a ComponentController
+         * A string based value assumes that the handlerFn lives inside a controller.Component
          * @member {Function|String|null} handler_=null
          */
         handler_: null,
@@ -487,7 +487,7 @@ class Base extends Component {
     onClick(data) {
         let me = this;
 
-        me.handler?.call(me.handlerScope || me, data);
+        me.callback(me.handler, me.handlerScope || me, [data]);
 
         me.menu            && me.toggleMenu();
         me.route           && me.changeRoute();

package/src/component/Base.mjs

@@ -302,11 +302,17 @@ class Base extends CoreBase {
          */
         theme_: null,
         /**
-         * Add tooltip config objects
+         * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
-         * @member {Array|Object} tooltips_=null
+         *
+         * By default, a single, shared Tooltip instance is used for all widgets which request
+         * a tooltip. It reconfigures itself from the widget's definition just before showing.
+         *
+         * If a widget needs its own instance for any reason, inslude the property `ownInstance : true`
+         * in the tooltip config object.
+         * @member {Object|String} tooltip_=null
          */
-        tooltips_: null,
+        tooltip_: null,
         /**
          * Add 'primary' and other attributes to make it an outstanding design
          * @member {String|null} ui_=null
@@ -771,21 +777,21 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered after the tooltips config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
+     * Triggered after the tooltip config got changed
+     * @param {Object|String} value
+     * @param {Object|String} oldValue
      * @protected
      */
-    afterSetTooltips(value, oldValue) {
-        if (value) {
-            let me = this;
+    afterSetTooltip(value, oldValue) {
+        oldValue?.destroy();
 
+        if (value) {
             if (Neo.ns('Neo.tooltip.Base')) {
-                me.createTooltips(value)
+                this.createTooltip(value);
             } else {
-                import('../tooltip/Base.mjs').then((module) => {
-                    me.createTooltips(value)
-                })
+                import('../tooltip/Base.mjs').then(() => {
+                    this.createTooltip(value);
+                });
             }
         }
     }
@@ -1129,24 +1135,6 @@ class Base extends CoreBase {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
-    /**
-     * Triggered before the style config gets changed.
-     * @param {Object} value
-     * @param {Object} oldValue
-     * @returns {Object}
-     * @protected
-     */
-    beforeSetStyle(value, oldValue) {
-        let me = this;
-
-        if (typeof value === 'object') {
-            // merge the incoming style specification into the configured default
-            value = Neo.merge(Neo.merge({}, me.constructor.config.style), value)
-        }
-
-        return value
-    }
-
     /**
      * Changes the value of a vdom object attribute or removes it in case it has no value
      * @param {String} key
@@ -1167,31 +1155,31 @@ class Base extends CoreBase {
 
     /**
      * Creates the tooltip instances
-     * @param {Array|Object} value
+     * @param {Object|String} value
      * @protected
      */
-    createTooltips(value) {
-        if (!Array.isArray(value)) {
-            value = [value];
+    createTooltip(value) {
+        if (typeof value === 'string') {
+            value = {
+                text : value
+            };
         }
 
-        let me       = this,
-            tooltips = [],
-            tip;
-
-        value.forEach(item => {
-            // todo: check for existing tooltips
+        let me = this;
 
-            tip = Neo.create('Neo.tooltip.Base', {
+        if (value.ownInstance) {
+            me._tooltip = Neo.create('Neo.tooltip.Base', {
+                ...value,
                 appName    : me.appName,
-                componentId: me.id,
-                ...item
+                componentId: me.id
             });
-
-            tooltips.push(tip)
-        });
-
-        me._tooltips = tooltips // silent update
+        }
+        else {
+            me._tooltip = value;
+            Neo.tooltip.Base.createSingleton(me.app);
+            me.addCls('neo-uses-shared-tooltip');
+            me.update();
+        }
     }
 
     /**
@@ -1665,7 +1653,10 @@ class Base extends CoreBase {
         // does not clone existing Neo instances
         me._vdom = Neo.clone(vdom, true, true);
 
-        me[Neo.isEmpty(config.style) ? '_style' : 'style'] = config.style;
+        if (config.style) {
+            // If we are passed an object, merge it with the class's own style
+            me.style = Neo.typeOf(config.style) === 'Object' ? { ...config.style, ...me.constructor.config.style } : config.style;
+        }
 
         me.wrapperStyle = Neo.clone(config.wrapperStyle, false);
 

package/src/container/Base.mjs

@@ -8,6 +8,8 @@ import LayoutVBox from '../layout/VBox.mjs';
 import Logger     from '../util/Logger.mjs';
 import NeoArray   from '../util/Array.mjs';
 
+const byWeight = ({ weight : lhs = 0 }, { weight : rhs = 0 }) => lhs - rhs;
+
 /**
  * @class Neo.container.Base
  * @extends Neo.component.Base
@@ -33,10 +35,33 @@ class Base extends Component {
          */
         itemDefaults_: null,
         /**
-         * An array of config objects|instances|modules for each child component
+         * An array or an object of config objects|instances|modules for each child component
          * @member {Object[]} items_=[]
          * @example
          * import Button      from '../button/Base.mjs';
+         * import Toolbar     from '../toolbar/Base.mjs';
+         *
+         * let myButton = Neo.create(Button, {
+         *     text: 'Button1'
+         * });
+         *
+         * Neo.create(Toolbar, {
+         *     //...
+         *     items: {
+         *         buttonRef : {
+         *             ntype: 'button',   // by ntype
+         *             text : 'Button 2'
+         *         },
+         *         secondRef : {
+         *             module: Button,    // by imported module
+         *             text  : 'Button 3'
+         *         }
+         *     }
+         * });
+         *
+         * or
+         * @example
+         * import Button      from '../button/Base.mjs';
          * import MyRedButton from 'myapp/MyRedButton.mjs';
          * import Toolbar     from '../toolbar/Base.mjs';
          *
@@ -192,6 +217,36 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Convert items object to an array for onward storage as _items
+     * @param {Object|Object[]} value
+     * @param {Object|Object[]} oldValue
+     * @returns {Object[]}
+     * @protected
+     */
+     beforeSetItems(value, oldValue) {
+        if (Neo.typeOf(value) === 'Object') {
+            const result = [];
+
+            let hasWeight;
+
+            for (const ref in value) {
+                const item = value[ref]
+
+                item.reference = ref;
+                result.push(item);
+                hasWeight ||= ('weight' in item);
+            }
+
+            if (hasWeight) {
+                result.sort(byWeight);
+            }
+            value = result;
+        }
+
+        return value;
+    }
+
     /**
      * @param {Object|String} value
      * @param {Object|String|Neo.layout.Base} oldValue
@@ -446,7 +501,9 @@ class Base extends Component {
         }
 
         if (config.items) {
-            me._items = Neo.clone(config.items, true, true);
+            // If we are passed an object, merge the class's own items object into it
+            me.items = Neo.typeOf(config.items) === 'Object' ?
+                Neo.merge(Neo.clone(me.constructor.config.items), config.items) : config.items;
             delete config.items
         }
 

package/src/controller/Base.mjs

@@ -16,7 +16,23 @@ class Base extends CoreBase {
          * @member {String} ntype='controller'
          * @protected
          */
-        ntype: 'controller'
+        ntype: 'controller',
+
+        /**
+         * @member {Object} routes={}
+         */
+        routes: {},
+
+        /**
+         * @member {Object} handleRoutes={}
+         */
+        handleRoutes: {},
+
+        /**
+         * @member {String} defaultRoute=undefined
+         */
+        defaultRoute: null
+
     }
 
     /**
@@ -25,7 +41,21 @@ class Base extends CoreBase {
     construct(config) {
         super.construct(config);
 
-        HashHistory.on('change', this.onHashChange, this);
+        const me = this;
+
+        me.handleRoutes = {};
+        if (Object.keys(me.routes).length > 0) {
+            Object.keys(me.routes).forEach(key => {
+                if (key.toLowerCase() === 'default'){
+                    me.defaultRoute = me.routes[key];
+                } else {
+                    me.handleRoutes[key] = new RegExp(key.replace(/{[^\s/]+}/g, '([\\w-]+)')+'$');
+                }
+
+            });
+        }
+
+        HashHistory.on('change', me.onHashChange, me);
     }
 
     /**
@@ -37,6 +67,15 @@ class Base extends CoreBase {
         super.destroy(...args);
     }
 
+    /**
+     * Placeholder method which gets triggered when an invalid route is called
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onNoRouteFound(value, oldValue) {
+
+    }
+
     /**
      * Placeholder method which gets triggered when the hash inside the browser url changes
      * @param {Object} value
@@ -44,6 +83,46 @@ class Base extends CoreBase {
      */
     onHashChange(value, oldValue) {
 
+        const me = this;
+        let hasRouteBeenFound = false;
+        Object.keys(me.handleRoutes).every( key => {
+            let preHandler = undefined;
+            let executeHandler = undefined;
+            let responsePreHandler = undefined;
+
+            const result = value.hashString.match(me.handleRoutes[key]);
+            if (result){
+                const target = me.routes[key];
+                if (Neo.isString(target)){
+                    executeHandler = this.routes[key];
+                    responsePreHandler = true;
+                }
+                if (Neo.isObject(target)){
+                    executeHandler = this.routes[key].handler;
+                    preHandler = this.routes[key].preHandler;
+                    responsePreHandler = preHandler ? me[preHandler]?.call(this, value, oldValue, result.splice(1,result.length - 1)) : true;
+                }
+
+                hasRouteBeenFound = true;
+
+                if (responsePreHandler) {
+                    this[executeHandler]?.call(this, value, oldValue, result.splice(1,result.length - 1));
+                } else {
+                    console.warn('No preHandler defined for routes -> todo it better');
+                }
+                return false;
+
+            }
+            return true;
+        });
+
+        if (Object.keys(me.handleRoutes).length > 0 && !hasRouteBeenFound) {
+            if (me.defaultRoute) {
+                this[me.defaultRoute]?.call(this, value, oldValue);
+            } else {
+                this.onNoRouteFound(value, oldValue);
+            }
+        }
     }
 
     /**
@@ -53,9 +132,10 @@ class Base extends CoreBase {
         let currentHash = HashHistory.first();
 
         currentHash && this.onHashChange(currentHash, null);
-
-        super.onConstructed();
     }
+
+
+
 }
 
 Neo.applyClassConfig(Base);

package/src/controller/Component.mjs

@@ -69,10 +69,22 @@ class Component extends Base {
      * @param {String} handlerName
      * @returns {Neo.controller.Component|null}
      */
-    getHandlerScope(handlerName) {
+    getHandlerScope(handlerName, component) {
         let me     = this,
             parent = me.parent;
 
+        if (component) {
+            // Look for ths function *name* first in the Component itself.
+            // If we find it, return true so calling code knows not to continue to search.
+            const handlerCb = component.resolveCallback(handlerName, component);
+
+            // Handler fn is resolved in the Component or its own parent chain.
+            // Return a status indicating that we do not need an erly binding
+            if (handlerCb.fn) {
+                return true;
+            }
+        }
+
         return Neo.isFunction(me[handlerName]) ?
             me : parent ?
             parent.getHandlerScope(handlerName) : null;
@@ -140,9 +152,12 @@ class Component extends Base {
             eventHandler, handlerScope;
 
         if (handler && typeof handler === 'string') {
-            handlerScope = me.getHandlerScope(handler);
+            handlerScope = me.getHandlerScope(handler, component);
 
-            component.handler = handlerScope[handler].bind(component.handlerScope || handlerScope)
+            // If the handler name was not resolved in the Component itself, bind it
+            if (handlerScope !== true) {
+                component.handler = handlerScope[handler].bind(component.handlerScope || handlerScope);
+            }
         }
 
         if (listeners) {
@@ -150,11 +165,11 @@ class Component extends Base {
                 if (key !== 'scope' && key !== 'delegate') {
                     if (Neo.isString(value)) {
                         eventHandler = value;
-                        handlerScope = me.getHandlerScope(eventHandler);
+                        handlerScope = me.getHandlerScope(eventHandler, component);
 
                         if (!handlerScope) {
                             Logger.logError('Unknown event handler for', eventHandler, component)
-                        } else {
+                        } else if (handlerScope !== true) {
                             listeners[key] = {};
                             listeners[key].fn = handlerScope[eventHandler].bind(handlerScope)
                         }
@@ -162,11 +177,11 @@ class Component extends Base {
                         value.forEach(listener => {
                             if (Neo.isObject(listener) && listener.hasOwnProperty('fn') && Neo.isString(listener.fn)) {
                                 eventHandler = listener.fn;
-                                handlerScope = me.getHandlerScope(eventHandler);
+                                handlerScope = me.getHandlerScope(eventHandler, component);
 
                                 if (!handlerScope) {
                                     Logger.logError('Unknown event handler for', eventHandler, component)
-                                } else {
+                                } else if (handlerScope !== true) {
                                     listener.fn = handlerScope[eventHandler].bind(handlerScope)
                                 }
                             }

package/src/core/Observable.mjs

@@ -98,31 +98,50 @@ class Observable extends Base {
         let me        = this,
             args      = [].slice.call(arguments, 1),
             listeners = me.listeners,
-            eventConfig, events, i, len;
+            handler, handlers, i, len;
 
         if (listeners && listeners[name]) {
-            events = [...listeners[name]];
-            len    = events.length;
+            handlers = [...listeners[name]];
+            len    = handlers.length;
 
             for (i = 0; i < len; i++) {
-                eventConfig = events[i];
+                handler = handlers[i];
 
-                if (!Neo.isFunction(eventConfig.fn)) {
-                    eventConfig.fn = eventConfig.scope[eventConfig.fn];
-                }
+                // Resolve function name on the scope (oe me), or, if it starts with 'up.'
+                // look in the ownership hierarchy from me.
+                const cb = me.resolveCallback(handler.fn, handler.scope || me);
 
                 // remove the listener, in case the scope no longer exists
-                if (eventConfig.scope && !eventConfig.scope.id) {
+                if (cb.scope && !cb.scope.id) {
                     listeners[name].splice(i, 1);
                 } else {
                     if (!me.suspendEvents) {
-                        eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
+                        // Object event format. Inject firer reference in as 'source'
+                        if (args.length === 1 && typeof(args[0]) === 'object') {
+                            args[0].source = me.id;
+                        }
+                        cb.fn.apply(cb.scope, handler.data ? args.concat(handler.data) : args);
                     }
                 }
             }
         }
     }
 
+    /**
+     * Call the passed function, or a function by *name* which exists in the passed scope's
+     * or this component's ownership chain.
+     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
+     * @param {Object} scope The scope to find the function in if it is specified as a string.
+     * @param {Array} args Arguments to pass to the callback.
+     */
+    callback(fn, scope=this, args) {
+        if (fn) {
+            const handler = this.resolveCallback(fn, scope);
+
+            handler.fn.apply(handler.scope, args);
+        }
+    }
+
     /**
      * @param {Object} config
      */
@@ -240,6 +259,28 @@ class Observable extends Base {
 
     // }
 
+    /**
+     * Locate a callable function by name in the passed scope.
+     *
+     * If the name starts with 'up.', the parent Component chain is searched.
+     *
+     * This is used by Observable.fire and by 'handler' function calls to resolve
+     * string function names in the Component's own hierarchy.
+     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
+     * @param {Object} scope The scope to find the function in if it is specified as a string.
+     * @returns {Object}
+     */
+    resolveCallback(fn, scope=this) {
+        if (typeof fn === 'string') {
+            if (!scope[fn] && fn.startsWith('up.')) {
+                fn = fn.slice(3);
+                while (!scope[fn] && (scope = scope.parent));
+            }
+            fn = scope[fn];
+        }
+        return { scope,  fn };
+    }
+
     /**
      * Alias for removeListener
      * @param {Object|String} name

package/src/form/field/Range.mjs

@@ -5,6 +5,14 @@ import Number from './Number.mjs';
  * @extends Neo.form.field.Number
  */
 class Range extends Number {
+    /**
+     * Removing the debounce for range fields
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {}
+
     static config = {
         /**
          * @member {String} className='Neo.form.field.Range'

package/src/main/DomEvents.mjs

@@ -262,12 +262,18 @@ class DomEvents extends Base {
             path = event.path;
         }
 
-        return {
+        const result = {
             path     : path.map(e => this.getTargetData(e)),
             target   : this.getTargetData(event.target),
             timeStamp: event.timeStamp,
             type     : event.type
+        };
+
+        if (event.relatedTarget) {
+            result.relatedTarget = this.getTargetData(event.relatedTarget);
         }
+
+        return result;
     }
 
     /**
@@ -552,7 +558,7 @@ class DomEvents extends Base {
      */
     onMouseEnter(event) {
         let me       = this,
-            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null};
+            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null, toElementId: event.toElement?.id || null};
 
         me.sendMessageToApp(appEvent);
         me.fire('mouseEnter', appEvent)
@@ -563,7 +569,7 @@ class DomEvents extends Base {
      */
     onMouseLeave(event) {
         let me       = this,
-            appEvent = {...me.getMouseEventData(event), toElementId: event.toElement?.id || null};
+            appEvent = {...me.getMouseEventData(event), fromElementId: event.fromElement?.id || null, toElementId: event.toElement?.id || null};
 
         me.sendMessageToApp(appEvent);
         me.fire('mouseLeave', appEvent)

package/src/manager/DomEvent.mjs

@@ -127,6 +127,9 @@ class DomEvent extends Base {
                                     data = Neo.clone(data, true, true);
 
                                     data.component = component;
+
+                                    // Handler needs to know which actual target matched the delegate
+                                    data.currentTarget = delegationTargetId;
                                     listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {

package/src/menu/List.mjs

@@ -311,7 +311,7 @@ class List extends BaseList {
                 record   = me.store.get(recordId),
                 submenu;
 
-            record.handler?.call(me, record);
+            me.callback(record.handler, me, [record]);
 
             record.route && Neo.Main.setRoute({
                 appName: me.appName,