neo.mjs 8.0.0 → 8.1.0

package/examples/grid/covid/GridContainer.mjs

@@ -32,18 +32,18 @@ class GridContainer extends BaseGridContainer {
          * @member {Object[]} columns
          */
         columns: [{
-            cls     : ['neo-index-column'],
-            dock    : 'left',
-            field   : 'index',
-            minWidth: 40,
-            text    : '#',
-            renderer: Util.indexRenderer,
-            width   : 40
+            cls      : ['neo-index-column'],
+            dataField: 'index',
+            dock     : 'left',
+            minWidth : 40,
+            text     : '#',
+            renderer : Util.indexRenderer,
+            width    : 40
         }, {
             cellAlign           : 'left',
+            dataField           : 'country',
             defaultSortDirection: 'ASC',
             dock                : 'left',
-            field               : 'country',
             text                : 'Country',
             width               : 200,
 
@@ -58,44 +58,44 @@ class GridContainer extends BaseGridContainer {
                 };
             }
         }, {
-            field: 'cases',
-            text : 'Cases'
+            dataField: 'cases',
+            text     : 'Cases'
         }, {
-            field: 'casesPerOneMillion',
-            text : 'Cases / 1M'
+            dataField: 'casesPerOneMillion',
+            text     : 'Cases / 1M'
         }, {
-            field   : 'infected',
-            text    : 'Infected',
-            renderer: data => Util.formatInfected(data)
+            dataField: 'infected',
+            text     : 'Infected',
+            renderer : data => Util.formatInfected(data)
         }, {
-            field   : 'active',
-            text    : 'Active',
-            renderer: data => Util.formatNumber(data, '#64B5F6')
+            dataField: 'active',
+            text     : 'Active',
+            renderer : data => Util.formatNumber(data, '#64B5F6')
         }, {
-            field   : 'recovered',
-            text    : 'Recovered',
-            renderer: data => Util.formatNumber(data, '#28ca68')
+            dataField: 'recovered',
+            text     : 'Recovered',
+            renderer : data => Util.formatNumber(data, '#28ca68')
         }, {
-            field   : 'critical',
-            text    : 'Critical',
-            renderer: data => Util.formatNumber(data, 'orange')
+            dataField: 'critical',
+            text     : 'Critical',
+            renderer : data => Util.formatNumber(data, 'orange')
         }, {
-            field   : 'deaths',
-            text    : 'Deaths',
-            renderer: data => Util.formatNumber(data, '#fb6767')
+            dataField: 'deaths',
+            text     : 'Deaths',
+            renderer : data => Util.formatNumber(data, '#fb6767')
         }, {
-            field: 'todayCases',
-            text : 'Cases today'
+            dataField: 'todayCases',
+            text     : 'Cases today'
         }, {
-            field   : 'todayDeaths',
-            text    : 'Deaths today',
-            renderer: data => Util.formatNumber(data, '#fb6767')
+            dataField: 'todayDeaths',
+            text     : 'Deaths today',
+            renderer : data => Util.formatNumber(data, '#fb6767')
         }, {
-            field: 'tests',
-            text : 'Tests'
+            dataField: 'tests',
+            text     : 'Tests'
         }, {
-            field: 'testsPerOneMillion',
-            text : 'Tests / 1M'
+            dataField: 'testsPerOneMillion',
+            text     : 'Tests / 1M'
         }],
         /**
          * @member {Neo.controller.Component} controller=GridContainerController

package/examples/grid/covid/Util.mjs

@@ -133,7 +133,7 @@ class Util extends Base {
         imageName = map[imageName] || imageName;
 
         if (Neo.config.isGitHubPages) {
-            let path = `../../../../resources/images/flaticon/country_flags/png/${imageName}.png`;
+            let path = `../../../../resources_pub/images/flaticon/country_flags/png/${imageName}.png`;
 
             if (Neo.config.environment !== 'development') {
                 path = `../../${path}`

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

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

package/examples/table/cellEditing/MainContainer.mjs

@@ -0,0 +1,174 @@
+import CellColumnModel            from '../../../src/selection/table/CellColumnModel.mjs';
+import CellColumnRowModel         from '../../../src/selection/table/CellColumnRowModel.mjs';
+import CellModel                  from '../../../src/selection/table/CellModel.mjs';
+import CellRowModel               from '../../../src/selection/table/CellRowModel.mjs';
+import CheckBox                   from '../../../src/form/field/CheckBox.mjs';
+import CountryField               from '../../../src/form/field/Country.mjs';
+import ConfigurationViewport      from '../../ConfigurationViewport.mjs';
+import DateField                  from '../../../src/form/field/Date.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import MainStore                  from './MainStore.mjs';
+import NumberField                from '../../../src/form/field/Number.mjs';
+import Radio                      from '../../../src/form/field/Radio.mjs';
+import TableContainer             from '../../../src/table/Container.mjs';
+
+/**
+ * @class Neo.examples.table.cellEditing.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.table.cellEditing.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 130,
+        configPanelFlex     : 1.5,
+        exampleComponentFlex: 3,
+        layout              : {ntype: 'hbox', align: 'stretch'},
+        stateProvider       : MainContainerStateProvider
+    }
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getStateProvider().getStore('countries');
+
+        if (countryStore.getCount() > 0) {
+            return countryStore.get(record.country).name
+        }
+
+        return ''
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    createConfigurationComponents() {
+        let me = this;
+
+        const selectionModelRadioDefaults = {
+            module        : Radio,
+            hideValueLabel: false,
+            labelText     : '',
+            name          : 'selectionModel',
+            width         : 350
+        };
+
+        return [{
+            module   : NumberField,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 800,
+            minValue : 225,
+            stepSize : 5,
+            value    : me.exampleComponent.height
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel',
+            labelText     : 'selectionModel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'Cell'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            valueLabelText: 'Cell & Column'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            valueLabelText: 'Cell & Row'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            valueLabelText: 'Cell & Column & Row'
+        }, {
+            module        : CheckBox,
+            checked       : me.exampleComponent.sortable,
+            hideLabel     : true,
+            listeners     : {change: me.onConfigChange.bind(me, 'sortable')},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'sortable'
+        }, {
+            module        : CheckBox,
+            checked       : false, // we can not access the lazy-loaded plugin yet
+            hideLabel     : true,
+            listeners     : {change: me.onPluginConfigChange.bind(me, 'disabled')},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'Disable CellEditing'
+        }]
+    }
+
+    /**
+     * @returns {Object}
+     */
+    createExampleComponent() {
+        return {
+            module        : TableContainer,
+            bind          : {store : 'stores.mainStore'},
+            cellEditing   : true,
+            parentId      : this.id,
+            selectionModel: CellModel,
+            store         : MainStore,
+
+            columnDefaults: {
+                editable: true
+            },
+
+            columns: [{
+                dataField: 'firstname',
+                text     : 'Firstname'
+            }, {
+                dataField: 'randomNumber',
+                text     : 'Number (step 5)',
+
+                editor: {
+                    module   : NumberField,
+                    clearable: false,
+                    maxValue : 100,
+                    minValue : 0,
+                    stepSize : 5
+                }
+            }, {
+                dataField: 'randomDate',
+                renderer : ({value}) => new Intl.DateTimeFormat('default').format(value),
+                text     : 'Random Date',
+
+                editor: {
+                    module   : DateField,
+                    clearable: false,
+                    maxValue : '2024-12-20',
+                    minValue : '2024-12-10'
+                }
+            }, {
+                dataField: 'country',
+                renderer : 'up.countryRenderer',
+                text     : 'Country',
+
+                editor: {
+                    module        : CountryField,
+                    bind          : {store: 'stores.countries'},
+                    clearable     : false,
+                    forceSelection: true,
+                    valueField    : 'code'
+                }
+            }, {
+                dataField: 'githubId',
+                editable : false,
+                text     : 'Github Id (Non-editable)'
+            }]
+        }
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onPluginConfigChange(config, opts) {
+        this.exampleComponent.getPlugin('table-cell-editing')[config] = opts.value
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/table/cellEditing/MainContainerStateProvider.mjs

@@ -0,0 +1,62 @@
+import MainStore     from './MainStore.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
+import Store         from '../../../src/data/Store.mjs';
+
+const countrySymbol = Symbol.for('country');
+
+/**
+ * @class Neo.examples.table.cellEditing.MainContainerStateProvider
+ * @extends Neo.state.Provider
+ */
+class MainContainerStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.cellEditing.MainContainerStateProvider'
+         * @protected
+         */
+        className: 'Neo.examples.table.cellEditing.MainContainerStateProvider',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            countries: {
+                module     : Store,
+                autoLoad   : true,
+                keyProperty: 'code',
+                listeners  : {load: 'onCountryStoreLoad'},
+                url        : '../../../resources/examples/data/countries.json',
+
+                model: {
+                    fields: [
+                        {name: 'code'},
+                        {name: 'name'}
+                    ]
+                }
+            },
+            mainStore: MainStore
+        }
+    }
+
+    /**
+     * @param {Record[]} items
+     */
+    onCountryStoreLoad(items) {
+        let me        = this,
+            mainStore = me.getStore('mainStore'),
+            country;
+
+        // if the main table store is already loaded, the country field renderer had no data
+        if (mainStore.getCount() > 0) {
+            mainStore.items.forEach(record => {
+                country = record.country;
+
+                // hack resetting the current value to get a new record change
+                record[countrySymbol] = null;
+
+                record.country = country
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainerStateProvider);

package/examples/table/cellEditing/MainModel.mjs

@@ -0,0 +1,30 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.table.cellEditing.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        className: 'Neo.examples.table.cellEditing.MainModel',
+
+        fields: [{
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'randomNumber',
+            type: 'Int'
+        }, {
+            name: 'randomDate',
+            type: 'Date'
+        }]
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/table/cellEditing/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.table.cellEditing.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.table.cellEditing.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country     : 'DE',
+            firstname   : 'Tobias',
+            githubId    : 'tobiu',
+            randomDate  : '2024-12-20',
+            randomNumber: 100
+        }, {
+            country     : 'US',
+            firstname   : 'Rich',
+            githubId    : 'rwaters',
+            randomDate  : '2024-12-18',
+            randomNumber: 90
+        }, {
+            country     : 'DE',
+            firstname   : 'Nils',
+            githubId    : 'mrsunshine',
+            randomDate  : '2024-12-19',
+            randomNumber: 70
+        }, {
+            country     : 'US',
+            firstname   : 'Gerard',
+            githubId    : 'camtnbikerrwc',
+            randomDate  : '2024-12-17',
+            randomNumber: 80
+        }, {
+            country     : 'SK',
+            firstname   : 'Jozef',
+            githubId    : 'jsakalos',
+            randomDate  : '2024-12-16',
+            randomNumber: 60
+        }, {
+            country     : 'DE',
+            firstname   : 'Bastian',
+            githubId    : 'bhaustein',
+            randomDate  : '2024-12-15',
+            randomNumber: 50
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/table/cellEditing/app.mjs

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

package/examples/table/cellEditing/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 Table CellEditing</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/table/cellEditing/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/table/cellEditing/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/table/nestedRecordFields/MainContainerStateProvider.mjs

@@ -30,7 +30,8 @@ class MainContainerStateProvider extends StateProvider {
                     fields: [
                         {name: 'code'},
                         {name: 'name'}
-                    ]}
+                    ]
+                }
             },
             mainStore: MainStore
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.0.0",
+    "version": "8.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,26 +45,26 @@
     },
     "homepage": "https://neomjs.com/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.7.1",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "autoprefixer": "^10.4.20",
