neo.mjs 6.10.16 → 6.11.0

package/apps/ServiceWorker.mjs

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

package/apps/form/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "LocalStorage", "Stylesheet"]
+    "mainThreadAddons": ["DragDrop", "LocalStorage", "Navigator", "Stylesheet"]
 }

package/apps/form/view/SideNavList.mjs

@@ -16,6 +16,10 @@ class SideNavList extends List {
          * @protected
          */
         baseCls: ['form-side-nav-list', 'neo-list'],
+        /**
+         * @member {Boolean} itemsFocusable=true
+         */
+        itemsFocusable: true,
         /**
          * @member {Boolean} useHeaders=true
          */

package/apps/form/view/pages/Page6.mjs

@@ -20,24 +20,26 @@ class Page6 extends FormPageContainer {
          * @member {Object} itemDefaults
          */
         itemDefaults: {
-            module: TextArea
+            module  : TextArea,
+            autoGrow: true
         },
         /**
          * @member {Object[]} items
          */
         items: [{
-            height   : 200,
             labelText: 'Page 6 Field 1',
+            minHeight: 150,
             name     : 'field1',
             required : true,
             value    : 'Lorem ipsum'
         }, {
-            height   : 300,
             labelText: 'Page 6 Field 2',
+            minHeight: 150,
             name     : 'field2'
         }, {
             labelText: 'Page 6 Field 3',
-            name     : 'field3'
+            name     : 'field3',
+            readOnly : true
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.16",
+    "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.16'
+     * @default '6.11.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.10.16'
+    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/form/field/TextArea.mjs

@@ -79,12 +79,20 @@ class TextArea extends Text {
         wrap_: null
     }
 
-    afterSetAutoGrow(autoGrow) {
-        autoGrow && this.syncAutoGrowMonitor();
+    /**
+     * Triggered after the autoGrow config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAutoGrow(value, oldValue) {
+        let me = this;
+
+        value && me.syncAutoGrowMonitor();
 
         // Restore any configured height if autoGrow turned off
-        if (!autoGrow) {
-            this.afterSetHeight(this._height);
+        if (!value) {
+            me.afterSetHeight(me._height);
         }
     }
 
@@ -150,13 +158,24 @@ class TextArea extends Text {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let inputEl = this.getInputEl();
+        let me      = this,
+            inputEl = me.getInputEl();
 
         if (inputEl) {
             inputEl.html = StringUtil.escapeHtml(value);
         }
 
         super.afterSetValue(value, oldValue);
+
+        if (me.autoGrow && me.mounted && me.readOnly) {
+            setTimeout(() => {
+                Neo.main.DomAccess.monitorAutoGrowHandler({
+                    appName : me.appName,
+                    id      : inputEl.id,
+                    windowId: me.windowId
+                })
+            }, 50)
+        }
     }
 
     /**
@@ -180,14 +199,19 @@ class TextArea extends Text {
         return this.beforeSetEnumValue(value, oldValue, 'wrap', 'wrapValues');
     }
 
+    /**
+     *
+     */
     async syncAutoGrowMonitor() {
-        if (this.mounted && this.autoGrow) {
-            // Delegate monitoring of sizes to the VDOM thread.
+        let me = this;
+
+        if (me.mounted && me.autoGrow) {
+            // Delegate monitoring of sizes to the main thread.
             Neo.main.DomAccess.monitorAutoGrow({
-                appName  : this.appName,
-                id       : this.getInputElId(),
-                autoGrow : this.autoGrow
-            });
+                appName  : me.appName,
+                id       : me.getInputElId(),
+                autoGrow : me.autoGrow
+            })
         }
     }
 }

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/DomAccess.mjs

@@ -88,6 +88,7 @@ class DomAccess extends Base {
                 'getScrollingDimensions',
                 'measure',
                 'monitorAutoGrow',
+                'monitorAutoGrowHandler',
                 'navigate',
                 'navigateTo',
                 'scrollBy',
@@ -637,8 +638,15 @@ class DomAccess extends Base {
         })
     }
 
-    monitorAutoGrowHandler({ target }) {
+    /**
+     *
+     * @param {Event|Object} data
+     * @param {String} [data.id]
+     * @param {HTMLElement} [data.target]
+     */
+    monitorAutoGrowHandler(data) {
         const
+            target                 = data.target || this.getElement(data.id),
             { style }              = target,
             { style : inputStyle } = target.closest('.neo-textarea');
 

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

@@ -60,11 +60,9 @@ class Tree extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-            {
-                cn: [
-                    {tag: 'ul', cls: ['neo-list-container', 'neo-list'], tabIndex: -1, cn: []}
-                ]
-            }
+        {cn: [
+            {tag: 'ul', cls: ['neo-list-container', 'neo-list'], tabIndex: -1, cn: []}
+        ]}
     }
 
     /**
@@ -223,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,
@@ -234,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',