neo.mjs 5.13.3 → 5.13.4

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.13.3",
+    "version": "5.13.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Text.scss

@@ -24,7 +24,7 @@
 
         .neo-textfield-input {
             border-color: v(textfield-border-color-active);
-            outline     : v(textfield-outline-active);
+            outline     : v(textfield-outline-active) !important; // important is needed, since the default &:focus selector would get a prio
         }
     }
 

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -257,7 +257,8 @@ class Base extends Component {
                     floating       : true,
                     hidden         : true,
                     items          : value,
-                    parentComponent: me
+                    parentComponent: me,
+                    style          : {left: '-5000px', top: '-5000px'}
                 })
             })
         }

package/src/menu/List.mjs

@@ -342,15 +342,49 @@ class List extends BaseList {
     onItemClick(node, data) {
         super.onItemClick(node, data);
 
-        let me = this;
+        let me     = this,
+            record = data.record;
 
-        data.record.handler?.call(me, data);
+        record.handler?.call(me, record);
 
-        if (me.hideOnLeafItemClick && !data.record.items) {
+        if (me.hideOnLeafItemClick && !record.items) {
             me.unmount()
         }
     }
 
+    /**
+     * @param {String} nodeId
+     */
+    onKeyDownEnter(nodeId) {
+        if (nodeId) {
+            let me       = this,
+                recordId = me.getItemRecordId(nodeId),
+                record   = me.store.get(recordId),
+                submenu;
+
+            record.handler?.call(me, record);
+
+            if (me.hideOnLeafItemClick && !record.items) {
+                me.unmount()
+            }
+
+            if (record.items) {
+                submenu = me.subMenuMap[me.getMenuMapId(recordId)];
+
+                if (submenu) {
+                    me.toggleSubMenu(nodeId, record)
+                }
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownEscape(data) {
+        this.floating && this.unmount()
+    }
+
     /**
      * @param {String[]} items
      */
@@ -415,6 +449,22 @@ class List extends BaseList {
         });
     }
 
+    /**
+     * @param {String} nodeId
+     * @param {Object} record
+     */
+    toggleSubMenu(nodeId, record) {
+        let me       = this,
+            recordId = record[me.getKeyProperty()],
+            submenu  = me.subMenuMap[me.getMenuMapId(recordId)];
+
+        if (!submenu?.mounted) {
+            me.showSubMenu(nodeId, record)
+        } else {
+            me.hideSubMenu()
+        }
+    }
+
     /**
      *
      */

package/src/selection/ListModel.mjs

@@ -38,6 +38,12 @@ class ListModel extends Model {
         !view.disableSelection && view.onKeyDownEnter?.(this.getSelection()[0]);
     }
 
+    /**
+     * Placeholder method to get overridden by class extension list menu.ListModel
+     * @param {Object} data
+     */
+    onKeyDownEscape(data) {}
+
     /**
      * @param {Object} data
      */
@@ -136,11 +142,12 @@ class ListModel extends Model {
             view = me.view;
 
         view.keys?._keys.push(
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'   ,key: 'Down'   ,scope: id},
+            {fn: 'onKeyDownEnter'  ,key: 'Enter'  ,scope: id},
+            {fn: 'onKeyDownEscape' ,key: 'Escape' ,scope: id},
+            {fn: 'onKeyDownLeft'   ,key: 'Left'   ,scope: id},
+            {fn: 'onKeyDownRight'  ,key: 'Right'  ,scope: id},
+            {fn: 'onKeyDownUp'     ,key: 'Up'     ,scope: id}
         );
     }
 
@@ -167,11 +174,12 @@ class ListModel extends Model {
             view = me.view;
 
         view.keys?.removeKeys([
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'   ,key: 'Down'   ,scope: id},
+            {fn: 'onKeyDownEnter'  ,key: 'Enter'  ,scope: id},
+            {fn: 'onKeyDownEscape' ,key: 'Escape' ,scope: id},
+            {fn: 'onKeyDownLeft'   ,key: 'Left'   ,scope: id},
+            {fn: 'onKeyDownRight'  ,key: 'Right'  ,scope: id},
+            {fn: 'onKeyDownUp'     ,key: 'Up'     ,scope: id}
         ]);
 
         super.unregister();

package/src/selection/menu/ListModel.mjs

@@ -18,6 +18,13 @@ class ListModel extends BaseListModel {
         ntype: 'selection-menu-listmodel'
     }
 
+    /**
+     * @param {Object} data
+     */
+    onKeyDownEscape(data) {
+        this.view.onKeyDownEscape(data)
+    }
+
     /**
      * @param {Object} data
      */