neo.mjs 4.6.1 → 4.6.3

package/resources/scss/theme-light/form/field/Text.scss

@@ -1,41 +1,61 @@
 $neoMap: map-merge($neoMap, (
-    'textfield-border-color'             : #ddd,
-    'textfield-border-color-active'      : #1c60a0,
-    'textfield-border-color-hovered'     : #ddd,
-    'textfield-border-color-invalid'     : brown,
-    'textfield-border-radius'            : 3px,
-    'textfield-border-width'             : 1px,
-    'textfield-input-background-color'   : #fff,
-    'textfield-input-color'              : #000,
-    'textfield-input-font'               : 400 13px/17px Arial,
-    'textfield-input-height'             : 25px,
-    'textfield-input-padding'            : 3px 6px 2px,
-    'textfield-input-placeholder-color'  : #333,
-    'textfield-input-placeholder-opacity': 0.6,
-    'textfield-label-color'              : #666,
-    'textfield-label-top-margin'         : 0 0 3px,
-    'textfield-outline-active'           : none,
-    'textfield-outline-hovered'          : none
+    'textfield-border-color'                   : #ddd,
+    'textfield-border-color-active'            : #1c60a0,
+    'textfield-border-color-disabled'          : #ddd,
+    'textfield-border-color-hovered'           : #ddd,
+    'textfield-border-color-invalid'           : brown,
+    'textfield-border-color-readonly'          : #ddd,
+    'textfield-border-radius'                  : 3px,
+    'textfield-border-width'                   : 1px,
+    'textfield-input-background-color'         : #fff,
+    'textfield-input-background-color-disabled': #fff,
+    'textfield-input-background-color-readonly': #fbfbfb,
+    'textfield-input-color'                    : #000,
+    'textfield-input-color-disabled'           : #000,
+    'textfield-input-color-readonly'           : #000,
+    'textfield-input-font'                     : 400 13px/17px Arial,
+    'textfield-input-height'                   : 25px,
+    'textfield-input-padding'                  : 3px 6px 2px,
+    'textfield-input-placeholder-color'        : #333,
+    'textfield-input-placeholder-opacity'      : 0.6,
+    'textfield-label-color'                    : #666,
+    'textfield-label-color-disabled'           : #666,
+    'textfield-label-color-readonly'           : #666,
+    'textfield-label-top-margin'               : 0 0 3px,
+    'textfield-opacity-disabled'               : #{neo(neo-disabled-opacity)},
+    'textfield-opacity-readonly'               : 1,
+    'textfield-outline-active'                 : none,
+    'textfield-outline-hovered'                : none
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-textfield
-        --textfield-border-color             : #{neo(textfield-border-color)};
-        --textfield-border-color-active      : #{neo(textfield-border-color-active)};
-        --textfield-border-color-hovered     : #{neo(textfield-border-color-hovered)};
-        --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
-        --textfield-border-radius            : #{neo(textfield-border-radius)};
-        --textfield-border-width             : #{neo(textfield-border-width)};
-        --textfield-input-background-color   : #{neo(textfield-input-background-color)};
-        --textfield-input-color              : #{neo(textfield-input-color)};
-        --textfield-input-font               : #{neo(textfield-input-font)};
-        --textfield-input-height             : #{neo(textfield-input-height)};
-        --textfield-input-padding            : #{neo(textfield-input-padding)};
-        --textfield-input-placeholder-color  : #{neo(textfield-input-placeholder-color)};
-        --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
-        --textfield-label-color              : #{neo(textfield-label-color)};
-        --textfield-label-top-margin         : #{neo(textfield-label-top-margin)};
-        --textfield-outline-active           : #{neo(textfield-outline-active)};
-        --textfield-outline-hovered          : #{neo(textfield-outline-hovered)};
+        --textfield-border-color                   : #{neo(textfield-border-color)};
+        --textfield-border-color-active            : #{neo(textfield-border-color-active)};
+        --textfield-border-color-disabled          : #{neo(textfield-border-color-disabled)};
+        --textfield-border-color-hovered           : #{neo(textfield-border-color-hovered)};
+        --textfield-border-color-invalid           : #{neo(textfield-border-color-invalid)};
+        --textfield-border-color-readonly          : #{neo(textfield-border-color-readonly)};
+        --textfield-border-radius                  : #{neo(textfield-border-radius)};
+        --textfield-border-width                   : #{neo(textfield-border-width)};
+        --textfield-input-background-color         : #{neo(textfield-input-background-color)};
+        --textfield-input-background-color-disabled: #{neo(textfield-input-background-color-disabled)};
+        --textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
+        --textfield-input-color                    : #{neo(textfield-input-color)};
+        --textfield-input-color-disabled           : #{neo(textfield-input-color-disabled)};
+        --textfield-input-color-readonly           : #{neo(textfield-input-color-readonly)};
+        --textfield-input-font                     : #{neo(textfield-input-font)};
+        --textfield-input-height                   : #{neo(textfield-input-height)};
+        --textfield-input-padding                  : #{neo(textfield-input-padding)};
+        --textfield-input-placeholder-color        : #{neo(textfield-input-placeholder-color)};
+        --textfield-input-placeholder-opacity      : #{neo(textfield-input-placeholder-opacity)};
+        --textfield-label-color                    : #{neo(textfield-label-color)};
+        --textfield-label-color-disabled           : #{neo(textfield-label-color-disabled)};
+        --textfield-label-color-readonly           : #{neo(textfield-label-color-readonly)};
+        --textfield-label-top-margin               : #{neo(textfield-label-top-margin)};
+        --textfield-opacity-disabled               : #{neo(textfield-opacity-disabled)};
+        --textfield-opacity-readonly               : #{neo(textfield-opacity-readonly)};
+        --textfield-outline-active                 : #{neo(textfield-outline-active)};
+        --textfield-outline-hovered                : #{neo(textfield-outline-hovered)};
     }
 }

