neo.mjs 6.9.0 → 6.9.2

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.0'
+         * @member {String} version='6.9.2'
          */
-        version: '6.9.0'
+        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.0'
+         * @member {String} version='6.9.2'
          */
-        version: '6.9.0'
+        version: '6.9.2'
     }
 
     /**

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

@@ -66,9 +66,17 @@ class MainContainer extends Viewport {
                 // These two have been moved to the start of the Toolbar by their weights
                 label: {
                     style : {marginLeft: 0},
-                    weight: -10000
+                    weight: -10000,
+
+                    // Embed a tooltip request into the DOM
+                    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.0",
+    "version": "6.9.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -47,7 +47,7 @@
         "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^11.0.0",
+        "commander": "^11.1.0",
         "cssnano": "^6.0.1",
         "envinfo": "^7.10.0",
         "fs-extra": "^11.1.1",
@@ -56,9 +56,9 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",
-        "sass": "^1.69.1",
+        "sass": "^1.69.4",
         "showdown": "^2.1.0",
-        "webpack": "^5.88.2",
+        "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/component/Toast.scss

@@ -1,12 +1,10 @@
 .neo-toast {
-    z-index         : 20; // ensure to be on top of table headers
     align-items     : center;
     background-color: var(--toast-background-color);
     border-radius   : 0.5rem;
     box-shadow      : 0 0.25rem 0.5rem var(--toast-shadow-color);
     color           : var(--toast-color);
     display         : flex;
-    position        : fixed;
     transition      : bottom .3s ease-out, top .3s ease-out;
 
     .neo-toast-inner {
@@ -90,6 +88,7 @@
 /* Toast positions */
 .neo-toast-tr {
     right: 1rem;
+    left : auto;
     top  : 1rem;
 }
 
