neo.mjs 6.9.3 → 6.9.5

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.3'
+         * @member {String} version='6.9.5'
          */
-        version: '6.9.3'
+        version: '6.9.5'
     }
 
     /**

package/apps/route/view/MainViewController.mjs

@@ -45,7 +45,7 @@ class MainContainerController extends Component {
     */
 
 
-   doPrehandling(value, oldValue, params = null) {
+   doPrehandling(params = null, value, oldValue) {
       const userId = parseInt(params.userId);
       if (userId > 0 && userId === this.data.activeUser) {
          return true;
@@ -137,27 +137,27 @@ class MainContainerController extends Component {
       this.#removeMetaButtonSelection();
    }
 
-   handleHomeRoute(value, oldValue, params = null) {
+   handleHomeRoute(params = null, value, oldValue) {
       const centerContainer = this.getReference('center-container');
       centerContainer.layout.activeIndex = 4;
    }
 
-   handleSection1Route(value, oldValue, params = null) {
+   handleSection1Route(params = null, value, oldValue) {
       const centerContainer = this.getReference('center-container');
       centerContainer.layout.activeIndex = 2;
    }
 
-   handleSection2Route(value, oldValue, params = null) {
+   handleSection2Route(params = null, value, oldValue) {
       const centerContainer = this.getReference('center-container');
       centerContainer.layout.activeIndex = 3;
    }
 
-   handleContactRoute(value, oldValue, params = null) {
+   handleContactRoute(params = null, value, oldValue) {
       const centerContainer = this.getReference('center-container');
       centerContainer.layout.activeIndex = 0;
    }
 
-   handleUserRoute(value, oldValue, params = null) {
+   handleUserRoute(params = null, value, oldValue) {
       const centerContainer = this.getReference('center-container');
       centerContainer.layout.activeIndex = 1
    }

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.3'
+         * @member {String} version='6.9.5'
          */
-        version: '6.9.3'
+        version: '6.9.5'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.3",
+    "version": "6.9.5",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",
-        "sass": "^1.69.4",
+        "sass": "^1.69.5",
         "showdown": "^2.1.0",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.9.3'
+     * @default '6.9.5'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.9.3'
+    version: '6.9.5'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -380,20 +380,25 @@ Neo = globalThis.Neo = Object.assign({
      * @memberOf module:Neo
      * @param {Object} target
      * @param {Object} source
+     * @param {Object} defaults
      * @returns {Object} target
      */
-    merge(target, source) {
+    merge(target, source, defaults) {
+        if (defaults) {
+            return Neo.merge(Neo.merge(target, defaults), source)
+        }
+
         for (const key in source) {
             const value = source[key];
 
             if (Neo.typeOf(value) === 'Object') {
-                target[key] = Neo.merge(target[key] || {}, value);
+                target[key] = Neo.merge(target[key] || {}, value)
             } else {
-                target[key] = value;
+                target[key] = value
             }
         }
 
-        return target;
+        return target
     },
 
     /**

package/src/component/Base.mjs

@@ -625,7 +625,8 @@ class Base extends CoreBase {
             me[state]()
         }
 
-        me.fire(state, {id: me.id})
+        me.fire(state, {id: me.id});
+        me.fire('hiddenChange', {id: me.id, oldValue, value})
     }
 
     /**
@@ -995,8 +996,9 @@ class Base extends CoreBase {
                 edgeAlign: value
             }
         }
+
         // merge the incoming alignment specification into the configured default
-        return Neo.merge(Neo.merge({}, me.constructor.config.align), value)
+        return Neo.merge({}, value, me.constructor.config.align)
     }
 
     /**

package/src/controller/Base.mjs

@@ -1,6 +1,10 @@
 import CoreBase    from '../core/Base.mjs';
 import HashHistory from '../util/HashHistory.mjs';
 
+const
+    amountSlashesRegex = /\//g,
+    routeParamRegex    = /{[^\s/]+}/g
+
 /**
  * @class Neo.controller.Base
  * @extends Neo.core.Base
@@ -17,22 +21,25 @@ class Base extends CoreBase {
          * @protected
          */
         ntype: 'controller',
-
         /**
-         * @member {Object} routes={}
+         * @member {String} defaultRoute=undefined
          */
-        routes_: {},
-
+        defaultRoute: null,
         /**
          * @member {Object} handleRoutes={}
          */
         handleRoutes: {},
-
         /**
-         * @member {String} defaultRoute=undefined
+         * @example
+         * routes: {
+         *     '/home'                         : 'handleHomeRoute',
+         *     '/users/{userId}'               : {handler: 'handleUserRoute', preHandler: 'preHandleUserRoute'},
+         *     '/users/{userId}/posts/{postId}': 'handlePostRoute',
+         *     'default'                       : 'handleOtherRoutes'
+         * }
+         * @member {Object} routes={}
          */
-        defaultRoute: null
-
+        routes_: {}
     }
 
     /**
@@ -41,43 +48,33 @@ class Base extends CoreBase {
     construct(config) {
         super.construct(config);
 
-        const me = this;
-        HashHistory.on('change', me.onHashChange, me);
+        HashHistory.on('change', this.onHashChange, this)
     }
 
      /**
-     * Triggered after the badgePosition config got changed
-     * @param {String} value
-     * @param {String} oldValue
+     * Triggered after the routes config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
      * @protected
      */
     afterSetRoutes(value, oldValue){
-        const me = this;
+        let me        = this,
+            routeKeys = Object.keys(value);
 
-        const functionSort = (a,b) => { 
-            const usedRegex = new RegExp("/", "g");
-            return a.match(usedRegex).length - b.match(usedRegex).length;
-        }
-        me.routes = Object.keys(value).sort(functionSort).reduce(
-            (obj, key) => { 
-              obj[key] = value[key]; 
-              return obj;
-            }, 
-            {}
-          );
-    
+         me.routes = routeKeys.sort(me.#sortRoutes).reduce((obj, key) => {
+             obj[key] = value[key];
+             return obj
+         }, {});
 
         me.handleRoutes = {};
-        if (Object.keys(me.routes).length > 0) {
-            Object.keys(me.routes).forEach(key => {
-                if (key.toLowerCase() === 'default'){
-                    me.defaultRoute = value[key];
-                } else {
-                    me.handleRoutes[key] = new RegExp(key.replace(/{[^\s/]+}/g, '([\\w-]+)')+'$');
-                }
 
-            });
-        }
+        routeKeys.forEach(key => {
+            if (key.toLowerCase() === 'default'){
+                me.defaultRoute = value[key]
+            } else {
+                me.handleRoutes[key] = new RegExp(key.replace(routeParamRegex, '([\\w-]+)')+'$')
+            }
+        })
     }
 
     /**
@@ -90,12 +87,12 @@ class Base extends CoreBase {
     }
 
     /**
-     * Placeholder method which gets triggered when an invalid route is called
-     * @param {Object} value
-     * @param {Object} oldValue
+     *
      */
-    onNoRouteFound(value, oldValue) {
+    onConstructed() {
+        let currentHash = HashHistory.first();
 
+        currentHash && this.onHashChange(currentHash, null)
     }
 
     /**
@@ -104,73 +101,85 @@ class Base extends CoreBase {
      * @param {Object} oldValue
      */
     onHashChange(value, oldValue) {
+        let me                = this,
+            hasRouteBeenFound = false,
+            handleRoutes      = me.handleRoutes,
+            routeKeys         = Object.keys(handleRoutes),
+            routes            = me.routes,
+            handler, preHandler, responsePreHandler, result, route;
+
+        routeKeys.forEach(key => {
+            handler            = null;
+            preHandler         = null;
+            responsePreHandler = null;
+
+            result = value.hashString.match(handleRoutes[key]);
+
+            if (result) {
+                const
+                    arrayParamIds    = key.match(routeParamRegex),
+                    arrayParamValues = result.splice(1, result.length - 1),
+                    paramObject      = {};
+
+                if (arrayParamIds && arrayParamIds.length !== arrayParamValues.length) {
+                    throw 'Number of IDs and number of Values do not match';
+                }
 
-        const me = this;
-        let hasRouteBeenFound = false;
-        Object.keys(me.handleRoutes).forEach( key => {
-            let preHandler = undefined;
-            let executeHandler = undefined;
-            let responsePreHandler = undefined;
-
-            const result = value.hashString.match(me.handleRoutes[key]);
-            if (result){
-
-                const paramsRegex = /{[^\s/]+}/g;
-                const arrayParamIds = key.match(paramsRegex);
-                const arrayParamValues = result.splice(1,result.length - 1);
-                if (arrayParamIds && arrayParamIds.length !== arrayParamValues.length){
-                    throw "Number of IDs and number of Values do not match";
-                } 
-
-                const paramObject = {};
-                for(let i=0;  arrayParamIds && i< arrayParamIds.length; i++){
-                    paramObject[ arrayParamIds[i].substring(1,arrayParamIds[i].length -1)] = arrayParamValues[i];
+                for (let i = 0; arrayParamIds && i < arrayParamIds.length; i++) {
+                    paramObject[arrayParamIds[i].substring(1, arrayParamIds[i].length - 1)] = arrayParamValues[i];
                 }
 
-                const target = me.routes[key];
-                if (Neo.isString(target)){
-                    executeHandler = this.routes[key];
+                route = routes[key];
+
+                if (Neo.isString(route)) {
+                    handler            = route;
                     responsePreHandler = true;
-                }
-                if (Neo.isObject(target)){
-                    executeHandler = this.routes[key].handler;
-                    preHandler = this.routes[key].preHandler;
+                } else if (Neo.isObject(route)) {
+                    handler    = route.handler;
+                    preHandler = route.preHandler;
+
                     if (preHandler) {
-                        responsePreHandler =  me[preHandler]?.call(this, value, oldValue, paramObject);
+                        responsePreHandler = me[preHandler]?.call(me, paramObject, value, oldValue);
                     } else {
                         responsePreHandler = true;
-                        console.warn('No preHandler defined for routes -> todo it better');
-                    }                    
+                    }
                 }
 
                 hasRouteBeenFound = true;
 
                 if (responsePreHandler) {
-                    this[executeHandler]?.call(this, value, oldValue, paramObject);
+                    me[handler]?.call(me, paramObject, value, oldValue)
                 }
             }
         });
 
-        if (Object.keys(me.handleRoutes).length > 0 && !hasRouteBeenFound) {
+        if (routeKeys.length > 0 && !hasRouteBeenFound) {
             if (me.defaultRoute) {
-                this[me.defaultRoute]?.call(this, value, oldValue);
+                me[me.defaultRoute]?.(value, oldValue)
             } else {
-                this.onNoRouteFound(value, oldValue);
+                me.onNoRouteFound(value, oldValue)
             }
         }
     }
 
     /**
-     *
+     * Placeholder method which gets triggered when an invalid route is called
+     * @param {Object} value
+     * @param {Object} oldValue
      */
-    onConstructed() {
-        let currentHash = HashHistory.first();
+    onNoRouteFound(value, oldValue) {
 
-        currentHash && this.onHashChange(currentHash, null);
     }
 
-
-
+    /**
+     * Internal helper method to sort routes by their amount of slashes
+     * @param {String} route1
+     * @param {String} route2
+     * @returns {Number}
+     */
+    #sortRoutes(route1, route2) {
+        return route1.match(amountSlashesRegex).length - route2.match(amountSlashesRegex).length
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/core/Base.mjs

@@ -71,6 +71,12 @@ class Base {
          * @protected
          */
         ntype: 'base',
+        /**
+         * While it is recommended to change the static delayable configs on class level,
+         * you can change it on instance level too. If not null, we will do a deep merge.
+         * @member {Object} delayable=null
+         */
+        delayable: null,
         /**
          * The unique component id
          * @member {String|null} id_=null
@@ -178,9 +184,11 @@ class Base {
      * Adjusts all methods inside static delayable
      */
     applyDelayable() {
-        let me = this;
+        let me            = this,
+            ctorDelayable = me.constructor.delayable,
+            delayable     = me.delayable ? Neo.merge({}, me.delayable, ctorDelayable) : ctorDelayable;
 
-        Object.entries(me.constructor.delayable).forEach(([key, value]) => {
+        Object.entries(delayable).forEach(([key, value]) => {
             let map = {
                 debounce() {me[key] = new debounce(me[key], me, value.timer)},
                 throttle() {me[key] = new throttle(me[key], me, value.timer)}

package/src/form/field/Picker.mjs

@@ -85,13 +85,6 @@ class Picker extends Text {
         }]
     }
 
-    /**
-     * Internal flag to prevent showing a picker multiple times
-     * @member {Boolean} pickerIsMounting=false
-     * @protected
-     */
-    pickerIsMounting = false
-
     /**
      * @param {Object} config
      */
@@ -183,6 +176,8 @@ class Picker extends Text {
             }
         });
 
+        me.picker.on('hiddenChange', me.onPickerHiddenChange, me);
+
         return me.picker
     }
 
@@ -291,6 +286,17 @@ class Picker extends Text {
         this.pickerIsMounted && this.hidePicker()
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Boolean} data.oldValue
+     * @param {Boolean} data.value
+     * @protected
+     */
+    onPickerHiddenChange(data) {
+        this.pickerIsMounted = !data.value
+    }
+
     /**
      * Called by form.field.trigger.Picker
      * @protected
@@ -303,8 +309,7 @@ class Picker extends Text {
      *
      */
     showPicker() {
-        let picker = this.getPicker();
-        picker.hidden = false
+        this.getPicker().hidden = false
     }
 
     /**

package/src/tab/header/Button.mjs

@@ -20,6 +20,11 @@ class Button extends BaseButton {
          * @member {String[]} baseCls=['neo-button','neo-tab-button']
          */
         baseCls: ['neo-tab-header-button', 'neo-button'],
+        /**
+         * Specify a role tag attribute for the vdom root.
+         * @member {String|null} role='tab'
+         */
+        role: 'tab',
         /**
          * @member {Boolean} useActiveTabIndicator_=true
          */
@@ -28,7 +33,7 @@ class Button extends BaseButton {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'button', type: 'button', cn: [
+        {tag: 'button', cn: [
             {tag: 'span', cls: ['neo-button-glyph']},
             {tag: 'span', cls: ['neo-button-text']},
             {cls: ['neo-button-badge']},
@@ -39,6 +44,26 @@ class Button extends BaseButton {
         ]}
     }
 
+    /**
+     * Triggered after the pressed config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetPressed(value, oldValue) {
+        super.afterSetPressed(value, oldValue);
+
+        let me = this;
+
+        if (value) {
+            me.vdom['aria-selected'] = true
+        } else {
+            delete me.vdom['aria-selected']
+        }
+
+        me.update()
+    }
+
     /**
      * Triggered after the useActiveTabIndicator config got changed
      * @param {Boolean} value