neo.mjs 5.14.1 → 5.14.3

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/button/base/MainContainer.mjs

@@ -191,6 +191,7 @@ class MainContainer extends ConfigurationViewport {
                 iconCls: 'fa fa-home',
                 text   : 'Item 1'
             }, {
+                cls    : ['neo-red'],
                 handler: data => console.log('menu item 2 click =>', data),
                 iconCls: 'fa fa-user',
                 text   : 'Item 2'

package/examples/component/timer/MainContainerController.mjs

@@ -50,8 +50,8 @@ class MainContainerController extends ComponentController {
 
             output.update();
 
-            await Neo.timeout(20)
-            me.syntaxHighlight();
+            await me.timeout(20);
+            me.syntaxHighlight()
         }
     }
 

package/examples/component/toast/MainContainerController.mjs

@@ -50,8 +50,8 @@ class MainContainerController extends ComponentController {
 
             output.update();
 
-            await Neo.timeout(20)
-            me.syntaxHighlight();
+            await me.timeout(20);
+            me.syntaxHighlight()
         }
     }
 

package/package.json

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

package/resources/scss/src/examples/button/base/MainContainer.scss

@@ -0,0 +1,7 @@
+.neo-menu-list {
+    .neo-list-item {
+        &.neo-red {
+            color: red;
+        }
+    }
+}

package/src/DefaultConfig.mjs

