neo.mjs 8.0.0-beta.2 → 8.0.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-beta.2'
+         * @member {String} version='8.0.1'
          */
-        version: '8.0.0-beta.2'
+        version: '8.0.1'
     }
 
     /**

package/apps/covid/view/MainContainerController.mjs

@@ -123,10 +123,13 @@ class MainContainerController extends ComponentController {
 
         me.summaryData = data;
 
-        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});     container.items[0].update();
-        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});    container.items[1].update();
-        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered}); container.items[2].update();
-        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});    container.items[3].update();
+        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});
+        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});
+        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered});
+        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});
+
+        container.updateDepth = 2;
+        container.update();
 
         container = me.getReference('last-update');
         vdom      = container.vdom;

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-11-29",
+      "datePublished": "2024-12-29",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/about/Container.mjs

@@ -29,7 +29,6 @@ class Container extends Base {
             picture        : 'tobiu.png',
             profileGitHub  : 'https://github.com/tobiu',
             profileLinkedIn: 'https://www.linkedin.com/in/tobiasuhlig/',
-            profileX       : 'https://x.com/UhligTobias',
             teamRole       : 'Co-Founder & Core Team Member'
         }, {
             module         : MemberContainer,
@@ -38,7 +37,6 @@ class Container extends Base {
             picture        : 'rwaters.png',
             profileGitHub  : 'https://github.com/rwaters',
             profileLinkedIn: 'https://www.linkedin.com/in/rwaters/',
-            profileX       : 'https://x.com/rwaters',
             teamRole       : 'Co-Founder & Core Team Member'
         }, {
             module         : MemberContainer,

package/apps/portal/view/about/MemberContainer.mjs

@@ -36,10 +36,6 @@ class MemberContainer extends Container {
          * @member {String|null} profileLinkedIn_=null
          */
         profileLinkedIn_: null,
-        /**
-         * @member {String|null} profileX_=null
-         */
-        profileX_: null,
         /**
          * @member {String|null} teamRole_=null
          */
@@ -56,8 +52,6 @@ class MemberContainer extends Container {
                 iconCls: 'portal-profile fa-brands fa-github'
             }, {
                 iconCls: 'portal-profile fa-brands fa-linkedin'
-            }, {
-                iconCls: 'portal-profile fa-brands fa-x-twitter'
             }]
         }, {
             cls : ['portal-profile-component'],
@@ -141,16 +135,6 @@ class MemberContainer extends Container {
         this.updateProfileButton(this.items[0].items[1], value)
     }
 
-    /**
-     * Triggered after the profileX config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     * @protected
-     */
-    afterSetProfileX(value, oldValue) {
-        this.updateProfileButton(this.items[0].items[2], value)
-    }
-
     /**
      * Triggered after the teamRole config got changed
      * @param {String|null} value
@@ -174,10 +158,7 @@ class MemberContainer extends Container {
      */
     updateProfileButton(button, url) {
         if (button.set) {
-            button.set({
-                hidden: !url,
-                url
-            })
+            button.set({hidden: !url, url})
         } else {
             // initial values
             button.hidden = !url;

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

@@ -101,17 +101,13 @@ class FooterContainer extends Container {
                 iconCls: 'fa-brands fa-facebook',
                 text   : 'Facebook',
                 url    : 'https://www.facebook.com/neo.mjs'
-            }, {
-                iconCls: 'fa-brands fa-x-twitter',
-                text   : 'X',
-                url    : 'https://x.com/neomjs1'
             }, {
                 module: Component,
                 cls   : ['portal-home-footer-spacer']
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.0.0-beta.2'
+                html  : 'v8.0.1'
             }]
         }],
         /**

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -131,10 +131,13 @@ class MainContainerController extends ComponentController {
 
         me.summaryData = data;
 
-        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});     container.items[0].update();
-        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});    container.items[1].update();
-        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered}); container.items[2].update();
-        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});    container.items[3].update();
+        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});
+        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});
+        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered});
+        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});
+
+        container.updateDepth = 2;
+        container.update();
 
         container = me.getReference('last-update');
         vdom      = container.vdom;

package/examples/ConfigurationViewport.mjs

@@ -59,6 +59,37 @@ class ConfigurationViewport extends Viewport {
         exampleComponentFlex: 2
     }
 
+    /**
+     * Override this method to create the components to show inside the configuration container
+     * @returns {Object[]|null}
+     */
+    createConfigurationComponents() {
+        return null
+    }
+
+    /**
+     * Override this method to create the component to show inside the current example
+     * @returns {Object|Neo.component.Base|null}
+     */
+    createExampleComponent() {
+        return null
+    }
+
+    /**
+     * @param {Object} data
+     */
+    logInstance(data) {
+        console.log(this.exampleComponent)
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        this.exampleComponent[config] = opts.value
+    }
+
     /**
      *
      */
@@ -71,7 +102,12 @@ class ConfigurationViewport extends Viewport {
             delete me.exampleContainerConfig.style
         }
 
