neo.mjs 6.8.2 → 6.9.0

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/dialog/Base.mjs

@@ -376,10 +376,7 @@ class Base extends Panel {
         me.closeOrHide(false);
 
         if (me.closeAction === 'hide') {
-            await Neo.applyDeltas(appName, [
-                {id, cls: {remove: ['animated-hiding-showing']}},
-                {id, action: 'removeNode'}
-            ])
+            await Neo.applyDeltas(appName, {id, action: 'removeNode'})
         }
     }
 

package/src/form/field/FileUpload.mjs

@@ -691,13 +691,17 @@ class FileUpload extends Base {
 
         delete vdom.inert;
 
+        let isChangeEventNeeded;
+
         switch (value) {
             case 'ready':
                 anchor.tag = 'div';
                 anchor.href = '';
+                isChangeEventNeeded = true;
                 break;
             case 'upload-failed':
                 status.innerHTML = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
+                isChangeEventNeeded = true;
                 break;
             case 'processing':
                 status.innerHTML = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
@@ -706,6 +710,7 @@ class FileUpload extends Base {
             case 'scan-failed':
                 status.innerHTML = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
                 me.error = me.pleaseCheck;
+                isChangeEventNeeded = true;
                 break;
             case 'downloadable':
                 anchor.tag = 'a';
@@ -713,14 +718,20 @@ class FileUpload extends Base {
                     [me.documentIdParameter] : me.documentId
                 });
                 status.innerHTML = me.fileSize;
+                isChangeEventNeeded = true;
                 break;
             case 'not-downloadable':
                 status.innerHTML = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                isChangeEventNeeded = true;
                 break;
             case 'deleted':
                 status.innerHTML = me.fileWasDeleted;
+                isChangeEventNeeded = true;
         }
 
+        if (isChangeEventNeeded) {
+            me.fireChangeEvent(me.file)
+        }
         me.validate();
         me.update();
 

package/src/form/field/Picker.mjs

@@ -32,10 +32,6 @@ class Picker extends Text {
          * @protected
          */
         clientRects: null,
-        /**
-         * @member {Boolean} editable_=true
-         */
-        editable_: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -110,19 +106,6 @@ class Picker extends Text {
         })
     }
 
-    /**
-     * Triggered after the editable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetEditable(value, oldValue) {
-        let cls = this.cls;
-
-        NeoArray.toggle(cls, 'neo-not-editable', !value);
-        this.cls = cls
-    }
-
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value

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/form/field/Text.mjs

@@ -75,6 +75,15 @@ class Text extends Base {
          * @member {String[]|null} disabledChars_=null
          */
         disabledChars_: null,
+        /**
+         * Setting `editable` to `false` means that the input field will be read-only
+         * but the field is still workable and may have its value changed by user interaction.
+         *
+         * For example picker fields such as `Date` and `Select` may still have their
+         * values changed by selecting from the picker using keyboard or pointer.
+         * @member {Boolean} editable_=true
+         */
+        editable_: true,
         /**
          * Configure the value of empty fields. null or an empty string is recommended.
          * @member {String|null} emptyValue=null
@@ -184,6 +193,10 @@ class Text extends Base {
          */
         placeholderText_: null,
         /**
+         * Setting `readOnly` means that the field may not be changed by user interaction.
+         *
+         * The input field will be read-only and other ways of changing the field's value
+         * (such as by operating pickers) will be disabled.
          * @member {Boolean} readOnly_=false
          */
         readOnly_: false,
@@ -342,6 +355,22 @@ class Text extends Base {
         }
     }
 
+    /**
+     * Triggered after the editable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetEditable(value, oldValue) {
+        const
+            me      = this,
+            { cls } = me;
+
+        NeoArray.toggle(cls, 'neo-not-editable', !value);
+        me.cls = cls
+        me.changeInputElKey('readonly', value ? false : true);
+    }
+
     /**
      * Triggered after the error config got changed
      * @param {String|null} value

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

@@ -35,6 +35,13 @@ class Picker extends Base {
     onTriggerClick(data) {
         this.field.onPickerTriggerClick();
     }
+
+    /**
+     * @returns {Boolean} true in case the trigger should be hidden
+     */
+    getHiddenState() {
+        return !this.field.editable;
+    }    
 }
 
 Neo.applyClassConfig(Picker);

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,