neo.mjs 8.17.1 → 8.18.1

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-07",
+      "datePublished": "2025-02-08",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.17.1'
+                html  : 'v8.18.1'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/MainContainer.mjs

@@ -89,6 +89,7 @@ class MainContainer extends Viewport {
      */
     onAmountColumnsChange(data) {
         if (data.oldValue) {
+            this.grid.isLoading = 'Is Loading';
             this.grid.amountColumns = parseInt(data.value.id)
         }
     }
@@ -98,6 +99,7 @@ class MainContainer extends Viewport {
      */
     onAmountRowsChange(data) {
         if (data.oldValue) {
+            this.grid.isLoading = 'Is Loading';
             this.grid.store.amountRows = parseInt(data.value.id)
         }
     }

package/package.json

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

package/resources/scss/src/button/Base.scss

@@ -161,6 +161,13 @@
         }
     }
 
+    &.neo-masked {
+        font-family: inherit;
+        font-size  : inherit;
+        font-weight: var(--button-text-font-weight);
+        color      : var(--button-text-color);
+    }
+
     &.neo-button-ghost {
         background-color: var(--button-ghost-background-color);
         background-image: var(--button-ghost-background-image);

package/resources/scss/src/component/Base.scss

@@ -29,36 +29,33 @@
 }
 
 .neo-masked {
-    font-family : inherit;
-    font-size   : inherit;
-    font-weight : var(--button-text-font-weight);
-    position    : relative;
-    color       : var(--button-text-color);
+    position: relative;
 
     .neo-load-mask {
-        position         : absolute;
-        inset            : 0;
-        background-color : inherit;
-        border-radius    : inherit;
-        z-index          : 4;
-        display          : grid;
-        justify-content  : center;
-        align-content    : center;
-        overflow         : clip;
+        align-content   : center;
+        background-color: inherit;
+        border-radius   : inherit;
+        display         : grid;
+        inset           : 0;
+        justify-content : center;
+        overflow        : clip;
+        position        : absolute;
+        z-index         : 4;
 
         .neo-load-mask-body {
-            align-items : center;
-            display     : flex;
-            flex-flow   : row nowrap;
-            gap         : 0.7em;
+            align-items: center;
+            display    : flex;
+            flex-flow  : row nowrap;
+            gap        : 0.7em;
+
+            .fa-spinner {
+                height: 1em;
+                width : 1em;
+            }
 
             .neo-loading-message {
                 color: inherit;
             }
-            .fa-spinner {
-                width  : 1em;
-                height : 1em;
-            }
         }
     }
 }

package/resources/scss/src/grid/Container.scss

@@ -5,6 +5,26 @@
     overscroll-behavior: none;
     position           : relative;
 
