neo.mjs 8.22.0 → 8.24.0

package/README.md

@@ -21,6 +21,11 @@ without compilations. This makes debugging easier and reduces development costs.
 In case you care about scalability, extensibility or solid architectures, congratulations,
 you have found the right spot.
 
+<p align="center">
+  <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png"></a>
+  <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png"></a>
+</p>
+
 ## Content
 1. <a href="#introduction">Introduction</a>
 2. <a href="#use-cases">Potential Use Cases</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-18",
+      "datePublished": "2025-02-24",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -22,10 +22,10 @@ class FeatureSection extends Container {
          */
         className: 'Portal.view.home.FeatureSection',
         /**
-         * @member {String[]} baseCls=['portal-home-feature-section','neo-container']
+         * @member {String[]} baseCls=['portal-home-feature-section','portal-home-content-view','neo-container']
          * @protected
          */
-        baseCls: ['portal-home-feature-section', 'neo-container'],
+        baseCls: ['portal-home-feature-section', 'portal-home-content-view', 'neo-container'],
         /**
          * If you want to use the LivePreview, use the config livePreviewCode.
          * For custom content, use this config instead.
@@ -91,7 +91,7 @@ class FeatureSection extends Container {
             }]
         }, {
             module   : Container,
-            cls      : 'portal-content-wrapper',
+            cls      : ['portal-content-wrapper'],
             layout   : 'fit',
             reference: 'portal-content-wrapper'
         }]
@@ -125,7 +125,7 @@ class FeatureSection extends Container {
             cls      : ['page-live-preview'],
             reference: 'live-preview',
             value    : this.livePreviewCode
-        }]
+        }];
 
         this.getItem('portal-content-wrapper').items = value
     }

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.22.0'
+                html  : 'v8.24.0'
             }]
         }],
         /**

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

@@ -6,8 +6,6 @@ import Helix     from './parts/Helix.mjs';
 import How       from './parts/How.mjs';
 import MainNeo   from './parts/MainNeo.mjs';
 
-// import References from './parts/References.mjs';
-
 /**
  * @class Portal.view.home.MainContainer
  * @extends Neo.container.Base
@@ -28,9 +26,12 @@ class MainContainer extends Container {
          */
         domListeners: [{
             intersect(data) {
-                let id = data.path[1].id;
+                let id = data.path[0].id;
                 this.activePartsId = id;
-                Neo.getComponent(id)?.activate?.()
+
+                this.items.forEach(item => {
+                    item[item.id === id ? 'activate' : 'deactivate']?.()
+                })
             },
             scroll(event) {
                 if (event.target.cls.includes('portal-home-maincontainer')) {
@@ -54,7 +55,6 @@ class MainContainer extends Container {
             Helix,
             Colors,
             How,
-            // References,
             AfterMath
         ],
         /**
@@ -85,9 +85,9 @@ class MainContainer extends Container {
             Neo.main.addon.IntersectionObserver.register({
                 callback : 'isVisible',
                 id,
-                observe  : ['.portal-content-wrapper'],
+                observe  : ['.portal-home-content-view'],
                 root     : `#${id}`,
-                threshold: 1.0,
+                threshold: .6,
                 windowId
             })
         })

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -1,5 +1,6 @@
 import BaseContainer from './BaseContainer.mjs';
 import Button        from '../../../../../src/button/Base.mjs';
+import MagicMoveText from '../../../../../src/component/MagicMoveText.mjs';
 
 /**
  * @class Portal.view.home.parts.MainNeo
@@ -33,10 +34,26 @@ class MainNeo extends BaseContainer {
                 tag : 'h1'
             }]
         }, {
-            cls : ['neo-h2'],
-            flex: 'none',
-            html: 'Modern Enterprise-Ready JavaScript Framework',
-            tag : 'h2'
+            module   : MagicMoveText,
+            autoCycle: false,
+            cls      : ['neo-h2'],
+            colorMove: '#3E63DD',
+            flex     : 'none',
+            reference: 'magic-move',
+
+            cycleTexts: [
+                'Modern Enterprise JavaScript Framework',
+                'An Application Worker being the Orchestrator',
+                'Scalability',
+                'Extensibility',
+                'Performance',
+                'Declarative & Reactive Component Trees',
+                'Separated from Business Logic',
+                'View Controllers',
+                'State Providers',
+                'Clean Architectures',
+                'Multi Window Apps'
+            ]
         }, {
             cls : ['neo-h3'],
             flex: 'none',
@@ -66,6 +83,20 @@ class MainNeo extends BaseContainer {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    activate() {
+        this.getItem('magic-move').autoCycle = true
+    }
+
+    /**
+     *
+     */
+    deactivate() {
+        this.getItem('magic-move').autoCycle = false
+    }
 }
 
 export default Neo.setupClass(MainNeo);

package/examples/ConfigurationViewport.mjs

@@ -20,19 +20,19 @@ const themes = [
 class ConfigurationViewport extends Viewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.ConfigurationContainer'
+         * @member {String} className='Neo.examples.ConfigurationViewport'
          * @protected
          */
-        className: 'Neo.examples.ConfigurationContainer',
+        className: 'Neo.examples.ConfigurationViewport',
         /**
          * @member {String} ntype='configuration-viewport'
          * @protected
          */
         ntype: 'configuration-viewport',
         /**
-         * @member {Object} layout={ntype:'hbox', align:'stretch'}
+         * @member {String[]} baseCls=['neo-examples-configuration-viewport','neo-viewport']
          */
-        layout: {ntype: 'hbox', align: 'stretch'},
+        baseCls: ['neo-examples-configuration-viewport', 'neo-viewport'],
         /**
          * @member {Number} configItemLabelWidth=150
          */
@@ -45,6 +45,10 @@ class ConfigurationViewport extends Viewport {
          * @member {Number} configPanelFlex=1
          */
         configPanelFlex: 1,
+        /**
+         * @member {Number} configPanelMaxWidth=null
+         */
+        configPanelMaxWidth: null,
         /**
          * @member {Number} configPanelMinWidth=350
          */
@@ -56,7 +60,11 @@ class ConfigurationViewport extends Viewport {
         /**
          * @member {Number} exampleComponentFlex=1
          */
-        exampleComponentFlex: 2
+        exampleComponentFlex: 2,
+        /**
+         * @member {Object} layout={ntype:'hbox', align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'}
     }
 
     /**
@@ -114,6 +122,7 @@ class ConfigurationViewport extends Viewport {
 
         me.items = [{
             module: Container,
+            cls   : ['neo-example-container'],
             items : [me.exampleComponent],
             flex  : me.exampleComponentFlex,
             layout: 'base',
@@ -123,11 +132,16 @@ class ConfigurationViewport extends Viewport {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],
             flex  : me.configPanelFlex,
-            style : {margin: '20px', minWidth: me.configPanelMinWidth},
+
+            style: {
+                maxWidth: me.configPanelMaxWidth + 'px',
+                margin  : '20px',
+                minWidth: me.configPanelMinWidth + 'px'
+            },
 
             headers: [{
+                cls  : ['neo-configuration-header-toolbar'],
                 dock : 'top',
-                style: {borderLeft:0, borderRight:0, borderTop:0},
                 items: [{
                     ntype: 'label',
                     text : 'Configuration'
@@ -145,7 +159,6 @@ class ConfigurationViewport extends Viewport {
             items: [{
                 module: Container,
                 layout: {ntype: 'vbox', align: null},
-                style : {overflowY: 'auto', padding: '10px'},
                 cls   : ['neo-configuration-panel-body'],
                 itemDefaults: {
                     clearToOriginalValue: true,

package/examples/ServiceWorker.mjs

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

package/examples/component/magicmovetext/MainContainer.mjs

@@ -0,0 +1,92 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MagicMoveText         from '../../../src/component/MagicMoveText.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.component.magicmovetext.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.magicmovetext.MainContainer',
+        configItemLabelWidth: 150,
+        configItemWidth     : 250,
+        configPanelMaxWidth : 300,
+        configPanelMinWidth : 300,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me                 = this,
+            {exampleComponent} = me;
+
+        return [{
+            module   : CheckBox,
+            checked  : exampleComponent.autoCycle,
+            labelText: 'autoCycle',
+            listeners: {change: me.onConfigChange.bind(me, 'autoCycle')}
+        }, {
+            module   : NumberField,
+            clearable: false,
+            labelText: 'autoCycleInterval',
+            listeners: {change: me.onConfigChange.bind(me, 'autoCycleInterval')},
+            maxValue : 10000,
+            minValue : 0,
+            stepSize : 1000,
+            style    : {marginTop: '10px'},
+            value    : exampleComponent.autoCycleInterval
+        }, {
+            module   : TextField,
+            labelText: 'colorFadeIn',
+            listeners: {change: me.onConfigChange.bind(me, 'colorFadeIn')},
+            value    : exampleComponent.colorFadeIn
+        }, {
+            module   : TextField,
+            labelText: 'colorFadeOut',
+            listeners: {change: me.onConfigChange.bind(me, 'colorFadeOut')},
+            value    : exampleComponent.colorFadeOut
+        }, {
+            module   : TextField,
+            labelText: 'colorMove',
+            listeners: {change: me.onConfigChange.bind(me, 'colorMove')},
+            value    : exampleComponent.colorMove
+        }, {
+            module   : TextField,
+            clearable: false,
+            labelText: 'fontFamily',
+            listeners: {change: me.onConfigChange.bind(me, 'fontFamily')},
+            value    : exampleComponent.fontFamily,
+            width    : 280
+        }, {
+            module   : NumberField,
+            clearable: false,
+            labelText: 'transitionTime',
+            listeners: {change: me.onConfigChange.bind(me, 'transitionTime')},
+            maxValue : 900,
+            minValue : 50,
+            stepSize : 50,
+            value    : exampleComponent.transitionTime
+        }]
+    }
+
+    createExampleComponent() {
+        return {
+            module: MagicMoveText,
+            height: 100,
+            width : 450,
+
+            cycleTexts: [
+                'Magic Move',
+                'Move characters like magic',
+                'Animate between strings',
+                'Just like that',
+                'Simple to use',
+                'Would you use it?'
+            ]
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/component/magicmovetext/app.mjs

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

package/examples/component/magicmovetext/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 Magic Move - Text</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/magicmovetext/neo-config.json

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

package/examples/grid/bigData/GridContainer.mjs

@@ -1,6 +1,8 @@
 import BaseGridContainer from '../../../src/grid/Container.mjs';
 import MainStore         from './MainStore.mjs';
 
+import * as selection from '../../../src/selection/grid/_export.mjs';
+
 /**
  * @class Neo.examples.grid.bigData.GridContainer
  * @extends Neo.grid.Container
@@ -33,6 +35,7 @@ class GridContainer extends BaseGridContainer {
          * @member {Object} viewConfig
          */
         viewConfig: {
+            selectionModel: selection.CellModel, // todo: remove after #6491 is resolved
             bufferColumnRange: 3,
             bufferRowRange   : 5
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.22.0",
+    "version": "8.24.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -61,7 +61,7 @@
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.5.2",
+        "postcss": "^8.5.3",
         "sass": "^1.85.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -27,6 +27,24 @@
         min-width       : 240px;
     }
 
+    .neo-magic-move-text {
+        background-color: transparent;
+        color           : #000;
+        font-size       : 2.5rem;
+        height          : 2em;
+        letter-spacing  : -0.02em;
+        line-height     : 1.2em;
+        width           : 90%;
+
+        .neo-content {
+            font-size: 2.5rem;
+        }
+
+        .neo-measure-element-wrapper {
+            letter-spacing: -0.02em;
+        }
+    }
+
     .neo-github {
         background-color: #fff;
     }
@@ -79,6 +97,10 @@
             margin: 1rem 2rem;
         }
 
+        .neo-magic-move-text {
+            height: 3.5em;
+        }
+
         .vector {
             height: 17vw;
         }
@@ -106,6 +128,14 @@
             font-size: 1.15rem;
         }
 
+        .neo-magic-move-text {
+            height: 3.5em;
+
+            .neo-content {
+                font-size: 2rem;
+            }
+        }
+
         .vector {
             height: 70px;
             width : 70px;

package/resources/scss/src/component/MagicMoveText.scss

@@ -0,0 +1,39 @@
+.neo-magic-move-text {
+    --neo-transition-time: 500ms;
+
+    background-color: #000;
+    color           : #fff;
+    font-size       : 30px;
+    font-weight     : bold;
+
+    .neo-content {
+        align-items    : center;
+        display        : flex;
+        height         : 100%;
+        justify-content: center;
+        position       : relative;
+        width          : 100%;
+
+        .neo-char {
+            position  : absolute;
+            transition:
+                    color   0.2s ease-out,
+                    left    var(--neo-transition-time) ease-out,
+                    opacity var(--neo-transition-time) ease-out,
+                    top     var(--neo-transition-time) ease-out;
+        }
+    }
+
+    .neo-measure-element-wrapper {
+        align-items    : center;
+        display        : flex;
+        justify-content: center;
+        left           : -5000px;
+        position       : absolute;
+        top            : -5000px;
+    }
+
+    .neo-measure-element {
+        position: relative;
+    }
+}

package/resources/scss/src/examples/ConfigurationViewport.scss

@@ -0,0 +1,27 @@
+.neo-examples-configuration-viewport {
+    transition: width .5s ease-in-out;
+
+    @media (max-width: 450px) {
+        overflow-y: auto;
+
+        .neo-example-container {
+            flex: none !important;
+        }
+
+        &.neo-flex-container {
+            &.neo-flex-direction-row {
+                flex-direction: column;
+            }
+        }
+    }
+
+    .neo-configuration-header-toolbar {
+        border       : 0;
+        border-bottom: 1px solid var(--panel-border-color);
+    }
+
+    .neo-configuration-panel-body {
+        overflow-y: auto;
+        padding   : 10px;
+    }
+}

package/src/DefaultConfig.mjs

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