neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/src/grid/Body.mjs

@@ -23,21 +23,25 @@ class GridBody extends Component {
         ntype: 'grid-body',
         /**
          * @member {Boolean} animatedRowSorting_=false
+         * @reactive
          */
         animatedRowSorting_: false,
         /**
          * Internal flag. Gets calculated when mounting the grid.Container
          * @member {Number} availableHeight_=0
+         * @reactive
          */
         availableHeight_: 0,
         /**
          * Internal flag. Gets calculated when changing the availableHeight config
          * @member {Number} availableRows_=0
+         * @reactive
          */
         availableRows_: 0,
         /**
          * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} availableWidth_=0
+         * @reactive
          */
         availableWidth_: 0,
         /**
@@ -49,12 +53,14 @@ class GridBody extends Component {
          * 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
+         * @reactive
          */
         bufferColumnRange_: 0,
         /**
          * The number of rows to paint before the first and after the last visible row,
          * to enhance the scrolling performance
          * @member {Number} bufferRowRange_=3
+         * @reactive
          */
         bufferRowRange_: 3,
         /**
@@ -65,19 +71,23 @@ class GridBody extends Component {
         /**
          * Internal flag. Gets calculated after mounting grid.Body rows
          * @member {Number} containerWidth_=0
+         * @reactive
          */
         containerWidth_: 0,
         /**
          * @member {Neo.collection.Base|null} columnPositions_=null
          * @protected
+         * @reactive
          */
         columnPositions_: null,
         /**
          * @member {Boolean} highlightModifiedCells_=false
+         * @reactive
          */
         highlightModifiedCells_: false,
         /**
          * @member {Boolean} isScrolling_=false
+         * @reactive
          */
         isScrolling_: false,
         /**
@@ -89,6 +99,7 @@ class GridBody extends Component {
          * Stores the indexes of the first & last mounted columns, including bufferColumnRange
          * @member {Number[]} mountedColumns_=[0,0]
          * @protected
+         * @reactive
          */
         mountedColumns_: [0, 0],
         /**
@@ -104,25 +115,30 @@ class GridBody extends Component {
         pluginAnimateRowsConfig: null,
         /**
          * @member {String} role='rowgroup'
+         * @reactive
          */
         role: 'rowgroup',
         /**
          * Number in px
          * @member {Number} rowHeight_=0
+         * @reactive
          */
         rowHeight_: 0,
         /**
          * @member {Number} scrollLeft_=0
          * @protected
+         * @reactive
          */
         scrollLeft_: 0,
         /**
          * @member {Number} scrollTop_=0
          * @protected
+         * @reactive
          */
         scrollTop_: 0,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
@@ -131,10 +147,12 @@ class GridBody extends Component {
         selectedRecordField: 'annotations.selected',
         /**
          * @member {Number} startIndex_=0
+         * @reactive
          */
         startIndex_: 0,
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
@@ -151,6 +169,7 @@ class GridBody extends Component {
         visibleRows: [0, 0],
         /**
          * @member {String[]} wrapperCls=['neo-grid-body-wrapper']
+         * @reactive
          */
         wrapperCls: ['neo-grid-body-wrapper'],
         /**
@@ -1126,7 +1145,7 @@ class GridBody extends Component {
      */
     updateScrollHeight(silent=false) {
         let me           = this,
-            countRecords = me.store.getCount(),
+            countRecords = me.store?.getCount() || 0,
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {

package/src/grid/Container.mjs

@@ -7,6 +7,7 @@ import Store             from '../data/Store.mjs';
 import VerticalScrollbar from './VerticalScrollbar.mjs';
 import * as column       from './column/_export.mjs';
 import * as header       from './header/_export.mjs';
+import {isDescriptor}    from '../core/ConfigSymbols.mjs';
 
 /**
  * @class Neo.grid.Container
@@ -54,17 +55,17 @@ class GridContainer extends BaseContainer {
         baseCls: ['neo-grid-container'],
         /**
          * Configs for Neo.grid.Body
-         * @member {Object|null} [bodyConfig=null]
+         * @member {Object|null} [body_={[isDescriptor]: true, merge: 'deep', value: null}]
          */
-        bodyConfig: null,
-        /**
-         * @member {String|null} bodyId_=null
-         * @protected
-         */
-        bodyId_: null,
+        body_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : null
+        },
         /**
          * true uses grid.plugin.CellEditing
          * @member {Boolean} cellEditing_=false
+         * @reactive
          */
         cellEditing_: false,
         /**
@@ -74,28 +75,32 @@ class GridContainer extends BaseContainer {
         columnDefaults: null,
         /**
          * @member {Object[]} columns_=[]
+         * @reactive
          */
         columns_: [],
         /**
          * Configs for Neo.grid.header.Toolbar
-         * @member {Object|null} [headerToolbarConfig=null]
+         * @member {Object|null} [headerToolbar_={[isDescriptor]: true, merge: 'deep', value: null}]
          */
-        headerToolbarConfig: null,
-        /**
-         * @member {String|null} headerToolbarId_=null
-         */
-        headerToolbarId_: null,
+        headerToolbar_: {
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value         : null
+        },
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**
          * @member {String} role='grid'
+         * @reactive
          */
         role: 'grid',
         /**
          * Number in px
          * @member {Number} rowHeight_=32
+         * @reactive
          */
         rowHeight_: 32,
         /**
@@ -105,19 +110,23 @@ class GridContainer extends BaseContainer {
         scrollbar: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * @member {Array|null} items=null
          * @protected
+         * @reactive
          */
         items: null,
         /**
@@ -141,22 +150,6 @@ class GridContainer extends BaseContainer {
      */
     scrollManager = null
 
-    /**
-     * Convenience method to access the Neo.grid.Body
-     * @returns {Neo.grid.Body|null}
-     */
-    get body() {
-        return Neo.getComponent(this.bodyId) || Neo.get(this.bodyId)
-    }
-
-    /**
-     * Convenience method to access the Neo.grid.header.Toolbar
-     * @returns {Neo.grid.header.Toolbar|null}
-     */
-    get headerToolbar() {
-        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
-    }
-
     /**
      * @param {Object} config
      */
@@ -166,24 +159,7 @@ class GridContainer extends BaseContainer {
         let me = this,
             {appName, rowHeight, store, windowId} = me;
 
-        me.bodyId          = Neo.getId('grid-body');
-        me.headerToolbarId = Neo.getId('grid-header-toolbar');
-
-        me.items = [{
-            module           : header.Toolbar,
-            id               : me.headerToolbarId,
-            showHeaderFilters: me.showHeaderFilters,
-            sortable         : me.sortable,
-            ...me.headerToolbarConfig
-        }, {
-            module       : GridBody,
-            flex         : 1,
-            gridContainer: me,
-            id           : me.bodyId,
-            rowHeight,
-            store,
-            ...me.bodyConfig
-        }];
+        me.items = [me.headerToolbar, me.body];
 
         me.scrollbar = Neo.create({
             module  : VerticalScrollbar,
@@ -255,10 +231,13 @@ class GridContainer extends BaseContainer {
      * @protected
      */
     async afterSetColumns(value, oldValue) {
-        if (oldValue?.getCount?.() > 0) {
-            let me = this;
+        let me              = this,
+            {headerToolbar} = me;
 
-            me.headerToolbar?.createItems()
+        // - If columns changed at run-time OR
+        // - In case the `header.Toolbar#createItems()` method has run before columns where available
+        if (oldValue?.count || (value?.count && headerToolbar?.isConstructed)) {
+            headerToolbar?.createItems()
 
             await me.timeout(50);
 
@@ -347,13 +326,20 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * Triggered before the bodyId config gets changed.
-     * @param {String} value
-     * @param {String} oldValue
+     * Triggered before the body config gets changed.
+     * @param {Object|Neo.grid.Body|null} value
+     * @param {Object|Neo.grid.Body|null} oldValue
      * @protected
      */
-    beforeSetBodyId(value, oldValue) {
-        return value || oldValue
+    beforeSetBody(value, oldValue) {
+        const me = this;
+
+        return ClassSystemUtil.beforeSetInstance(value, GridBody, {
+            flex         : 1,
+            gridContainer: me,
+            parentId     : me.id,
+            store        : me.store
+        })
     }
 
     /**
@@ -371,13 +357,19 @@ class GridContainer extends BaseContainer {
     }
 
     /**
-     * Triggered before the headerToolbarId config gets changed.
-     * @param {String} value
-     * @param {String} oldValue
+     * Triggered before the headerToolbar config gets changed.
+     * @param {Object|Neo.grid.header.Toolbar|null} value
+     * @param {Object|Neo.grid.header.Toolbar|null} oldValue
      * @protected
      */
-    beforeSetHeaderToolbarId(value, oldValue) {
-        return value || oldValue
+    beforeSetHeaderToolbar(value, oldValue) {
+        const me = this;
+
+        return ClassSystemUtil.beforeSetInstance(value, header.Toolbar, {
+            parentId         : me.id,
+            showHeaderFilters: me.showHeaderFilters,
+            sortable         : me.sortable
+        })
     }
 
     /**
@@ -462,7 +454,8 @@ class GridContainer extends BaseContainer {
             })
         });
 
-        me.items[0].items = headerButtons;
+        me.headerToolbar.items = headerButtons;
+        me.headerToolbar.createItems();
 
         if (Neo.typeOf(me._columns) === 'NeoInstance') {
             me._columns.clear();
@@ -591,7 +584,7 @@ class GridContainer extends BaseContainer {
      */
     async passSizeToBody(silent=false) {
         let me                          = this,
-            [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbarId]);
+            [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbar.id]);
 
         // delay for slow connections, where the container-sizing is not done yet
         if (containerRect.height === headerRect.height) {
@@ -611,7 +604,8 @@ class GridContainer extends BaseContainer {
      */
     removeSortingCss(dataField) {
         this.headerToolbar?.items.forEach(column => {
-            if (column.dataField !== dataField) {
+            if (column.dataField !== dataField) {return;
+                console.log(column, dataField)
                 column.removeSortingCss()
             }
         })

package/src/grid/ScrollManager.mjs

@@ -14,11 +14,13 @@ class ScrollManager extends Base {
         /**
          * @member {Number} scrollLeft_=0
          * @protected
+         * @reactive
          */
         scrollLeft_: 0,
         /**
          * @member {Number} scrollTop_=0
          * @protected
+         * @reactive
          */
         scrollTop_: 0
     }

package/src/grid/VerticalScrollbar.mjs

@@ -26,10 +26,12 @@ class VerticalScrollbar extends Component {
         /**
          * Number in px
          * @member {Number} rowHeight_=0
+         * @reactive
          */
         rowHeight_: 0,
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**

package/src/grid/column/Base.mjs

@@ -22,6 +22,7 @@ class Column extends Base {
         parent: null,
         /**
          * @member {Function|String|null} renderer_='cellRenderer'
+         * @reactive
          */
         renderer_: 'cellRenderer',
         /**
@@ -38,6 +39,7 @@ class Column extends Base {
         type: 'column',
         /**
          * @member {Number|null} windowId_=null
+         * @reactive
          */
         windowId_: null
     }

package/src/grid/column/Component.mjs

@@ -118,7 +118,7 @@ class Component extends Column {
         }
 
         if (me.useBindings) {
-            body.getStateProvider()?.parseConfig(component)
+            body.getStateProvider()?.createBindings(component)
         }
 
         body.updateDepth = -1;

package/src/grid/header/Button.mjs

@@ -33,6 +33,7 @@ class Button extends BaseButton {
         /**
          * Alignment of the matching grid cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'
+         * @reactive
          */
         cellAlign_: 'left',
         /**
@@ -59,28 +60,34 @@ class Button extends BaseButton {
         filterField: null,
         /**
          * @member {String} iconCls='fa fa-arrow-circle-up'
+         * @reactive
          */
         iconCls: 'fa fa-arrow-circle-up',
         /**
          * @member {String} iconPosition='right'
+         * @reactive
          */
         iconPosition: 'right',
         /**
          * 'ASC', 'DESC' or null
          * @member {String|null} isSorted_=null
          * @protected
+         * @reactive
          */
         isSorted_: null,
         /**
          * @member {String} role='columnheader'
+         * @reactive
          */
         role: 'columnheader',
         /**
          * @member {Boolean} showHeaderFilter_=false
+         * @reactive
          */
         showHeaderFilter_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true
     }

package/src/grid/header/Toolbar.mjs

@@ -22,30 +22,36 @@ class Toolbar extends BaseToolbar {
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
          * @member {Object} itemDefaults={ntype: 'grid-header-button'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'grid-header-button'
         },
         /**
          * @member {String} role='row'
+         * @reactive
          */
         role: 'row',
         /**
          * @member {Number} scrollLeft_=0
+         * @reactive
          */
         scrollLeft_: 0,
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * Convenience shortcut to pass sortable to all toolbar items.
          * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true,
         /**

package/src/grid/plugin/AnimateRows.mjs

@@ -28,12 +28,14 @@ class AnimateRows extends Base {
         /**
          * Time in ms for the background-color, opacity & transform transitions
          * @member {Number} transitionDuration_=500
+         * @reactive
          */
         transitionDuration_: 500,
         /**
          * The easing used for fadeIn, fadeOut and position changes.
          * Valid values: 'ease','ease-in','ease-out','ease-in-out','linear'
          * @member {String} transitionEasing_='ease-out'
+         * @reactive
          */
         transitionEasing_: 'ease-out'
     }

package/src/layout/Base.mjs

@@ -22,6 +22,7 @@ class Layout extends Base {
         /**
          * The name of the App this layout belongs to
          * @member {String|null} appName_=null
+         * @reactive
          */
         appName_: null,
         /**
@@ -34,6 +35,7 @@ class Layout extends Base {
          * A layout specific CSS selector which gets added to Container the layout is bound to.
          * @member {String|null} containerCls_=null
          * @protected
+         * @reactive
          */
         containerCls_: null,
         /**
@@ -44,6 +46,7 @@ class Layout extends Base {
         isLayout: true,
         /**
          * @member {Number|null} windowId_=null
+         * @reactive
          */
         windowId_: null
     }

package/src/layout/Card.mjs

@@ -52,6 +52,7 @@ class Card extends Base {
         /**
          * @member {String|null} containerCls='neo-layout-card'
          * @protected
+         * @reactive
          */
         containerCls: 'neo-layout-card',
         /*

package/src/layout/Cube.mjs

@@ -36,6 +36,7 @@ class Cube extends Card {
         ntype: 'layout-cube',
         /**
          * @member {String|null} activeFace_=null
+         * @reactive
          */
         activeFace_: null,
         /**
@@ -45,11 +46,13 @@ class Cube extends Card {
         /**
          * @member {String|null} containerCls='neo-layout-fit'
          * @protected
+         * @reactive
          */
         containerCls: 'neo-layout-cube',
         /**
          * Updates the cube size to fit the owner container dimensions
          * @member {Boolean} fitContainer_=false
+         * @reactive
          */
         fitContainer_: false,
         /**
@@ -59,30 +62,37 @@ class Cube extends Card {
         hideInactiveCardsOnDestroy: false,
         /**
          * @member {Number} perspective_=600
+         * @reactive
          */
         perspective_: 600,
         /**
          * @member {Number} rotateX_=0
+         * @reactive
          */
         rotateX_: 0,
         /**
          * @member {Number} rotateY_=0
+         * @reactive
          */
         rotateY_: 0,
         /**
          * @member {Number} rotateZ_=0
+         * @reactive
          */
         rotateZ_: 0,
         /**
          * @member {Number} sideX_=300
+         * @reactive
          */
         sideX_: 300,
         /**
          * @member {Number} sideY_=300
+         * @reactive
          */
         sideY_: 300,
         /**
          * @member {Number} sideZ_=300
+         * @reactive
          */
         sideZ_: 300
     }
@@ -106,7 +116,7 @@ class Cube extends Card {
 
         container.mounted && container.update();
 
-        me.timeout(100).then(() => {
+        me.timeout(50).then(() => {
             container.addCls('neo-animate')
         })
     }

package/src/layout/Fit.mjs

@@ -20,6 +20,7 @@ class Fit extends Base {
         /**
          * @member {String|null} containerCls='neo-layout-fit'
          * @protected
+         * @reactive
          */
         containerCls: 'neo-layout-fit'
     }

package/src/layout/Flexbox.mjs

@@ -49,21 +49,25 @@ class Flexbox extends Base {
         /**
          * Valid values: 'center', 'end', 'start', 'stretch', null
          * @member {String|null} align_=null
+         * @reactive
          */
         align_: null,
         /**
          * Valid values: 'column', 'column-reverse', 'row', 'row-reverse', null
          * @member {String|null} direction_=null
+         * @reactive
          */
         direction_: null,
         /**
          * flex css allows gap. This adds it to the component style
          * @member {String} gap_=null
+         * @reactive
          */
         gap_: null,
         /**
          * Valid values: 'center', 'end', 'start', null
          * @member {String|null} pack_=null
+         * @reactive
          */
         pack_: null,
         /**
@@ -74,6 +78,7 @@ class Flexbox extends Base {
         /**
          * Valid values: nowrap, wrap, wrapreverse
          * @member {String} wrap_='nowrap'
+         * @reactive
          */
         wrap_: 'nowrap'
     }
@@ -141,6 +146,8 @@ class Flexbox extends Base {
      * @param {Number} index
      */
     applyChildAttributes(item, index) {
+        if (!item.wrapperStyle) return;
+
         let style = item.wrapperStyle,
             flex  = style.flex || item.flex || (this.align === 'stretch' ? 1 : '0 1 auto');
 

package/src/layout/Form.mjs

@@ -20,11 +20,13 @@ class Form extends Base {
         /**
          * @member {String|null} containerCls='neo-layout-fit'
          * @protected
+         * @reactive
          */
         containerCls: 'neo-layout-form',
         /**
          * flex css allows gap. This adds it to the component style
          * @member {String} gap_=null
+         * @reactive
          */
         gap_: null
     }