neo.mjs 8.29.0 → 8.30.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/GridContainer.mjs

@@ -46,7 +46,7 @@ class GridContainer extends BaseGridContainer {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i       = 6,
+        let i       = 7,
             columns = [
                 {type: 'index', dataField: 'id', text: '#', width: 60},
                 {cellAlign: 'left', dataField: 'firstname', defaultSortDirection: 'ASC', text: 'Firstname', width: 150},
@@ -57,7 +57,8 @@ class GridContainer extends BaseGridContainer {
                     text  : record.firstname + ' ++',
                     width : 130
                 })},
-                {type: 'animatedChange', dataField: 'counter', text: 'Counter'}
+                {type: 'animatedChange', dataField: 'counter', text: 'Counter'},
+                {type: 'progress',       dataField: 'progress', text: 'Progress', width: 150}
             ];
 
         for (; i <= value; i++) {

package/examples/grid/bigData/MainModel.mjs

@@ -24,13 +24,14 @@ class MainModel extends Model {
      * @protected
      */
     afterSetAmountColumns(value, oldValue) {
-        let i      = 6,
+        let i      = 7,
             fields = [
                 {name: 'id',        type: 'Int'},
                 {name: 'countAction'},
                 {name: 'counter',   type: 'Int'},
                 {name: 'firstname', type: 'String'},
-                {name: 'lastname',  type: 'String'}
+                {name: 'lastname',  type: 'String'},
+                {name: 'progress',  type: 'Int'}
             ];
 
         for (; i <= value; i++) {

package/examples/grid/bigData/MainStore.mjs

@@ -113,12 +113,13 @@ class MainStore extends Store {
             column, record;
 
         for (; row < amountRows; row++) {
-            column = 5;
+            column = 7;
             record = {
                 id       : row + 1,
                 counter  : Math.round(Math.random() * 100),
                 firstname: me.firstnames[Math.floor(Math.random() * amountFirstnames)],
-                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)]
+                lastname : me.lastnames[ Math.floor(Math.random() * amountLastnames)],
+                progress : Math.round(Math.random() * 100)
             };
 
             for (; column <= amountColumns; column++) {

package/package.json

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

package/resources/scss/src/component/Progress.scss

@@ -1,3 +1,3 @@
-.neo-progress {
+.neo-progress-wrapper {
     color: var(--progress-label-color);
 }

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

@@ -0,0 +1,34 @@
+.neo-grid-cell {
+    .neo-progress-wrapper {
+        progress[value] {
+            appearance: none;
+            border    : none;
+            display   : flex;
+            height    : var(--grid-cell-progress-height);
+
+            @-moz-document url-prefix() {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for webkit the progress-bar is the track
+            &::-webkit-progress-bar {
+                background-color: var(--grid-cell-progress-track-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+                box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+            }
+
+            // for mozilla the progress-bar is the active range
+            &::-moz-progress-bar {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+
+            &::-webkit-progress-value {
+                background-color: var(--grid-cell-progress-active-color);
+                border-radius   : var(--grid-cell-progress-border-radius);
+            }
+        }
+    }
+}

package/resources/scss/theme-dark/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-dark { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #333;
+}

package/resources/scss/theme-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

package/resources/scss/theme-neo-light/grid/column/Progress.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-neo-light { // .neo-grid-cell
+    --grid-cell-progress-active-color : #5d83a7;
+    --grid-cell-progress-border-radius: 2px;
+    --grid-cell-progress-height       : 10px;
+    --grid-cell-progress-track-color  : #eee;
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -451,7 +451,7 @@ class Component extends Base {
     get parent() {
         let me = this;
 
-        return me.parentComponent || me.parentId === 'document.body' ? null : Neo.getComponent(me.parentId)
+        return me.parentComponent || (me.parentId === 'document.body' ? null : Neo.getComponent(me.parentId))
     }
 
     /**

package/src/component/Progress.mjs

@@ -37,12 +37,25 @@ class Progress extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'div', cls: ['neo-progress'], cn: [
+        {tag: 'div', cls: ['neo-progress-wrapper'], cn: [
             {tag: 'label'},
             {tag: 'progress'}
         ]}
     }
 
+    /**
+     * @member {Object} label
+     */
+    get label() {
+        return this.vdom.cn[0]
+    }
+    /**
+     * @member {Object} progress
+     */
+    get progress() {
+        return this.vdom.cn[1]
+    }
+
     /**
      * Triggered after the id config got changed
      * @param {String} value
@@ -52,7 +65,7 @@ class Progress extends Base {
     afterSetId(value, oldValue) {
         super.afterSetId(value, oldValue);
 
-        this.vdom.cn[0].for = value;
+        this.label.for = value;
         this.update()
     }
 
@@ -63,7 +76,15 @@ class Progress extends Base {
      * @protected
      */
     afterSetLabelText(value, oldValue) {
-        this.vdom.cn[0].html = value;
+        let {label} = this;
+
+        if (!value) {
+            label.removeDom = true
+        } else {
+            delete label.removeDom
+        }
+
+        label.html = value;
         this.update()
     }
 
@@ -74,7 +95,7 @@ class Progress extends Base {
      * @protected
      */
     afterSetMax(value, oldValue) {
-        this.vdom.cn[1].max = value;
+        this.progress.max = value;
         this.update()
     }
 
@@ -85,7 +106,7 @@ class Progress extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        this.vdom.cn[1].value = value;
+        this.progress.value = value;
         this.update()
     }
 

package/src/grid/Container.mjs

@@ -22,7 +22,8 @@ class GridContainer extends BaseContainer {
         animatedChange: column.AnimatedChange,
         column        : column.Base,
         component     : column.Component,
-        index         : column.Index
+        index         : column.Index,
+        progress      : column.Progress
     }
     /**
      * @member {Object} delayable

package/src/grid/ScrollManager.mjs

@@ -151,7 +151,7 @@ class ScrollManager extends Base {
 
         me.scrollTimeoutId = setTimeout(() => {
             view.isScrolling = false
-        }, 30);
+        }, 100);
 
         view.set({isScrolling: true, scrollTop});
 

package/src/grid/column/Component.mjs

@@ -1,4 +1,3 @@
-import Button from '../../button/Base.mjs';
 import Column from './Base.mjs';
 
 /**
@@ -16,6 +15,20 @@ class Component extends Column {
          * @member {Function|Object|null} component=null
          */
         component: null,
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: null,
+        /**
+         * Components can delegate event listeners (or button handlers) into methods somewhere inside
+         * the view controller or component tree hierarchy.
+         *
+         * In this case, it is helpful to know what the related record is, so we are adding the record
+         * to the component as a property. By default, as 'record', but this config can change the property name.
+         * @member {String} recordProperty='record'
+         */
+        recordProperty: 'record',
         /**
          * @member {String} type='component'
          * @protected
@@ -29,9 +42,19 @@ class Component extends Column {
      */
     map = new Map()
 
+    /**
+     * Override as needed inside class extensions
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return config
+    }
+
     /**
      * @param {Object}             data
-     * @param {Neo.button.Base}    data.column
+     * @param {Neo.column.Base}    data.column
      * @param {Number}             data.columnIndex
      * @param {String}             data.dataField
      * @param {Neo.grid.Container} data.gridContainer
@@ -42,28 +65,37 @@ class Component extends Column {
      * @returns {*}
      */
     cellRenderer(data) {
-        let {gridContainer, rowIndex} = data,
-            {appName, view, windowId} = gridContainer,
-            me              = this,
-            id              = `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`,
-            component       = me.map.get(id),
-            componentConfig = me.component;
+        let {gridContainer, record, rowIndex} = data,
+            {appName, view, windowId}         = gridContainer,
+            me               = this,
+            {recordProperty} = me,
+            id               = me.getComponentId(rowIndex),
+            component        = me.map.get(id),
+            componentConfig  = me.component;
 
         if (Neo.typeOf(componentConfig) === 'Function') {
             componentConfig = componentConfig(data)
         }
 
+        componentConfig = me.applyRecordConfigs(componentConfig, record);
+
         if (component) {
             delete componentConfig.className;
             delete componentConfig.module;
             delete componentConfig.ntype;
 
+
+            componentConfig[recordProperty] = record;
+
             component.set(componentConfig)
         } else {
             component = Neo.create({
+                ...me.defaults,
                 ...componentConfig,
                 appName,
                 id,
+                parentComponent : view,
+                [recordProperty]: record,
                 windowId
             });
 
@@ -74,6 +106,17 @@ class Component extends Column {
 
         return component.createVdomReference()
     }
+
+    /**
+     * @param {Number} rowIndex
+     * @returns {String}
+     */
+    getComponentId(rowIndex) {
+        let me     = this,
+            {view} = me.parent;
+
+        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+    }
 }
 
 export default Neo.setupClass(Component);

package/src/grid/column/Progress.mjs

@@ -0,0 +1,42 @@
+import ComponentColumn   from './Component.mjs';
+import ProgressComponent from '../../component/Progress.mjs';
+
+/**
+ * @class Neo.grid.column.Progress
+ * @extends Neo.grid.column.Component
+ */
+class Progress extends ComponentColumn {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Progress'
+         * @protected
+         */
+        className: 'Neo.grid.column.Progress',
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: {
+            module: ProgressComponent
+        },
+        /**
+         * @member {String} type='progress'
+         * @protected
+         */
+        type: 'progress'
+    }
+
+    /**
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return {
+            value: record[this.dataField],
+            ...config
+        }
+    }
+}
+
+export default Neo.setupClass(Progress);

package/src/grid/column/_export.mjs

@@ -2,5 +2,6 @@ import AnimatedChange from './AnimatedChange.mjs';
 import Base           from './Base.mjs';
 import Component      from './Component.mjs';
 import Index          from './Index.mjs';
+import Progress       from './Progress.mjs';
 
-export {AnimatedChange, Base, Component, Index};
+export {AnimatedChange, Base, Component, Index, Progress};

package/src/vdom/Helper.mjs

@@ -250,7 +250,7 @@ class Helper extends Base {
             return deltas
         }
 
-        if (vnodeId !== oldVnodeId) {
+        if (vnodeId !== oldVnodeId && vnode.componentId !== oldVnode.componentId) {
             throw new Error(`createDeltas() must get called for the same node. ${vnodeId}, ${oldVnodeId}`);
         }