neo.mjs 6.9.0 → 6.9.1

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.1'
          */
-        version: '6.9.0'
+        version: '6.9.1'
     }
 
     /**

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.1'
          */
-        version: '6.9.0'
+        version: '6.9.1'
     }
 
     /**

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

@@ -66,7 +66,14 @@ 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 : {
+                            'neo-tooltip' : 'The Label'
+                        }
+                    }
                 },
                 rowsPerPage: {
                     tooltip: 'Set the number of rows to display in a page',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.0",
+    "version": "6.9.1",
     "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.3",
         "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.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.9.0'
+    version: '6.9.1'
 };
 
 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 = {
         /**
@@ -220,6 +223,10 @@ class Filter extends Base {
     static ['>']  (a, b) {return a > b;}
     static ['>='] (a, b) {return a >= b;}
 
+    static ['endsWith'](a, b) {
+        return a?.toLowerCase().endsWith(b?.toLowerCase()) || false;
+    }
+
     static ['excluded'](a, b) {
         return b.indexOf(a) < 0;
     }
@@ -239,6 +246,10 @@ class Filter extends Base {
     static ['like'](a, b) {
         return a?.toLowerCase().includes(b?.toLowerCase()) || false;
     }
+
+    static ['startsWith'](a, b) {
+        return a?.toLowerCase().startsWith(b?.toLowerCase()) || false;
+    }
 }
 
 Neo.applyClassConfig(Filter);

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/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/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/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,14 @@
+const project = new Siesta.Project.Browser();
+
+project.configure({
+    title       : 'Neo Component Tests',
+    isEcmaModule: true
+});
+
+project.plan(
+    'files/button/Base.mjs',
+    'files/component/DateSelector.mjs',
+    'files/form/field/Select.mjs'
+);
+
+project.start();