neo.mjs 8.21.2 → 8.23.0

package/.github/CODEBASE_OVERVIEW.md

@@ -50,4 +50,3 @@ Build with :heart: in Germany
 <br>
 <br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/CODE_OF_CONDUCT.md

@@ -85,4 +85,3 @@ https://www.contributor-covenant.org/faq. Translations are available at https://
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/CONCEPT.md

@@ -461,4 +461,3 @@ items: [{
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/GETTING_STARTED.md

@@ -53,4 +53,3 @@ These versions also work in Firefox & Safari
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/NEOMJS_HISTORY.md

@@ -26,4 +26,3 @@ Tobi
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/STORY.md

@@ -73,4 +73,3 @@ For more input on what you can do using neo.mjs, please take a look at the guide
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/.github/VISION.md

@@ -1,142 +1,18 @@
 # The neo.mjs vision
 
-At this point I (Tobias) can not commit to adding dates to the planned items.
-After investing 1.5 years of my full and unpaid working time I am in need to make up on the financial side of things.
+At this point I (Tobias) can not commit to adding dates to planned items.
+After investing 5 years of my full and unpaid working time I am in need to make up on the financial side of things.
 So as long as the project is not properly funded, I can only afford to continue working on it in my spare time.
 
 To speed up the current development there are two options:
 1. Help promoting neo.mjs or jump in as a contributor (see <a href="../CONTRIBUTING.md">Contributing</a>)
 2. Jump in as a sponsor to ensure I can spend more time on the neo.mjs coding side (see <a href="../BACKERS.md">Sponsors & Backers</a>)
 
-The following items are ***not*** ordered by priority. In case certain topics are important to you, please use the issues
-tracker to create an awareness (like / comment on current tickets or create new ones as needed).
 
 Thanks for your support!
 
-* Real World app version 2
-    1. Version 1 is definitely worth a look to see how to craft custom components and connect to an API,
-    but it is not the best starting point to see how to craft an neo.mjs app. Since the requirement was to use a given
-    Bootstrap theme, only component.Base is in use (since more advanced components require a neo.mjs CSS theme).
-    At this point I recommend to take a look at the Docs app to learn how to craft an neo.mjs app.
-    2. Version 2 is intended to fill this gap and will not use the Bootstrap based theme.
-    3. This allows us to use the full range of neo.mjs components (Toolbar, Button, List, TabContainer, Gallery, Helix, etc.)
-    4. Once this app is finished, it will be the perfect starting point to learn how to use neo.mjs,
-    so right now this item has the highest priority for me.
-    5. The RW2 app requires a 3rd neo.mjs theme => based on the conduit styles
-    6. Add the ability to switch themes inside the app
-* Drag & Drop (see <a href="https://github.com/neomjs/neo/issues/16">#16</a>)
-    1. This ticket is definitely an epic, since DD operations happen inside the main thread, while the handlers will
-    live inside the app thread.
-    2. Once DD is in place, we can create a real slider component (see <a href="https://github.com/neomjs/neo/issues/18">#18</a>)
-    3. We can create Dialogs (Windows), which can get moved and resized (see <a href="https://github.com/neomjs/neo/issues/15">#15</a>)
-    4. We can create sortable tabs (see <a href="https://github.com/neomjs/neo/issues/23">#23</a>)
-* Docs App version 2
-    1. I am not planning to re-create the existing app, but enhance it with more features:
-    2. Support for showing mixins inside the class views (<a href="https://github.com/neomjs/neo/issues/99">#99</a>)
-    3. Add tooltips (especially for the Configs, Methods & Events buttons => navigation shortcut)
-    4. Expandable class member items (add the ability to expand or collapse items to make the list shorter)
-    5. Writing more guides
-    6. Enhance the example views:
-        1. The example components should get shown inside a tabContainer: first tab containing the component,
-        second tab a source code view of the example
-        2. It should be possible to export the current configs (e.g. 3rd tab, configs as JSON)
-        3. The configuration container should be collapsible (using a sliding animation)
-        4. Add a second tab to the config area to show theme css vars and make them changeable
-    7. class member inheritance: when overriding a config or assigning a value to a parent one, the parent config
-    should get listed (including its initial value)
-* Build Scripts
-    1. The current scripts work fine inside the neo repository. Since neo.mjs can now get used as a node module,
-    enhancements feel necessary.
-        1. An npx create-app script (see <a href="https://github.com/neomjs/neo/issues/90">#90</a>)
-        2. The build-my-apps scripts should work as well, when used outside of the repo (manually hacked this into the
-        Real World app version 1)
-* Mobile Support
-    1. Add touch based events (swipe, long-tap, etc.) to the global domListeners
-    2. Split the current events into desktop & mobile and add a Neo.config to choose which ones to use
-    3. Use the events based on the browser feature detection
-    4. Create new components and adjust current ones to better work on mobile
-* Mobile Docs App
-    1. Create a new UI or make the current one responsive
-* Make the Data worker more meaningful
-    1. Right now, the data worker only executes the XHR requests
-    2. Rich originally planned to let stores live inside this thread, but this would create a lot more async logic inside
-    the app thread, plus it does not make sense for stores with little data
-    3. What should be possible: for remote stores which need to parse the data getting back from an API, these transformations
-    should happen inside the app thread (like a data reader)
-    4. Remote stores with local sorting: this sorting could happen inside the data worker as well
-* Data Package version 2
-    1. The collection class is already very powerful (needs some polishing though). For the first version of the data
-    package, stores were extending collection.Base. Afterwards records were introduced (not instances of data.Model,
-    but a super lightweight extension of a JS Object). At this point, stores should no longer extend a collection,
-    but use one instance instead (e.g. a collection config).
-    2. More polishing of Sorters & Filters & add the ability for stores to sort & filter per remote (adding params to
-    each request).
-    3. Enhance the API for stores: when using a collection, several methods need to get bound to the collection, but
-    ensuring that data objects get transformed into records.
-    4. use data fields: each store should exactly use one instance of data.Model. Inside a model, you can define fields.
-    Fields should either be a singleton or a class with static methods. We need to provide parsing methods, e.g. toString()
-    for a field type "String".
-* Finish the implementation for Tooltips; Rectangle utility class (see <a href="https://github.com/neomjs/neo/issues/51">#51</a>)
-* Finish the implementation for form.field.Chip (see <a href="https://github.com/neomjs/neo/issues/31">#31</a>)
-* Create a coding style guide (see <a href="https://github.com/neomjs/neo/issues/93">#93</a>)
-* Virtual Dom Engine enhancements
-    1. Add a 2nd mode where ids do get ignored (e.g. for comparing content on fixed positions like grid rows)
-    2. Add an option to specify the the tree depth to compare (e.g. only the first level for containers)
-    3. Refactor vdom.Helper: createDeltas
-* Create a buffered Grid
-    1. So far I mostly focused on table.Container. Since tables are not good for buffering (too many layout reflows),
-    it is time to pick up the grid.Container implementation again.
-    2. The grid.Container will use divs only. grids need a rowHeight config, since it has to be fixed for buffering.
-    3. Add 1-2 more rows as the visible area can show and adjust the content when scrolling (move the top row div to
-    the bottom or vice versa)
-    4. when clicking on the scrollbar, adjust the full grid cell content
-    5. add column reordering via DD (relies on the DD implementation)
-    6. add cell-editing
-    7. add action columns
-    8. add buffering for horizontal scrolling as well
-* Create a Router
-* Enable neo.mjs to run in node
-    1. There are some uses of "self", which work fine inside the main thread & inside the worker scope, but not in node
-* neo.mjs based middle-ware (see <a href="https://github.com/neomjs/neo/issues/19">#19</a>)
-* Enhance the Siesta tests to run inside a node env
-* Write more tests (Epic!)
-* main.mixins.FeatureDetection
-    1. Add meaningful checks for relevant features
-* Create a Website for the neo.mjs project
-    1. Right now, only Online Examples are in place
-    2. The examples need to support mobile
-    3. Intro Texts are needed (see <a href="https://github.com/neomjs/neo/issues/7">#7</a>)
-    4. A Logo for neo.mjs is needed 
-* Create a MarketPlace for User Extensions / Custom Components
-    1. for UX which don't fit into the framework repo
-    2. for custom themes
-    3. add the ability for developers / companies to sell their extensions vs a fee (similar to the apple app store)
-* Create a Chrome extension to make the debugging / working with neo.mjs more easy
-    1. see all created stores & their data
-    2. Access to the component manager
-    3. Ability to click on the screen and receive the closest neo.mjs component
-    4. Ability to see the full component tree of your app
-* Use SharedWorker(s)
-    1. Optional
-    2. Once Chrome supports using JS modules inside shared workers
-    3. This will allow us to create ***multi screen apps***
-    4. Imagine dragging a dialog outside of your browser tab and it appears in another one
-    
-***TL-BR***: This list is most likely not even complete.
-You don't need to be a genius in math to figure out that this is a massive amount of work.
-If I would create neo.mjs just for myself, there would be no Docs app, no Real World 1 or 2 app.
-I already put in a massive amount of time to enable you to use neo.mjs as well and I don't expect anyone to say thank
-you for doing this (although it is nice to hear :)).
-
-I would even be willing to continue this project on my own, but I would run bankrupt rather sooner than later without
-funding. So, assuming you know how the romantic idea of Open Source works, let me repeat the first part again:
-
-To speed up the current development there are two options:
-1. Help promoting neo.mjs or jump in as a contributor (see <a href="../CONTRIBUTING.md">Contributing</a>)
-2. Jump in as a sponsor to ensure I can spend more time on the neo.mjs coding side (see <a href="../BACKERS.md">Sponsors & Backers</a>)
 
 Best regards, Tobias
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/BACKERS.md

@@ -62,4 +62,3 @@ after signing a sponsor program to provide your company logo!
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/CONTRIBUTING.md

@@ -37,4 +37,3 @@ No worries, you don't need to be a guru, ninja or rockstar to support the projec
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2015 - today, Tobias Uhlig & Rich Waters
+Copyright (c) 2015 - today, Tobias Uhlig
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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>
@@ -90,4 +95,3 @@ All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/apps/portal/view/about/Container.mjs

@@ -37,7 +37,7 @@ class Container extends Base {
             picture        : 'rwaters.png',
             profileGitHub  : 'https://github.com/rwaters',
             profileLinkedIn: 'https://www.linkedin.com/in/rwaters/',
-            teamRole       : 'Co-Founder & Core Team Member'
+            teamRole       : 'Contributor'
         }, {
             module         : MemberContainer,
             location       : 'Germany',

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

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

package/apps/portal/view/services/Component.mjs

@@ -21,15 +21,6 @@ class Component extends BaseComponent {
         vdom:
         {cn: [
             {tag: 'h1', cls: ['neo-h1'], html: 'Services'},
-            {cls: ['info-block'], cn: [
-                {tag: 'h2', cls: ['neo-h2'], html: 'Weekly Workshops'},
-                {tag: 'p',  html: [
-                    'We are doing weekly workshops on Thursdays 18:30 CEST (12:30am EST) for 60m free of charge.</br>',
-                    'Ping us inside our ',
-                    '<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack Channel</a>, ',
-                    'in case you would like to join us.'
-                ].join('')},
-            ]},
             {cls: ['info-block'], cn: [
                 {tag: 'h2', cls: ['neo-h2'], html: 'Professional Trainings'},
                 {tag: 'p',  html: [

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.21.2'
+         * @member {String} version='8.23.0'
          */
-        version: '8.21.2'
+        version: '8.23.0'
     }
 
     /**

package/examples/component/magicmovetext/MainContainer.mjs

@@ -0,0 +1,90 @@
+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,
+
+            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"
+}