neo.mjs 8.0.0-beta.2 → 8.0.1

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/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-beta.2",
+    "version": "8.0.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,27 +45,27 @@
     },
     "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",
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.1.0",
-        "marked": "^15.0.3",
+        "inquirer": "^12.3.0",
+        "marked": "^15.0.4",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.49",
-        "sass": "^1.81.0",
+        "sass": "^1.83.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.96.1",
+        "webpack": "^5.97.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.1.0",
+        "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/grid/Container.scss

@@ -43,19 +43,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);

package/resources/scss/src/grid/plugin/CellEditing.scss

@@ -0,0 +1,11 @@
+.neo-grid-view {
+    .neo-grid-cell {
+        &:has(.neo-grid-editor) {
+            padding: 1px 4px 2px;
+        }
+    }
+
+    .neo-grid-editor {
+        margin: 0;
+    }
+}

package/resources/scss/src/table/plugin/CellEditing.scss

@@ -0,0 +1,11 @@
+.neo-table-view {
+    .neo-table-cell {
+        &:has(.neo-table-editor) {
+            padding: 1px 4px 2px;
+        }
+    }
+
+    .neo-table-editor {
+        margin: 0;
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -5,12 +5,12 @@ const
     configSymbol = Symbol.for('configSymbol'),
     getSetCache  = Symbol('getSetCache'),
     typeDetector = {
-        function: (item) => {
+        function: item => {
             if (item.prototype?.constructor.isClass) {
                 return 'NeoClass'
             }
         },
-        object: (item) => {
+        object: item => {
             if (item.constructor.isClass && item instanceof Neo.core.Base) {
                 return 'NeoInstance'
             }

package/src/code/LivePreview.mjs

@@ -244,9 +244,9 @@ class LivePreview extends Container {
                     index = path.lastIndexOf('../');
 
                     if (index === 0) {
-                        path = '../../../../src/' + path.slice(index+3);
+                        path = '../../../../src/' + path.slice(index + 3);
                     } else {
-                        path = path.slice(0, index) + '../../../' + path.slice(index+3);
+                        path = path.slice(0, index) + '../../../' + path.slice(index + 3);
                     }
                 }
 

package/src/component/DateSelector.mjs

@@ -392,6 +392,21 @@ class DateSelector extends Component {
         return ClassSystemUtil.beforeSetInstance(value, DateSelectorModel)
     }
 
+    /**
+     * Triggered before the value config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetValue(value, oldValue) {
+        // If the value is set as a Date, try to convert it into a string
+        if (Neo.typeOf(value) === 'Date') {
+            return DateUtil.convertToyyyymmdd(value)
+        }
+
+        return value
+    }
+
     /**
      * Triggered before the weekStartDay config gets changed
      * @param {String} value

package/src/core/Base.mjs

@@ -605,7 +605,7 @@ class Base {
     timeout(time) {
         return new Promise(resolve => {
             let timeoutIds = this.#timeoutIds,
-                timeoutId  = setTimeout(() => {timeoutIds.splice(timeoutIds.indexOf(timeoutId, 1)); resolve()}, time);
+                timeoutId  = setTimeout(() => {timeoutIds.splice(timeoutIds.indexOf(timeoutId), 1); resolve()}, time);
 
             timeoutIds.push(timeoutId)
         })