neo.mjs 8.29.0 → 8.31.0

package/BACKERS.md

@@ -1,22 +1,22 @@
 # Sponsors & Backers
 
-Truth to be told, the neo.mjs project is in need of sponsors & backers.
+Truth to be told, the Neo.mjs project is in need of sponsors & backers.
 
 As an <a href="./LICENSE">MIT-licensed</a> open source project,
-you can use neo.mjs for free (as long as you stick to the license & copyright notice).
+you can use Neo.mjs for free (as long as you stick to the license & copyright notice).
 
 Prior to the public release, the project was already at <a href=".github/NEOMJS_HISTORY.md">3720 commits</a>.
 
-To get neo.mjs to this point, I spent 3 years of my full and unpaid working time.
+To get Neo.mjs to this point, I spent 3 years of my full and unpaid working time.
 This does not only include many 100h+ weeks and several sleepless nights,
 but I also burned most of my personal savings to get here.
 
-I did this, since I truly and deeply believe that neo.mjs has the potential to start a new era of UI development.
+I did this, since I truly and deeply believe that Neo.mjs has the potential to start a new era of UI development.
 
 The current version is just a fraction of a much bigger picture I have in mind.
 Trust me, it is beautiful :)
 
-I can definitely say that I did use several other UI frameworks in the past and that neo.mjs boosted my productivity
+I can definitely say that I did use several other UI frameworks in the past and that Neo.mjs boosted my productivity
 to an entire new level.
 
 This is something I would love to share with you!
@@ -29,35 +29,35 @@ By default, the main Readme will only include sponsors starting at the Gold tier
 (*) Only valid as long as the sponsorship stays active.
 
 # What will I sponsor?
-Obviously the continuing of the development for the neo.mjs framework.
+Obviously the continuing of the development for the Neo.mjs framework.
 To get the idea of what this means in detail, please take a look at the: <a href=".github/VISION.md">Project Vision</a>.
 
-# Why should I sponsor neo.mjs?
+# Why should I sponsor Neo.mjs?
 I am in need to make up for the invested time, which means that going forward,
 I have to spend a lot of my time on billable projects.
-Of course I will do my best to continue pushing neo.mjs in my free time.
+Of course I will do my best to continue pushing Neo.mjs in my free time.
 
-With active sponsors I could invest more time into neo.mjs,
+With active sponsors I could invest more time into Neo.mjs,
 which means that you will get new features, guides and bug-fixes a lot faster.
 
 # For developers:
 You can select a Backer tier ($10 / month), which would equal a cup of coffee for me every month (after taxes).
-This will not cover my living costs (unless neo.mjs goes viral), but it does have an impact on
+This will not cover my living costs (unless Neo.mjs goes viral), but it does have an impact on
 my motivation for sure.
 
 # For companies:
 Starting at the bronze tier (special offer), you will be able to place your company logo on the main repository landing page (Readme.md).
-This will have a high impact on the neo.mjs community and make it easier for you
-to find neo.mjs developers in the future.
+This will have a high impact on the Neo.mjs community and make it easier for you
+to find Neo.mjs developers in the future.
 
 Obviously, sponsoring open source projects in general will increase your companies reputation.
 
-As soon as the neo.mjs community grows, it will also increase your company visibility in a good way.
+As soon as the Neo.mjs community grows, it will also increase your company visibility in a good way.
 
-Please make sure to create a feature request ticket inside the neo.mjs <a href="../../issues">Issues Tracker</a>
+Please make sure to create a feature request ticket inside the Neo.mjs <a href="../../issues">Issues Tracker</a>
 after signing a sponsor program to provide your company logo!
 
-### Thanks a lot for your support of the neo.mjs project!<br/>
+### Thanks a lot for your support of the Neo.mjs project!<br/>
 <a href="https://github.com/sponsors/tobiu">Sponsor Tobias Uhlig</a>
 
 <br><br>

package/CONTRIBUTING.md

