neo.mjs 8.20.0 → 8.20.2

package/apps/ServiceWorker.mjs

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

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

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/ControlsContainer.mjs

@@ -22,11 +22,13 @@ class ControlsContainer extends Container {
          */
         items: [{
             ntype  : 'button',
-            cls    : ['sections-container-button'],
+            cls    : ['controls-container-button'],
             handler: 'up.onControlsToggleButtonClick',
             iconCls: 'fas fa-bars'
         }, {
             module: Container,
+            cls   : ['neo-examples-bigdata-controls-container-content'],
+            layout: 'vbox',
 
             itemDefaults: {
                 module      : ComboBox,
@@ -87,7 +89,7 @@ class ControlsContainer extends Container {
         /**
          * @member {Object} layout={ntype:'vbox'}
          */
-        layout: {ntype: 'vbox'},
+        layout: {ntype: 'fit'},
         /**
          * @member {String} tag='aside'
          */

package/examples/grid/bigData/GridContainer.mjs

@@ -47,7 +47,7 @@ class GridContainer extends BaseGridContainer {
     afterSetAmountColumns(value, oldValue) {
         let i       = 4,
             columns = [
-                {dataField: 'id', text: '#', width: 60},
+                {dataField: 'id', text: '#', width: 60, renderer({record, store}) {return store.indexOf(record) + 1}},
                 {cellAlign: 'left', dataField: 'firstname', defaultSortDirection: 'ASC', text: 'Firstname', width: 150},
                 {cellAlign: 'left', dataField: 'lastname',  defaultSortDirection: 'ASC', text: 'Lastname',  width: 150}
             ];

package/package.json

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

package/resources/scss/src/examples/grid/bigData/ControlsContainer.scss

@@ -1,38 +1,49 @@
 .neo-examples-bigdata-controls-container {
-    border          : none; // reset the default 1px
-    bottom          : .5em;
-    box-shadow      : 0 5px 10px rgba(75,75,75,.3);
-    display         : block;
-    flex-shrink     : 0;
-    min-width       : 235px;
-    overflow        : visible;
-    padding         : .5em 1em;
-    position        : absolute;
-    right           : -235px;
-    top             : .5em;
-    transition      : right 250ms ease-out;
-    width           : 235px;
-    z-index         : 100;
+    border     : none; // reset the default 1px
+    bottom     : .5em;
+    display    : block;
+    flex-shrink: 0;
+    min-width  : 235px;
+    overflow   : visible;
+    position   : absolute;
+    right      : -235px;
+    top        : .5em;
+    transition : right 250ms ease-out;
+    width      : 235px;
+    z-index    : 100;
+
+    .neo-examples-bigdata-controls-container-content {
+        box-shadow: 0 5px 10px rgba(75,75,75,.3);
+        opacity   : 0;
+        padding   : .5em 1em;
+        transition: opacity 250ms ease-out;
+    }
 
     &.neo-expanded {
         right: 0;
+
+        .neo-examples-bigdata-controls-container-content {
+            opacity: 1;
+        }
     }
 
-    .sections-container-button {
-        //background-color: #fff;
-        border-radius   : 8px;
-        box-shadow      : 0 5px 10px rgba(75,75,75,.3);
-        display         : flex;
-        height          : 35px;
-        min-width       : 35px;
-        position        : absolute;
-        left            : -53px;
-        top             : .2em;
-        width           : 35px;
+    .controls-container-button {
+        border-radius: 8px;
+        box-shadow   : 0 5px 10px rgba(75,75,75,.3);
+        display      : flex;
+        height       : 35px;
+        min-width    : 35px;
+        position     : absolute;
+        left         : -53px;
+        top          : .2em;
+        width        : 35px;
 
         .neo-button-glyph {
-            // color    : #000; // required for mobile
             font-size: 13px;
         }
+
+        .neo-button-ripple-wrapper {
+            border-radius: 8px;
+        }
     }
 }

package/src/DefaultConfig.mjs

@@ -18,6 +18,15 @@ const DefaultConfig = {
      * @type Boolean
      */
     applyBodyCls: true,
+    /**
+     * true will apply 'position: fixed' to the html tag itself
+     * See: https://github.com/neomjs/neo/issues/6429
+     * @default true
+     * @memberOf! module:Neo
+     * @name config.applyFixedPositionToHtmlTag
+     * @type Boolean
+     */
+    applyFixedPositionToHtmlTag: true,
     /**
      * Path to your app.mjs file. You can create multiple apps there if needed.
      * @default null
@@ -262,12 +271,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.20.0'
+     * @default '8.20.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.20.0'
+    version: '8.20.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/grid/View.mjs

@@ -372,18 +372,19 @@ class GridView extends Component {
      * @param {String} [data.cellId]
      * @param {Object} data.column
      * @param {Number} data.columnIndex
-     * @param {Neo.grid.Container} data.gridContainer
      * @param {Object} data.record
      * @param {Number} data.rowIndex
      * @returns {Object}
      */
     applyRendererOutput(data) {
-        let {cellId, column, columnIndex, gridContainer, record, rowIndex} = data,
-            me          = this,
-            cellCls     = ['neo-grid-cell'],
-            colspan     = record[me.colspanField],
-            {dataField} = column,
-            fieldValue  = record[dataField],
+        let {cellId, column, columnIndex, record, rowIndex} = data,
+            me            = this,
+            gridContainer = me.parent,
+            {store}       = me,
+            cellCls       = ['neo-grid-cell'],
+            colspan       = record[me.colspanField],
+            {dataField}   = column,
+            fieldValue    = record[dataField],
             cellConfig, rendererOutput;
 
         if (fieldValue === null || fieldValue === undefined) {
@@ -397,6 +398,7 @@ class GridView extends Component {
             gridContainer,
             record,
             rowIndex,
+            store,
             value: fieldValue
         });
 
@@ -541,7 +543,7 @@ class GridView extends Component {
 
         for (i=startIndex; i <= endIndex; i++) {
             column = columns[i];
-            config = me.applyRendererOutput({column, columnIndex: i, gridContainer, record, rowIndex});
+            config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
 
             if (column.dock) {
                 config.cls = ['neo-locked', ...config.cls || []]
@@ -910,7 +912,7 @@ class GridView extends Component {
                         cellStyle   = cellNode.vdom.style;
                         column      = me.getColumn(field.name);
                         columnIndex = cellNode.index;
-                        cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, gridContainer, record, rowIndex});
+                        cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, record, rowIndex});
                         needsUpdate = true;
 
                         // The cell-positioning logic happens outside applyRendererOutput()

package/src/grid/header/Button.mjs

@@ -235,6 +235,7 @@ class Button extends BaseButton {
      * @param {Neo.grid.Container} data.gridContainer
      * @param {Object}             data.record
      * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
      * @param {Number|String}      data.value
      * @returns {*}
      */

package/src/main/DomAccess.mjs

@@ -165,47 +165,6 @@ class DomAccess extends Base {
         me.syncAligns = me.syncAligns.bind(me)
     }
 
-    /**
-     *
-     */
-    initGlobalListeners() {
-        let me = this;
-
-        document.addEventListener('blur',      me.onDocumentBlur     .bind(me), capturePassive);
-        document.addEventListener('keydown',   me.onDocumentKeyDown  .bind(me), capturePassive);
-        document.addEventListener('keyup',     me.onDocumentKeyUp    .bind(me), capturePassive);
-        document.addEventListener('mousedown', me.onDocumentMouseDown.bind(me), {capture : true})
-    }
-
-    onDocumentMouseDown(e) {
-        let focusController = e.target?.closest('[data-focus]');
-
-        // data-focus on an element means reject mousedown gestures, and move focus
-        // to the referenced element.
-        if (focusController) {
-            e.preventDefault();
-            document.getElementById(focusController.dataset.focus)?.focus()
-        }
-    }
-
-    onDocumentKeyDown(keyEvent) {
-        if (modifierKeys[keyEvent.key]) {
-            // e.g. Neo.isShiftKeyDown = true or Neo.isControlKeyDown = true.
-            // Selection can consult this value
-            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = true;
-        }
-    }
-
-    onDocumentKeyUp(keyEvent) {
-        if (modifierKeys[keyEvent.key]) {
-            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = false;
-        }
-    }
-
-    onDocumentBlur() {
-        Neo.altKeyDown = Neo.controlKeyDown = Neo.metaKeyDown = Neo.shiftKeyDown = false;
-    }
-
     /**
      * @param {Object} alignSpec
      */
@@ -564,6 +523,18 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     *
+     */
+    initGlobalListeners() {
+        let me = this;
+
+        document.addEventListener('blur',      me.onDocumentBlur     .bind(me), capturePassive);
+        document.addEventListener('keydown',   me.onDocumentKeyDown  .bind(me), capturePassive);
+        document.addEventListener('keyup',     me.onDocumentKeyUp    .bind(me), capturePassive);
+        document.addEventListener('mousedown', me.onDocumentMouseDown.bind(me), {capture : true})
+    }
+
     /**
      * @param {HTMLElement} el
      * @returns {Boolean}
@@ -715,6 +686,33 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     *
+     */
+    onDocumentBlur() {
+        Neo.altKeyDown = Neo.controlKeyDown = Neo.metaKeyDown = Neo.shiftKeyDown = false
+    }
+
+    /**
+     * @param {KeyboardEvent} keyEvent
+     */
+    onDocumentKeyDown(keyEvent) {
+        if (modifierKeys[keyEvent.key]) {
+            // e.g. Neo.isShiftKeyDown = true or Neo.isControlKeyDown = true.
+            // Selection can consult this value
+            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = true
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} keyEvent
+     */
+    onDocumentKeyUp(keyEvent) {
+        if (modifierKeys[keyEvent.key]) {
+            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = false
+        }
+    }
+
     /**
      * @param {Array} mutations
      */
@@ -733,11 +731,26 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
+    onDocumentMouseDown(e) {
+        let focusController = e.target?.closest('[data-focus]');
+
+        // data-focus on an element means reject mousedown gestures, and move focus
+        // to the referenced element.
+        if (focusController) {
+            e.preventDefault();
+            document.getElementById(focusController.dataset.focus)?.focus()
+        }
+    }
+
     /**
      *
      */
     onDomContentLoaded() {
-        Neo.config.applyBodyCls && this.applyBodyCls({cls: ['neo-body']})
+        Neo.config.applyBodyCls && this.applyBodyCls({cls: ['neo-body']});
+        Neo.config.applyFixedPositionToHtmlTag && document.documentElement.style.setProperty('position', 'fixed')
     }
 
     /**