neo.mjs 6.15.1 → 6.15.3

package/apps/ServiceWorker.mjs

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

package/apps/portal/model/ContentSection.mjs

@@ -23,6 +23,9 @@ class ContentSection extends Model {
         }, {
             name: 'sourceId',
             type: 'String'
+        }, {
+            name: 'tag',
+            type: 'String'
         }]
     }
 }

package/apps/portal/view/learn/ContentView.mjs

@@ -4,7 +4,9 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 
 const
     labCloseRegex = /<!--\s*\/lab\s*-->/g,
-    labOpenRegex  = /<!--\s*lab\s*-->/g;
+    labOpenRegex  = /<!--\s*lab\s*-->/g,
+    preJsRegex    = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g,
+    preNeoRegex   = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
 
 /**
  * @class Portal.view.learn.ContentView
@@ -147,13 +149,10 @@ class ContentView extends Component {
         // 1. Replace <pre data-neo> with <div id='neo-preview-2'/>
         // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
 
-        // Define a regular expression to match <pre data-javascript> tags
-        const preRegex = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
-
         let count = 0;
 
         // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preRegex, (match, preContent) => {
+        return htmlString.replace(preNeoRegex, (match, preContent) => {
             const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
             map[key] = preContent;
             return `<div id="${key}"></div>`
@@ -182,15 +181,12 @@ class ContentView extends Component {
 
         // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
 
-        // Define a regular expression to match <pre data-javascript> tags
-        const preRegex = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g;
-
         // Create an array to store promises for each replacement
         const replacementPromises = [];
         let count = 0;
 
         // Replace the content with tokens, and create a promise to update the corresponding content
-        let updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
+        let updatedHtml = htmlString.replace(preJsRegex, (match, preContent) => {
             const token = `__NEO-PRE-TOKEN-${++count}__`;
             replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
             return token
@@ -247,15 +243,26 @@ class ContentView extends Component {
         let me           = this,
             contentArray = content.split('\n'),
             i            = 1,
-            storeData    = [];
+            storeData    = [],
+            tag;
 
         contentArray.forEach((line, index) => {
+            tag = null;
+
             if (line.startsWith('##') && line.charAt(2) !== '#') {
                 line = line.substring(2).trim();
+                tag  = 'h2';
+            }
+
+            else if (line.startsWith('###') && line.charAt(3) !== '#') {
+                line = line.substring(3).trim();
+                tag  = 'h3';
+            }
 
-                storeData.push({id: i, name: line, sourceId: me.id});
+            if (tag) {
+                storeData.push({id: i, name: line, sourceId: me.id, tag});
 
-                contentArray[index] = `<h2 class="neo-h2" data-record-id="${i}">${line}</h2>`;
+                contentArray[index] = `<${tag} class="neo-${tag}" data-record-id="${i}">${line}</${tag}>`;
 
                 i++
             }

package/apps/portal/view/learn/MainContainer.mjs

@@ -46,14 +46,16 @@ class MainContainer extends Container {
             size        : 3
         }, {
             module: PageContainer
-        }, {
-            module: Splitter,
-            cls   : ['main-content-splitter'],
-            size  : 3
-        }, {
+        }, 
+        // {
+        //     module: Splitter,
+        //     cls   : ['main-content-splitter'],
+        //     size  : 3
+        // }, 
+        {
             module   : PageSectionsPanel,
             reference: 'page-sections-panel',
-            width    : 350
+            width    : 250
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}

package/apps/portal/view/learn/MainContainerController.mjs

@@ -69,7 +69,7 @@ class MainContainerController extends Controller {
      * @param {String} data.appName
      * @param {Number} data.windowId
      */
