neo.mjs 6.9.1 → 6.9.2

package/apps/ServiceWorker.mjs

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

package/apps/route/view/MainViewController.mjs

@@ -20,7 +20,7 @@ class MainContainerController extends Component {
          '/contact': 'handleContactRoute',
          '/users/{userId}': { handler: 'handleUserRoute', preHandler: 'doPrehandling' },
          // '/users/{userId}' : {handler: 'handleUserRoute', preHandler: 'doPrehandling'}, //example
-         // '/users/{userId}/posts/{postId}' : {handler:'handleUserPostsRoute', preHandler: 'doPrehandlingFalse'}, //example
+         //'/users/{userId}/posts/{postId}' : {handler:'handleUserPostsRoute', preHandler: 'doPrehandlingFalse'}, //example
          // default: 'doDefaultHandling' //optional - example
       },
 
@@ -46,7 +46,7 @@ class MainContainerController extends Component {
 
 
    doPrehandling(value, oldValue, params = null) {
-      const userId = parseInt(params);
+      const userId = parseInt(params.userId);
       if (userId > 0 && userId === this.data.activeUser) {
          return true;
       }
@@ -132,7 +132,6 @@ class MainContainerController extends Component {
    * @param {Object} data
    */
    onSwitchButtonMetaReset(data) {
-      const currentUser = this.data.activeUser;
       this.data.activeUser = 0;
       this.#setUsername();
       this.#removeMetaButtonSelection();

package/examples/ServiceWorker.mjs

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

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -69,13 +69,14 @@ class MainContainer extends Viewport {
                     weight: -10000,
 
                     // Embed a tooltip request into the DOM
-                    vdom  : {
-                        data : {
-                            'neo-tooltip' : 'The Label'
+                    vdom: {
+                        data: {
+                            neoTooltip: 'The Label'
                         }
                     }
                 },
                 rowsPerPage: {
+                    style  : {margin: '0 .5em'},
                     tooltip: 'Set the number of rows to display in a page',
                     weight : -999
                 }

package/examples/treeAccordion/MainContainer.mjs

@@ -23,10 +23,6 @@ class MainContainer extends ConfigurationViewport {
         cls                 : ['examples-container-accordion']
     }
 
-    onConfigChange(config, opts) {
-        this.exampleComponent.items[0][config] = opts.value;
-    }
-
     createConfigurationComponents() {
         let me       = this,
             treeList = me.exampleComponent.items[0];
@@ -74,6 +70,12 @@ class MainContainer extends ConfigurationViewport {
             stepSize : 3,
             style    : {marginTop: '10px'},
             value    : 400
+        }, {
+            ntype  : 'button',
+            handler: me.onRemoveDomButtonClick.bind(me),
+            style  : {marginTop: '20px'},
+            text   : 'Remove DOM',
+            width  : 100
         }];
     }
 
@@ -169,6 +171,23 @@ class MainContainer extends ConfigurationViewport {
             }]
         });
     }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        this.exampleComponent.items[0][config] = opts.value;
+    }
+
+    /**
+     *
+     * @param data
+     */
+    onRemoveDomButtonClick(data) {
+        let accordion = this.exampleComponent.items[0];
+        accordion.hidden = !accordion.hidden
+    }
 }
 
 Neo.applyClassConfig(MainContainer);

package/package.json

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

package/src/collection/Filter.mjs