-        "chalk": "^5.3.0",
+        "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^12.1.0",
+        "commander": "^13.0.0",
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.2.0",
-        "marked": "^15.0.3",
+        "inquirer": "^12.3.0",
+        "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.0",
+        "sass": "^1.83.1",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.97.1",
-        "webpack-cli": "^5.1.4",
+        "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"

package/resources/scss/src/apps/portal/home/FooterContainer.scss

@@ -31,17 +31,26 @@
         padding    : var(--button-padding);
     }
 
-    .neo-version,
-    .portal-home-footer-spacer {
+    .neo-version {
         height: var(--button-height);
         margin: var(--button-margin);
     }
 
+    .portal-home-footer-spacer {
+        height: calc(2 * var(--button-height));
+        margin: calc(2 * var(--button-margin));
+    }
+
     .portal-home-footer-section {
         background-color: transparent;
         color           : white;
     }
 
+    .portal-home-footer-spacer {
+        height: calc(2 * var(--button-height));
+        margin: calc(2 * var(--button-margin));
+    }
+
     @media (max-width: 800px) {
         max-height: 18em;
         min-height: 18em;

package/resources/scss/src/examples/grid/covid/GridContainer.scss

@@ -4,13 +4,13 @@
 
 .neo-grid-container.covid-country-grid {
     .neo-country-column {
+        max-width: 200px;
         min-width: 200px;
         width    : initial;
     }
 
     .neo-grid-cell {
         min-width: 100px;
-        width    : 300px;
     }
 
     .neo-index-column {

package/resources/scss/src/grid/Container.scss

@@ -1,3 +1,9 @@
+.neo-grid-wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    position  : relative;
+}
+
 .neo-grid-container {
     border        : 1px solid var(--grid-container-border-color);
     border-spacing: 0;
@@ -6,13 +12,13 @@
     font-weight   : 400;
     height        : 100%;
     line-height   : 19px;
-    overflow      : auto;
+    overflow-y    : hidden;
+    position      : absolute;
+    width         : 100%;
 
     .neo-grid-row {
-        display   : flex;
-        height    : 32px !important;
-        max-height: 32px !important;
-        width     : 100%;
+        display: flex;
+        width  : 100%;
     }
 
     .neo-grid-header-toolbar .neo-grid-row:nth-child(1) .neo-grid-header-cell {
@@ -31,7 +37,7 @@
         }
     }
 
-    .neo-grid-row:nth-child(even) {
+    .neo-grid-row.neo-even {
         .neo-grid-cell {
             background-color: var(--grid-container-cell-background-color-even);
         }
@@ -43,19 +49,6 @@
         z-index : 5;
     }
 
-    .neo-grid-header-cell:nth-child(1) {
-        position: sticky;
-        left    : 0;
-        top     : 0;
-        z-index : 200 !important;
-    }
-
-    .neo-grid-cell:nth-child(1) {
-        position: sticky;
-        left     : 0;
-        z-index  : 20;
-    }
-
     .neo-grid-cell, .neo-grid-header-cell {
         border-bottom: 1px solid var(--grid-container-border-color);
         border-right : 1px solid var(--grid-container-border-color);
@@ -67,8 +60,7 @@
         }
 
         &.neo-locked {
-            position: sticky;
-            left    : 0;
+            left: 0;
         }
     }
 
@@ -76,8 +68,6 @@
         align-items     : center;
         background-color: var(--grid-container-cell-background-color);
         display         : flex;
-        height          : 32px !important;
-        max-height      : 32px !important;
         padding         : 2px 10px 2px;
         width           : fit-content;
     }