neo.mjs 8.18.1 → 8.19.1

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-08",
+      "datePublished": "2025-02-09",
       "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.18.1'
+                html  : 'v8.19.1'
             }]
         }],
         /**

package/examples/ConfigurationViewport.mjs

@@ -190,7 +190,7 @@ class ConfigurationViewport extends Viewport {
         let me          = this,
             button      = data.component,
             countThemes = themes.length,
-            futureIndex, newTheme, oldIndex, oldTheme, themeIndex;
+            futureIndex, newTheme, themeIndex;
 
         themes.forEach((theme, index) => {
             if (button.text === theme.label) {
@@ -200,8 +200,6 @@ class ConfigurationViewport extends Viewport {
         });
 
         futureIndex = (themeIndex + countThemes +1) % countThemes;
-        oldIndex    = (themeIndex + countThemes -1) % countThemes;
-        oldTheme    = themes[oldIndex].name;
 
         button.text = themes[futureIndex].label;
 

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/ControlsContainer.mjs

@@ -0,0 +1,157 @@
+import ComboBox  from '../../../src/form/field/ComboBox.mjs';
+import Container from '../../../src/container/Base.mjs';
+import Radio     from '../../../src/form/field/Radio.mjs';
+
+/**
+ * @class Neo.examples.grid.bigData.ControlsContainer
+ * @extends Neo.container.Base
+ */
+class ControlsContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.bigData.ControlsContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.bigData.ControlsContainer',
+        /**
+         * @member {String[]} cls=['neo-examples-bigdata-controls-container']
+         */
+        cls: ['neo-examples-bigdata-controls-container'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype  : 'button',
+            cls    : ['sections-container-button'],
+            handler: 'up.onControlsToggleButtonClick',
+            iconCls: 'fas fa-bars'
+        }, {
+            module: Container,
+
+            itemDefaults: {
+                module      : ComboBox,
+                clearable   : false,
+                displayField: 'id',
+                editable    : false
+            },
+
+            items: [{
+                labelText : 'Amount Rows',
+                labelWidth: 120,
+                listeners : {change: 'up.onAmountRowsChange'},
+                store     : ['1000', '5000', '10000', '20000', '50000'],
+                value     : '1000',
+                width     : 200
+            }, {
+                labelText : 'Amount Columns',
+                labelWidth: 145,
+                listeners : {change: 'up.onAmountColumnsChange'},
+                store     : ['10', '25', '50', '75', '100'],
+                value     : '50',
+                width     : 200
+            }, {
+                labelText : 'Buffer Rows',
+                labelWidth: 145,
+                listeners : {change: 'up.onBufferRowRangeChange'},
+                store     : ['0', '3', '5', '10', '25', '50'],
+                value     : '5',
+                width     : 200
+            }, {
+                labelText : 'Buffer Columns',
+                labelWidth: 145,
+                listeners : {change: 'up.onBufferColumnRangeChange'},
+                store     : ['0', '3', '5', '10', '20'],
+                value     : '3',
+                width     : 200
+            }, {
+                module        : Radio,
+                checked       : true,
+                labelText     : 'Theme',
+                labelWidth    : 70,
+                listeners     : {change: 'up.onThemeRadioChange'},
+                name          : 'theme',
+                style         : {marginTop: '2em'},
+                value         : 'neo-theme-dark',
+                valueLabelText: 'Dark'
+            }, {
+                module        : Radio,
+                labelText     : '',
+                labelWidth    : 70,
+                listeners     : {change: 'up.onThemeRadioChange'},
+                name          : 'theme',
+                style         : {marginTop: '.3em'},
+                value         : 'neo-theme-light',
+                valueLabelText: 'Light'
+            }]
+        }],
+        /**
+         * @member {Object} layout={ntype:'vbox'}
+         */
+        layout: {ntype: 'vbox'},
+        /**
+         * @member {String} tag='aside'
+         */
+        tag: 'aside'
+    }
+
+    get grid() {
+        return this.parent.getItem('grid')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountColumnsChange(data) {
+        if (data.oldValue) {
+            this.grid.isLoading = 'Is Loading';
+            this.grid.amountColumns = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountRowsChange(data) {
+        if (data.oldValue) {
+            this.grid.isLoading = 'Is Loading';
+            this.grid.store.amountRows = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onBufferColumnRangeChange(data) {
+        if (data.oldValue) {
+            this.grid.view.bufferColumnRange = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onBufferRowRangeChange(data) {
+        if (data.oldValue) {
+            this.grid.view.bufferRowRange = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onControlsToggleButtonClick(data) {
+        let me     = this,
+            button = data.component;
+
+        // Custom flag to track the state
+        button.expanded = !button.expanded;
+
+        me.toggleCls('neo-expanded');
+
+        await me.timeout(button.expanded ? 250 : 0);
+
+        me.grid.toggleCls('neo-extend-margin-right');
+    }
+}
+
+export default Neo.setupClass(ControlsContainer);

package/examples/grid/bigData/GridContainer.mjs

@@ -28,7 +28,14 @@ class GridContainer extends BaseGridContainer {
         /**
          * @member {Object[]} store=MainStore
          */
-        store: MainStore
+        store: MainStore,
+        /**
+         * @member {Object} viewConfig
+         */
+        viewConfig: {
+            bufferColumnRange: 3,
+            bufferRowRange   : 5
+        }
     }
 
     /**

package/examples/grid/bigData/MainContainer.mjs

@@ -1,7 +1,6 @@
-import ComboBox      from '../../../src/form/field/ComboBox.mjs';
-import GridContainer from './GridContainer.mjs';
-import Toolbar       from '../../../src/toolbar/Base.mjs';
-import Viewport      from '../../../src/container/Viewport.mjs';
+import ControlsContainer from './ControlsContainer.mjs';
+import GridContainer     from './GridContainer.mjs';
+import Viewport          from '../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.grid.bigData.MainContainer
@@ -22,104 +21,22 @@ class MainContainer extends Viewport {
          * @member {Object[]} items
          */
         items: [{
-            module: Toolbar,
-            flex  : 'none',
-            layout: {ntype: 'hbox', align: 'stretch', wrap: 'wrap'},
-            style : {marginBottom: '1em', padding: 0},
-
-            itemDefaults: {
-                module      : ComboBox,
-                clearable   : false,
-                displayField: 'id',
-                editable    : false
-            },
-
-            items: [{
-                labelText : 'Amount Rows',
-                labelWidth: 110,
-                listeners : {change: 'up.onAmountRowsChange'},
-                store     : ['1000', '5000', '10000', '20000', '50000'],
-                value     : '10000',
-                width     : 200
-            }, {
-                labelText : 'Amount Columns',
-                labelWidth: 135,
-                listeners : {change: 'up.onAmountColumnsChange'},
-                store     : ['10', '25', '50', '75', '100'],
-                value     : '50',
-                width     : 200
-            }, {
-                labelText : 'Buffer Rows',
-                labelWidth: 95,
-                listeners : {change: 'up.ontBufferRowRangeChange'},
-                store     : ['0', '3', '5', '10', '25', '50'],
-                value     : '5',
-                width     : 160
-            }, {
-                labelText : 'Buffer Columns',
-                labelWidth: 120,
-                listeners : {change: 'up.ontBufferColumnRangeChange'},
-                store     : ['0', '3', '5', '10', '20'],
-                value     : '0',
-                width     : 185
-            }]
+            module   : GridContainer,
+            reference: 'grid'
         }, {
-            module    : GridContainer,
-            reference : 'grid',
-            viewConfig: {
-                bufferRowRange: 5
-            }
+            module: ControlsContainer
         }],
         /**
-         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
          */
-        layout: {ntype: 'vbox', align: 'stretch'},
-        /**
-         * @member {Object} style={padding:'20px'}
-         */
-        style: {padding: '20px'}
-    }
-
-    get grid() {
-        return this.getItem('grid')
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onAmountColumnsChange(data) {
-        if (data.oldValue) {
-            this.grid.isLoading = 'Is Loading';
-            this.grid.amountColumns = parseInt(data.value.id)
-        }
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onAmountRowsChange(data) {
-        if (data.oldValue) {
-            this.grid.isLoading = 'Is Loading';
-            this.grid.store.amountRows = parseInt(data.value.id)
-        }
-    }
-
-    /**
-     * @param {Object} data
-     */
-    ontBufferColumnRangeChange(data) {
-        if (data.oldValue) {
-            this.grid.view.bufferColumnRange = parseInt(data.value.id)
-        }
+        layout: {ntype: 'hbox', align: 'stretch'}
     }
 
     /**
-     * @param {Object} data
+     * @param {Object} opts
      */
-    ontBufferRowRangeChange(data) {
-        if (data.oldValue) {
-            this.grid.view.bufferRowRange = parseInt(data.value.id)
-        }
+    onThemeRadioChange({value}) {
+        this.theme = value
     }
 }
 

package/examples/grid/bigData/MainStore.mjs

@@ -17,9 +17,9 @@ class MainStore extends Store {
          */
         amountColumns_: 50,
         /**
-         * @member {Number} amountRows_=10000
+         * @member {Number} amountRows_=1000
          */
-        amountRows_: 10000,
+        amountRows_: 1000,
         /**
          * @member {Neo.data.Model} model=Model
          */

package/examples/grid/bigData/neo-config.json

@@ -4,5 +4,5 @@
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
     "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"],
-    "themes"          : ["neo-theme-dark"]
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
 }

package/package.json

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

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

@@ -0,0 +1,38 @@
+.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;
+
+    &.neo-expanded {
+        right: 0;
+    }
+
+    .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;
+
+        .neo-button-glyph {
+            // color    : #000; // required for mobile
+            font-size: 13px;
+        }
+    }
+}

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

@@ -1,7 +1,9 @@
 .neo-examples-bigdata-maincontainer {
-    .neo-toolbar {
-        .neo-combobox {
-            margin: 2px 1em;
+    .neo-grid-wrapper {
+        margin: 3.5em 1em 1em 1em;
+
+        &:has(.neo-extend-margin-right) {
+            margin-right: calc(235px + 1em);
         }
     }
 }

package/resources/scss/src/grid/View.scss

@@ -9,15 +9,6 @@
     &:focus {
         outline: none;
     }
-
-    .neo-grid-stretcher {
-        height        : 1px;
-        position      : absolute;
-        top           : 0;
-        visibility    : hidden;
-        width         : 1px;
-        z-index       : 1001; // Above the column dragProxy element
-    }
 }
 
 .neo-grid-view {

package/src/DefaultConfig.mjs

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

package/src/draggable/toolbar/DragZone.mjs

@@ -120,7 +120,7 @@ class DragZone extends BaseDragZone {
      * @param {String}               data.id
      * @param {Neo.component.Base[]} data.items
      */
-    onItemsCreated(data) {console.log('onItemsCreated');
+    onItemsCreated(data) {
         this.adjustToolbarItemCls(true)
     }
 }

package/src/form/field/ComboBox.mjs

@@ -452,7 +452,7 @@ class ComboBox extends Picker {
             FormContainer = Neo.form?.Container,
             params        = {component: me, oldValue, value};
 
-        await me.timeout(10);
+        await me.timeout(30);
 
         me.fire('change', params);
 

package/src/grid/Scrollbar.mjs

@@ -53,6 +53,7 @@ class GridScrollbar extends Component {
             ScrollSync.register({
                 fromId: me.parent.view.vdom.id,
                 toId  : me.id,
+                twoWay: !Neo.config.useTouchEvents, // Syncing the scroller back to the view affects mobile scrolling
                 ...params
             })
         } else {

package/src/grid/View.mjs

@@ -125,8 +125,7 @@ class GridView extends Component {
          */
         _vdom:
         {tabIndex: '-1', cn: [
-            {cn: []},
-            {cls: 'neo-grid-stretcher'}
+            {cn: []}
         ]}
     }
 
@@ -207,7 +206,7 @@ class GridView extends Component {
             let me = this;
 
             me.vdom.width = value + 'px';
-            me.vdom.cn[1].width = value + 'px';
+            me.vdom.cn[0].width = value + 'px';
             me.update()
         }
     }
@@ -905,7 +904,7 @@ class GridView extends Component {
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {
-            me.vdom.cn[1].height = `${(countRecords + 1) * rowHeight}px`;
+            me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
             me.update()
         }
     }