neo.mjs 4.4.1 → 4.4.3

package/package.json

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

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

@@ -26,15 +26,17 @@
     }
 
     .neo-spin-button {
-        border-left: 1px solid v(textfield-border-color);
-        color      : v(trigger-color);
-        cursor     : pointer;
-        display    : block;
-        font-size  : 10px;
-        height     : 50%;
-        line-height: 11px;
-        text-align : center;
-        width      : 22px;
+        align-items    : center;
+        border-left    : 1px solid v(textfield-border-color);
+        color          : v(trigger-color);
+        cursor         : pointer;
+        display        : flex;
+        font-size      : 10px;
+        height         : 50%;
+        justify-content: center;
+        line-height    : 11px;
+        text-align     : center;
+        width          : 22px;
 
         &.neo-up {
             border-bottom: 1px solid v(textfield-border-color);
@@ -51,4 +53,4 @@
             color           : v(trigger-color-hover);
         }
     }
-}
+}

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

@@ -1,7 +1,7 @@
 .neo-textfield {
     align-items  : center;
     display      : flex;
-    height       : 27px;
+    height       : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
     margin-bottom: 5px;
     margin-top   : 5px;
     white-space  : nowrap;
@@ -181,7 +181,7 @@
         border-radius   : v(textfield-border-radius);
         display         : flex;
         flex            : 1 1 100px;
-        min-height      : 25px;
+        min-height      : v(textfield-input-height);
         overflow        : hidden;
 
         .neo-textfield-input {
@@ -208,9 +208,9 @@
         border          : 1px solid v(textfield-border-color);
         border-radius   : v(textfield-border-radius);
         color           : v(textfield-input-color);
-        font            : 400 13px/17px #{neo(neo-font-family)};
+        font            : v(textfield-input-font);
         min-height      : 27px;
-        padding         : 3px 6px 2px;
+        padding         : v(textfield-input-padding);
         transition      : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
         width           : 140px;
 

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

@@ -4,7 +4,7 @@
     cursor     : pointer;
     display    : inline-block;
     font-size  : 14px;
-    height     : 25px; // has to be 1px smaller to not overlap the bottom border on hover
+    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;
@@ -24,4 +24,4 @@
     .neo-field-trigger {
         outline: none;
     }
-}
+}

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

@@ -6,6 +6,9 @@ $neoMap: map-merge($neoMap, (
     'textfield-border-width'             : 1px,
     'textfield-input-background-color'   : #2b2b2b,
     'textfield-input-color'              : #ccc,
+    'textfield-input-font'               : 400 13px/17px Arial,
+    'textfield-input-height'             : 25px,
+    'textfield-input-padding'            : 3px 6px 2px,
     'textfield-input-placeholder-color'  : #ccc,
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #bbb,
@@ -22,6 +25,9 @@ $neoMap: map-merge($neoMap, (
         --textfield-border-width             : #{neo(textfield-border-width)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
+        --textfield-input-font               : #{neo(textfield-input-font)};
+        --textfield-input-height             : #{neo(textfield-input-height)};
+        --textfield-input-padding            : #{neo(textfield-input-padding)};
         --textfield-input-placeholder-color  : #{neo(textfield-input-placeholder-color)};
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};

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

@@ -6,6 +6,9 @@ $neoMap: map-merge($neoMap, (
     'textfield-border-width'             : 1px,
     'textfield-input-background-color'   : #fff,
     'textfield-input-color'              : #000,
+    'textfield-input-font'               : 400 13px/17px Arial,
+    'textfield-input-height'             : 25px,
+    'textfield-input-padding'            : 3px 6px 2px,
     'textfield-input-placeholder-color'  : #333,
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #666,
@@ -22,6 +25,9 @@ $neoMap: map-merge($neoMap, (
         --textfield-border-width             : #{neo(textfield-border-width)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
+        --textfield-input-font               : #{neo(textfield-input-font)};
+        --textfield-input-height             : #{neo(textfield-input-height)};
+        --textfield-input-padding            : #{neo(textfield-input-padding)};
         --textfield-input-placeholder-color  : #{neo(textfield-input-placeholder-color)};
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};

package/src/list/Base.mjs

@@ -57,6 +57,12 @@ class Base extends Component {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * In case we are using list item headers and want to bind list item indexes to e.g. a card layout
+         * for e.g. a sidenav, this config comes in handy.
+         * @member {Number|null} headerlessActiveIndex_=null
+         */
+        headerlessActiveIndex_: null,
         /**
          * @member {Boolean} highlightFilterValue=true
          */
@@ -147,12 +153,15 @@ class Base extends Component {
      * @protected
      */
     afterSetActiveIndex(value, oldValue) {
-        let selectionModel = this.selectionModel;
+        let me             = this,
+            selectionModel = me.selectionModel;
 
         if (Neo.isNumber(value)) {
             selectionModel?.selectAt(value);
+            me.headerlessActiveIndex = me.getHeaderlessIndex(value);
         } else if (Neo.isNumber(oldValue)) {
             selectionModel.deselectAll();
+            me.headerlessActiveIndex = null;
         }
     }
 
@@ -209,6 +218,25 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the headerlessActiveIndex config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetHeaderlessActiveIndex(value, oldValue) {
+        let me = this,
+            activeIndex;
+
+        if (Neo.isNumber(value)) {
+            activeIndex = me.getActiveIndex(value);
+
+            me.activeIndex = activeIndex;
+        } else if (Neo.isNumber(oldValue)) {
+            me.activeIndex = null;
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -448,6 +476,25 @@ class Base extends Component {
         });
     }
 
+    /**
+     * Transforms an index excluding list item headers into the real store index
+     * @param {Number} headerlessIndex
+     * @returns {Number}
+     */
+    getActiveIndex(headerlessIndex) {
+        let delta   = 0,
+            i       = 0,
+            records = this.store.items;
+
+        for (; i <= headerlessIndex; i++) {
+            if (records[i].isHeader) {
+                delta++;
+            }
+        }
+
+        return headerlessIndex + delta;
+    }
+
     /**
      * @param {Number|String} recordId
      * @returns {String}
@@ -456,6 +503,28 @@ class Base extends Component {
         return `${this.id}__${recordId}`;
     }
 
+    /**
+     * Returns the index of a list item excluding item headers
+     * @param {Number} index
+     * @returns {Number}
+     */
+    getHeaderlessIndex(index) {
+        let headerlessIndex = 0,
+            i               = 0,
+            records         = this.store.items,
+            len             = records.length;
+
+        for (; i < len; i++) {
+            if (!records[i].isHeader) {
+                headerlessIndex++;
+
+                if (headerlessIndex === index) {
+                    return i;
+                }
+            }
+        }
+    }
+
     /**
      * @param {String} vnodeId
      * @returns {String|Number} itemId