neo.mjs 6.10.17 → 6.11.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.17",
+    "version": "6.11.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,7 +55,7 @@
         "inquirer": "^9.2.14",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.33",
+        "postcss": "^8.4.35",
         "sass": "^1.70.0",
         "siesta-lite": "5.5.2",
         "showdown": "^2.1.0",

package/resources/scss/src/tree/List.scss

@@ -1,9 +1,14 @@
 .neo-tree-list {
-    border  : none;
-    color   : var(--tree-list-color);
-    display : flex;
-    overflow: hidden;
-    position: relative;
+    border         : none;
+    color          : var(--tree-list-color);
+    display        : flex;
+    flex-direction : column;
+    overflow       : hidden;
+    position       : relative;
+
+    // Allow item's scrollIntoView upwards to avoid
+    // being hidden below a sticky item stuck at the top.
+    scroll-padding-block-start : 3em;
 
     .neo-list {
         overflow   : visible;

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -1,8 +1,10 @@
 import DefaultConfig from './DefaultConfig.mjs';
 
-const configSymbol = Symbol.for('configSymbol'),
-      getSetCache  = Symbol('getSetCache'),
-      typeDetector = {
+const
+    camelRegex   = /-./g,
+    configSymbol = Symbol.for('configSymbol'),
+    getSetCache  = Symbol('getSetCache'),
+    typeDetector = {
         function: (item) => {
             if (item.prototype?.constructor.isClass) {
                 return 'NeoClass'
@@ -60,17 +62,19 @@ Neo = globalThis.Neo = Object.assign({
      * @tutorial 02_ClassSystem
      */
     applyClassConfig(cls) {
-        let baseCfg  = null,
-            ntypeMap = Neo.ntypeMap,
-            proto    = cls.prototype || cls,
-            protos   = [],
+        let baseCfg    = null,
+            ntypeChain = [],
+            ntypeMap   = Neo.ntypeMap,
+            proto      = cls.prototype || cls,
+            protos     = [],
             cfg, config, ctor, ntype;
 
         while (proto.__proto__) {
             ctor = proto.constructor;
 
             if (Object.hasOwn(ctor, 'classConfigApplied')) {
-                baseCfg = Neo.clone(ctor.config, true);
+                baseCfg    = Neo.clone(ctor.config, true);
+                ntypeChain = [...ctor.ntypeChain];
                 break
             }
 
@@ -113,6 +117,8 @@ Neo = globalThis.Neo = Object.assign({
             if (Object.hasOwn(cfg, 'ntype')) {
                 ntype = cfg.ntype;
 
+                ntypeChain.unshift(ntype);
+
                 // Running the docs app inside a workspace can pull in the same classes from different roots,
                 // so we want to check for different class names as well
                 if (Object.hasOwn(ntypeMap, ntype) && cfg.className !== ntypeMap[ntype]) {
@@ -136,7 +142,7 @@ Neo = globalThis.Neo = Object.assign({
                 applyMixins(ctor, mixins);
 
                 if (Neo.ns('Neo.core.Observable', false, ctor.prototype.mixins)) {
-                    ctor.observable = true;
+                    ctor.observable = true
                 }
             }
 
@@ -148,7 +154,8 @@ Neo = globalThis.Neo = Object.assign({
             Object.assign(ctor, {
                 classConfigApplied: true,
                 config            : Neo.clone(config, true),
-                isClass           : true
+                isClass           : true,
+                ntypeChain
             });
 
             !config.singleton && this.applyToGlobalNs(cls)
@@ -156,6 +163,10 @@ Neo = globalThis.Neo = Object.assign({
 
         proto = cls.prototype || cls;
 
+        ntypeChain.forEach(ntype => {
+            proto[`is${Neo.capitalize(Neo.camel(ntype))}`] = true
+        });
+
         if (proto.singleton) {
             cls = Neo.create(cls);
             Neo.applyToGlobalNs(cls)
@@ -234,6 +245,26 @@ Neo = globalThis.Neo = Object.assign({
         return target
     },
 
+    /**
+     * Converts kebab-case strings into camel-case
+     * @memberOf module:Neo
+     * @param {String} value The target object
+     * @returns {String}
+     */
+    camel(value) {
+        return value.replace(camelRegex, match => match[1].toUpperCase())
+    },
+
+    /**
+     * Makes the first character of a string uppercase
+     * @memberOf module:Neo
+     * @param {String} value
+     * @returns {Boolean|String} Returns false for non string inputs
+     */
+    capitalize(value) {
+        return value[0].toUpperCase() + value.slice(1)
+    },
+
     /**
      * @memberOf module:Neo
      * @param {Object|Array|*} obj

package/src/core/Base.mjs

@@ -327,6 +327,15 @@ class Base {
         return this.constructor[key]
     }
 
+    /**
+     * Check if a given ntype exists inside the proto chain, including the top level class
+     * @param {String} ntype
+     * @returns {Boolean}
+     */
+    hasNtype(ntype) {
+        return this.constructor.ntypeChain.includes(ntype)
+    }
+
     /**
      * Gets triggered after onConstructed() is done
      * @see {@link Neo.core.Base#onConstructed onConstructed}

package/src/core/Util.mjs

@@ -36,15 +36,6 @@ class Util extends Base {
         });
     }
 
-    /**
-     * Makes the first character of a string uppercase
-     * @param {String} value
-     * @returns {Boolean|String} Returns false for non string inputs
-     */
-    static capitalize(value) {
-        return value[0].toUpperCase() + value.slice(1)
-    }
-
     /**
      * Transforms a styles string into a styles object using camelcase syntax
      * @param {String} string The styles string to parse
@@ -225,7 +216,6 @@ Neo.applyFromNs(Neo, Util, {
     bindMethods      : 'bindMethods',
     createStyleObject: 'createStyleObject',
     createStyles     : 'createStyles',
-    capitalize       : 'capitalize',
     decamel          : 'decamel',
     isArray          : 'isArray',
     isBoolean        : 'isBoolean',

package/src/list/Base.mjs

@@ -411,14 +411,13 @@ class Base extends Component {
             itemContent    = me.createItemContent(record, index),
             itemId         = me.getItemId(record[me.getKeyProperty()]),
             selectionModel = me.selectionModel,
+            isSelected     = !me.disableSelection && selectionModel?.isSelected(itemId),
             item;
 
         isHeader && cls.push('neo-list-header');
 
-        if (!me.disableSelection && selectionModel) {
-            if (selectionModel.isSelected(itemId)) {
-                cls.push(selectionModel.selectedCls)
-            }
+        if (isSelected){
+            cls.push(selectionModel.selectedCls)
         }
 
         if (record.cls) {
@@ -432,7 +431,7 @@ class Base extends Component {
         item = {
             id  : itemId,
             tag : isHeader ? 'dt' : me.itemTagName,
-            'aria-selected' : false,
+            'aria-selected' : isSelected,
             cls
         };
 

package/src/main/addon/Navigator.mjs

@@ -348,13 +348,19 @@ class Navigator extends Base {
             return;
         }
 
+        // Scroll the target into view smoothly before we focus it without triggering a scroll
+        newActiveElement.scrollIntoView({
+            block    : 'nearest',
+            behavior : 'smooth'
+        });
+
         // Find a focusable element which may be the item, or inside the item to draw focus to.
         // For example a Chip list in which .neo-list-items contain focusable Chips.
         const focusTarget = DomUtils.query(newActiveElement, DomUtils.isFocusable);
 
         // If the item contains a focusable, we focus it and then react in navigateFocusInHandler
         if (focusTarget) {
-            focusTarget.focus();
+            focusTarget.focus({ preventScroll : true });
         }
         // If not, we programatically navigate there
         else {

package/src/selection/Model.mjs

@@ -96,7 +96,7 @@ class Model extends Base {
     deselect(item, silent, itemCollection=this.items, selectedCls) {
         // We hold vdom ids for now, so all incoming selections must be converted.
         item = item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item;
-        
+
         if (itemCollection.includes(item)) {
             let me   = this,
                 view = me.view,
@@ -231,7 +231,7 @@ class Model extends Base {
 
             items.forEach((node, i) => {
                 node = view.getVdomChild(node);
- 
+
                 if (node) {
                     node.cls = NeoArray.add(node.cls || [], selectedCls || me.selectedCls);
                     node['aria-selected'] = true;
@@ -257,10 +257,12 @@ class Model extends Base {
      * @param {Object} item
      */
     toggleSelection(item) {
-        if (this.isSelected(item)) {
-            this.deselect(item);
+        let me = this;
+
+        if (me.isSelected(item)) {
+            me.deselect(item)
         } else {
-            this.select(item);
+            me.select(item)
         }
     }
 

package/src/tree/Accordion.mjs

@@ -83,7 +83,7 @@ class AccordionTree extends TreeList {
          */
         _vdom:
         {cn: [
-            {tag: 'ul', cls: ['neo-list-container', 'neo-list', 'neo-accordion-style'], tabIndex: -1, cn: []}
+            {tag: 'ul', cls: ['neo-list-container', 'neo-list', 'neo-accordion-style'], cn: []}
         ]}
     }
 
@@ -260,7 +260,8 @@ class AccordionTree extends TreeList {
                 id = me.getItemId(item.id);
 
                 tmpRoot.cn.push({
-                    tag: 'li',
+                    tabIndex : -1,
+                    tag      : 'li',
                     cls,
                     id,
                     cn : [{

package/src/tree/List.mjs

@@ -221,10 +221,11 @@ class Tree extends Base {
                 }
 
                 tmpRoot.cn.push({
-                    tag  : 'li',
+                    tag      : 'li',
+                    tabIndex : -1,
                     cls,
-                    id   : me.getItemId(item.id),
-                    cn   : [{
+                    id       : me.getItemId(item.id),
+                    cn       : [{
                         tag      : 'span',
                         cls      : [itemCls + '-content', item.iconCls],
                         innerHTML: item.name,
@@ -232,7 +233,7 @@ class Tree extends Base {
                             pointerEvents: 'none'
                         }
                     }],
-                    style: {
+                    style    : {
                         padding : '10px',
                         position: item.isLeaf ? null : 'sticky',
                         top     : item.isLeaf ? null : (level * 38) + 'px',