neo.mjs 6.9.6 → 6.9.8

package/resources/scss/theme-neo-light/tab/header/Button.scss

@@ -0,0 +1,30 @@
+:root .neo-theme-neo-light { // .neo-tab-header-button
+    --tab-button-background-color               : #fff;
+    --tab-button-background-color-active        : #ddd;
+    --tab-button-background-color-disabled      : #fff;
+    --tab-button-background-color-hover         : #fff;
+    --tab-button-background-image               : none;
+    --tab-button-background-image-bottom        : none;
+    --tab-button-background-image-left          : none;
+    --tab-button-background-image-pressed       : none;
+    --tab-button-background-image-pressed-bottom: none;
+    --tab-button-background-image-pressed-left  : none;
+    --tab-button-background-image-pressed-right : none;
+    --tab-button-background-image-right         : none;
+    --tab-button-border                         : none;
+    --tab-button-border-bottom                  : none;
+    --tab-button-border-bottom-pressed          : none;
+    --tab-button-border-pressed                 : none;
+    --tab-button-border-radius                  : 0;
+    --tab-button-gap                            : 0;
+    --tab-button-glyph-color                    : #bbb;
+    --tab-button-glyph-color-active             : #1c60a0;
+    --tab-button-glyph-color-hover              : #1c60a0;
+    --tab-button-glyph-color-pressed            : #1c60a0;
+    --tab-button-height                         : 25px;
+    --tab-button-height-pressed                 : 25px;
+    --tab-button-margin-bottom                  : 0;
+    --tab-button-padding                        : 7px 12px 6px 12px;
+    --tab-button-text-color                     : #2b2b2b;
+    --tab-button-text-transform                 : uppercase;
+}

package/resources/scss/theme-neo-light/table/Container.scss

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-table-container
+    --table-container-border-color              : #ddd;
+    --table-container-cell-background-color     : #fff;
+    --table-container-cell-background-color-even: #f2f2f2;
+    --table-container-cell-border-bottom        : 1px solid #ddd;
+    --table-container-cell-height               : 32px;
+    --table-container-cell-padding              : 2px 10px 2px;
+    --table-container-color                     : #666;
+    --table-container-header-cell-border-bottom : 1px solid #ddd;
+}

package/resources/scss/theme-neo-light/table/View.scss

@@ -0,0 +1,13 @@
+:root .neo-theme-neo-light { // .neo-table-view
+    --table-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
+    --table-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --table-cellmodel-selected-cell-color                  : #2b2b2b;
+    --table-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellmodel-selected-column-cell-color           : #2b2b2b;
+    --table-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --table-cellrowmodel-selected-cell-color               : #2b2b2b;
+    --table-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellrowmodel-selected-row-cell-color           : #2b2b2b;
+    --table-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --table-rowmodel-selected-cell-color                   : #2b2b2b;
+}

package/resources/scss/theme-neo-light/table/header/Button.scss

@@ -0,0 +1,7 @@
+:root .neo-theme-neo-light { // .neo-table-header-button
+    --table-header-button-background-color       : #5d83a7;
+    --table-header-button-background-image       : none;
+    --table-header-button-color                  : #fff;
+    --table-header-button-glyph-color            : #fff;
+    --table-header-button-ripple-background-color: #{darken(#5d83a7, 10%)};
+}

package/resources/scss/theme-neo-light/toolbar/Base.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .neo-toolbar
+    --toolbar-background-color: #fff;
+    --toolbar-padding         : 5px;
+}

package/resources/scss/theme-neo-light/tree/List.scss

@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light { // .neo-tree-list
+    --tree-list-color          : #666;
+    --tree-list-menu-item-color: #1c60a0;
+}

package/src/DefaultConfig.mjs

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

package/src/form/field/FileUpload.mjs

@@ -1,5 +1,6 @@
-import Base from '../../form/field/Base.mjs';
-import NeoArray from '../../util/Array.mjs';
+import Base         from '../../form/field/Base.mjs';
+import NeoArray     from '../../util/Array.mjs';
+import StringUtil   from '../../util/String.mjs';
 
 const
     sizeRE           = /^(\d+)(kb|mb|gb)?$/i,
