neo.mjs 8.33.0 → 8.35.0

package/apps/ServiceWorker.mjs

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

package/apps/finance/view/GridContainer.mjs

@@ -42,15 +42,16 @@ class GridContainer extends BaseGridContainer {
             dataField: 'change',
             locale   : 'en-US',
             text     : 'Change',
-            type     : 'currency',
+            type     : 'animatedCurrency',
             width    : 120
         }, {
-            cellAlign: 'right',
-            dataField: 'value',
-            locale   : 'en-US',
-            text     : 'Value',
-            type     : 'currency',
-            width    : 120
+            cellAlign   : 'right',
+            compareField: 'change',
+            dataField   : 'value',
+            locale      : 'en-US',
+            text        : 'Value',
+            type        : 'animatedCurrency',
+            width       : 120
         }]
     }
 }

package/apps/finance/view/Viewport.mjs

@@ -1,5 +1,6 @@
 import BaseViewport          from '../../../src/container/Viewport.mjs';
 import GridContainer         from './GridContainer.mjs';
+import Toolbar               from '../../../src/toolbar/Base.mjs';
 import ViewportController    from './ViewportController.mjs';
 import ViewportStateProvider from './ViewportStateProvider.mjs';
 
@@ -18,17 +19,10 @@ class Viewport extends BaseViewport {
          * @member {Neo.controller.Component} controller=ViewportController
          */
         controller: ViewportController,
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            module   : GridContainer,
-            reference: 'grid'
-        }],
         /*
-         * @member {Object} layout={ntype:'fit'}
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
          */
-        layout: {ntype: 'fit'},
+        layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
@@ -36,7 +30,30 @@ class Viewport extends BaseViewport {
         /**
          * @member {Object} style
          */
-        style: {padding: '2em'}
+        style: {padding: '1.5em'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Toolbar,
+            flex  : 'none',
+            style : {marginBottom: '1.5em'},
+
+            items : [{
+                disabled : true,
+                handler  : 'onStartButtonClick',
+                reference: 'start-button',
+                text     : 'Start'
+            }, {
+                handler  : 'onStopButtonClick',
+                reference: 'stop-button',
+                style    : {marginLeft: '.3em'},
+                text     : 'Stop'
+            }]
+        }, {
+            module   : GridContainer,
+            reference: 'grid'
+        }]
     }
 }
 

package/apps/finance/view/ViewportController.mjs

@@ -13,6 +13,20 @@ class ViewportController extends Controller {
         className: 'Finance.view.ViewportController'
     }
 
+    /**
+     * @member {Number|null} intervalId=null
+     */
+    intervalId = null
+
+    /**
+     *
+     */
+    generateData() {
+        let me = this;
+
+        me.intervalId = setInterval(me.updateRecord.bind(me), 4)
+    }
+
     /**
      *
      */
@@ -28,7 +42,47 @@ class ViewportController extends Controller {
             })
         });
 
-        this.getReference('grid').bulkUpdateRecords(items)
+        me.getReference('grid').bulkUpdateRecords(items);
+        me.generateData()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStartButtonClick(data) {
+        let me         = this,
+            stopButton = me.getReference('stop-button');
+
+        me.generateData();
+
+        data.component.disabled = true;
+        stopButton    .disabled = false
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStopButtonClick(data) {
+        let me          = this,
+            startButton = me.getReference('start-button');
+
+        clearInterval(me.intervalId);
+
+        data.component.disabled = true;
+        startButton   .disabled = false
+    }
+
+    /**
+     *
+     */
+    updateRecord() {
+        let me    = this,
+            store = me.getStore('companies'),
+            change = Math.random() * 10 - 5,
+            index  = Math.round(Math.random() * 100), // 0 - 100
+            record = store.getAt(index);
+
+        record.set({change, value: record.value + change})
     }
 }
 

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-03-25",
+      "datePublished": "2025-03-26",
       "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.33.0'
+                html  : 'v8.35.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.33.0",
+    "version": "8.35.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/grid/column/AnimatedChange.scss

