neo.mjs 8.18.0 → 8.19.0

package/apps/ServiceWorker.mjs

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

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.0'
+                html  : 'v8.19.0'
             }]
         }],
         /**

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.0'
+         * @member {String} version='8.19.0'
          */
-        version: '8.18.0'
+        version: '8.19.0'
     }
 
     /**

package/examples/grid/bigData/ControlsContainer.mjs

@@ -0,0 +1,176 @@
+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: [{
+                ntype: 'component',
+                html : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
+                style: {marginLeft: 'auto'}
+            }, {
+                labelText : 'Amount Rows',
+                labelWidth: 120,
+                listeners : {change: 'up.onAmountRowsChange'},
+                store     : ['1000', '5000', '10000', '20000', '50000'],
+                style     : {marginTop: '2em'},
+                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')
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        Neo.main.DomAccess.addScript({
+            async   : true,
+            defer   : true,
+            src     : 'https://buttons.github.io/buttons.js',
+            windowId: this.windowId
+        })
+    }
+
+    /**
+     * @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.0",
+    "version": "8.19.0",
     "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/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.18.0'
+     * @default '8.19.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.18.0'
+    version: '8.19.0'
 };
 
 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

@@ -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(30);
 
-            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()
+            })
         }
     }