@@ -404,15 +405,16 @@ class FileUpload extends Base {
             const
                 file     = files.item(0),
                 pointPos = file.name.lastIndexOf('.'),
-                type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '';
+                type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '',
+                escapedFileName = StringUtil.escapeHtml(file.name);
 
             if (me.types && !types[type]) {
-                body.cn[0].innerHTML = file.name;
+                body.cn[0].innerHTML = escapedFileName;
                 body.cn[1].innerHTML = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
                 me.error = me.pleaseUseTheseTypes?.replace('{allowedFileTypes}', Object.keys(types).join(' .'))
             }
             else if (file.size > me.maxSize) {
-                body.cn[0].innerHTML = file.name;
+                body.cn[0].innerHTML = escapedFileName;
                 body.cn[1].innerHTML = me.formatSize(file.size);
                 me.error = me.fileSizeMoreThan?.replace('{allowedFileSize}', String(me._maxSize).toUpperCase());
             }
@@ -444,8 +446,8 @@ class FileUpload extends Base {
         // We have to wait for the DOM to have changed, and the action button to be visible
         await new Promise(resolve => setTimeout(resolve, 100));
         me.focus(me.vdom.cn[2].id);
-
-        me.vdom.cn[1].cn[0].innerHTML = file.name;
+        
+        me.vdom.cn[1].cn[0].innerHTML = StringUtil.escapeHtml(file.name);
         me.update();
         me.state = 'uploading';
 
@@ -669,7 +671,7 @@ class FileUpload extends Base {
 
             me.documentId = document.id;
             me.fileSize = me.formatSize(document.size);
-            me.vdom.cn[1].cn[0].innerHTML = document.fileName;
+            me.vdom.cn[1].cn[0].innerHTML = StringUtil.escapeHtml(document.fileName);
             me.state = me.documentStatusMap[document.status];
         }
     }

package/src/form/field/Text.mjs

@@ -1283,7 +1283,7 @@ class Text extends Base {
     onInputValueChange(data) {
         let me       = this,
             oldValue = me.value,
-            value    = data.value,
+            value    = data.value ? data.value.toString().trim() : me.emptyValue,
             vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
@@ -1482,7 +1482,7 @@ class Text extends Base {
             minLength    = me.minLength,
             required     = me.required,
             returnValue  = true,
-            value        = me.value,
+            value        = me.value ? me.value.toString().trim() : me.emptyValue,
             valueLength  = value?.toString().length,
             inputPattern = me.inputPattern,
             isEmpty      = value !== 0 && (!value || valueLength < 1),

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}

package/src/main/addon/HighlightJS.mjs

@@ -32,6 +32,7 @@ class HighlightJS extends Base {
          */
         remote: {
             app: [
+                'loadLibrary',
                 'scrollIntoView',
                 'syntaxHighlight',
                 'switchTheme',
@@ -56,14 +57,26 @@ class HighlightJS extends Base {
      */
     construct(config) {
         super.construct(config);
+    }
+
+    /**
+     * @param {Object} data
+     * @returns {Boolean}
+     */
+    async loadLibrary(data) {
+        delete data.appName;
 
         let me = this;
 
-        DomAccess.loadScript(me.highlightJsPath).then(() => {
+        me.set(data);
+
+        await DomAccess.loadScript(me.highlightJsPath).then(() => {
             DomAccess.addScript({src: me.highlightJsLineNumbersPath});
         });
 
         Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
+
+        return true
     }
 
     /**
@@ -85,17 +98,14 @@ class HighlightJS extends Base {
 
     /**
      * @param {Object} data
-     * @param {String} data.vnodeId
+     * @returns {Boolean}
      */
-    syntaxHighlight(data) {
-        if (hljs) {
-            let node = document.getElementById(data.vnodeId);
+    setConfigs(data) {
+        delete data.appName;
 
-            hljs.highlightBlock(node);
-            hljs.lineNumbersBlock(node);
-        } else {
-            console.error('highlight.js is not included inside the main thread.')
-        }
+        this.set(data);
+
+        return true
     }
 
     /**
@@ -114,6 +124,21 @@ class HighlightJS extends Base {
         Stylesheet.createStyleSheet(null, 'hljs-theme', switchToTheme);
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} data.vnodeId
+     */
+    syntaxHighlight(data) {
+        if (hljs) {
+            let node = document.getElementById(data.vnodeId);
+
+            hljs.highlightBlock(node);
+            hljs.lineNumbersBlock(node);
+        } else {
+            console.error('highlight.js is not included inside the main thread.')
+        }
+    }
+
     /**
      * @param {Object} data
      */

package/src/vdom/Helper.mjs

@@ -580,7 +580,8 @@ class Helper extends Base {
                     string += ` ${key}`;
                 }
             } else if (key !== 'removeDom') {
-                string += ` ${key}="${value}"`;
+
+                string += ` ${key}="${value.replaceAll('"', '"')}"`;
             }
         });