@@ -1,5 +1,5 @@
 @keyframes grid-animated-cell {
-    50%  {background-color:var(--button-ripple-background-color);}
+    50%  {background-color: var(--button-ripple-background-color);}
 }
 
 .neo-grid-container {

package/resources/scss/src/grid/column/AnimatedCurrency.scss

@@ -0,0 +1,25 @@
+@keyframes grid-animated-cell-negative {
+    50%  {background-color: darkred;}
+}
+
+@keyframes grid-animated-cell-positive {
+    50%  {background-color: darkgreen}
+}
+
+.neo-grid-container {
+    .neo-grid-row, .neo-grid-row.neo-even {
+        .neo-grid-cell {
+            &.neo-animated-negative {
+                animation-name           : grid-animated-cell-negative;
+                animation-duration       : .4s;
+                animation-timing-function: ease-in-out;
+            }
+
+            &.neo-animated-positive {
+                animation-name           : grid-animated-cell-positive;
+                animation-duration       : .4s;
+                animation-timing-function: ease-in-out;
+            }
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/grid/Container.mjs

@@ -19,12 +19,13 @@ class GridContainer extends BaseContainer {
      * @static
      */
     static columnTypes = {
-        animatedChange: column.AnimatedChange,
-        column        : column.Base,
-        component     : column.Component,
-        currency      : column.Currency,
-        index         : column.Index,
-        progress      : column.Progress
+        animatedChange  : column.AnimatedChange,
+        animatedCurrency: column.AnimatedCurrency,
+        column          : column.Base,
+        component       : column.Component,
+        currency        : column.Currency,
+        index           : column.Index,
+        progress        : column.Progress
     }
     /**
      * @member {Object} delayable

package/src/grid/column/AnimatedCurrency.mjs

@@ -0,0 +1,87 @@
+import AnimatedChange from './AnimatedChange.mjs';
+
+/**
+ * @class Neo.grid.column.AnimatedCurrency
+ * @extends Neo.grid.column.AnimatedChange
+ */
+class AnimatedCurrency extends AnimatedChange {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.AnimatedCurrency'
+         * @protected
+         */
+        className: 'Neo.grid.column.AnimatedCurrency',
+        /**
+         * @member {String} type='animatedCurrency'
+         * @protected
+         */
+        type: 'animatedCurrency',
+        /**
+         * Set a different record field to base the change on.
+         * Defaults this.dataField
+         * @member {String|null} compareField=null
+         */
+        compareField: null,
+        /**
+         * @member {String} currency='USD'
+         */
+        currency: 'USD',
+        /**
+         * @member {String} locale='default'
+         */
+        locale: 'default'
+    }
+
+    /**
+     * @member {Intl.NumberFormat|null} formatter=null
+     */
+    formatter = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createFormatter()
+    }
+
+    /**
+     * @param {Object}             data
+     * @param {Neo.button.Base}    data.column
+     * @param {Number}             data.columnIndex
+     * @param {String}             data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Object}             data.record
+     * @param {Number}             data.rowIndex
+     * @param {Neo.data.Store}     data.store
+     * @param {Number|String}      data.value
+     * @returns {*}
+     */
+    cellRenderer({value}) {
+        if (value === null || value === undefined) {
+            return ''
+        }
+
+        return this.formatter.format(value)
+    }
+
+    /**
+     *
+     */
+    createFormatter() {
+        let me = this;
+
+        me.formatter = new Intl.NumberFormat(me.locale, {style: 'currency', currency: me.currency})
+    }
+
+    /**
+     * Override as needed for dynamic record-based animation classes
+     * @param {Record} record
+     * @returns {String}
+     */
+    getAnimationCls(record) {
+        return record[this.compareField || this.dataField] < 0 ? 'neo-animated-negative' : 'neo-animated-positive'
+    }
+}
+
+export default Neo.setupClass(AnimatedCurrency);

package/src/grid/column/_export.mjs

@@ -1,8 +1,9 @@
-import AnimatedChange from './AnimatedChange.mjs';
-import Base           from './Base.mjs';
-import Component      from './Component.mjs';
-import Currency       from './Currency.mjs';
-import Index          from './Index.mjs';
-import Progress       from './Progress.mjs';
+import AnimatedChange   from './AnimatedChange.mjs';
+import AnimatedCurrency from './AnimatedCurrency.mjs';
+import Base             from './Base.mjs';
+import Component        from './Component.mjs';
+import Currency         from './Currency.mjs';
+import Index            from './Index.mjs';
+import Progress         from './Progress.mjs';
 
-export {AnimatedChange, Base, Component, Currency, Index, Progress};
+export {AnimatedChange, AnimatedCurrency, Base, Component, Currency, Index, Progress};