neo.mjs 6.9.5 → 6.9.7

package/resources/deck/whyneo.md

@@ -0,0 +1,80 @@
+
+#hi
+
+
+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/learnneo/Viewport.scss

@@ -0,0 +1,57 @@
+.learn-content {
+
+    font-size: 13pt;
+    letter-spacing: 1px;
+
+    em,
+    i {
+        font-family: Palatino, "Times New Roman", serif;
+        font-size: 1.07em;
+    }
+
+    p {
+        margin: 0em 0.5em .7em 0.5em;
+    }
+
+    padding: 0.5em;
+
+    overflow: scroll;
+
+    details summary {
+        cursor: pointer;
+        transition: margin 300ms ease-out;
+    }
+
+    details[open] {
+        margin-bottom: 2em;
+    }
+
+    details summary {
+        list-style: none;
+        color: #555;
+        display: flex;
+        /* also removes the list marker */
+        align-items: center;
+        font-weight: bold;
+    }
+
+    details summary::before {
+        content: "\f055";
+    }
+
+    details[open] summary::before {
+        content: "\f056";
+    }
+
+    details summary::before {
+        font-family: var(--fa-style-family, "Font Awesome 6 Free");
+        font-weight: var(--fa-style, 900);
+        font-size: 1.3em;
+        margin: .4em;
+        color: #c4c4c4;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+}

package/resources/scss/src/component/Base.scss

@@ -1,27 +1,27 @@
-.neo-floating {
-    top              : -10000px;
-    left             : -10000px;
-    position         : fixed;
-    z-index          : 1000;
-    background-color : var(--neo-background-color);
-}
-
-// Shadow at the top
-.neo-aligned-top {
-    box-shadow : 0px -2px 10px rgba(0, 0, 0, 0.3);
-}
-
 // Shadow at the bottom
 .neo-aligned-bottom {
-    box-shadow : 0px 2px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-bottom-box-shadow);
 }
 
 // Shadow at the left
 .neo-aligned-left {
-    box-shadow : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-left-box-shadow);
 }
 
 // Shadow at the right
 .neo-aligned-right {
-    box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-right-box-shadow);
+}
+
+// Shadow at the top
+.neo-aligned-top {
+    box-shadow: var(--aligned-top-box-shadow);
+}
+
+.neo-floating {
+    background-color: var(--neo-background-color);
+    left            : -10000px;
+    position        : fixed;
+    top             : -10000px;
+    z-index         : 1000;
 }

package/resources/scss/theme-dark/component/Base.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-dark {
+    --aligned-bottom-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    --aligned-left-box-shadow  : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-right-box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-top-box-shadow   : 0px -2px 10px rgba(0, 0, 0, 0.3);
+}

package/resources/scss/theme-dark/menu/List.scss

@@ -1,7 +1,6 @@
 :root .neo-theme-dark { // .neo-menu-list
     --menu-list-background-color              : #3c3f41;
     --menu-list-border-color                  : #2b2b2b;
-    --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;
     --menu-list-item-background-color-disabled: inherit;
     --menu-list-item-background-color-hover   : inherit;

package/resources/scss/theme-light/component/Base.scss

@@ -0,0 +1,6 @@
+:root .neo-theme-light {
+    --aligned-bottom-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    --aligned-left-box-shadow  : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-right-box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-top-box-shadow   : 0px -2px 10px rgba(0, 0, 0, 0.3);
+}

package/resources/scss/theme-light/menu/List.scss

@@ -1,7 +1,6 @@
 :root .neo-theme-light { // .neo-menu-list
     --menu-list-background-color              : #fff;
     --menu-list-border-color                  : #1c60a0;
-    --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;
     --menu-list-item-background-color-disabled: inherit;
     --menu-list-item-background-color-hover   : inherit;

package/src/DefaultConfig.mjs

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

package/src/form/field/TextArea.mjs

@@ -27,6 +27,12 @@ class TextArea extends Text {
          * @protected
          */
         ntype: 'textarea',
+        /**
+         * Set this to `true` to have the text area grow and shrink to accommodate
+         * any height of text. Bounds can be set using the `minHeight` and `maxHeight` settings.
+         * @member {Boolean} autoGrow=false
+         */
+        autoGrow : false,
         /**
          * @member {String[]} baseCls=['neo-textarea','neo-textfield']
          */
@@ -88,6 +94,17 @@ class TextArea extends Text {
         this.changeInputElKey('tag', value);
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        this.syncAutoGrowHeight();
+    }
+
     /**
      * Triggered after the resizable config got changed
      * @param {Boolean} value
@@ -126,6 +143,7 @@ class TextArea extends Text {
         }
 
         super.afterSetValue(value, oldValue);
+        this.syncAutoGrowHeight();
     }
 
     /**
@@ -148,6 +166,40 @@ class TextArea extends Text {
     beforeSetWrap(value, oldValue) {
         return this.beforeSetEnumValue(value, oldValue, 'wrap', 'wrapValues');
     }
+
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    onInputValueChange(data) {
+        this.syncAutoGrowHeight();
+        super.onInputValueChange(data);
+    }
+
+    /**
+     * @protected
+     */
+    async syncAutoGrowHeight() {
+        let me = this;
+
+        if (me.mounted && me.autoGrow) {
+            const
+                inputEl = me.getInputEl(),
+                dims = await Neo.main.DomAccess.getScrollingDimensions({
+                    appName : me.appName,
+                    id      : me.getInputElId()
+                });
+
+            // We must not show the scrollbar when autoGrowing
+            inputEl.style.overflowY = 'hidden';
+
+            if (dims.scrollHeight > dims.clientHeight - 5) {
+                inputEl.height = dims.scrollHeight;
+            }
+
+            me.update();
+        }
+    }
 }
 
 Neo.applyClassConfig(TextArea);

package/src/main/DomAccess.mjs

@@ -100,6 +100,7 @@ class DomAccess extends Base {
                 'focus',
                 'getAttributes',
                 'getBoundingClientRect',
+                'getScrollingDimensions',
                 'measure',
                 'scrollBy',
                 'scrollIntoView',
@@ -459,6 +460,28 @@ class DomAccess extends Base {
         return nodeId.nodeType ? nodeId : (nodeId === 'body' || nodeId === 'document.body') ? document.body : this.getElement(nodeId);
     }
 
+    /**
+     * @param {HTMLElement|Object} data
+     * @param {String|String[]} data.id
+     * @returns {Object}
+     */
+    getScrollingDimensions(data) {
+        const me = this;
+
+        if (Array.isArray(data.id)) {
+            return data.id.map(id => me.getScrollingDimensions({ id }));
+        } else {
+            const node = data.nodeType ? data : me.getElementOrBody(data.id);
+
+            return {
+                clientWidth : node?.clientWidth,
+                clientHeight: node?.clientHeight,
+                scrollWidth : node?.scrollWidth,
+                scrollHeight: node?.scrollHeight
+            };
+        }
+    }
+
     /**
      * @param {HTMLElement} el
      * @returns {Boolean}