neo.mjs 8.23.0 → 8.25.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-21",
+      "datePublished": "2025-02-26",
       "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.23.0'
+                html  : 'v8.25.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/ServiceWorker.mjs

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

package/examples/component/magicmovetext/MainContainer.mjs

@@ -74,6 +74,8 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return {
             module: MagicMoveText,
+            height: 100,
+            width : 450,
 
             cycleTexts: [
                 'Magic Move',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.23.0",
+    "version": "8.25.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -62,7 +62,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.85.0",
+        "sass": "^1.85.1",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.98.0",

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/button/Base.scss

@@ -106,9 +106,9 @@
     }
 
     &:active {
-        background-color: var(--button-background-color-active) !important;
-        background-image: none !important;
-        border          : var(--button-border-active) !important;
+        background-color: var(--button-background-color-active);
+        background-image: none;
+        border          : var(--button-border-active);
 
         .neo-button-glyph {
             color: var(--button-glyph-color-active);

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

@@ -1,42 +1,36 @@
 .neo-magic-move-text {
-    --neo-height         : 100px;
     --neo-transition-time: 500ms;
-    --neo-width          : 450px;
 
-    align-items     : center;
     background-color: #000;
     color           : #fff;
-    display         : flex;
     font-size       : 30px;
     font-weight     : bold;
-    height          : var(--neo-height);
-    justify-content : center;
-    width           : var(--neo-width);
 
     .neo-content {
-        height  : 100%;
-        position: relative;
-        width   : 100%;
+        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;
+                    opacity var(--neo-transition-time) ease-out,
+                    top     var(--neo-transition-time) ease-out;
         }
     }
 
     .neo-measure-element-wrapper {
         align-items    : center;
-        background-color: #000;
         display        : flex;
-        height         : var(--neo-height);
         justify-content: center;
         left           : -5000px;
         position       : absolute;
         top            : -5000px;
-        width          : var(--neo-width);
     }
 
     .neo-measure-element {

package/resources/scss/src/grid/VerticalScrollbar.scss

@@ -0,0 +1,21 @@
+.neo-grid-vertical-scrollbar {
+    bottom    : 1px;
+    opacity   : 0;
+    overflow-y: scroll;
+    position  : absolute;
+    right     : 0;
+    top       : 31px; // header-toolbar height
+    transition: opacity 1s ease-out;
+    width     : 16px;
+    z-index   : 2;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+    .neo-grid-vertical-scrollbar {
+        opacity: 1;
+    }
+}

package/src/DefaultConfig.mjs

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