neo.mjs 6.8.2 → 6.9.0

package/resources/data/learnneo/content.json

@@ -0,0 +1,27 @@
+{
+    "data": [{
+        "id"      : 1,
+        "isLeaf"  : true,
+        "name"    : "Why neo.mjs",
+        "parentId": null,
+        "path"    : "whyneo.md"
+    }, {
+        "id"      : 2,
+        "isLeaf"  : false,
+        "name"    : "Class Definitions and Config",
+        "parentId": null,
+        "path"    : null
+    }, {
+        "id"      : 3,
+        "isLeaf"  : false,
+        "name"    : "Class Basics",
+        "parentId": 2,
+        "path"    : null
+    }, {
+        "id"      : 4,
+        "isLeaf"  : true,
+        "name"    : "Classes, Properties, and Methods",
+        "parentId": 3,
+        "path"    : null
+    }]
+}

package/resources/data/learnneo/pages/whyneo.md

@@ -0,0 +1,76 @@
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<div type="expander" caption="Multi-Threaded">
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers. 
+Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
+has four threads:
+<ol>
+<li>The _main_ thread, where DOM updates are applied
+<li>An _application_ web-worker where normal application locic is run
+    <li>A _data_ web-worker were HTTP and socket calls are run
+<li>A _view_ web-worker that manages delta updates
+</ol>
+</div>
+
+<div type="expander" caption="Extreme Speed">
+<p>
+The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
+</p>
+<p>
+By contrast, other JavaScript frameworks run in a single thread. That means 
+in a typical framework all business logic, data handling, and DOM rendering compete for 
+CPU reasources.
+</p>
+<p>
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+</p>
+<p>
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+</p>
+</div>
+
+<div type="expander" caption="Quick Application Development">
+<p>
+Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
+changes. This makes it easy to handle value validation and transformation, and react to changes. 
+</p>
+<p>
+Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
+bindable data. For example, if two components are bound to the same propery, a change to the 
+property will automatically be applied to both components.
+</p>
+</div>
+
+<div type="expander" caption="Multi-Window Applications">
+<p>
+Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
+application run in multiple browser windows; those windows could be moved to multiple monitors.
+</p>
+<p>
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+</p>
+</div>
+
+<div type="expander" caption="Open-Source and Standards-Based">
+<p>
+Neo.mjs is an open-source library. Features needed for the community can be added to the
+library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
+all Neo.mjs classes can be extended.
+</p>
+<p>
+Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
+syntax, and there's no need for special pre-compilers or WebPack modules.
+That means fewer dependencies and easier configuration. Furthermore, the use of
+standard JavaScript makes debugging easier: any statement you write while developing your
+applcation can also be run in the debugging console.
+</p>
+</div>

package/resources/scss/src/apps/route/CenterContainer.scss

@@ -0,0 +1,29 @@
+.route {
+    
+    background-color: white;
+
+    .route_center {
+
+        max-width: 95%;
+
+        margin-left:  20px;
+        margin-right: 20px;
+        margin-top: 0px;
+        margin-bottom: 10px;
+
+        border-top-width: .5px;
+        border-top-color: #757575;
+        border-top-style: solid;
+     
+        border-bottom-width: .5px;
+        border-bottom-color: #757575;
+        border-bottom-style: solid;
+
+        .route_card_simple_page {
+            text-align: center;
+        }
+    
+    }
+
+
+} 

package/resources/scss/src/apps/route/HeaderContainer.scss