+    &.neo-masked {
+        .neo-grid-container {
+            opacity: .3;
+        }
+
+        .neo-load-mask {
+            .neo-load-mask-body {
+                .fa-spinner {
+                    height     : 3em;
+                    font-size  : 3em;
+                    line-height: 3em;
+                }
+
+                .neo-loading-message {
+                    font-size: 2.5em;
+                }
+            }
+        }
+    }
+
     .neo-grid-container {
         border             : 1px solid var(--grid-container-border-color);
         border-spacing     : 0;

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -749,8 +749,8 @@ class Component extends Base {
      */
     afterSetIsLoading(value, oldValue) {
         if (value || oldValue !== undefined) {
-            let me          = this,
-                {cls, vdom} = me,
+            let me                 = this,
+                {wrapperCls, vdom} = me,
                 maskIndex;
 
             if (oldValue !== undefined && vdom.cn) {
@@ -770,8 +770,8 @@ class Component extends Base {
                 vdom.cn.push(me.createLoadingMask(value))
             }
 
-            NeoArray.toggle(cls, 'neo-masked', value);
-            me.set({cls, vdom})
+            NeoArray.toggle(wrapperCls, 'neo-masked', value);
+            me.set({vdom, wrapperCls})
         }
     }
 

package/src/form/field/ComboBox.mjs

@@ -447,20 +447,22 @@ class ComboBox extends Picker {
      * @param {*} oldValue
      * @override
      */
-    fireChangeEvent(value, oldValue) {
+    async fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
             params        = {component: me, oldValue, value};
 
-            me.fire('change', params);
+        await me.timeout(10);
 
-            if (!me.suspendEvents) {
-                ComponentManager.getParents(me).forEach(parent => {
-                    if (FormContainer && parent instanceof FormContainer) {
-                        parent.fire('fieldChange', params)
-                    }
-                })
-            }
+        me.fire('change', params);
+
+        if (!me.suspendEvents) {
+            ComponentManager.getParents(me).forEach(parent => {
+                if (FormContainer && parent instanceof FormContainer) {
+                    parent.fire('fieldChange', params)
+                }
+            })
+        }
     }
 
     /**
@@ -557,7 +559,7 @@ class ComboBox extends Picker {
      * @param {Object[]} selectionChangeEvent.selection
      * @protected
      */
-    async onListItemSelectionChange({ selection }) {
+    async onListItemSelectionChange({selection}) {
         if (selection?.length) {
             let me       = this,
                 selected = selection[0],
@@ -567,19 +569,15 @@ class ComboBox extends Picker {
 
             me.updateTypeAheadValue(null, true);
 
+            await me.hidePicker();
+
             me.preventFiltering = true;
             me.value            = record;
             me.preventFiltering = false;
 
             me.fire('select', {
                 value: record
-            });
-
-            // Short delay to let selection DOM updates get applied.
-            // Alternatively, we could hide the picker before the selection happen and limit updates to the vdom.
-            await me.timeout(20);
-
-            await me.hidePicker()
+            })
         }
     }
 

package/src/grid/View.mjs

@@ -494,11 +494,11 @@ class GridView extends Component {
             gridContainer = me.parent,
             columns       = gridContainer.headerToolbar.items,
             id            = me.getRowId(record, rowIndex),
-            trCls         = me.getTrClass(record, rowIndex),
+            rowCls        = me.getRowClass(record, rowIndex),
             config, column, columnPosition, endIndex, gridRow, i, startIndex;
 
         if (rowIndex % 2 !== 0) {
-            trCls.push('neo-even')
+            rowCls.push('neo-even')
         }
 
         if (selectedRows && record[me.selectedRecordField]) {
@@ -506,14 +506,14 @@ class GridView extends Component {
         }
 
         if (selectedRows?.includes(id)) {
-            trCls.push('neo-selected');
+            rowCls.push('neo-selected');
             gridContainer.fire('select', {record})
         }
 
         gridRow = {
             id,
             'aria-rowindex': rowIndex + 2, // header row => 1, first body row => 2
-            cls            : trCls,
+            cls            : rowCls,
             cn             : [],
             role           : 'row',
 
@@ -582,6 +582,8 @@ class GridView extends Component {
 
         me.getVdomRoot().cn = rows;
 
+        me.parent.isLoading = false;
+
         me.update()
     }
 
@@ -745,21 +747,21 @@ class GridView extends Component {
     }
 
     /**
+     * Override this method to apply custom CSS rules to grid rows
      * @param {Object} record
-     * @returns {String}
+     * @param {Number} rowIndex
+     * @returns {String[]}
      */
-    getRowId(record) {
-        return `${this.id}__tr__${record[this.store.getKeyProperty()]}`
+    getRowClass(record, rowIndex) {
+        return ['neo-grid-row']
     }
 
     /**
-     * Override this method to apply custom CSS rules to grid rows
      * @param {Object} record
-     * @param {Number} rowIndex
-     * @returns {String[]}
+     * @returns {String}
      */
-    getTrClass(record, rowIndex) {
-        return ['neo-grid-row']
+    getRowId(record) {
+        return `${this.id}__tr__${record[this.store.getKeyProperty()]}`
     }
 
     /**