neo.mjs 6.9.2 → 6.9.4

package/apps/ServiceWorker.mjs

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

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.2'
+         * @member {String} version='6.9.4'
          */
-        version: '6.9.2'
+        version: '6.9.4'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.2",
+    "version": "6.9.4",
     "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.2'
+     * @default '6.9.4'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.9.2'
+    version: '6.9.4'
 };
 
 Object.assign(DefaultConfig, {

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})
     }
 
     /**

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/controller/Component.mjs

@@ -134,6 +134,15 @@ class Component extends Base {
         return component || null
     }
 
+    /**
+     * Convenience shortcut for accessing model.Component based data.Stores
+     * @param {String} key
+     * @returns {Neo.data.Store}
+     */
+    getStore(key) {
+        return this.getModel().getStore(key)
+    }
+
     /**
      * Override this method inside your view controllers as a starting point in case you need references
      * (instead of using onConstructed() inside your controller)

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

@@ -661,12 +661,13 @@ class Select extends Picker {
                     autocomplete: 'no',
                     autocorrect : 'off',
                     cls         : ['neo-textfield-input', 'neo-typeahead-input'],
+                    disabled    : true,
                     id          : me.getInputHintId(),
                     spellcheck  : 'false'
                 }, inputEl.vdom]
             }
         } else {
-            VDomUtil.replaceVdomChild(vdom, inputEl.parentNode.id, inputEl.vdom);
+            VDomUtil.replaceVdomChild(vdom, inputEl.parentNode.id, inputEl.vdom)
         }
 
         !silent && me.update()

package/src/model/Component.mjs

@@ -458,7 +458,7 @@ class Component extends Base {
      * Access the closest store inside the VM parent chain.
      * @param {String} key
      * @param {Neo.model.Component} originModel=this for internal usage only
-     * @returns {*} value
+     * @returns {Neo.data.Store}
      */
     getStore(key, originModel=this) {
         let me     = this,

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