-        me.exampleComponent        = me.createExampleComponent();
+        me.exampleComponent = me.createExampleComponent();
+
+        if (Neo.isObject(me.exampleComponent)) {
+            me.exampleComponent = Neo.create(me.exampleComponent)
+        }
+
         me.configurationComponents = me.createConfigurationComponents() || [];
 
         theme = me.exampleComponent.getTheme();
@@ -135,37 +171,6 @@ class ConfigurationViewport extends Viewport {
         super.onConstructed()
     }
 
-    /**
-     * Override this method to create the components to show inside the configuration container
-     * @returns {Object[]|null}
-     */
-    createConfigurationComponents() {
-        return null
-    }
-
-    /**
-     * Override this method to create the component to show inside the current example
-     * @returns {Neo.component.Base|null}
-     */
-    createExampleComponent() {
-        return null
-    }
-
-    /**
-     * @param {Object} data
-     */
-    logInstance(data) {
-        console.log(this.exampleComponent)
-    }
-
-    /**
-     * @param {String} config
-     * @param {Object} opts
-     */
-    onConfigChange(config, opts) {
-        this.exampleComponent[config] = opts.value
-    }
-
     /**
      * @param {String} config
      * @param {String} value

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.0.0-beta.2'
+         * @member {String} version='8.0.1'
          */
-        version: '8.0.0-beta.2'
+        version: '8.0.1'
     }
 
     /**

package/examples/calendar/weekview/MainContainer.mjs

@@ -1,6 +1,6 @@
-import MainContainerModel from '../../../src/calendar/view/MainContainerModel.mjs';
-import Viewport           from '../../../src/container/Viewport.mjs';
-import WeekComponent      from '../../../src/calendar/view/week/Component.mjs';
+import MainContainerStateProvider from '../../../src/calendar/view/MainContainerStateProvider.mjs';
+import Viewport                   from '../../../src/container/Viewport.mjs';
+import WeekComponent              from '../../../src/calendar/view/week/Component.mjs';
 
 /**
  * @class Neo.examples.calendar.weekview.MainContainer
@@ -24,10 +24,10 @@ class MainContainer extends Viewport {
          * configs. We have two options here:
          * 1. Extend Neo.calendar.view.week.Component and add the configs and view model there.
          * 2. Just drop them into a parent view.
-         * @member {Neo.calendar.view.MainContainerModel} model=MainContainerModel
+         * @member {Neo.calendar.view.MainContainerStateProvider} stateProvider=MainContainerStateProvider
          */
-        model: {
-            module: MainContainerModel,
+        stateProvider: {
+            module: MainContainerStateProvider,
             data  : {
                 currentDate: new Date('2024-07-21')
             }

package/examples/grid/cellEditing/MainContainer.mjs

@@ -0,0 +1,175 @@
+import CellColumnModel            from '../../../src/selection/grid/CellColumnModel.mjs';
+import CellColumnRowModel         from '../../../src/selection/grid/CellColumnRowModel.mjs';
+import CellModel                  from '../../../src/selection/grid/CellModel.mjs';
+import CellRowModel               from '../../../src/selection/grid/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 GridContainer              from '../../../src/grid/Container.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';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.grid.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-grid-cellmodel',
+            labelText     : 'selectionModel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'Cell'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            valueLabelText: 'Cell & Column'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            valueLabelText: 'Cell & Row'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-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        : GridContainer,
+            bind          : {store : 'stores.mainStore'},
+            cellEditing   : true,
+            parentId      : this.id,
+            selectionModel: CellModel,
+            store         : MainStore,
+
+            columnDefaults: {
+                editable: true,
+                width   : 200
+            },
+
+            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('grid-cell-editing')[config] = opts.value
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/grid/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.grid.cellEditing.MainContainerStateProvider
+ * @extends Neo.state.Provider
+ */
+class MainContainerStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.cellEditing.MainContainerStateProvider'
+         * @protected
+         */
+        className: 'Neo.examples.grid.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/grid/cellEditing/MainModel.mjs

@@ -0,0 +1,30 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        className: 'Neo.examples.grid.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/grid/cellEditing/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.grid.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/grid/cellEditing/app.mjs

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

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

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

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

package/examples/grid/container/MainContainer.mjs

@@ -79,7 +79,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createExampleComponent() {
-        return Neo.create(GridContainer, {
+        return {
+            module        : GridContainer,
             selectionModel: CellModel,
             store         : MainStore,
 
@@ -88,12 +89,12 @@ class MainContainer extends ConfigurationViewport {
             },
 
             columns: [
-                {field: 'firstname', text: 'Firstname'},
-                {field: 'lastname',  text: 'Lastname'},
-                {field: 'githubId',  text: 'Github Id'},
-                {field: 'country',   text: 'Country'}
+                {dataField: 'firstname', text: 'Firstname'},
+                {dataField: 'lastname',  text: 'Lastname'},
+                {dataField: 'githubId',  text: 'Github Id'},
+                {dataField: 'country',   text: 'Country'}
             ]
-        })
+        }
     }
 }