neo.mjs 10.0.0-alpha.4 → 10.0.0-beta.1

package/resources/scss/src/grid/plugin/CellEditing.scss

@@ -1,4 +1,4 @@
-.neo-grid-view {
+.neo-grid-body {
     .neo-grid-cell {
         &:has(.neo-grid-editor) {
             padding: 1px 4px 2px;

package/resources/scss/src/table/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-.neo-table-view {
+.neo-table-body {
     &:focus {
         outline: none;
     }

package/resources/scss/src/table/plugin/CellEditing.scss

@@ -1,4 +1,4 @@
-.neo-table-view {
+.neo-table-body {
     .neo-table-cell {
         &:has(.neo-table-editor) {
             padding: 1px 4px 2px;

package/resources/scss/theme-dark/grid/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-:root .neo-theme-dark { // .neo-grid-view
+:root .neo-theme-dark { // .neo-grid-body
     --grid-cell-background-color-hover                    : #54595c;
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/resources/scss/theme-dark/table/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-:root .neo-theme-dark { // .neo-table-view
+:root .neo-theme-dark { // .neo-table-body
     --table-cell-background-color-hover                    : #54595c;
     --table-cell-ismodified-color                          : orange;
     --table-cell-ismodified-size                           : 10px;

package/resources/scss/theme-light/grid/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-light { // .neo-grid-view
+:root .neo-theme-light { // .neo-grid-body
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/resources/scss/theme-light/table/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-light { // .neo-table-view
+:root .neo-theme-light { // .neo-table-body
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --table-cell-ismodified-color                          : orange;
     --table-cell-ismodified-size                           : 10px;

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

@@ -53,11 +53,10 @@
             border-radius   : 4px;
             color           : var(--sem-color-fg-neutral-contrast);
             font-family     : var(--core-fontfamily-mono);
-            font-size       : var(--core-fontsize-body);
+            font-size       : 14px;
             font-weight     : var(--core-fontweight-regular);
             line-height     : var(--core-lineheight-headline);
             padding         : 2px 0.3em;
-            font-size       : 16px;
         }
     }
 

package/resources/scss/theme-neo-light/grid/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-neo-light { // .neo-grid-view
+:root .neo-theme-neo-light { // .neo-grid-body
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --grid-cell-ismodified-color                          : orange;
     --grid-cell-ismodified-size                           : 10px;

package/resources/scss/theme-neo-light/table/{View.scss → Body.scss}

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-:root .neo-theme-neo-light { // .neo-table-view
+:root .neo-theme-neo-light { // .neo-table-body
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
     --table-cell-ismodified-color                          : orange;
     --table-cell-ismodified-size                           : 10px;

package/src/DefaultConfig.mjs

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

package/src/core/Base.mjs

@@ -86,6 +86,14 @@ class Base {
          * @protected
          */
         isConstructed: false,
+        /**
+         * The config will get set to `true` once the Promise of `async initAsync()` is resolved.
+         * You can use `afterSetIsReady()` to get notified once the ready state is reached.
+         * Since not all classes use the Observable mixin, Neo will not fire an event.
+         * method body.
+         * @member {Boolean} isReady=false
+         */
+        isReady_: false,
         /**
          * Add mixins as an array of classNames, imported modules or a mixed version
          * @member {String[]|Neo.core.Base[]|null} mixins=null
@@ -96,7 +104,17 @@ class Base {
          * @member {Class} module=null
          * @protected
          */
-        module: null
+        module: null,
+        /**
+         * Remote method access for other threads. Example use case:
+         * remote: {app: ['myRemoteMethod']}
+         *
+         * ONLY supported for singletons.
+         *
+         * @member {Object|null} remote_=null
+         * @protected
+         */
+        remote_: null
     }
 
     /**
@@ -154,7 +172,11 @@ class Base {
          */
         intercept(me, 'destroy', me.isDestroyedCheck, me);
 
-        me.remote && setTimeout(me.initRemote.bind(me), 1)
+        // Triggers async logic after the construction chain is done.
+        Promise.resolve().then(async () => {
+            await me.initAsync();
+            me.isReady = true
+        })
     }
 
     /**
@@ -255,6 +277,24 @@ class Base {
         return value
     }
 
+    /**
+     * Triggered before the remote config gets changed
+     * @param {Object|null} value
+     * @param {Object|null} oldValue
+     * @returns {Object|null}
+     * @protected
+     */
+    beforeSetRemote(value, oldValue) {
+        let me = this;
+
+        // Only allow remote access for singletons or main thread addons
+        if (value && !me.singleton && !me.isMainThreadAddon) {
+            throw new Error('Remote method access is only functional for Singleton classes ' + me.className)
+        }
+
+        return value
+    }
+
     /**
      * @param {String} fn               The name of a function to find in the passed scope object.
      * @param {Object} originName       The name of the method inside the originScope.
@@ -367,11 +407,23 @@ class Base {
 
     /**
      * Gets triggered after onConstructed() is done
-     * @see {@link Neo.core.Base#onConstructed onConstructed}
-     * @tutorial 02_ClassSystem
      */
     init() {}
 
+    /**
+     * You can use this method in subclasses to perform asynchronous initialization logic.
+     * Make sure to use the parent call `await super.initAsync()` at the beginning of their implementations,
+     * or the registration of remote methods will get delayed.
+     *
+     * A common use case is requiring conditional or optional dynamic imports or fetching initial data.
+     *
+     * Once the promise returned by this method is fulfilled, the `isReady` config will be set to `true`.
+     * @returns {Promise<void>} A promise that resolves when the asynchronous initialization is complete.
+     */
+    async initAsync() {
+        this.remote && this.initRemote()
+    }
+
     /**
      * Applies all class configs to this instance
      * @param {Object} config
@@ -393,19 +445,14 @@ class Base {
      * @protected
      */
     initRemote() {
-        let me                  = this,
-            {className, remote} = me,
+        let {className, remote} = this,
             {currentWorker}     = Neo;
 
-        if (!me.singleton && !me.isMainThreadAddon) {
-            throw new Error('Remote method access is only functional for Singleton classes ' + className)
-        }
-
-        if (!Neo.config.unitTestMode && Neo.isObject(remote)) {
+        if (!Neo.config.unitTestMode) {
             if (Neo.workerId !== 'main' && currentWorker.isSharedWorker && !currentWorker.isConnected) {
                 currentWorker.on('connected', () => {
                     Base.sendRemotes(className, remote)
-                }, me, {once: true})
+                }, this, {once: true})
             } else {
                 Base.sendRemotes(className, remote)
             }

package/src/core/Util.mjs

@@ -175,7 +175,18 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isObject(value) {
-        return value?.constructor?.name === 'Object' || false
+        return value?.constructor?.name === 'Object'
+    }
+
+    /**
+     * Returns true if the passed value is a promise.
+     * We are intentionally not checking for `value instanceof Promise`,
+     * to support any "thenable" objects for flexibility.
+     * @param {Object} value The value to test
+     * @returns {Boolean}
+     */
+    static isPromise(value) {
+        return typeof value?.then === 'function'
     }
 
     /**
@@ -184,7 +195,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isRecord(value) {
-        return value?.constructor?.name === 'Record' || false
+        return value?.constructor?.name === 'Record'
     }
 
     /**
@@ -233,6 +244,7 @@ Neo.applyFromNs(Neo, Util, {
     isFunction       : 'isFunction',
     isNumber         : 'isNumber',
     isObject         : 'isObject',
+    isPromise        : 'isPromise',
     isRecord         : 'isRecord',
     isString         : 'isString',
     toArray          : 'toArray'

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -54,15 +54,15 @@ class SortZone extends BaseSortZone {
 
         let me            = this,
             grid          = me.owner.parent,
-            {view}        = grid,
-            gridRows      = view.getVdomRoot().cn,
+            {body}        = grid,
+            bodyWrapperId = Neo.getId('grid-body-wrapper'),
+            gridRows      = body.getVdomRoot().cn,
             columnIndex   = me.dragElement['aria-colindex'] - 1,
-            {dataField}   = view.columnPositions.getAt(columnIndex),
-            cells         = view.getColumnCells(dataField),
+            {dataField}   = body.columnPositions.getAt(columnIndex),
+            cells         = body.getColumnCells(dataField),
             rows          = [],
             config        = await super.createDragProxy(data, false),
             rect          = await grid.getDomRect(),
-            viewWrapperId = Neo.getId('grid-view-wrapper'),
             row;
 
         config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
@@ -85,9 +85,9 @@ class SortZone extends BaseSortZone {
         {cn: [
             {cls: ['neo-grid-container'], cn: [
                 {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
-                {cls: ['neo-grid-view-wrapper'], id: viewWrapperId, cn: [
-                    {cls: ['neo-grid-view'], cn: rows},
-                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[0].height}}
+                {cls: ['neo-grid-body-wrapper'], id: bodyWrapperId, cn: [
+                    {cls: ['neo-grid-body'], cn: rows},
+                    {cls: ['neo-grid-scrollbar'], style: {height: body.vdom.cn[0].height}}
                 ]}
             ]}
         ]};
@@ -95,8 +95,8 @@ class SortZone extends BaseSortZone {
         config.listeners = {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
-                    id      : viewWrapperId,
-                    value   : view.scrollTop,
+                    id      : bodyWrapperId,
+                    value   : body.scrollTop,
                     windowId: this.windowId
                 })
             }
@@ -133,11 +133,11 @@ class SortZone extends BaseSortZone {
         owner.updateDepth = 2;
         owner.update();
 
-        await owner.passSizeToView();
+        await owner.passSizeToBody();
 
         await this.timeout(20);
 
-        owner.parent.view.createViewData()
+        owner.parent.body.createViewData()
     }
 
     /**
@@ -148,11 +148,11 @@ class SortZone extends BaseSortZone {
 
         if (this.moveColumnContent) {
             let me             = this,
-                {view}         = me.owner.parent,
+                {body}         = me.owner.parent,
                 columnIndex    = me.dragElement['aria-colindex'] - 1,
-                columnPosition = view.columnPositions.getAt(columnIndex),
+                columnPosition = body.columnPositions.getAt(columnIndex),
                 {dataField}    = columnPosition,
-                cells          = view.getColumnCells(dataField);
+                cells          = body.getColumnCells(dataField);
 
             columnPosition.hidden = true;
 
@@ -160,7 +160,7 @@ class SortZone extends BaseSortZone {
                 cell.style.visibility = 'hidden'
             });
 
-            view.update()
+            body.update()
         }
     }
 
@@ -174,12 +174,12 @@ class SortZone extends BaseSortZone {
         if (this.moveColumnContent) {
             let me                = this,
                 {itemRects}       = me,
-                {view}            = me.owner.parent,
-                {columnPositions} = view,
+                {body}            = me.owner.parent,
+                {columnPositions} = body,
                 column1Position   = columnPositions.getAt(index1),
                 column2Position   = columnPositions.getAt(index2),
-                column1Cells      = view.getColumnCells(column1Position.dataField),
-                column2Cells      = view.getColumnCells(column2Position.dataField);
+                column1Cells      = body.getColumnCells(column1Position.dataField),
+                column2Cells      = body.getColumnCells(column2Position.dataField);
 
             Object.assign(column1Position, {
                 width: itemRects[index2].width,
@@ -203,7 +203,7 @@ class SortZone extends BaseSortZone {
                 node.style.width = column2Position.width + 'px'
             });
 
-            view.update()
+            body.update()
         }
     }
 }

package/src/draggable/table/header/toolbar/SortZone.mjs

@@ -63,7 +63,7 @@ class SortZone extends BaseSortZone {
         owner.updateDepth = 2;
         owner.update();
 
-        owner.parent.view.createViewData()
+        owner.parent.body.createViewData()
     }
 }
 

package/src/grid/{View.mjs → Body.mjs}

@@ -6,21 +6,21 @@ import RowModel        from '../selection/grid/RowModel.mjs';
 import VDomUtil        from '../util/VDom.mjs';
 
 /**
- * @class Neo.grid.View
+ * @class Neo.grid.Body
  * @extends Neo.component.Base
  */
-class GridView extends Component {
+class GridBody extends Component {
     static config = {
         /**
-         * @member {String} className='Neo.grid.View'
+         * @member {String} className='Neo.grid.Body'
          * @protected
          */
-        className: 'Neo.grid.View',
+        className: 'Neo.grid.Body',
         /**
-         * @member {String} ntype='grid-view'
+         * @member {String} ntype='grid-body'
          * @protected
          */
-        ntype: 'grid-view',
+        ntype: 'grid-body',
         /**
          * @member {Boolean} animatedRowSorting_=false
          */
@@ -36,23 +36,23 @@ class GridView extends Component {
          */
         availableRows_: 0,
         /**
-         * Internal flag. Gets calculated after mounting grid.View rows
+         * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} availableWidth_=0
          */
         availableWidth_: 0,
         /**
-         * @member {String[]} baseCls=['neo-grid-view']
+         * @member {String[]} baseCls=['neo-grid-body']
          * @protected
          */
-        baseCls: ['neo-grid-view'],
+        baseCls: ['neo-grid-body'],
         /**
-         * The amount of columns (cells) to paint before the first & after the last visible column,
+         * The number of columns (cells) to paint before the first and after the last visible column,
          * to enhance the scrolling performance
          * @member {Number} bufferColumnRange_=0
          */
         bufferColumnRange_: 0,
         /**
-         * The amount of rows to paint before the first & after the last visible row,
+         * The number of rows to paint before the first and after the last visible row,
          * to enhance the scrolling performance
          * @member {Number} bufferRowRange_=3
          */
@@ -63,7 +63,7 @@ class GridView extends Component {
          */
         colspanField: 'colspan',
         /**
-         * Internal flag. Gets calculated after mounting grid.View rows
+         * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} containerWidth_=0
          */
         containerWidth_: 0,
@@ -150,9 +150,9 @@ class GridView extends Component {
          */
         visibleRows: [0, 0],
         /**
-         * @member {String[]} wrapperCls=[]
+         * @member {String[]} wrapperCls=['neo-grid-body-wrapper']
          */
-        wrapperCls: ['neo-grid-view-wrapper'],
+        wrapperCls: ['neo-grid-body-wrapper'],
         /**
          * @member {Object} _vdom
          */
@@ -419,9 +419,8 @@ class GridView extends Component {
      * @param {Number} data.rowIndex
      * @returns {Object}
      */
-    applyRendererOutput(data) {
-        let {cellId, column, columnIndex, record, rowIndex} = data,
-            me                     = this,
+    applyRendererOutput({cellId, column, columnIndex, record, rowIndex}) {
+        let me                     = this,
             gridContainer          = me.parent,
             {selectedCells, store} = me,
             cellCls                = ['neo-grid-cell'],
@@ -686,7 +685,7 @@ class GridView extends Component {
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, dataField, record, view: me})
+        me.parent.fire(eventName, {body: me, data, dataField, record})
     }
 
     /**
@@ -698,7 +697,7 @@ class GridView extends Component {
             id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {data, record, view: me})
+        me.parent.fire(eventName, {body: me, data, record})
     }
 
     /**
@@ -1133,4 +1132,4 @@ class GridView extends Component {
     }
 }
 
-export default Neo.setupClass(GridView);
+export default Neo.setupClass(GridBody);