@@ -1,15 +1,15 @@
-# neo.mjs Contributing Guide
-We are very excited that you are interested in contributing to neo.mjs.<br>
+# Neo.mjs Contributing Guide
+We are very excited that you are interested in contributing to Neo.mjs.<br>
 No worries, you don't need to be a guru, ninja or rockstar to support the project.
 
 ## What you can do to help:
 
-### 1.  neo.mjs just got released, so the most important thing right now is to get more eyes on the project.
+### 1.  Neo.mjs just got released, so the most important thing right now is to get more eyes on the project.
 1. Add a star to this repository. Ok, this one was easy. Thank you!
-2. Tell your friends about neo.mjs.
+2. Tell your friends about Neo.mjs.
 3. Write blog posts or post on social media (Facebook, LinkedIn, Twitter, etc.)
 4. Please stick to our <a href=".github/CODE_OF_CONDUCT.md">Code of Conduct</a>
-5. Interested to see a neo.mjs session at a developer conference? Definitely possible. Just reach out!
+5. Interested to see a Neo.mjs session at a developer conference? Definitely possible. Just reach out!
 
 ### 2.  Use the issues tracker
 1. In case you got an idea for a new feature
@@ -17,9 +17,9 @@ No worries, you don't need to be a guru, ninja or rockstar to support the projec
     1. Ideally, you create a new breaking test inside the tests folder.
     This saves a lot of time and ensures the bug will stay fixed once the ticket is resolved.
 3. Please like or comment on current tickets.
-    This is a great help to figure out which tickets are the most important ones for the neo.mjs community.
+    This is a great help to figure out which tickets are the most important ones for the Neo.mjs community.
 
-### 3.  Contribute to the neo.mjs code base
+### 3.  Contribute to the Neo.mjs code base
 1. Please ***always*** create a new issue inside our <a href="../../issues">Issues Tracker</a> first and wait for approval.
    This ensures that your idea fits the scope of the project and makes it less likely to get a rejected PR.
    We will do our best to reply to new tickets within 7d max. In case we don't, feel free to bump the ticket.
@@ -27,12 +27,12 @@ No worries, you don't need to be a guru, ninja or rockstar to support the projec
    Otherwise multiple contributors could work on the same item in parallel.
 3. Please make sure that pull requests are always related to an issue inside our <a href="../../issues">Issues Tracker</a>.
 4. Please create PRs for the dev branch and not for master.
-5. Please do not copy code from other frameworks / libraries. So far, the entire neo.mjs code base is written from scratch.
+5. Please do not copy code from other frameworks / libraries. So far, the entire Neo.mjs code base is written from scratch.
     1. It is simply impossible to verify if contributed code is self-written.
     2. Adding new npm packages => dependencies / devDependencies is fine, in case there are no licensing conflicts.
 6. Refer to the <a href="./.github/CODEBASE_OVERVIEW.md">codebase overview</a> to understand how our repository is structured.
 
-### 4.  In case you created a nice app or component using neo.mjs, please let us know about it.
+### 4.  In case you created a nice app or component using Neo.mjs, please let us know about it.
 1.  We are always interested to feature client projects in blog posts or on social media.
 
 <br><br>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-03-03",
+      "datePublished": "2025-03-09",
       "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.31.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.31.0'
          */
-        version: '8.29.0'
+        version: '8.31.0'
     }
 
     /**

package/examples/grid/animatedRowSorting/MainModel.mjs

@@ -0,0 +1,40 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.animatedRowSorting.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.grid.animatedRowSorting.MainModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }, {
+            name: 'progress',
+            type: 'Int'
+        }],
+        /**
+         * @member {Boolean} trackModifiedFields=true
+         */
+        trackModifiedFields: true
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/grid/animatedRowSorting/MainStore.mjs