@@ -0,0 +1,122 @@
+.route {
+    .route_header {
+        height: 242px;
+    }
+
+    .center {
+        display: inline-block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
+    .centerPanel {
+        margin-left: auto;
+        margin-right: auto;
+        width: auto;
+        min-height: 50px;
+    }
+
+    .headline-caption {
+        color: #535353;
+        font-family: 'Georgia', 'Times New Roman', serif;
+        font-size: 32px;
+        font-weight: normal;
+        text-align: center;
+        margin-top: 32px;
+        max-height: 70px;
+    }
+
+    .route_buttonbar {
+        min-height: 70px;
+    }
+
+    .route_button {
+        height: 50px;
+        min-width: 150px;
+        border: none;
+        margin-left: 10px;
+        float: left;
+
+        .neo-button-text {
+            color: #535353;
+            font-family: 'Georgia', 'Times New Roman', serif !important;
+            font-weight: normal;
+            font-size: 14px;
+            text-align: center;
+            text-transform: none;
+
+        }
+    }
+
+    .route_button_selected {
+        border-bottom: 1px;
+        border-bottom-style: solid;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+
+    .iconTischtennis {
+        background: url('../../../../../../resources/images/route/tischtennis_40.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconFussball {
+        margin-top: 4px !important;
+        background: url('../../../../../../resources/images/route/fussball_38.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 26px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconLeichtathletik {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/leichtathletik_37.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconSchach {
+        background: url('../../../../../../resources/images/route/schach_17.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        width: 17px;
+        height: 28px;
+
+    }
+
+    .iconLogo {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/logo.jpg');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+    .iconBogen {
+        margin-top: 2px !important;
+        background: url('../../../../../../resources/images/route/bogen.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 30px;
+        width: 32px;
+        height: 32px;
+
+    }
+
+}

package/resources/scss/src/apps/route/MainView.scss

@@ -0,0 +1,3 @@
+.route{
+    background-color: yellow;
+}

package/resources/scss/src/apps/route/MetaContainer.scss

@@ -0,0 +1,44 @@
+.route {
+    .route_meta {
+        height: 100px !important;
+        margin: 5px;
+        padding: 25px;
+        border-style: solid;
+    }
+    .route_meta_center {
+        display: inline-block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50%;
+    }
+
+    .route_meta_color {
+        background-color: lightblue;
+    }
+
+    .route_meta_button_grant{
+        height: 50px;
+        min-width: 150px;
+        margin: 0px;
+        border: 0px;
+        float: left;
+        background-color: lightgreen;        
+        margin-left: 5px;
+        
+    }
+
+    .route_meta_button_grant_selected{
+        background-color: greenyellow !important;
+    }
+
+    .route_meta_button_remove{
+        height: 50px;
+        min-width: 150px;
+        margin: 0px;
+        border: 0px;
+        float: left;
+        background-color: lightcoral;        
+        margin-left: 50px;
+    }
+
+}

package/resources/scss/src/apps/route/_all.scss

@@ -0,0 +1 @@
+

package/resources/scss/src/form/field/Picker.scss

@@ -4,7 +4,6 @@
 
         .neo-textfield-input {
             cursor        : pointer;
-            pointer-events: none;
             user-select   : none;
         }
     }

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -1,7 +1,19 @@
 import DefaultConfig from './DefaultConfig.mjs';
 
 const configSymbol = Symbol.for('configSymbol'),
-      getSetCache  = Symbol('getSetCache');
+      getSetCache  = Symbol('getSetCache'),
+      typeDetector = {
+        function: (item) => {
+            if (item.prototype?.constructor.isClass) {
+                return 'NeoClass'
+            }
+        },
+        object: (item) => {
+            if (item.constructor.isClass && item instanceof Neo.core.Base) {
+                return 'NeoInstance'
+            }
+        }
+    };
 
 /**
  * The base module to enhance classes, create instances and the Neo namespace
@@ -375,7 +387,7 @@ Neo = globalThis.Neo = Object.assign({
             const value = source[key];
 
             if (Neo.typeOf(value) === 'Object') {
-                target[key] = Neo.merge(target[key], value);
+                target[key] = Neo.merge(target[key] || {}, value);
             } else {
                 target[key] = value;
             }
@@ -492,18 +504,7 @@ Neo = globalThis.Neo = Object.assign({
             return null
         }
 
-        return {
-            function: () => {
-                if (item.prototype?.constructor.isClass) {
-                    return 'NeoClass'
-                }
-            },
-            object: () => {
-                if (item.constructor.isClass && item instanceof Neo.core.Base) {
-                    return 'NeoInstance'
-                }
-            }
-        }[typeof item]?.() || item.constructor.name
+        return typeDetector[typeof item]?.(item) || item.constructor.name
     }
 }, Neo);
 

package/src/button/Base.mjs

@@ -51,7 +51,7 @@ class Base extends Component {
         editRoute: true,
         /**
          * Shortcut for domListeners={click:handler}
-         * A string based value assumes that the handlerFn lives inside a ComponentController
+         * A string based value assumes that the handlerFn lives inside a controller.Component
          * @member {Function|String|null} handler_=null
          */
         handler_: null,
@@ -487,7 +487,7 @@ class Base extends Component {
     onClick(data) {
         let me = this;
 
-        me.handler?.call(me.handlerScope || me, data);
+        me.callback(me.handler, me.handlerScope || me, [data]);
 
         me.menu            && me.toggleMenu();
         me.route           && me.changeRoute();

package/src/component/Base.mjs

@@ -302,11 +302,17 @@ class Base extends CoreBase {
          */
         theme_: null,
         /**
-         * Add tooltip config objects
+         * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
-         * @member {Array|Object} tooltips_=null
+         *
+         * By default, a single, shared Tooltip instance is used for all widgets which request
+         * a tooltip. It reconfigures itself from the widget's definition just before showing.
+         *
+         * If a widget needs its own instance for any reason, inslude the property `ownInstance : true`
+         * in the tooltip config object.
+         * @member {Object|String} tooltip_=null
          */
-        tooltips_: null,
+        tooltip_: null,
         /**
          * Add 'primary' and other attributes to make it an outstanding design
          * @member {String|null} ui_=null
@@ -771,21 +777,21 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered after the tooltips config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
+     * Triggered after the tooltip config got changed
+     * @param {Object|String} value
+     * @param {Object|String} oldValue
      * @protected
      */
-    afterSetTooltips(value, oldValue) {
-        if (value) {
-            let me = this;
+    afterSetTooltip(value, oldValue) {
+        oldValue?.destroy();
 
+        if (value) {
             if (Neo.ns('Neo.tooltip.Base')) {
-                me.createTooltips(value)
+                this.createTooltip(value);
             } else {
-                import('../tooltip/Base.mjs').then((module) => {
-                    me.createTooltips(value)
-                })
+                import('../tooltip/Base.mjs').then(() => {
+                    this.createTooltip(value);
+                });
             }
         }
     }
@@ -1129,24 +1135,6 @@ class Base extends CoreBase {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
-    /**
-     * Triggered before the style config gets changed.
-     * @param {Object} value
-     * @param {Object} oldValue
-     * @returns {Object}
-     * @protected
-     */
-    beforeSetStyle(value, oldValue) {
-        let me = this;
-
-        if (typeof value === 'object') {
-            // merge the incoming style specification into the configured default
-            value = Neo.merge(Neo.merge({}, me.constructor.config.style), value)
-        }
-
-        return value
-    }
-
     /**
      * Changes the value of a vdom object attribute or removes it in case it has no value
      * @param {String} key
@@ -1167,31 +1155,31 @@ class Base extends CoreBase {
 
     /**
      * Creates the tooltip instances
-     * @param {Array|Object} value
+     * @param {Object|String} value
      * @protected
      */
-    createTooltips(value) {
-        if (!Array.isArray(value)) {
-            value = [value];
+    createTooltip(value) {
+        if (typeof value === 'string') {
+            value = {
+                text : value
+            };
         }
 
-        let me       = this,
-            tooltips = [],
-            tip;
-
-        value.forEach(item => {
-            // todo: check for existing tooltips
+        let me = this;
 
-            tip = Neo.create('Neo.tooltip.Base', {
+        if (value.ownInstance) {
+            me._tooltip = Neo.create('Neo.tooltip.Base', {
+                ...value,
                 appName    : me.appName,
-                componentId: me.id,
-                ...item
+                componentId: me.id
             });
-
-            tooltips.push(tip)
-        });
-
-        me._tooltips = tooltips // silent update
+        }
+        else {
+            me._tooltip = value;
+            Neo.tooltip.Base.createSingleton(me.app);
+            me.addCls('neo-uses-shared-tooltip');
+            me.update();
+        }
     }
 
     /**
@@ -1665,7 +1653,10 @@ class Base extends CoreBase {
         // does not clone existing Neo instances
         me._vdom = Neo.clone(vdom, true, true);
 
-        me[Neo.isEmpty(config.style) ? '_style' : 'style'] = config.style;
+        if (config.style) {
+            // If we are passed an object, merge it with the class's own style
+            me.style = Neo.typeOf(config.style) === 'Object' ? { ...config.style, ...me.constructor.config.style } : config.style;
+        }
 
         me.wrapperStyle = Neo.clone(config.wrapperStyle, false);
 

package/src/container/Base.mjs

@@ -8,6 +8,8 @@ import LayoutVBox from '../layout/VBox.mjs';
 import Logger     from '../util/Logger.mjs';
 import NeoArray   from '../util/Array.mjs';
 
+const byWeight = ({ weight : lhs = 0 }, { weight : rhs = 0 }) => lhs - rhs;
+
 /**
  * @class Neo.container.Base
  * @extends Neo.component.Base
@@ -33,10 +35,33 @@ class Base extends Component {
          */
         itemDefaults_: null,
         /**
-         * An array of config objects|instances|modules for each child component
+         * An array or an object of config objects|instances|modules for each child component
          * @member {Object[]} items_=[]
          * @example
          * import Button      from '../button/Base.mjs';
+         * import Toolbar     from '../toolbar/Base.mjs';
+         *
+         * let myButton = Neo.create(Button, {
+         *     text: 'Button1'
+         * });
+         *
+         * Neo.create(Toolbar, {
+         *     //...
+         *     items: {
+         *         buttonRef : {
+         *             ntype: 'button',   // by ntype
+         *             text : 'Button 2'
+         *         },
+         *         secondRef : {
+         *             module: Button,    // by imported module
+         *             text  : 'Button 3'
+         *         }
+         *     }
+         * });
+         *
+         * or
+         * @example
+         * import Button      from '../button/Base.mjs';
          * import MyRedButton from 'myapp/MyRedButton.mjs';
          * import Toolbar     from '../toolbar/Base.mjs';
          *
@@ -192,6 +217,36 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Convert items object to an array for onward storage as _items
+     * @param {Object|Object[]} value
+     * @param {Object|Object[]} oldValue
+     * @returns {Object[]}
+     * @protected
+     */
+     beforeSetItems(value, oldValue) {
+        if (Neo.typeOf(value) === 'Object') {
+            const result = [];
+
+            let hasWeight;
+
+            for (const ref in value) {
+                const item = value[ref]
+
+                item.reference = ref;
+                result.push(item);
+                hasWeight ||= ('weight' in item);
+            }
+
+            if (hasWeight) {
+                result.sort(byWeight);
+            }
+            value = result;
+        }
+
+        return value;
+    }
+
     /**
      * @param {Object|String} value
      * @param {Object|String|Neo.layout.Base} oldValue
@@ -446,7 +501,9 @@ class Base extends Component {
         }
 
         if (config.items) {
-            me._items = Neo.clone(config.items, true, true);
+            // If we are passed an object, merge the class's own items object into it
+            me.items = Neo.typeOf(config.items) === 'Object' ?
+                Neo.merge(Neo.clone(me.constructor.config.items), config.items) : config.items;
             delete config.items
         }