-    async onAppConnect(data) {console.log(data);
+    async onAppConnect(data) {
         let me              = this,
             app             = Neo.apps[data.appName],
             mainView        = app.mainView,
@@ -119,10 +119,7 @@ class MainContainerController extends Controller {
         }
         // Close popup windows when closing or reloading the main window
         else {
-            Neo.Main.windowClose({
-                names: me.connectedApps,
-                windowId
-            })
+            Neo.Main.windowClose({names: me.connectedApps, windowId})
         }
     }
 
@@ -191,7 +188,7 @@ class MainContainerController extends Controller {
             list     = panel.list,
             recordId = parseInt(data.data.recordId);
 
-        if (!panel.isAnimating) {
+        if (!list.isAnimating) {
             list.selectionModel.select(list.store.get(recordId))
         }
     }

package/apps/portal/view/learn/MainContainerModel.mjs

@@ -47,12 +47,7 @@ class MainContainerModel extends Component {
              * The record which gets shown as the content page
              * @member {Object} data.previousPageRecord=null
              */
-            previousPageRecord: null,
-            /**
-             * Merging the direct parent text
-             * @member {String|null} data.previousPageText=null
-             */
-            previousPageText: null
+            previousPageRecord: null
         },
         /**
          * @member {Object} stores
@@ -67,22 +62,6 @@ class MainContainerModel extends Component {
         }
     }
 
-    /**
-     * Combines the record parent node name (if available) with the record name
-     * @param {Object} record
-     * @param {Neo.data.Store} store
-     * @returns {String|null}
-     */
-    getRecordTreeName(record, store) {
-        let parentText = record.name;
-
-        if (record.parentId !== null) {
-            parentText = store.get(record.parentId).name + ': ' + parentText
-        }
-
-        return parentText
-    }
-
     /**
      * @param {String} key
      * @param {*} value
@@ -111,7 +90,6 @@ class MainContainerModel extends Component {
 
                     if (record.isLeaf && !me.recordIsHidden(record, store)) {
                         previousPageRecord = record;
-                        previousPageText   = me.getRecordTreeName(record, store);
                         break
                     }
                 }
@@ -124,7 +102,6 @@ class MainContainerModel extends Component {
 
                     if (record.isLeaf && !me.recordIsHidden(record, store)) {
                         nextPageRecord = record;
-                        nextPageText   = me.getRecordTreeName(record, store);
                         break
                     }
                 }

package/apps/portal/view/learn/PageContainer.mjs

@@ -89,12 +89,10 @@ class PageContainer extends Container {
      */
     afterSetNextPageRecord(value, oldValue) {
         if (oldValue !== undefined) {
-            let me = this;
-
             if (value) {
-                me.nextPageButton.set({hidden: false, text: me.getModel().getData('nextPageText')})
+                this.nextPageButton.set({hidden: false, text: value.name})
             } else {
-                me.nextPageButton.hidden = true
+                this.nextPageButton.hidden = true
             }
         }
     }
@@ -106,12 +104,10 @@ class PageContainer extends Container {
      */
     afterSetPreviousPageRecord(value, oldValue) {
         if (oldValue !== undefined) {
-            let me = this;
-
             if (value) {
-                me.prevPageButton.set({hidden: false, text: me.getModel().getData('previousPageText')})
+                this.prevPageButton.set({hidden: false, text: value.name})
             } else {
-                me.prevPageButton.hidden = true
+                this.prevPageButton.hidden = true
             }
         }
     }

package/apps/portal/view/learn/PageSectionsList.mjs

@@ -0,0 +1,80 @@
+import List from '../../../../src/list/Base.mjs';
+
+/**
+ * @class Portal.view.learn.PageSectionsList
+ * @extends Neo.list.Base
+ */
+class PageSectionsList extends List {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.PageSectionsList'
+         * @protected
+         */
+        className: 'Portal.view.learn.PageSectionsList',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            store: 'stores.contentSections'
+        },
+        /**
+         * @member {String[]} cls=['portal-page-sections-list','topics-tree']
+         */
+        cls: ['portal-page-sections-list', 'topics-tree']
+    }
+
+    /**
+     * Internal flag to indicate that node.scrollIntoView() is running with an animation
+     * @member {Boolean} isAnimating=false
+     */
+    isAnimating = false
+
+    /**
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     */
+    createItemContent(record, index) {
+        return {
+            cls : `neo-${record.tag}`,
+            html: record[this.displayField]
+        }
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.on('itemClick', me.onSelectionChange, me)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onSelectionChange(data) {
+        let me     = this,
+            record = data.record;
+
+        if (record) {
+            me.isAnimating = true;
+
+            await Neo.main.DomAccess.scrollIntoView({
+                querySelector: `[data-record-id='${record.id}']`,
+                windowId     : me.windowId
+            });
+
+            // better safe than sorry
+            await me.timeout(200);
+
+            me.isAnimating = false
+        }
+    }
+}
+
+Neo.setupClass(PageSectionsList);
+
+export default PageSectionsList;

package/apps/portal/view/learn/PageSectionsPanel.mjs

@@ -1,5 +1,5 @@
-import List  from '../../../../src/list/Base.mjs';
-import Panel from '../../../../src/container/Panel.mjs';
+import PageSectionsList from './PageSectionsList.mjs';
+import Panel            from '../../../../src/container/Panel.mjs';
 
 /**
  * @class Portal.view.learn.PageSectionsPanel
@@ -19,68 +19,39 @@ class PageSectionsPanel extends Panel {
         /**
          * @member {Object[]} headers
          */
-        headers: [{
-            dock: 'top',
-            text: 'On this page'
-        }],
+        // headers: [{
+        //     dock : 'top',
+        //     items: [{
+        //         ntype: 'label',
+        //         text : 'On this page'
+        //     }, '->', {
+        //         iconCls: 'fas fa-chevron-right',
+        //         ui     : 'secondary',
+        //         tooltip: 'Collapse Sections'
+        //     }]
+        // }],
         /**
          * @member {Object[]} items
          */
         items: [{
-            module   : List,
-            bind     : {store: 'stores.contentSections'},
-            cls      : ['topics-tree'],
+            vdom:
+                { cn: [                        
+                    { tag: 'h3', html: 'On this page' },
+                ]}
+            
+        },{
+            module   : PageSectionsList,
             reference: 'list'
         }]
     }
 
-    /**
-     * Internal flag to indicate that node.scrollIntoView() is running with an animation
-     * @member {Boolean} isAnimating=false
-     */
-    isAnimating = false
-
     /**
      * Convenience shortcut
-     * @member {Neo.list.Base} list
+     * @member {Portal.view.learn.PageSectionsList} list
      */
     get list() {
         return this.getReference('list')
     }
-
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        // me.getReference('list').on('selectionChange', me.onSelectionChange, me) // todo
-        me.getReference('list').on('itemClick', me.onSelectionChange, me)
-    }
-
-    /**
-     * @param {Object} data
-     */
-    async onSelectionChange(data) {
-        let me     = this,
-            record = data.record;
-
-        if (record) {
-            me.isAnimating = true;
-
-            await Neo.main.DomAccess.scrollIntoView({
-                querySelector: `[data-record-id='${record.id}']`,
-                windowId     : me.windowId
-            });
-
-            // better safe than sorry
-            await me.timeout(200);
-
-            me.isAnimating = false
-        }
-    }
 }
 
 Neo.setupClass(PageSectionsPanel);