package/src/collection/Base.mjs

@@ -668,7 +668,6 @@ class Base extends CoreBase {
             me.clearSilent();
 
             me.items = [...me.allItems._items];
-            me.map.set(...me.allItems.map);
         } else {
             if (!me.allItems) {
                 config = {...me.originalConfig};

package/src/component/Base.mjs

@@ -16,13 +16,6 @@ import VNodeUtil        from '../util/VNode.mjs';
  * @extends Neo.core.Base
  */
 class Base extends CoreBase {
-    /**
-     * Internal flag to prevent multiple CSS merges
-     * @member {Boolean} baseClsApplied=false
-     * @protected
-     */
-    baseClsApplied = false
-
     static getStaticConfig() {return {
         /**
          * Valid values for hideMode
@@ -866,16 +859,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeSetCls(value, oldValue) {
-        value = value || [];
-
-        let me = this;
-
-        if (!me.baseClsApplied) {
-            value = NeoArray.union(value, me.baseCls);
-            me.baseClsApplied = true;
-        }
-
-        return value;
+        return NeoArray.union(value || [], this.baseCls);;
     }
 
     /**

package/src/dialog/Toast.mjs

@@ -1,9 +1,10 @@
-import Base         from './Base.mjs';
+import Base         from '../component/Base.mjs';
 import ToastManager from '../manager/Toast.mjs';
+import NeoArray     from "../util/Array.mjs";
 
 /**
  * @class Neo.dialog.Toast
- * @extends Neo.dialog.Base
+ * @extends Neo.component.Base
  *
  * @example
         Neo.toast({
@@ -20,33 +21,12 @@ import ToastManager from '../manager/Toast.mjs';
         })
  */
 class Toast extends Base {
-    /**
-     * If true makes the toast sticky and show a close icon
-     * @member {Boolean} closable=false
-     */
-    closable = false
-    /**
-     * Change to use your own fade out animation
-     * @member {String} fadeOutCls='neo-toast-fade-out'
-     */
-    fadeOutCls = 'neo-toast-fade-out'
-    /**
-     * If set, it shows this icon in front of the text
-     * e.g. 'fa fa-cog'
-     * @member {String|null} iconCls=null
-     */
-    iconCls = null
     /**
      * Used by the ToastManager
      * @member {Boolean} running=false
      * @private
      */
     running = false
-    /**
-     * Change the complete styling with custom cls
-     * @member {String} toastCls='neo-toast-'
-     */
-    toastCls = 'neo-toast-'
     /**
      * Used by the ToastManager
      * @member {String|null} toastManagerId=null
@@ -54,6 +34,22 @@ class Toast extends Base {
      */
     toastManagerId = null
 
+    static getStaticConfig() {return {
+        /**
+         * Valid values for positions
+         * @member {String[]} positions = ['tl', 'tc', 'tr', 'bl', 'bc', 'br']
+         * @protected
+         * @static
+         */
+        positions: ['tl', 'tc', 'tr', 'bl', 'bc', 'br'],
+        /**
+         * True automatically applies the core/Observable.mjs mixin
+         * @member {String[]} slideDirections = ['down', 'up', 'left', 'right']
+         * @static
+         */
+        slideDirections: ['down', 'up', 'left', 'right']
+    }}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.dialog.Toast'
@@ -65,18 +61,31 @@ class Toast extends Base {
          * @protected
          */
         ntype: 'toast',
+
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Boolean} autoRender=true
+         */
+        autoRender: true,
         /**
-         * The Toast should not be moved
-         * @member {Boolean} draggable=false
+         * @member {String[]} baseCls=['neo-toast']
+         * @protected
          */
-        draggable: false,
+        baseCls: ['neo-toast'],
         /**
-         * Header is not meant to be shown.
-         * @member {Object} headerConfig={hidden:true}
+         * If true makes the toast sticky and show a close icon
+         * @member {Boolean} closable=false
          */
-        headerConfig: {
-            hidden: true
-        },
+        closable_: false,
+        /**
+         * If set, it shows this icon in front of the text
+         * e.g. 'fa fa-cog'
+         * @member {String|null} iconCls=null
+         */
+        iconCls_: null,
         /**
          * Limits the width of the Toast
          * @member {Number} maxWidth=250
@@ -94,17 +103,13 @@ class Toast extends Base {
         msg_: null,
         /**
          * Describes the position of the toast, e.g. bl=bottom-left
-         * This creates a cls `toastCls + position`
+         * This creates a cls `noe-toast-position`
          * @member {'tl'|'tc'|'tr'|'bl'|'bc'|'br'} position='tr'
          */
         position_: 'tr',
-        /**
-         * @member {Boolean} resizable=false
-         */
-        resizable: false,
         /**
          * Describes which direction from which side the toasts slides-in
-         * This creates a cls `toastCls + slide- + direction + in`
+         * This creates a cls `neo-toast-slide-${direction}-in`
          * @member {'down'|'up'|'left'|'right'} slideDirection_=null
          */
         slideDirection_: 'down',
@@ -114,25 +119,59 @@ class Toast extends Base {
          */
         timeout_: 3000,
         /**
-         * @member {String|null} title=null
+         * Adds a title to the toast
+         * @member {Number} title_=null
          */
-        title: null,
+        title_: null,
         /**
-         * @member {Function} itemTpl
+         * @member {String|null} title=null
          */
-        itemTpl: data => {
-            let cls = data.cls;
-
-            return [
-                {cls: [`${cls}icon`, data.iconCls], removeDom: !data.iconCls},
-                {cls: `${cls}text`, cn: [
-                    {cls: `${cls}title`, innerHTML: `${data.title}`, removeDom: !data.title},
-                    {cls: `${cls}msg`,   innerHTML: `${data.msg}`}
+        vdom: {cn: [{
+            cls: 'neo-toast-inner', cn: [
+                {cls: ['neo-toast-icon'], removeDom: true},
+                {cls: 'neo-toast-text', cn: [
+                    {cls: ['neo-toast-title'], removeDom: true},
+                    {cls: 'neo-toast-msg'}
                 ]},
-                {cls: `${cls}close fa fa-close`, removeDom: !data.closable}
-        ]}
+                {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
+            ]
+        }]}
     }}
 
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        // click listener for close
+        me.addDomListeners([
+            {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
+        ])
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetClosable(value, oldValue) {
+        let vdom = this.getVdomInner().cn[2];
+
+        vdom.removeDom = !value;
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetIconCls(value, oldValue) {
+        let vdom = this.getVdomInner().cn[0],
+            cls = vdom.cls,
+            clsFn = !!value ? 'add' : 'remove';
+
+        vdom.removeDom = Neo.isEmpty(value);
+        NeoArray[clsFn](cls, value);
+    }
+
     /**
      * Using the afterSetMsg to trigger the setup of the dom
      * A new container is added as an item.
@@ -142,21 +181,22 @@ class Toast extends Base {
      * @param {String|null} oldValue
      */
     afterSetMsg(value, oldValue) {
-        let me       = this,
-            toastCls = me.toastCls,
-            data     = {closable: me.closable, cls: toastCls, iconCls: me.iconCls, msg: me.msg, title: me.title},
-            titleCls = (me.title && me.iconCls) ? `${toastCls}has-title` : '',
-            vdom     = {cn: me.itemTpl(data)};
-
-        me.add({
-            cls: [`${toastCls}inner`, titleCls],
-            vdom
-        });
-
-        // if closable add a listener to the close-element
-        me.closable && me.addDomListeners([
-            {click: {fn: me.unregister, delegate: `.${me.toastCls}close`, scope: me}}
-        ])
+        let vdom     = this.getTextRootVdom().cn[1];
+
+        vdom.innerHTML = value;
+    }
+
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetTitle(value, oldValue) {
+        let vdom = this.getTextRootVdom().cn[0],
+            clsFn = !!value ? 'add' : 'remove';
+
+        vdom.removeDom = Neo.isEmpty(value);
+        vdom.innerHTML = value;
+        NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
     }
 
     /**
@@ -165,7 +205,7 @@ class Toast extends Base {
      * @param {String} oldValue
      */
     afterSetPosition(value, oldValue) {
-        value && this.addCls(`${this.toastCls}${value}`)
+        value && this.addCls(`neo-toast-${value}`)
     }
 
     /**
@@ -174,7 +214,7 @@ class Toast extends Base {
      * @param {String} oldValue
      */
     afterSetSlideDirection(value, oldValue) {
-        value && this.addCls(`${this.toastCls}slide-${value}-in`)
+        value && this.addCls(`neo-toast-slide-${value}-in`)
     }
 
     /**
@@ -189,6 +229,38 @@ class Toast extends Base {
         }
     }
 
+    /**
+     * Triggered before the position config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetPosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'position');
+    }
+
+    /**
+     * Triggered before the slideDirection config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetSlideDirection(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'slideDirection');
+    }
+
+    /**
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {vdom}
+     */
+    getVdomInner() {
+        return this.vdom.cn[0];
+    }
+
+    getTextRootVdom() {
+        return this.getVdomInner().cn[1];
+    }
+
     /**
      * After the close-click or timeout, we unregister the toast
      * from the ToastManager
@@ -203,7 +275,7 @@ class Toast extends Base {
             }
         })
 
-        me.addCls(me.fadeOutCls);
+        me.addCls('neo-toast-fade-out');
     }
 }
 

package/src/form/field/CheckBox.mjs

@@ -96,9 +96,9 @@ class CheckBox extends Base {
         if (oldValue !== undefined) {
             me.fire('change', {
                 component: me,
-                oldValue : oldValue,
-                value    : value
-            });
+                oldValue,
+                value
+            })
         }
     }
 

package/src/form/field/Text.mjs

@@ -125,6 +125,10 @@ class Text extends Base {
          * @member {String|null} placeholderText_=null
          */
         placeholderText_: null,
+        /**
+         * @member {Boolean} readOnly_=false
+         */
+        readOnly_: false,
         /**
          * @member {Boolean} required_=false
          */
@@ -476,6 +480,22 @@ class Text extends Base {
         this.changeInputElKey('placeholder', value === '' ? null : value);
     }
 
+    /**
+     * Triggered after the readOnly config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetReadOnly(value, oldValue) {
+        let me = this,
+            cls = me.cls;
+
+        NeoArray[value ? 'add' : 'remove'](cls, 'neo-readonly');
+        me.cls = cls;
+
+        me.changeInputElKey('readonly', value ? value : null);
+    }
+
     /**
      * Triggered after the required config got changed
      * @param {Boolean} value
@@ -888,15 +908,17 @@ class Text extends Base {
         let me  = this,
             cls = me.cls;
 
-        NeoArray.add(cls, 'neo-focus');
-        me.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.add(cls, 'neo-focus');
+            me.cls = cls;
 
-        if (me.labelPosition === 'inline') {
-            if (me.centerBorderElWidth) {
-                me.getCenterBorderEl().width = me.centerBorderElWidth;
-                me.update();
-            } else {
-                me.updateCenterBorderElWidth(false);
+            if (me.labelPosition === 'inline') {
+                if (me.centerBorderElWidth) {
+                    me.getCenterBorderEl().width = me.centerBorderElWidth;
+                    me.update();
+                } else {
+                    me.updateCenterBorderElWidth(false);
+                }
             }
         }
     }
@@ -911,16 +933,18 @@ class Text extends Base {
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
             cls            = me.cls;
 
-        me.validate(); // silent
+        if (!me.readOnly) {
+            me.validate(); // silent
 
-        NeoArray.remove(cls, 'neo-focus');
-        me.cls = cls;
+            NeoArray.remove(cls, 'neo-focus');
+            me.cls = cls;
 
-        if (centerBorderEl && me.isEmpty()) {
-            delete centerBorderEl.width;
-        }
+            if (centerBorderEl && me.isEmpty()) {
+                delete centerBorderEl.width;
+            }
 
-        me.update();
+            me.update();
+        }
     }
 
     /**
@@ -949,20 +973,26 @@ class Text extends Base {
      * @param {Object} data
      */
     onMouseEnter(data) {
-        let cls = this.cls;
+        let me  = this,
+            cls = me.cls;
 
-        NeoArray.add(cls, 'neo-hovered');
-        this.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.add(cls, 'neo-hovered');
+            me.cls = cls;
+        }
     }
 
     /**
      * @param {Object} data
      */
     onMouseLeave(data) {
-        let cls = this.cls;
+        let me  = this,
+            cls = me.cls;
 
-        NeoArray.remove(cls, 'neo-hovered');
-        this.cls = cls;
+        if (!me.readOnly) {
+            NeoArray.remove(cls, 'neo-hovered');
+            me.cls = cls;
+        }
     }
 
     /**

package/src/main/addon/HighlightJS.mjs

@@ -27,13 +27,14 @@ class HighlightJS extends Base {
         highlightJsLineNumbersPath: Neo.config.basePath + 'node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js',
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: [//...]}
+         * @member {Object} remote
          * @protected
          */
         remote: {
             app: [
                 'scrollIntoView',
                 'syntaxHighlight',
+                'switchTheme',
                 'syntaxHighlightInit',
                 'syntaxHighlightLine'
             ]
@@ -62,7 +63,7 @@ class HighlightJS extends Base {
             DomAccess.addScript({src: me.highlightJsLineNumbersPath});
         });
 
-        Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath);
+        Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
     }
 
     /**
@@ -75,13 +76,11 @@ class HighlightJS extends Base {
         let parentEl = DomAccess.getElement(data.vnodeId),
             el       = parentEl.querySelector('[data-list-header="' + data.text + '"]');
 
-        if (el) {
-            el.previousSibling.scrollIntoView({
-                behavior: 'smooth',
-                block   : 'start',
-                inline  : 'nearest'
-            });
-        }
+        el?.previousSibling.scrollIntoView({
+            behavior: 'smooth',
+            block   : 'start',
+            inline  : 'nearest'
+        })
     }
 
     /**
@@ -95,10 +94,26 @@ class HighlightJS extends Base {
             hljs.highlightBlock(node);
             hljs.lineNumbersBlock(node);
         } else {
-            console.error('highlight.js is not included inside the main thread.');
+            console.error('highlight.js is not included inside the main thread.')
         }
     }
 
+    /**
+     * You can pass in 'light', 'dark', or a path for a custom theme
+     * @param {String} theme
+     */
+    switchTheme(theme) {
+        let definedThemes = {
+                dark: './resources/highlightjs-custom-dark-theme.css',
+                light: './resources/highlightjs-custom-github-theme.css'
+            },
+            switchToTheme = definedThemes[theme];
+
+        switchToTheme ??= theme;
+        this.themePath = switchToTheme;
+        Stylesheet.createStyleSheet(null, 'hljs-theme', switchToTheme);
+    }
+
     /**
      * @param {Object} data
      */
@@ -107,7 +122,7 @@ class HighlightJS extends Base {
             let blocks = document.querySelectorAll('pre code:not(.hljs)');
             Array.prototype.forEach.call(blocks, hljs.highlightBlock);
         } else {
-            console.error('highlight.js is not included inside the main thread.');
+            console.error('highlight.js is not included inside the main thread.')
         }
     }
 
@@ -132,16 +147,14 @@ class HighlightJS extends Base {
                     behavior: 'smooth',
                     block   : 'start',
                     inline  : 'nearest'
-                });
+                })
             }
         }
 
         if (Neo.isNumber(data.removeLine)) {
             el = parentEl.querySelector('[data-line-number="' + data.removeLine + '"]');
 
-            if (el) {
-                el.parentNode.classList.remove(cls);
-            }
+            el && el.parentNode.classList.remove(cls)
         }
     }
 }