@@ -98,7 +98,7 @@ class Filter extends Base {
     }
 
     afterSetDisabled(...args) {
-        this.fireChangeEvent(...args);
+        this.fireChangeEvent(...args)
     }
 
     afterSetFilterBy(value, oldValue) {
@@ -106,28 +106,28 @@ class Filter extends Base {
     }
 
     afterSetIsUpdating(value, oldValue) {
-        value === false && this.fireChangeEvent(value, oldValue);
+        value === false && this.fireChangeEvent(value, oldValue)
     }
 
     afterSetOperator(...args) {
-        this.fireChangeEvent(...args);
+        this.fireChangeEvent(...args)
     }
 
     afterSetProperty(...args) {
-        this.fireChangeEvent(...args);
+        this.fireChangeEvent(...args)
     }
 
     afterSetValue(...args) {
-        this.fireChangeEvent(...args);
+        this.fireChangeEvent(...args)
     }
 
     beforeSetFilterBy(value, oldValue) {
         if (value && typeof value !== 'function') {
             Neo.logError('filterBy has to be a function', this);
-            return oldValue;
+            return oldValue
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -138,7 +138,7 @@ class Filter extends Base {
      * @protected
      */
     beforeSetOperator(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'operator');
+        return this.beforeSetEnumValue(value, oldValue, 'operator')
     }
 
     /**
@@ -152,10 +152,10 @@ class Filter extends Base {
             value    = me.value;
 
         if (!me.filterBy) {
-            return {operator, property, value};
+            return {operator, property, value}
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -170,7 +170,7 @@ class Filter extends Base {
                 operator: me.operator,
                 property: me.property,
                 value   : me.value
-            });
+            })
         }
     }
 
@@ -187,7 +187,7 @@ class Filter extends Base {
             filterValue, recordValue;
 
         if (me._disabled) {
-            return false;
+            return false
         }
 
         if (me._filterBy) {
@@ -196,11 +196,11 @@ class Filter extends Base {
                 filteredItems,
                 item,
                 value: me._value
-            });
+            })
         }
 
         if (me.includeEmptyValues && (me._value === null || Neo.isEmpty(me._value))) {
-            return false;
+            return false
         }
 
         filterValue = me._value;
@@ -208,47 +208,56 @@ class Filter extends Base {
 
         if (filterValue instanceof Date && recordValue instanceof Date) {
             filterValue = filterValue.valueOf();
-            recordValue = recordValue.valueOf();
+            recordValue = recordValue.valueOf()
         }
 
-        return !Filter[me._operator](recordValue, filterValue);
+        return !Filter[me._operator](recordValue, filterValue)
     }
 
-    static ['=='] (a, b) {return a == b;}
-    static ['==='](a, b) {return a === b;}
-    static ['!='] (a, b) {return a != b;}
-    static ['!=='](a, b) {return a !== b;}
-    static ['<']  (a, b) {return a < b;}
-    static ['<='] (a, b) {return a <= b;}
-    static ['>']  (a, b) {return a > b;}
-    static ['>='] (a, b) {return a >= b;}
+    static ['=='] (a, b) {return a == b}
+    static ['==='](a, b) {return a === b}
+    static ['!='] (a, b) {return a != b}
+    static ['!=='](a, b) {return a !== b}
+    static ['<']  (a, b) {return a < b}
+    static ['<='] (a, b) {return a <= b}
+    static ['>']  (a, b) {return a > b}
+    static ['>='] (a, b) {return a >= b}
 
     static ['endsWith'](a, b) {
-        return a?.toLowerCase().endsWith(b?.toLowerCase()) || false;
+        if (!Neo.isString(a)) {a = String(a)}
+        if (!Neo.isString(b)) {b = String(b)}
+
+        return a?.toLowerCase().endsWith(b?.toLowerCase()) || false
     }
 
     static ['excluded'](a, b) {
-        return b.indexOf(a) < 0;
+        return b.indexOf(a) < 0
     }
 
     static ['included'](a, b) {
-        return b.indexOf(a) > -1;
+        return b.indexOf(a) > -1
     }
 
     static ['isDefined'](a, b) {
-        return a !== undefined;
+        return a !== undefined
     }
 
     static ['isUndefined'](a, b) {
-        return a === undefined;
+        return a === undefined
     }
 
     static ['like'](a, b) {
-        return a?.toLowerCase().includes(b?.toLowerCase()) || false;
+        if (!Neo.isString(a)) {a = String(a)}
+        if (!Neo.isString(b)) {b = String(b)}
+
+        return a?.toLowerCase().includes(b?.toLowerCase()) || false
     }
 
     static ['startsWith'](a, b) {
-        return a?.toLowerCase().startsWith(b?.toLowerCase()) || false;
+        if (!Neo.isString(a)) {a = String(a)}
+        if (!Neo.isString(b)) {b = String(b)}
+
+        return a?.toLowerCase().startsWith(b?.toLowerCase()) || false
     }
 }
 

package/src/container/Base.mjs

@@ -401,7 +401,7 @@ class Base extends Component {
      * @param {Boolean} [silent=false] true to update the vdom silently (useful for destroying multiple child items in a row)
      */
     destroy(updateParentVdom=false, silent=false) {
-        this.items.forEach(item => {
+        this.items?.forEach(item => {
             item.destroy?.(false, true)
         });
 
@@ -502,8 +502,11 @@ class Base extends Component {
 
         if (config.items) {
             // 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;
+            if (Neo.typeOf(config.items) === 'Object') {
+                me.items = Neo.merge(Neo.clone(me.constructor.config.items), config.items)
+            } else {
+                me._items = Neo.clone(config.items, true, true)
+            }
             delete config.items
         }
 

package/src/controller/Base.mjs

@@ -21,7 +21,7 @@ class Base extends CoreBase {
         /**
          * @member {Object} routes={}
          */
-        routes: {},
+        routes_: {},
 
         /**
          * @member {Object} handleRoutes={}
@@ -42,20 +42,42 @@ class Base extends CoreBase {
         super.construct(config);
 
         const me = this;
+        HashHistory.on('change', me.onHashChange, me);
+    }
+
+     /**
+     * Triggered after the badgePosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetRoutes(value, oldValue){
+        const me = this;
+
+        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.handleRoutes = {};
         if (Object.keys(me.routes).length > 0) {
             Object.keys(me.routes).forEach(key => {
                 if (key.toLowerCase() === 'default'){
-                    me.defaultRoute = me.routes[key];
+                    me.defaultRoute = value[key];
                 } else {
                     me.handleRoutes[key] = new RegExp(key.replace(/{[^\s/]+}/g, '([\\w-]+)')+'$');
                 }
 
             });
         }
-
-        HashHistory.on('change', me.onHashChange, me);
     }
 
     /**
@@ -85,13 +107,26 @@ class Base extends CoreBase {
 
         const me = this;
         let hasRouteBeenFound = false;
-        Object.keys(me.handleRoutes).every( key => {
+        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];
+                }
+
                 const target = me.routes[key];
                 if (Neo.isString(target)){
                     executeHandler = this.routes[key];
@@ -100,20 +135,20 @@ class Base extends CoreBase {
                 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;
+                    if (preHandler) {
+                        responsePreHandler =  me[preHandler]?.call(this, value, oldValue, paramObject);
+                    } else {
+                        responsePreHandler = true;
+                        console.warn('No preHandler defined for routes -> todo it better');
+                    }                    
                 }
 
                 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');
+                    this[executeHandler]?.call(this, value, oldValue, paramObject);
                 }
-                return false;
-
             }
-            return true;
         });
 
         if (Object.keys(me.handleRoutes).length > 0 && !hasRouteBeenFound) {

package/src/form/field/FileUpload.mjs

@@ -285,7 +285,7 @@ class FileUpload extends Base {
         documentDeleteMethod: 'DELETE',
 
         /**
-         * @member {String} state_=null
+         * @member {String} state_=ready
          */
         state_: 'ready',
 
@@ -729,7 +729,7 @@ class FileUpload extends Base {
                 isChangeEventNeeded = true;
         }
 
-        if (isChangeEventNeeded) {
+        if (isChangeEventNeeded && oldValue !== undefined) {
             me.fireChangeEvent(me.file)
         }
         me.validate();

package/src/form/field/Select.mjs

@@ -39,9 +39,9 @@ class Select extends Picker {
          */
         displayField: 'name',
         /**
-         * @member {String} filterOperator='like'
+         * @member {String} filterOperator_='like'
          */
-        filterOperator: 'like',
+        filterOperator_: 'like',
         /**
          * True will only fire a change event, in case the TextField input value matches a record.
          * onFocusLeave() will try to select a hint record, if needed and possible.
@@ -109,9 +109,9 @@ class Select extends Picker {
         typeAhead_: true,
         /**
          * Set this config to false, in case typing into the input field should not filter list items
-         * @member {Boolean} useFilter=true
+         * @member {Boolean} useFilter_=true
          */
-        useFilter: true,
+        useFilter_: true,
         /**
          * This config should point to the store keyProperty or a different model field,
          * which you want to submit instead

package/src/main/DomEvents.mjs

@@ -420,13 +420,11 @@ class DomEvents extends Base {
     onChange(event) {
         let me      = this,
             target  = event.target,
-            tagName = target.tagName,
-            value   = target.value,
 
             data    = {
                 ...me.getEventData(event),
                 valid: target.checkValidity(),
-                value: tagName === 'INPUT' ? StringUtil.escapeHtml(value) : tagName === 'TEXTAREA' ? me.stripHtml(value) : value
+                value: target.value
             };
 
         // input and change events can pass a FileList for input type file

package/src/main/mixin/DeltaUpdates.mjs

@@ -196,7 +196,9 @@ class DeltaUpdates extends Base {
             node = me.getElementOrBody(delta.id);
 
         if (!node) {
-            console.warn('du_updateNode: node not found for id', delta.id)
+            if (Neo.config.environment === 'development') {
+                console.warn('du_updateNode: node not found for id', delta.id)
+            }
         } else {
             Object.entries(delta).forEach(([prop, value]) => {
                 switch(prop) {

package/src/table/View.mjs

@@ -237,7 +237,7 @@ class View extends Component {
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
                 // this logic only works for selection.table.RowModel
-                Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});
+                Neo.main.DomAccess.scrollToTableRow({appName: me.appName, id: selectedRows[0]})
             }
         })
     }

package/test/components/siesta.js

@@ -6,9 +6,29 @@ project.configure({
 });
 
 project.plan(
-    'files/button/Base.mjs',
-    'files/component/DateSelector.mjs',
-    'files/form/field/Select.mjs'
+    {
+        group: 'button',
+        items: [
+            'files/button/Base.mjs'
+        ]
+    },
+    {
+        group: 'component',
+        items: [
+            'files/component/DateSelector.mjs'
+        ]
+    },
+    {
+        group: 'form',
+        items: [
+            {
+                group: 'field',
+                items: [
+                    'files/form/field/Select.mjs'
+                ]
+            }
+        ]
+    }
 );
 
 project.start();