@@ -0,0 +1,36 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className: 'Neo.examples.grid.animatedRowSorting.MainStore',
+        model    : Model,
+
+        data: [
+            {country : 'DE', firstname: 'Max',     id: 1, lastname : 'Johnson',  progress :  50},
+            {country : 'UK', firstname: 'Paul',    id: 2, lastname : 'Walker',   progress :  10},
+            {country : 'US', firstname: 'Sam',     id: 3, lastname : 'Anderson', progress :  90},
+            {country : 'GR', firstname: 'William', id: 4, lastname : 'Wilson',   progress :  30},
+            {country : 'AT', firstname: 'Carol',   id: 5, lastname : 'Jackson',  progress :  70},
+            {country : 'NL', firstname: 'Amanda',  id: 6, lastname : 'King',     progress : 100},
+            {country : 'FR', firstname: 'Sarah',   id: 7, lastname : 'Scott',    progress :  35}
+        ],
+
+        filters: [{
+            property: 'firstname',
+            operator: 'like',
+            value   : null
+        }],
+
+        sorters: [{
+            property : 'id',
+            direction: 'ASC'
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/grid/animatedRowSorting/Viewport.mjs

@@ -0,0 +1,87 @@
+import BaseViewport  from '../../../src/container/Viewport.mjs';
+import GridContainer from '../../../src/grid/Container.mjs';
+import MainStore     from './MainStore.mjs';
+import NumberField   from '../../../src/form/field/Number.mjs';
+import Toolbar       from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.animatedRowSorting.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.grid.animatedRowSorting.Viewport',
+        /**
+         * @member {Object} style={padding:'1em'}
+         */
+        style: {padding: '1em'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Toolbar,
+            flex  : 'none',
+            style : {marginBottom: '1em', maxWidth: 'fit-content'},
+
+            items : [{
+                ntype        : 'textfield',
+                labelPosition: 'inline',
+                labelText    : 'Firstname',
+                listeners    : {change: 'up.onFirstnameFieldChange'},
+                width        : 120
+            },{
+                module       : NumberField,
+                clearable    : false,
+                labelPosition: 'inline',
+                labelText    : 'Transition Duration',
+                listeners    : {change: 'up.onTransitionDurationFieldChange'},
+                maxValue     : 1000,
+                minValue     : 200,
+                stepSize     : 100,
+                style        : {marginLeft: '1em'},
+                value        : 500,
+                width        : 180
+            }]
+        }, {
+            module   : GridContainer,
+            reference: 'grid',
+            store    : MainStore,
+
+            columnDefaults: {
+                width: 200
+            },
+
+            viewConfig: {
+                animatedRowSorting: true
+            },
+
+            columns: [
+                {dataField: 'id',        text: 'Id', width: 100},
+                {dataField: 'firstname', text: 'Firstname'},
+                {dataField: 'lastname',  text: 'Lastname'},
+                {dataField: 'progress',  text: 'Progress', type: 'progress'},
+                {dataField: 'country',   text: 'Country'}
+            ]
+        }]
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        this.getReference('grid').store.getFilter('firstname').value = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTransitionDurationFieldChange(data) {
+        this.getReference('grid').view.getPlugin('grid-animate-rows').transitionDuration = data.value
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/grid/animatedRowSorting/app.mjs

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

package/examples/grid/animatedRowSorting/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: Animated Row Sorting</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

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

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.31.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -48,7 +48,7 @@
     "homepage": "https://neomjs.com/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
-        "autoprefixer": "^10.4.20",
+        "autoprefixer": "^10.4.21",
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^13.1.0",
@@ -56,7 +56,7 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.4.2",
+        "inquirer": "^12.4.3",
         "marked": "^15.0.7",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",

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.31.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.29.0'
+    version: '8.31.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -360,7 +360,8 @@ class Collection extends Base {
      * @protected
      */
     cacheUpdate(opts) {
-        console.log('cacheUpdate', opts, this[toAddArray]);
+        // disabled for now
+        // console.log('cacheUpdate', opts, this[toAddArray]);
         return;
 
         let me            = this,

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()
     }