neo.mjs 4.3.25 → 4.3.27

package/package.json

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

package/src/list/Base.mjs

@@ -105,6 +105,12 @@ class Base extends Component {
          * @member {Boolean} stacked_=true
          */
         useCheckBoxes_: false,
+        /**
+         * Setting this config to true will switch to dl, dt & dd tags instead of using ul & li.
+         * Use the {Boolean} model field isHeader.
+         * @member {Boolean} useHeaders_=false
+         */
+        useHeaders_: false,
         /**
          * @member {Boolean} useWrapperNode_=false
          */
@@ -227,6 +233,19 @@ class Base extends Component {
         me.cls = cls;
     }
 
+    /**
+     * Triggered after the useHeaders config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseHeaders(value, oldValue) {
+        let me = this;
+
+        me.vdom.tag = 'dl';
+        me.itemTagName = 'dd';
+    }
+
     /**
      * Triggered after the useWrapperNode config got changed
      * @param {Boolean} value
@@ -292,7 +311,7 @@ class Base extends Component {
         }
 
         item = {
-            tag     : me.itemTagName,
+            tag     : me.useHeaders && record.isHeader ? 'dt' : me.itemTagName,
             cls,
             id      : itemId,
             tabIndex: -1

package/src/selection/ListModel.mjs

@@ -84,6 +84,10 @@ class ListModel extends Model {
             recordId = view.getItemRecordId(item);
             index    = store.indexOf(recordId) + step;
 
+            while (store.getAt(index)?.isHeader === true) {
+                index += step;
+            }
+
             if (index < 0) {
                 if (me.stayInList) {
                     index = maxItems - 1;
@@ -95,6 +99,10 @@ class ListModel extends Model {
             } else if (index >= maxItems) {
                 if (me.stayInList) {
                     index = 0;
+
+                    while (store.getAt(index)?.isHeader === true) {
+                        index++;
+                    }
                 } else {
                     preventSelection = true;
                     me.deselectAll();