neo.mjs 8.3.0 → 8.4.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-13",
+      "datePublished": "2025-01-14",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/examples_devmode.json

@@ -1,4 +1,11 @@
 [{
+    "id"          : 24,
+    "environments": ["Desktop", "Mobile"],
+    "image"       : "devmode/bigData.png",
+    "name"        : "Buffered Data Grid with 5M cells",
+    "sourceUrl"   : "examples/grid/bigData",
+    "url"         : "examples/grid/bigData/index.html"
+}, {
     "id"           : 23,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
@@ -119,6 +126,7 @@
     "url"      : "examples/form/field/combobox/index.html"
 }, {
     "id"           : 4,
+    "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,

package/apps/portal/resources/data/examples_dist_dev.json

@@ -1,4 +1,11 @@
 [{
+    "id"          : 23,
+    "environments": ["Desktop", "Mobile"],
+    "image"       : "devmode/bigData.png",
+    "name"        : "Buffered Data Grid with 5M cells",
+    "sourceUrl"   : "examples/grid/bigData",
+    "url"         : "dist/development/examples/grid/bigData/index.html"
+}, {
     "id"           : 22,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
@@ -119,6 +126,7 @@
     "url"      : "dist/development/examples/form/field/combobox/index.html"
 }, {
     "id"           : 3,
+    "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,

package/apps/portal/resources/data/examples_dist_prod.json

@@ -1,4 +1,11 @@
 [{
+    "id"          : 23,
+    "environments": ["Desktop", "Mobile"],
+    "image"       : "devmode/bigData.png",
+    "name"        : "Buffered Data Grid with 5M cells",
+    "sourceUrl"   : "examples/grid/bigData",
+    "url"         : "dist/production/examples/grid/bigData/index.html"
+}, {
     "id"           : 22,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
@@ -119,6 +126,7 @@
     "url"      : "dist/production/examples/form/field/combobox/index.html"
 }, {
     "id"           : 3,
+    "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,

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

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/GridContainer.mjs

@@ -0,0 +1,58 @@
+import BaseGridContainer from '../../../src/grid/Container.mjs';
+import MainStore         from './MainStore.mjs';
+
+/**
+ * @class Neo.examples.grid.bigData.GridContainer
+ * @extends Neo.grid.Container
+ */
+class GridContainer extends BaseGridContainer {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.bigData.GridContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.bigData.GridContainer',
+        /**
+         * @member {Number} amountColumns_=50
+         */
+        amountColumns_: 50,
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults
+         */
+        columnDefaults: {
+            cellAlign           : 'right',
+            defaultSortDirection: 'DESC',
+            width               : 100
+        },
+        /**
+         * @member {Object[]} store=MainStore
+         */
+        store: MainStore
+    }
+
+    /**
+     * Triggered after the amountColumns config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAmountColumns(value, oldValue) {
+        let i       = 4,
+            columns = [
+                {dataField: 'id', text: '#', width: 60},
+                {cellAlign: 'left', dataField: 'firstname', defaultSortDirection: 'ASC', text: 'Firstname', width: 150},
+                {cellAlign: 'left', dataField: 'lastname',  defaultSortDirection: 'ASC', text: 'Lastname',  width: 150}
+            ];
+
+        for (; i <= value; i++) {
+            columns.push({dataField: 'number' + i, text: 'Number ' + i})
+        }
+
+        this.store.amountColumns = value;
+
+        this.columns = columns
+    }
+}
+
+export default Neo.setupClass(GridContainer);

package/examples/grid/bigData/MainContainer.mjs

@@ -0,0 +1,104 @@
+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';
+
+/**
+ * @class Neo.examples.grid.bigData.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.bigData.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.bigData.MainContainer',
+        /**
+         * @member {String[]} cls=['neo-examples-bigdata-maincontainer']
+         */
+        cls: ['neo-examples-bigdata-maincontainer'],
+        /**
+         * @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 Row Range',
+                labelWidth: 140,
+                listeners : {change: 'up.ontBufferRowRangeChange'},
+                store     : ['0', '3', '5', '10', '25', '50'],
+                value     : '5',
+                width     : 200
+            }]
+        }, {
+            module    : GridContainer,
+            reference : 'grid',
+            viewConfig: {
+                bufferRowRange: 5
+            }
+        }],
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch'},
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'}
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountColumnsChange(data) {
+        if (data.oldValue) {
+            this.getItem('grid').amountColumns = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onAmountRowsChange(data) {
+        if (data.oldValue) {
+            this.getItem('grid').store.amountRows = parseInt(data.value.id)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    ontBufferRowRangeChange(data) {
+        if (data.oldValue) {
+            this.getItem('grid').view.bufferRowRange = parseInt(data.value.id)
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/grid/bigData/MainModel.mjs

@@ -0,0 +1,42 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.bigData.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.bigData.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.grid.bigData.MainModel',
+        /**
+         * @member {Number} amountColumns_=50
+         */
+        amountColumns_: 50
+    }
+
+    /**
+     * Triggered after the amountColumns config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAmountColumns(value, oldValue) {
+        let i      = 4,
+            fields = [
+                {name: 'id',        type: 'Int'},
+                {name: 'firstname', type: 'String'},
+                {name: 'lastname',  type: 'String'}
+            ];
+
+        for (; i <= value; i++) {
+            fields.push({name: 'number' + i, type: 'Int'})
+        }
+
+        this.fields = fields
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/grid/bigData/MainStore.mjs

@@ -0,0 +1,170 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.bigData.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.bigData.MainStore'
+         * @protected
+         */
+        className: 'Neo.examples.grid.bigData.MainStore',
+        /**
+         * @member {Number} amountColumns_=50
+         */
+        amountColumns_: 50,
+        /**
+         * @member {Number} amountRows_=10000
+         */
+        amountRows_: 10000,
+        /**
+         * @member {Neo.data.Model} model=Model
+         */
+        model: Model
+    }
+
+    firstnames = [
+        'Ashley',
+        'Barbara',
+        'Betty',
+        'Chris',
+        'David',
+        'Elizabeth',
+        'Jack',
+        'James',
+        'Jennifer',
+        'Jessica',
+        'Joe',
+        'John',
+        'Karen',
+        'Kelly',
+        'Kim',
+        'Linda',
+        'Lisa',
+        'Mary',
+        'Max',
+        'Michael',
+        'Nancy',
+        'Patricia',
+        'Rich',
+        'Robert',
+        'Sam',
+        'Sandra',
+        'Sarah',
+        'Susan',
+        'Thomas',
+        'Tobias'
+    ]
+
+    lastnames = [
+        'Anderson',
+        'Brown',
+        'Davis',
+        'Garcia',
+        'Gonzales',
+        'Harris',
+        'Hernandez',
+        'Jackson',
+        'Johnson',
+        'Jones',
+        'Lee',
+        'Lopez',
+        'Martin',
+        'Martinez',
+        'Miller',
+        'Moore',
+        'Perez',
+        'Rahder',
+        'Rodriguez',
+        'Smith',
+        'Taylor',
+        'Thomas',
+        'Thompson',
+        'Uhlig',
+        'Waters',
+        'White',
+        'Williams',
+        'Wilson'
+    ]
+
+    /**
+     * Triggered after the amountColumns config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAmountColumns(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me    = this,
+                data  = me.generateData(me.amountRows, value),
+                start = performance.now();
+
+            me.model.amountColumns = value;
+
+            console.log('Start creating records');
+
+            me.data = data;
+
+            console.log(`Record creation total time: ${Math.round(performance.now() - start)}ms`)
+        }
+    }
+
+    /**
+     * Triggered after the amountRows config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetAmountRows(value, oldValue) {
+        let me    = this,
+            data  = me.generateData(value, me.amountColumns),
+            start = performance.now();
+
+        console.log('Start creating records');
+
+        me.data = data;
+
+        console.log(`Record creation total time: ${Math.round(performance.now() - start)}ms`)
+    }
+
+    /**
+     * @param {Number} amountRows
+     * @param {Number} amountColumns
+     * @returns {Object[]}
+     */
+    generateData(amountRows, amountColumns) {
+        console.log('Start creating data', {amountRows, amountColumns});
+
+        let me               = this,
+            start            = performance.now(),
+            amountFirstnames = me.firstnames.length,
+            amountLastnames  = me.lastnames.length,
+            records          = [],
+            row              = 0,
+            column, record;
+
+        for (; row < amountRows; row++) {
+            column = 4;
+            record = {
+                id       : row + 1,
+                firstname: me.firstnames[Math.floor(Math.random() * amountFirstnames)],
+                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)]
+            };
+
+            for (; column <= amountColumns; column++) {
+                record['number' + column] = Math.round(Math.random() * 10000)
+            }
+
+            records.push(record)
+        }
+
+        console.log(`Data creation total time: ${Math.round(performance.now() - start)}ms`);
+
+        return records
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/grid/bigData/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.grid.bigData'
+});

package/examples/grid/bigData/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo GridContainer - Big Data</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/grid/bigData/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"],
+    "themes"          : ["neo-theme-dark"]
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.3.0",
+    "version": "8.4.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,13 +54,13 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.3.1",
+        "inquirer": "^12.3.2",
         "marked": "^15.0.6",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.49",
-        "sass": "^1.83.1",
+        "postcss": "^8.5.1",
+        "sass": "^1.83.4",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.97.1",

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

@@ -0,0 +1,7 @@
+.neo-examples-bigdata-maincontainer {
+    .neo-toolbar {
+        .neo-combobox {
+            margin: 2px 1em;
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/container/Base.mjs

@@ -395,6 +395,8 @@ class Container extends Component {
             itemsRoot.cn.push(vdom)
         });
 
+        // We need to add items into the vdom
+        me.updateDepth = -1;
         me.update()
     }
 

package/src/form/field/Picker.mjs

@@ -311,7 +311,7 @@ class Picker extends Text {
      * @protected
      */
     onPickerTriggerClick() {
-        this.editable && this.togglePicker()
+        this.togglePicker()
     }
 
     /**

package/src/grid/Container.mjs

@@ -221,8 +221,8 @@ class GridContainer extends BaseContainer {
      * @param {Object[]|null} oldValue
      * @protected
      */
-    afterSetColumns(value, oldValue) {
-        if (Array.isArray(oldValue) && oldValue.length > 0) {
+    async afterSetColumns(value, oldValue) {
+        if (oldValue?.length > 0) {
             let me              = this,
                 {headerToolbar} = me;
 
@@ -231,7 +231,11 @@ class GridContainer extends BaseContainer {
                 headerToolbar.createItems()
             }
 
-            me.view?.createViewData(me.store.items)
+            await me.timeout(50);
+
+            await me.passSizeToView();
+
+            me.view?.createViewData()
         }
     }
 
@@ -593,6 +597,14 @@ class GridContainer extends BaseContainer {
         if (me.rendered) {
             me.createViewData(data);
 
+            me.timeout(50).then(() => {
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : me.view.vdom.id,
+                    value    : 0
+                })
+            })
+
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
             }

package/src/grid/View.mjs

@@ -184,7 +184,7 @@ class GridView extends Component {
      * @protected
      */
     afterSetAvailableRows(value, oldValue) {
-        if (value > 0 && this.store.getCount() > 0) {
+        if (value > 0) {
             this.createViewData()
         }
     }
@@ -228,9 +228,7 @@ class GridView extends Component {
             // for changing an array inline, we need to use the leading underscore
             me._visibleColumns[1] = value.length - 1;
 
-            if (me.store.getCount() > 0) {
-                me.createViewData()
-            }
+            me.createViewData()
         }
     }
 
@@ -498,29 +496,24 @@ class GridView extends Component {
      */
     createViewData() {
         let me   = this,
-            {bufferRowRange, selectedRows, startIndex} = me,
+            {bufferRowRange, startIndex, store} = me,
             rows = [],
             endIndex, i;
 
-        if (me.availableRows < 1 || me.columnPositions.length < 1) {
+        if (store.getCount() < 1 || me.availableRows < 1 || me.columnPositions.length < 1) {
             return
         }
 
-        endIndex   = Math.min(me.store.getCount(), me.availableRows + startIndex + bufferRowRange);
+        endIndex   = Math.min(store.getCount(), me.availableRows + startIndex + bufferRowRange);
         startIndex = Math.max(0, startIndex - bufferRowRange);
 
         for (i=startIndex; i < endIndex; i++) {
-            rows.push(me.createRow({record: me.store.items[i], rowIndex: i}))
+            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
         }
 
         me.getVdomRoot().cn = rows;
 
-        me.promiseUpdate().then(() => {
-            if (selectedRows?.length > 0) {
-                // this logic only works for selection.grid.RowModel
-                Neo.main.DomAccess.scrollToTableRow({appName: me.appName, id: selectedRows[0]})
-            }
-        })
+        me.update()
     }
 
     /**

package/src/grid/header/Toolbar.mjs

@@ -112,10 +112,7 @@ class Toolbar extends BaseToolbar {
 
         super.createItems();
 
-        let dockLeftWidth  = 0,
-            dockRightWidth = 0,
-            {items}        = me,
-            len            = items.length,
+        let {items} = me,
             style;
 
         items.forEach((item, index) => {
@@ -128,34 +125,13 @@ class Toolbar extends BaseToolbar {
             if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
             if (item.width)    {style.width    = item.width    + 'px'}
 
-            if (item.dock) {
-                NeoArray.add(item.vdom.cls, 'neo-locked');
-
-                /*if (item.dock === 'left') {
-                    style.left = dockLeftWidth + 'px'
-                }
-
-                dockLeftWidth += (item.width + 1) // todo: borders fix
-                 */
-            }
-
             item.sortable = me.sortable;
-            item.wrapperStyle = style;
-
-            // inverse loop direction
-            item = items[len - index -1];
-
-            /*if (item.dock === 'right') {
-                style = item.wrapperStyle;
-                style.right = dockRightWidth + 'px';
-
-                item.wrapperStyle = style;
-
-                dockRightWidth += (item.width + 1) // todo: borders fix
-            }*/
+            item.wrapperStyle = style
         });
 
-        me.update()
+        me.promiseUpdate().then(() => {
+            me.mounted && me.passSizeToView()
+        })
     }
 
     /**
@@ -172,8 +148,6 @@ class Toolbar extends BaseToolbar {
         return null
     }
 
-
-
     /**
      * @param {Boolean} silent=false
      * @returns {Promise<void>}

package/src/main/DomAccess.mjs

@@ -11,8 +11,8 @@ const
     lengthRE         = /^\d+\w+$/,
 
     capturePassive = {
-        capture : true,
-        passive : true
+        capture: true,
+        passive: true
     },
 
     fontSizeProps = [

package/src/worker/Manager.mjs

@@ -164,8 +164,8 @@ class Manager extends Base {
             isShared   = me.sharedWorkersEnabled && NeoConfig.useSharedWorkers,
             cls        = isShared ? SharedWorker : Worker,
             worker     = devMode  // todo: switch to the new syntax to create a worker from a JS module once browsers are ready
-                ? new cls(filePath, {name: name, type: 'module'})
-                : new cls(filePath, {name: name});
+                ? new cls(filePath, {name, type: 'module'})
+                : new cls(filePath, {name});
 
         (isShared ? worker.port : worker).onmessage = me.onWorkerMessage.bind(me);
         (isShared ? worker.port : worker).onerror   = me.onWorkerError  .bind(me);