@@ -63,12 +63,12 @@ const DefaultConfig = {
     /**
      * In case you are using the GoogleAnalytics main thread addon or useGoogleAnalytics: true,
      * you can change the gtag id here. Required for the online examples (gh pages)
-     * @default 'UA-153734404-1'
+     * @default 'G-DJ13071C55'
      * @memberOf! module:Neo
      * @name config.gtagId
      * @type String
      */
-    gtagId: 'UA-153734404-1',
+    gtagId: 'G-DJ13071C55',
     /**
      * Flag for running on https://neomjs.github.io/pages/
      * => to use local images paths instead of raw.githubusercontent.com
@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.14.1'
+     * @default '5.14.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.14.1'
+    version: '5.14.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -481,7 +481,7 @@ class Base extends Component {
         delete rippleWrapper.removeDom;
         me.update();
 
-        await Neo.timeout(1);
+        await me.timeout(1);
 
         rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
         me.update();
@@ -507,7 +507,7 @@ class Base extends Component {
         menuList.hidden = hidden;
 
         if (!hidden) {
-            await Neo.timeout(50);
+            await this.timeout(50);
             menuList.focus()
         }
     }

package/src/calendar/view/week/Component.mjs

@@ -452,7 +452,7 @@ class Component extends BaseComponent {
                 me.needsEventUpdate = false;
             }
 
-            await Neo.timeout(70);
+            await me.timeout(70);
 
             rect = await me.getDomRect(me.getColumnContainer().id);
 

package/src/component/Base.mjs

@@ -1479,7 +1479,7 @@ class Base extends CoreBase {
 
             delete me.vdom.removeDom;
 
-            await Neo.timeout(30);
+            await me.timeout(30);
 
             me.mounted = true;
         }

package/src/container/AccordionItem.mjs

@@ -53,18 +53,19 @@ class AccordionContainer extends Base {
      * @protected
      */
     createItems() {
-        const me    = this,
-              items = me.items,
-              title = me.title;
-        let iconCls  = me.iconCls || ['no-icon'],
+        let me       = this,
             arrowCls = me.arrowCls || 'fa-caret-down',
+            iconCls  = me.iconCls || ['no-icon'],
+            items    = me.items,
+            title    = me.title,
             header, content;
 
         if (!Neo.isArray(iconCls)) {
-            iconCls = iconCls.split(' ');
+            iconCls = iconCls.split(' ')
         }
+
         if (!Neo.isArray(arrowCls)) {
-            arrowCls = arrowCls.split(' ');
+            arrowCls = arrowCls.split(' ')
         }
 
         header = Neo.create({
@@ -85,6 +86,7 @@ class AccordionContainer extends Base {
                 cls    : ['fa', ...arrowCls]
             }]
         });
+
         content = {
             ntype  : 'container',
             flag   : 'content',
@@ -98,7 +100,7 @@ class AccordionContainer extends Base {
 
         me.addDomListeners([
             {click: me.onExpandClick, delegate: 'neo-accordion-header-arrow'}
-        ]);
+        ])
     }
 
     /**
@@ -106,15 +108,15 @@ class AccordionContainer extends Base {
      * @param {Boolean} isExpanded
      */
     afterSetExpanded(isExpanded) {
-        const me  = this,
-              cls = me.cls,
-              fn  = isExpanded ? 'add' : 'remove';
+        let me  = this,
+            cls = me.cls,
+            fn  = isExpanded ? 'add' : 'remove';
 
         NeoArray[fn](cls, 'neo-expanded');
         me.cls = cls;
 
         // Ensure scrollbars are not flipping in and out
-        Neo.timeout(450).then(() => {
+        me.timeout(450).then(() => {
             NeoArray[fn](cls, 'neo-scrollable');
             me.cls = cls;
         })
@@ -133,7 +135,9 @@ class AccordionContainer extends Base {
         if (iconEl) {
             let cls = iconEl.cls;
 
-            if (!Neo.isArray(newValue)) newValue = newValue.split(' ');
+            if (!Neo.isArray(newValue)) {
+                newValue = newValue.split(' ')
+            }
 
             NeoArray.remove(cls, oldValue);
             NeoArray.add(cls, newValue);
@@ -158,9 +162,9 @@ class AccordionContainer extends Base {
      * Otherwise we set this.expanded to the new value.
      */
     onExpandClick() {
-        const me           = this,
-              currentState = me.expanded;
-        let parent = me.up('accordion');
+        let me           = this,
+            currentState = me.expanded,
+            parent       = me.up('accordion');
 
         if (parent.ntype === 'accordion') {
             parent.childExpandChange({

package/src/container/Dialog.mjs

@@ -93,7 +93,7 @@ class Dialog extends Base {
 
         iconNode.removeDom = !value || value === '';
         this.update();
-    } 
+    }
 
     /**
      * Triggered after the title config got changed
@@ -104,7 +104,7 @@ class Dialog extends Base {
     afterSetTitle(value, oldValue) {
         this.headerToolbar?.down({flag: 'panel-header-title'}).set({
             text: value
-        });
+        })
     }
 
     /**
@@ -149,7 +149,7 @@ class Dialog extends Base {
                 hidden: !me.title,
                 text  : me.title
             }, ...me.headerConfig.items || []],
-            
+
             ...headerConfigCopy
         });
 
@@ -190,11 +190,12 @@ class Dialog extends Base {
      */
     async show(modal = true) {
         let me = this;
-        await Neo.timeout(20);
+
+        await me.timeout(20);
 
         Neo.main.addon.Dialog[modal ? 'showModal': 'show']({
-            id: me.id,
-            appName: me.appName
+            appName: me.appName,
+            id     : me.id
         });
     }
 }

package/src/controller/Application.mjs

@@ -88,7 +88,7 @@ class Application extends Base {
             let me = this;
 
             // short delay to ensure changes from onHashChange() got applied
-            await Neo.timeout(Neo.config.hash ? 200 : 10);
+            await me.timeout(Neo.config.hash ? 200 : 10);
 
             Logger.addContextMenuListener(me.mainView);
 

package/src/core/Base.mjs

@@ -79,6 +79,13 @@ class Base {
         module: null
     }
 
+    /**
+     * Internal cache for all timeout ids when using this.timeout()
+     * @member {Number[]} timeoutIds=[]
+     * @private
+     */
+    #timeoutIds = []
+
     /**
      * Applies the observable mixin if needed, grants remote access if needed.
      * @param {Object} config={}
@@ -240,6 +247,10 @@ class Base {
     destroy() {
         let me = this;
 
+        me.#timeoutIds.forEach(id => {
+            clearTimeout(id)
+        });
+
         if (Base.instanceManagerAvailable === true) {
             Neo.manager.Instance.unregister(me)
         } else if (Neo.idMap) {
@@ -503,6 +514,20 @@ class Base {
         return false
     }
 
+    /**
+     * Stores timeoutIds internally, so that destroy() can clear them if needed
+     * @param {Number} time in milliseconds
+     * @returns {Promise<any>}
+     */
+    timeout(time) {
+        return new Promise(resolve => {
+            let timeoutIds = this.#timeoutIds,
+                timeoutId  = setTimeout(() => {timeoutIds.splice(timeoutIds.indexOf(timeoutId, 1)); resolve()}, time);
+
+            timeoutIds.push(timeoutId)
+        })
+    }
+
     /**
      * <p>Enhancing the toString() method, e.g.</p>
      * `Neo.create('Neo.button.Base').toString() => "[object Neo.button.Base (neo-button-1)]"`

package/src/core/Util.mjs

@@ -199,14 +199,6 @@ class Util extends Base {
         return typeof value === 'string';
     }
 
-    /**
-     * @param {Number} time in milliseconds
-     * @returns {Promise<unknown>}
-     */
-    static timeout(time) {
-        return new Promise(resolve => setTimeout(resolve, time));
-    }
-
     /**
      * Converts any iterable (strings, numeric indices and a length property) into a true array
      * @param {Object|String} iterable
@@ -246,7 +238,6 @@ Neo.applyFromNs(Neo, Util, {
     isNumber         : 'isNumber',
     isObject         : 'isObject',
     isString         : 'isString',
-    timeout          : 'timeout',
     toArray          : 'toArray'
 }, true);
 

package/src/dialog/Base.mjs

@@ -298,7 +298,7 @@ class Base extends Panel {
 
         me.closeOrHide(false);
 
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -314,7 +314,7 @@ class Base extends Panel {
             }]
         });
 
-        await Neo.timeout(250);
+        await me.timeout(250);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -340,7 +340,7 @@ class Base extends Panel {
             parentId: 'document.body'
         });
 
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         await Neo.currentWorker.promiseMessage('main', {
             action: 'updateDom',
@@ -357,9 +357,9 @@ class Base extends Panel {
             }]
         });
 
-        await Neo.timeout(200);
+        await me.timeout(200);
 
-        me.show(false);
+        me.show(false)
     }
 
     /**

package/src/draggable/toolbar/SortZone.mjs

@@ -82,14 +82,14 @@ class SortZone extends DragZone {
      * @param {Object} data
      */
     async onDragEnd(data) {
-        await Neo.timeout(10);
-
         let me         = this,
             owner      = me.owner,
             itemStyles = me.itemStyles,
             ownerStyle = owner.style || {},
             itemStyle;
 
+        await me.timeout(10);
+
         if (owner.sortable) {
             ownerStyle.height = me.ownerStyle.height || null;
             ownerStyle.width  = me.ownerStyle.width  || null;
@@ -127,7 +127,7 @@ class SortZone extends DragZone {
                 startIndex  : -1
             });
 
-            await Neo.timeout(30);
+            await me.timeout(30);
 
             me.dragEnd(data); // we do not want to trigger the super class call here
         }

package/src/form/field/Picker.mjs

@@ -268,7 +268,7 @@ class Picker extends Text {
             picker = me.getPicker();
 
         // avoid breaking selection model cls updates
-        await Neo.timeout(30);
+        await me.timeout(30);
 
         if (me.pickerIsMounted) {
             picker.unmount();

package/src/list/Base.mjs

@@ -383,6 +383,10 @@ class Base extends Component {
             }
         }
 
+        if (record.cls) {
+            NeoArray.add(cls, record.cls)
+        }
+
         if (record[me.disabledField]) {
             cls.push('neo-disabled')
         }

package/src/main/addon/ScrollSync.mjs

@@ -74,7 +74,7 @@ class ScrollSync extends Base {
      */
     async register(data) {
         // short delay to ensure the target node got mounted
-        await Neo.timeout(50)
+        await this.timeout(50)
 
         let sourceId   = data.sourceId,
             sourceMap  = this.sourceMap,

package/src/menu/Model.mjs

@@ -19,6 +19,9 @@ class Model extends BaseModel {
          * @member {Object[]} fields
          */
         fields: [{
+            name: 'cls',
+            type: 'Array'
+        }, {
             name: 'handler',
             type: 'Function'
         }, {