package/examples/ServiceWorker.mjs

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

package/examples/calendar/basic/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/calendar/basic/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "Stylesheet"]
+    "appPath"    : "examples/calendar/basic/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/calendar/weekview/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/calendar/weekview/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "Stylesheet"]
+    "appPath"    : "examples/calendar/weekview/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/component/timer/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/component/timer/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/component/timer/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/component/toast/MainContainerController.mjs

@@ -20,6 +20,7 @@ class MainContainerController extends ComponentController {
     construct(config) {
         super.construct(config);
         Neo.main.addon.HighlightJS.switchTheme('dark');
+        Neo.main.addon.HighlightJS.loadLibrary({});
     }
 
     /**

package/examples/component/toast/neo-config.json

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

package/examples/component/video/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/component/video/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/component/video/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/core/config/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/core/config/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/core/config/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/grid/container/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/grid/container/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/grid/container/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/grid/covid/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/grid/covid/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "Stylesheet"],
-    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+    "appPath"    : "examples/grid/covid/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"]
 }

package/examples/list/animate/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/list/animate/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/list/animate/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/list/color/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/list/color/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/list/color/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/menu/list/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/menu/list/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/menu/list/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/menu/panel/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/menu/panel/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/menu/panel/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/model/advanced/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/advanced/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/advanced/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/model/extendedClass/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/extendedClass/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/extendedClass/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/model/inline/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/inline/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/inline/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/model/inlineNoModel/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/inlineNoModel/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/inlineNoModel/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/model/nestedData/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/nestedData/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/nestedData/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/model/table/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/model/table/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/model/table/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/panel/MainContainer.mjs

@@ -37,8 +37,7 @@ class MainContainer extends Panel {
                 flex : 1
             }, {
                 handler: 'onButton2Click',
-                iconCls: 'fa fa-user',
-                text   : 'Button 2'
+                iconCls: 'fa fa-user'
             }]
         }, {
             dock : 'left',

package/examples/panel/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/panel/app.mjs",
-    "basePath"        : "../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/panel/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/popover/neo-config.json

@@ -1,12 +1,8 @@
 {
-    "appPath"    : "examples/popover/app.mjs",
-    "basePath"   : "../../",
-    "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-dark", "neo-theme-light"],
-    "mainThreadAddons": [
-        "DragDrop",
-        "Stylesheet",
-        "Popover"
-    ]
+    "appPath"         : "examples/popover/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "Popover", "Stylesheet"],
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
 }

package/examples/table/container/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/table/container/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/table/container/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/table/covid/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/table/covid/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "Stylesheet"],
-    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+    "appPath"    : "examples/table/covid/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"]
 }

package/examples/tableFiltering/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/tableFiltering/app.mjs",
-    "basePath"        : "../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/tableFiltering/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/tablePerformance/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/tablePerformance/app.mjs",
-    "basePath"        : "../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+    "appPath"    : "examples/tablePerformance/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"]
 }

package/examples/tableStore/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/tableStore/app.mjs",
-    "basePath"        : "../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/tableStore/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/examples/tabs/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/tabs/app.mjs",
-    "basePath"        : "../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "appPath"    : "examples/tabs/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
 }

package/examples/todoList/version1/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/todoList/version1/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-light"]
+    "appPath"    : "examples/todoList/version1/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-light"]
 }

package/examples/todoList/version2/neo-config.json

@@ -1,8 +1,7 @@
 {
-    "appPath"         : "examples/todoList/version2/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
-    "themes"          : ["neo-theme-light"]
+    "appPath"    : "examples/todoList/version2/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-light"]
 }

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.1",
+    "version": "6.15.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,11 +45,11 @@
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.5.1",
-        "autoprefixer": "^10.4.18",
+        "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
-        "cssnano": "^6.1.0",
+        "cssnano": "^6.1.1",
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -58,13 +58,13 @@
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.37",
+        "postcss": "^8.4.38",
         "sass": "^1.72.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
-        "webpack": "^5.90.3",
+        "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^4.15.1",
+        "webpack-dev-server": "^4.15.2",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/data/deck/learnneo/pages/Earthquakes.md

@@ -588,7 +588,7 @@ The app logic
 
 Let's review the code and see what it's doing. 
 
-### The store
+### The Store
 
 A store is a collection of records. A record is described in the `model` and the model's `fields`.
 Here's the config for the store.

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -1,7 +1,7 @@
 .learn-content {
 
     max-width: 900px;
-    padding: 0 3rem;
+    padding: 0 250px 0 3rem;
     margin: 0 auto;
     background-color: white;
     border-radius: 8px;

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -6,6 +6,7 @@
     .content-bottom-toolbar {
         gap    : 8px;
         padding: 0 3rem;
+        margin-top: 100px; 
 
         .neo-button {
             flex           : 1 !important;

package/resources/scss/src/apps/portal/learn/PageSectionsList.scss

@@ -0,0 +1,23 @@
+
+
+.portal-page-sections-list.neo-list {
+    .neo-h3 {
+        margin-left: 1.5em;
+    }
+
+    .neo-list-item {
+        color      : var(--sem-color-text-neutral-subdued);
+        height     : unset;
+        white-space: normal;
+        padding: 8px 0 8px 8px !important;
+
+        &[aria-selected=true] {
+            background-color: transparent !important;
+            color           : var(--list-item-color-selected) !important;
+            font-weight     : 600 !important;
+            cursor          : default !important;
+
+        }
+    }
+}
+

package/resources/scss/src/apps/portal/learn/PageSectionsPanel.scss

@@ -1,16 +1,40 @@
 .portal-page-sections-panel.neo-panel {
     border: none; // reset the default 1px
 
-    @media only screen and (max-width: 1200px) {
+
+    background-color: transparent;
+    display: block;
+    width: 250px;
+    flex-shrink: 0;
+    z-index: 1;
+    position: fixed;
+    top: 80px;
+    right: 0px;
+    bottom: 0px;
+
+    @media only screen and (max-width: 1100px) {
         display: none;
     }
 
-    .neo-list .neo-list-item {
-        white-space: normal;
+    h3 {
+        margin-left: 16px;
     }
 
     .neo-panel-header-toolbar {
         border       : none; // reset the default 1px
-        border-bottom: 1px solid #f2f2f2;;
+        border-bottom: 1px solid #f2f2f2;
+
+        .neo-button {
+            // todo: we need styling for toolbar buttons within neo-theme-neo-light
+            border-radius: 4px;
+            height       : inherit;
+            min-width    : inherit;
+            padding      : 5px 12px;
+
+            .neo-button-glyph {
+                color: var(--panel-header-text-color);
+            }
+        }
     }
+
 }

package/resources/scss/theme-neo-light/Global.scss

@@ -26,6 +26,15 @@ h2 {
     line-height     : var(--core-lineheight-headline);
 }
 
+h3 {
+    color           : var(--sem-color-fg-neutral-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h3);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
 p {
     color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-sans);

package/src/DefaultConfig.mjs

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

package/src/form/field/ComboBox.mjs

@@ -48,9 +48,9 @@ class ComboBox extends Picker {
         /**
          * The millisecond time to delay between input field mutation and applying the input field's
          * new value to the filter
-         * @member {Number} filterDelay=300
+         * @member {Number} filterDelay=50
          */
-        filterDelay : 300,
+        filterDelay : 50,
         /**
          * @member {String} filterOperator_='like'
          */
@@ -141,7 +141,7 @@ class ComboBox extends Picker {
         let me = this;
 
         // Create buffered function to respond to input field mutation
-        //me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
+        me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
 
         me.typeAhead && me.updateTypeAhead()
     }
@@ -206,10 +206,11 @@ class ComboBox extends Picker {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        super.afterSetValue(value, oldValue);
-
         let me = this;
 
+        // input value changes (super call) need a flag to prevent showing the picker
+        me.programmaticValueChange = true;
+        super.afterSetValue(value, oldValue);
         me.programmaticValueChange = false;
 
         if (me._picker?.isVisible) {
@@ -304,8 +305,6 @@ class ComboBox extends Picker {
             store        = me.store,
             record;
 
-        me.programmaticValueChange = true;
-
         // getting a record, nothing to do
         if (Neo.isObject(value)) {
             return value

package/src/list/Base.mjs

@@ -486,6 +486,12 @@ class Base extends Component {
             }
 
             case 'Object': {
+                // We want a merge for custom cls rules
+                if (itemContent.cls) {
+                    NeoArray.add(item.cls, itemContent.cls);
+                    delete itemContent.cls
+                }
+
                 Object.assign(item, itemContent);
                 break;
             }
@@ -493,6 +499,7 @@ class Base extends Component {
             case 'Number':
             case 'String': {
                 item.html = itemContent;
+                break;
             }
         }