neo.mjs 4.4.3 → 4.4.5

package/package.json

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

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

@@ -13,6 +13,15 @@
         }
     }
 
+    &.neo-hovered {
+        &:not(&.neo-focus) {
+            .neo-input-wrapper {
+                border-color: v(textfield-border-color-hovered) !important;
+                outline     : v(textfield-outline-hovered);
+            }
+        }
+    }
+
     &.neo-invalid:not(.neo-disabled) {
         .neo-input-wrapper {
             border-color: v(textfield-border-color-invalid);

package/resources/scss/src/form/field/trigger/Base.scss

@@ -1,17 +1,19 @@
 .neo-field-trigger {
-    border-left: 1px solid v(textfield-border-color);
-    color      : v(trigger-color);
-    cursor     : pointer;
-    display    : inline-block;
-    font-size  : 14px;
-    height     : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
-    line-height: 26px;
-    text-align : center;
-    width      : 22px;
+    align-items    : center;
+    border-left    : v(textfield-border-width) solid v(textfield-border-color);
+    color          : v(trigger-color);
+    cursor         : pointer;
+    display        : flex;
+    font-size      : 14px;
+    height         : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
+    justify-content: center;
+    line-height    : 26px;
+    text-align     : center;
+    width          : 22px;
 
     &.neo-align-start {
         border-left : 0;
-        border-right: 1px solid v(textfield-border-color);
+        border-right: v(textfield-border-width) solid v(textfield-border-color);
     }
 
     &:hover {

package/resources/scss/theme-dark/form/field/Text.scss

@@ -1,6 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'textfield-border-color'             : #424242,
     'textfield-border-color-active'      : #5d83a7,
+    'textfield-border-color-hovered'     : #424242,
     'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 0,
     'textfield-border-width'             : 1px,
@@ -13,13 +14,15 @@ $neoMap: map-merge($neoMap, (
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #bbb,
     'textfield-label-top-margin'         : 0 0 3px,
-    'textfield-outline-active'           : none
+    'textfield-outline-active'           : none,
+    'textfield-outline-hovered'          : none
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-dark { // .neo-textfield
         --textfield-border-color             : #{neo(textfield-border-color)};
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
+        --textfield-border-color-hovered     : #{neo(textfield-border-color-hovered)};
         --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
         --textfield-border-width             : #{neo(textfield-border-width)};
@@ -33,5 +36,6 @@ $neoMap: map-merge($neoMap, (
         --textfield-label-color              : #{neo(textfield-label-color)};
         --textfield-label-top-margin         : #{neo(textfield-label-top-margin)};
         --textfield-outline-active           : #{neo(textfield-outline-active)};
+        --textfield-outline-hovered          : #{neo(textfield-outline-hovered)};
     }
 }

package/resources/scss/theme-light/form/field/Text.scss

@@ -1,6 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'textfield-border-color'             : #ddd,
     'textfield-border-color-active'      : #1c60a0,
+    'textfield-border-color-hovered'     : #ddd,
     'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 3px,
     'textfield-border-width'             : 1px,
@@ -13,13 +14,15 @@ $neoMap: map-merge($neoMap, (
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #666,
     'textfield-label-top-margin'         : 0 0 3px,
-    'textfield-outline-active'           : none
+    'textfield-outline-active'           : none,
+    'textfield-outline-hovered'          : none
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-textfield
         --textfield-border-color             : #{neo(textfield-border-color)};
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
+        --textfield-border-color-hovered     : #{neo(textfield-border-color-hovered)};
         --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
         --textfield-border-width             : #{neo(textfield-border-width)};
@@ -33,5 +36,6 @@ $neoMap: map-merge($neoMap, (
         --textfield-label-color              : #{neo(textfield-label-color)};
         --textfield-label-top-margin         : #{neo(textfield-label-top-margin)};
         --textfield-outline-active           : #{neo(textfield-outline-active)};
+        --textfield-outline-hovered          : #{neo(textfield-outline-hovered)};
     }
 }

package/src/form/field/Text.mjs

@@ -157,9 +157,11 @@ class Text extends Base {
 
         let me = this;
 
-        me.addDomListeners(
-            {input: me.onInputValueChange, scope: me}
-        );
+        me.addDomListeners([
+            {input     : me.onInputValueChange, scope: me},
+            {mouseenter: me.onMouseEnter,       scope: me},
+            {mouseleave: me.onMouseLeave,       scope: me}
+        ]);
     }
 
     /**
@@ -942,6 +944,26 @@ class Text extends Base {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onMouseEnter(data) {
+        let cls = this.cls;
+
+        NeoArray.add(cls, 'neo-hovered');
+        this.cls = cls;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onMouseLeave(data) {
+        let cls = this.cls;
+
+        NeoArray.remove(cls, 'neo-hovered');
+        this.cls = cls;
+    }
+
     /**
      * Removes all triggers of a given type
      * @param {String} type

package/src/list/Base.mjs

@@ -432,10 +432,17 @@ class Base extends Component {
      * @param {Boolean} [silent=false]
      */
     createItems(silent=false) {
-        let me   = this,
-            vdom = me.getVdomRoot(),
+        let me                    = this,
+            headerlessActiveIndex = me.headerlessActiveIndex,
+            vdom                  = me.getVdomRoot(),
             listItem;
 
+        // in case we set headerlessActiveIndex before the store was loaded, activeIndex can be null
+        // and the wanted selection is not initially there
+        if (Neo.isNumber(headerlessActiveIndex) && !Neo.isNumber(me.activeIndex)) {
+            me.afterSetHeaderlessActiveIndex(headerlessActiveIndex, null);
+        }
+
         if (!(me.animate && !me.getPlugin('animate'))) {
             vdom.cn = [];
 
@@ -484,11 +491,17 @@ class Base extends Component {
     getActiveIndex(headerlessIndex) {
         let delta   = 0,
             i       = 0,
-            records = this.store.items;
+            records = this.store.items,
+            len     = headerlessIndex;
+
+        if (records.length < 1) {
+            return null;
+        }
 
-        for (; i <= headerlessIndex; i++) {
+        for (; i <= len; i++) {
             if (records[i].isHeader) {
                 delta++;
+                len++;
             }
         }
 
@@ -511,18 +524,15 @@ class Base extends Component {
     getHeaderlessIndex(index) {
         let headerlessIndex = 0,
             i               = 0,
-            records         = this.store.items,
-            len             = records.length;
+            records         = this.store.items;
 
-        for (; i < len; i++) {
+        for (; i < index; i++) {
             if (!records[i].isHeader) {
                 headerlessIndex++;
-
-                if (headerlessIndex === index) {
-                    return i;
-                }
             }
         }
+
+        return headerlessIndex;
     }
 
     /**

package/src/selection/ListModel.mjs

@@ -147,7 +147,7 @@ class ListModel extends Model {
      */
     selectAt(index) {
         let view      = this.view,
-            recordKey = view.store.getKeyAt(index),
+            recordKey = view?.store.getKeyAt(index),
             itemId    = recordKey && view.getItemId(recordKey);
 
         if (itemId) {