@@ -107,6 +106,7 @@
 .neo-toast-br {
     bottom: 1rem;
     right : 1rem;
+    left  : auto;
 }
 
 .neo-toast-bc {

package/src/DefaultConfig.mjs

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

package/src/collection/Filter.mjs

@@ -14,12 +14,15 @@ class Filter extends Base {
     static observable = true
     /**
      * Valid values for the operator config:<br>
-     * ['==', '===', '!=', '!==', '<', '<=', '>', '>=', 'excluded', 'included', 'isDefined', 'isUndefined', 'like']
+     * ['==','===','!=','!==','<','<=','>','>=','endsWith','excluded','included','isDefined','isUndefined','like','startsWith']
      * @member {String[]} operators
      * @protected
      * @static
      */
-    static operators = ['==', '===', '!=', '!==', '<', '<=', '>', '>=', 'excluded', 'included', 'isDefined', 'isUndefined', 'like']
+    static operators = [
+        '==', '===', '!=', '!==', '<', '<=', '>', '>=', 'endsWith', 'excluded', 'included',
+        'isDefined', 'isUndefined', 'like', 'startsWith'
+    ]
 
     static config = {
         /**
@@ -95,7 +98,7 @@ class Filter extends Base {
     }
 
     afterSetDisabled(...args) {
-        this.fireChangeEvent(...args);
+        this.fireChangeEvent(...args)
     }
 
     afterSetFilterBy(value, oldValue) {
@@ -103,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
     }
 
     /**
@@ -135,7 +138,7 @@ class Filter extends Base {
      * @protected
      */
     beforeSetOperator(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'operator');
+        return this.beforeSetEnumValue(value, oldValue, 'operator')
     }
 
     /**
@@ -149,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
     }
 
     /**
@@ -167,7 +170,7 @@ class Filter extends Base {
                 operator: me.operator,
                 property: me.property,
                 value   : me.value
-            });
+            })
         }
     }
 
@@ -184,7 +187,7 @@ class Filter extends Base {
             filterValue, recordValue;
 
         if (me._disabled) {
-            return false;
+            return false
         }
 
         if (me._filterBy) {
@@ -193,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;
@@ -205,39 +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) {
+        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) {
+        if (!Neo.isString(a)) {a = String(a)}
+        if (!Neo.isString(b)) {b = String(b)}
+
+        return a?.toLowerCase().startsWith(b?.toLowerCase()) || false
     }
 }
 

package/src/component/Toast.mjs

@@ -107,7 +107,8 @@ class Toast extends Base {
                 ]},
                 {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
             ]
-        }]}
+        }]},
+        floating : true
     }
 
     /**

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

@@ -38,6 +38,10 @@ class Select extends Picker {
          * @member {String} displayField='name'
          */
         displayField: 'name',
+        /**
+         * @member {String} 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.
@@ -103,6 +107,11 @@ class Select extends Picker {
          * @member {Boolean} typeAhead_=true
          */
         typeAhead_: true,
+        /**
+         * Set this config to false, in case typing into the input field should not filter list items
+         * @member {Boolean} useFilter_=true
+         */
+        useFilter_: true,
         /**
          * This config should point to the store keyProperty or a different model field,
          * which you want to submit instead
@@ -111,16 +120,6 @@ class Select extends Picker {
         valueField: 'id'
     }
 
-    /**
-     * @member {String} filterOperator='like'
-     */
-    filterOperator = 'like'
-    /**
-     * Set this config to false, in case typing into the input field should not filter list items
-     * @member {Boolean} useFilter=true
-     */
-    useFilter = true
-
     /**
      * @param {Object} config
      */

package/src/form/field/Text.mjs

@@ -367,8 +367,9 @@ class Text extends Base {
             { cls } = me;
 
         NeoArray.toggle(cls, 'neo-not-editable', !value);
-        me.cls = cls
-        me.changeInputElKey('readonly', value ? false : true);
+        me.cls = cls;
+
+        me.updateReadOnlyState()
     }
 
     /**
@@ -675,7 +676,7 @@ class Text extends Base {
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-readonly');
         me.cls = cls;
 
-        me.changeInputElKey('readonly', value ? value : null);
+        me.updateReadOnlyState();
 
         me.triggers?.forEach(trigger => {
             trigger.hidden = value ? true : trigger.getHiddenState?.() || false
@@ -1440,6 +1441,15 @@ class Text extends Base {
         me.update()
     }
 
+    /**
+     * The DOM based readonly attribute needs to honor the editable & readOnly configs
+     */
+    updateReadOnlyState() {
+        let me = this;
+
+        me.changeInputElKey('readonly', !me.editable || me.readOnly || null);
+    }
+
     /**
      * Since triggers do not get rendered, assign the relevant props
      * todo: this could be handled by component.Base

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

@@ -34,14 +34,7 @@ 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

@@ -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/manager/DomEvent.mjs

@@ -432,34 +432,44 @@ class DomEvent extends Base {
      * @returns {Boolean|String} true in case the delegation string matches the event path
      */
     verifyDelegationPath(listener, path) {
-        let delegationArray = listener.delegate.split(' '),
-            j               = 0,
-            len             = delegationArray.length,
-            pathLen         = path.length,
-            hasMatch, i, item, isId, targetId;
-
-        for (i=len-1; i >= 0; i--) {
-            hasMatch = false;
-            item     = delegationArray[i];
-            isId     = item.startsWith('#');
-
-            if (isId || item.startsWith('.')) {
-                item = item.substr(1);
+        const { delegate } = listener;
+
+        let j = 0, pathLen = path.length, targetId;
+
+        if (typeof delegate === 'function') {
+            j = delegate(path);
+            if (j != null) {
+                targetId = path[j].id;
             }
+        }
+        else {
+            let delegationArray = delegate.split(' '),
+                len             = delegationArray.length,
+                hasMatch, i, item, isId;
+
+            for (i=len-1; i >= 0; i--) {
+                hasMatch = false;
+                item     = delegationArray[i];
+                isId     = item.startsWith('#');
+
+                if (isId || item.startsWith('.')) {
+                    item = item.substr(1);
+                }
 
-            for (; j < pathLen; j++) {
-                if (
-                    (isId && path[j].id === item) ||
-                    path[j].cls.includes(item)
-                ) {
-                    hasMatch = true;
-                    targetId = path[j].id;
-                    break
+                for (; j < pathLen; j++) {
+                    if (
+                        (isId && path[j].id === item) ||
+                        path[j].cls.includes(item)
+                    ) {
+                        hasMatch = true;
+                        targetId = path[j].id;
+                        break
+                    }
                 }
-            }
 
-            if (!hasMatch) {
-                return false
+                if (!hasMatch) {
+                    return false
+                }
             }
         }
 

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

@@ -196,17 +196,18 @@ class Base extends Container {
                 componentId : app.mainView.id,
                 resetCfg    : {},
                 isShared    : true,
-                delegate    : '.neo-uses-shared-tooltip',
+                delegate    : this.delegateFilter,
                 listeners : {
                     // Reconfigure on over a target
-                    async targetOver({ target }) {
+                    async targetOver({ target, data }) {
                         // Revert last pointerOver config set to initial setting.
                         this.set(this.resetCfg);
                         this.resetCfg = {};
 
                         // Use the tooltip config block that the target was configured with
-                        // to reconfogure tis instance
-                        const config = target?._tooltip;
+                        // to reconfigure this instance, or if there was none, check the
+                        // data-neo-tooltip property for a text string.
+                        const config = target?._tooltip || { text : data.target.data.neoTooltip };
 
                         // Cache things we have to reset
                         for (const key in config) {
@@ -264,7 +265,8 @@ class Base extends Container {
             me.align.targetMargin = 10;
 
             me.fire('targetOver', {
-                target : me.activeTarget
+                target : me.activeTarget,
+                data
             });
 
             // Still visible, just realign
@@ -278,6 +280,15 @@ class Base extends Container {
         }
     }
 
+    // Used as a delegate filter to activate on targets which have a tooltip configuration
+    static delegateFilter(path) {
+        for (let i = 0, { length } = path; i < length; i++) {
+            if (path[i].cls.includes('neo-uses-shared-tooltip') || path[i].data['neoTooltip']) {
+                return i;
+            }
+        }
+    }
+
     /**
      * @param {Object} data
      */
@@ -287,7 +298,8 @@ class Base extends Container {
         // If it's an internal move within the delegate, do nothing
         if (data.currentTarget === me.activeTarget?.id) {
             me.fire('targetOut', {
-                target : this.activeTarget
+                target : me.activeTarget,
+                data
             });
             me.activeTarget = null;
             me.hideDelayed(data);

package/src/vdom/Helper.mjs

@@ -750,6 +750,13 @@ class Helper extends Base {
                             node.className = value;
                         }
                         break;
+                    case 'data':
+                        if (value && Neo.typeOf(value) === 'Object') {
+                            Object.entries(value).forEach(([key, val]) => {
+                                node.attributes[`data-${Neo.decamel(key)}`] = val
+                            })
+                        }
+                        break;
                     case 'height':
                     case 'maxHeight':
                     case 'maxWidth':

package/src/worker/App.mjs

@@ -134,6 +134,10 @@ class App extends Base {
                 }
             }
         } else {
+            // default parentId='document.body' => we want it to get shown
+            config.autoMount  = true;
+            config.autoRender = true;
+
             instance = Neo[config.ntype ? 'ntype' : 'create'](config)
         }
 

package/test/components/app.mjs

@@ -0,0 +1,8 @@
+// Important: You need to import all classes which you want to use inside tests here
+// (excluding base classes (prototypes) of already imported classes)
+
+import Button       from '../../src/button/Base.mjs';
+import DateSelector from '../../src/component/DateSelector.mjs';
+import SelectField  from '../../src/form/field/Select.mjs';
+
+export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/button/Base.mjs

@@ -0,0 +1,17 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype  : 'button',
+                iconCls: 'fa fa-home',
+                text   : 'Hello Siesta'
+            })
+        }, 300)
+    });
+});

package/test/components/files/component/DateSelector.mjs

@@ -0,0 +1,18 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype : 'dateselector',
+                height: 250,
+                value : '2023-10-15',
+                width : 300
+            })
+        }, 300)
+    });
+});

