neo.mjs 6.9.9 → 6.9.11

package/resources/scss/src/apps/learnneo/home/ContentTreeList.scss

@@ -0,0 +1,37 @@
+.topics-tree {
+    &.neo-tree-list {
+        .neo-treelist-collapse-all-icon {
+            .neo-treelist-menu-item-content:before {
+                content: "\f102" !important;
+            }
+        }
+
+        .neo-treelist-expand-all-icon {
+            .neo-treelist-menu-item-content:before {
+                content: "\f103" !important;
+            }
+        }
+
+        .neo-list-container {
+            .neo-list-item {
+                &.neo-list-item-leaf {
+                    .neo-list-item-content:before {
+                        content: none !important;
+                    }
+                }
+
+                &.neo-list-folder {
+                    .neo-list-item-content:before {
+                        content: "\f107" !important;
+                    }
+
+                    &.neo-folder-open {
+                        .neo-list-item-content:before {
+                            content: "\f106" !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/resources/scss/src/apps/learnneo/home/ContentView.scss

@@ -0,0 +1,55 @@
+.learn-content {
+    font-family: 'Open Sans';
+    font-size: 13pt;
+    letter-spacing: 1px;
+    overflow: scroll;
+    padding: 1em;
+
+    em,
+    i {
+        font-family: Palatino, "Times New Roman", serif;
+        font-size: 1.07em;
+    }
+
+    p {
+        margin: 0.5em 0em 0.7em 0em;
+    }
+
+    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 {
+        color: #c4c4c4;
+        font-family: var(--fa-style-family, "Font Awesome 6 Free");
+        font-size: 1.3em;
+        font-weight: var(--fa-style, 900);
+        margin: 0.4em 0.4em 0.4em 0;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+}

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

@@ -136,8 +136,8 @@
 }
 
 // During upload, it's a progress circle.
-// Of the upload fails, the process circle stops but remains visible
-.neo-file-upload-state-uploading, .neo-file-upload-state-upload-failed {
+// Of the upload fails, the process circle stops but remains visible //todo
+.neo-file-upload-state-uploading, .neo-file-upload-state-upload-failed, .neo-file-upload-state-error {
     .neo-file-upload-state-icon {
         background-image : conic-gradient(
             var(--fileuploadfield-progress-color) 0 var(--upload-progress),
@@ -184,8 +184,8 @@
     }
 }
 
-// If the upload or scan failed, we show an error UI and the action button cancels
-.neo-file-upload-state-upload-failed, .neo-file-upload-state-scan-failed, .neo-file-upload-field.neo-invalid {
+// If the upload or scan failed, we show an error UI and the action button cancels //todo error
+.neo-file-upload-state-upload-failed, .neo-file-upload-state-scan-failed, .neo-file-upload-field.neo-invalid, .neo-file-upload-state-error {
     --fileuploadfield-progress-color : var(--fileuploadfield-error-color);
     border-color                     : var(--fileuploadfield-error-color);
 

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

@@ -12,7 +12,7 @@
     }
 
     .neo-field-trigger {
-        border-bottom: 1px solid var(--textfield-border-color);
+        height : inherit;
     }
 
     .neo-textfield-error {

package/resources/scss/theme-neo-light/Global.scss

@@ -5,3 +5,49 @@
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
 }
+
+@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+
+h1 {
+    color           : var(--semantic-color-fg-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h1);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+
+h2 {
+    color           : var(--semantic-color-fg-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h2);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+p {
+    color           : var(--semantic-color-fg-default);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-body);
+    font-weight     : var(--core-fontweight-regular);
+    line-height     : var(--core-lineheight-paragraph);
+}
+
+// code {
+//     background-color: #ededed;
+//     border-radius   : 2px;
+//     color           : var(--semantic-color-fg-contrast);
+//     font-family     : var(--core-fontfamily-mono);
+//     font-size       : var(--core-fontsize-body);
+//     font-weight     : var(--core-fontweight-regular);
+//     line-height     : var(--core-lineheight-headline);
+//     padding         : 2px 0.3em;
+// }
+
+mark {
+    background-color: #B8FCE3;
+    color           : black;
+    padding         : 0.1em 0.2em;
+}

package/resources/scss/theme-neo-light/design-tokens/Core.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light {
+    --core-fontsize-h1             : 2.5rem;
+    --core-fontsize-h2             : 1.75rem;
+    --core-fontweight-semibold     : 600;
+    --core-fontfamily-sans         : Source Code Pro, sans;
+    --core-lineheight-headline     : 1.2;
+}

package/resources/scss/theme-neo-light/design-tokens/_all.scss

@@ -0,0 +1,4 @@
+// the import order matters
+@import "Core";
+@import "Semantic";
+@import "Component";

package/src/DefaultConfig.mjs

@@ -153,12 +153,12 @@ const DefaultConfig = {
     renderCountDeltas: false,
     /**
      * Add themes you want to use here. The first theme will get applied.
-     * @default ['neo-theme-light', 'neo-theme-dark']
+     * @default ['neo-theme-light','neo-theme-dark','neo-theme-neo-light']
      * @memberOf! module:Neo
      * @name config.themes
      * @type String[]
      */
-    themes: ['neo-theme-light', 'neo-theme-dark'],
+    themes: ['neo-theme-light', 'neo-theme-dark', 'neo-theme-neo-light'],
     /**
      * Flag for standalone Siesta module tests => prevent registerRemote worker messages
      * @default false
@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.9.9'
+     * @default '6.9.11'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.9.9'
+    version: '6.9.11'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/FileUpload.mjs

@@ -322,7 +322,8 @@ class FileUpload extends Base {
         malwareFoundInFile   : 'Malware found in file',
         pleaseCheck          : 'Please check the file and try again',
         successfullyUploaded : 'Successfully uploaded',
-        fileWasDeleted       : 'File was deleted'
+        fileWasDeleted       : 'File was deleted',
+        fileIsInAnErrorState : 'File is in an error state'
     }
 
     /**
@@ -565,6 +566,7 @@ class FileUpload extends Base {
             // saved, so we just go back to ready state
             case 'upload-failed':
             case 'scan-failed':
+            case 'error':
                 me.clear();
                 me.state = 'ready';
                 break;
@@ -729,7 +731,12 @@ class FileUpload extends Base {
             case 'deleted':
                 status.innerHTML = me.fileWasDeleted;
                 isChangeEventNeeded = true;
-        }
+                break;
+            case 'error':
+                status.innerHTML = me.fileIsInAnErrorState;
+                me.error = me.pleaseCheck;
+                isChangeEventNeeded = true;
+            }
 
         if (isChangeEventNeeded && oldValue !== undefined) {
             me.fireChangeEvent(me.file)

package/src/form/field/TextArea.mjs

@@ -32,7 +32,7 @@ class TextArea extends Text {
          * any height of text. Bounds can be set using the `minHeight` and `maxHeight` settings.
          * @member {Boolean} autoGrow=false
          */
-        autoGrow : false,
+        autoGrow_ : false,
         /**
          * @member {String[]} baseCls=['neo-textarea','neo-textfield']
          */
@@ -74,6 +74,15 @@ class TextArea extends Text {
         wrap_: null
     }
 
+    afterSetAutoGrow(autoGrow) {
+        this.syncAutoGrowMonitor();
+
+        // Restore any configured height if autoGrow turned off
+        if (!autoGrow) {
+            this.afterSetHeight(this._height);
+        }
+    }
+
     /**
      * Triggered after the cols config got changed
      * @param {Number|null} value
@@ -102,7 +111,7 @@ class TextArea extends Text {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        this.syncAutoGrowHeight();
+        this.syncAutoGrowMonitor();
     }
 
     /**
@@ -143,7 +152,6 @@ class TextArea extends Text {
         }
 
         super.afterSetValue(value, oldValue);
-        this.syncAutoGrowHeight();
     }
 
     /**
@@ -167,37 +175,14 @@ class TextArea extends Text {
         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();
+    async syncAutoGrowMonitor() {
+        if (this.mounted) {
+            // Delegate monitoring of sizes to the VDOM thread.
+            Neo.main.DomAccess.monitorAutoGrow({
+                appName  : this.appName,
+                id       : this.getInputElId(),
+                autoGrow : this.autoGrow
+            });
         }
     }
 }

package/src/main/DomAccess.mjs

@@ -102,6 +102,7 @@ class DomAccess extends Base {
                 'getBoundingClientRect',
                 'getScrollingDimensions',
                 'measure',
+                'monitorAutoGrow',
                 'scrollBy',
                 'scrollIntoView',
                 'scrollTo',
@@ -582,6 +583,39 @@ class DomAccess extends Base {
         return value;
     }
 
+    /**
+     * Checks the overflow status of a TextAreaField's <textarea> element and updates the
+     * height so that there is never a vertical scrollbar.
+     * @param {Object} data 
+     */
+    async monitorAutoGrow(data) {
+        const
+            me     = this,
+            target = data.subject = me.getElement(data.id);
+
+        // We need to update the height on every input event is autoGrow is truthy.
+        target[data.autoGrow ? 'addEventListener' : 'removeEventListener']('input', me.monitorAutoGrowHandler);
+
+        // Fix the height up immediately too
+        if (data.autoGrow) {
+            me.monitorAutoGrowHandler({
+                target
+            });
+        }
+    }
+
+    monitorAutoGrowHandler({ target }) {
+        const
+            { style }              = target,
+            { style : inputStyle } = target.closest('.neo-textarea');
+
+        // Measure the scrollHeight when forced to overflow, then set height to encompass the scrollHeight
+        style.height = style.minHeight = 0;
+        inputStyle.setProperty('--textfield-input-height', `${target.scrollHeight + 5}px`);
+        inputStyle.setProperty('height', '');
+        style.height = style.minHeight = '';
+    }
+
     /**
      * @param {Array} mutations
      */

package/test/components/files/form/field/Select.mjs

@@ -30,6 +30,6 @@ StartTest(t => {
                     }
                 }
             })
-        }, 300)
+        }, 1000)
     });
 });