package/test/components/files/form/field/Select.mjs

@@ -0,0 +1,35 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype        : 'selectfield',
+                labelPosition: 'inline',
+                labelText    : 'US States',
+                labelWidth   : 80,
+                width        : 300,
+
+                store : {
+                    autoLoad   : true,
+                    keyProperty: 'abbreviation',
+                    url        : '../../resources/examples/data/us_states.json',
+
+                    model: {
+                        fields: [{
+                            name: 'abbreviation',
+                            type: 'string'
+                        }, {
+                            name: 'name',
+                            type: 'string'
+                        }]
+                    }
+                }
+            })
+        }, 300)
+    });
+});

package/test/components/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- Web interface -->
+    <link rel="stylesheet" type="text/css" href="../../node_modules/siesta-lite/resources/css/siesta-all.css">
+    <script type="text/javascript" src="../../node_modules/siesta-lite/siesta-all.js"></script>
+
+    <!-- Project file -->
+    <script type="text/javascript" src="siesta.js"></script>
+</head>
+
+<body>
+</body>
+</html>

package/test/components/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "test/components/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/test/components/siesta.js

@@ -0,0 +1,34 @@
+const project = new Siesta.Project.Browser();
+
+project.configure({
+    title       : 'Neo Component Tests',
+    isEcmaModule: true
+});
+
+project.plan(
+    {
+        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();