neo.mjs 6.10.3 → 6.10.5

package/resources/scss/src/apps/{newwebsite/Viewport.scss → portal/home/MainContainer.scss}

@@ -19,7 +19,7 @@
 }
 
 .vector {
-    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
+    background-image   : url("../../../../../../../resources/images/Neo_Vector.svg");
     background-position: center center;
     background-repeat  : no-repeat;
     background-size    : contain;

package/resources/scss/src/tab/Strip.scss

@@ -2,6 +2,7 @@
     background-color: var(--tab-strip-background-color);
     height          : var(--tab-strip-height);
     overflow        : hidden;
+    position        : relative;
 
     .neo-active-tab-indicator {
         background-color   : var(--tab-indicator-background-color-active);

package/resources/scss/src/tooltip/Base.scss

@@ -1,7 +1,11 @@
 .neo-tooltip {
-    border    : 1px solid #0d86e7;
-    box-shadow: 3px 3px 4px rgba(0,0,0, .6);
-    font-size : 13px;
-    padding   : 5px 10px;
-    position  : absolute;
-}
+    background-color: var(--tooltip-bg);
+    border          : var(--tooltip-border);
+    border-radius   : var(--tooltip-borderradius);
+    box-shadow      : var(--tooltip-boxshadow);
+    color           : var(--tooltip-color);
+    font-size       : var(--tooltip-fontsize);
+    height          : var(--tooltip-height);
+    padding         : var(--tooltip-padding);
+    position        : absolute;
+}

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

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : black;
+    --tooltip-border        : grey;
+    --tooltip-borderradius  : 4px;
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : white;
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : 24px;
+    --tooltip-padding       : 2px 8px 0;
+}

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

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : white;
+    --tooltip-border        : lightgrey;
+    --tooltip-borderradius  : 4px;
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : black;
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : 24px;
+    --tooltip-padding       : 2px 8px 0;
+}

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

@@ -4,7 +4,6 @@ $border-color    : #ddd;
 $border-style    : solid;
 $border-width    : 1px;
 
-
 :root .neo-theme-neo-light { // .neo-button
     --button-background-color                   : var(--cmp-button-primary-bg-default);
     --button-background-color-active            : var(--cmp-button-primary-bg-active);
@@ -45,28 +44,28 @@ $border-width    : 1px;
     --button-use-gradients                      : false;
 
     // {module: Button; ui: --ghost}
-    --button-ghost-background-color             : var(--button-text-color);
-    --button-ghost-background-color-active      : #{$border-color};
-    --button-ghost-background-color-disabled    : inherit;
-    --button-ghost-background-color-hover       : var(--button-text-color);
+    --button-ghost-background-color             : var(--cmp-button-ghost-bg-default);
+    --button-ghost-background-color-active      : var(--cmp-button-ghost-bg-active);
+    --button-ghost-background-color-disabled    : var(--cmp-button-ghost-bg-disabled);
+    --button-ghost-background-color-hover       : var(--cmp-button-ghost-bg-hover);
     --button-ghost-background-image             : none;
-    --button-ghost-badge-background-color       : var(--button-badge-color);
-    --button-ghost-badge-color                  : var(--button-badge-background-color);
-    --button-ghost-border                       : #{$border-width} #{$border-style} var(--button-background-color);
-    --button-ghost-border-active                : #{$border-width} #{$border-style} #{$border-color};
+    --button-ghost-badge-background-color       : transparent;
+    --button-ghost-badge-color                  : transparent;
+    --button-ghost-border                       : none;
+    --button-ghost-border-active                : none;
     --button-ghost-border-disabled              : inherit;
-    --button-ghost-border-hover                 : #{$border-width} #{$border-style} #{$text-color};
-    --button-ghost-border-pressed               : #{$border-width} #{$border-style} #{$text-color};
-    --button-ghost-glyph-color                  : var(--button-background-color);
-    --button-ghost-glyph-color-active           : var(--button-background-color);
-    --button-ghost-glyph-color-disabled         : inherit;
-    --button-ghost-glyph-color-hover            : var(--button-background-color);
-    --button-ghost-opacity-disabled             : var(--neo-disabled-opacity);
+    --button-ghost-border-hover                 : none;
+    --button-ghost-border-pressed               : none;
+    --button-ghost-glyph-color                  : var(--cmp-button-ghost-fg-default);
+    --button-ghost-glyph-color-active           : inherit;
+    --button-ghost-glyph-color-disabled         : var(--cmp-button-ghost-fg-disabled);
+    --button-ghost-glyph-color-hover            : inherit;
+    --button-ghost-opacity-disabled             : inherit;
     --button-ghost-ripple-background-color      : inherit;
-    --button-ghost-text-color                   : var(--button-background-color);
-    --button-ghost-text-color-active            : var(--button-background-color);
-    --button-ghost-text-color-disabled          : inherit;
-    --button-ghost-text-color-hover             : var(--button-background-color);
+    --button-ghost-text-color                   : var(--cmp-button-ghost-fg-default);
+    --button-ghost-text-color-active            : inherit;
+    --button-ghost-text-color-disabled          : var(--cmp-button-ghost-fg-disabled);
+    --button-ghost-text-color-hover             : inherit;
 
     // {module: Button; ui: --secondary}
     --button-secondary-background-color         : var(--cmp-button-secondary-bg-default);
@@ -115,4 +114,9 @@ $border-width    : 1px;
     --button-tertiary-text-color-active         : var(--button-text-color);
     --button-tertiary-text-color-disabled       : inherit;
     --button-tertiary-text-color-hover          : var(--button-text-color);
+
+    // custom overrides
+    .neo-button {
+        min-width: var(--cmp-button-height);
+    }
 }

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

@@ -70,4 +70,10 @@
     --cmp-tab-unselected-bg-active              : var(--sem-color-bg-neutral-active);
     --cmp-tab-unselected-bg-default             : transparent;
     --cmp-tab-unselected-bg-hover               : var(--sem-color-bg-neutral-hover);
+
+    --cmp-tooltip-bg                            : var(--sem-color-bg-neutral-contrast);
+    --cmp-tooltip-borderradius                  : var(--sem-borderradius-medium);
+    --cmp-tooltip-fg                            : var(--sem-color-fg-neutral-inverted);
+    --cmp-tooltip-height                        : var(--height-24);
+    --cmp-tooltip-spacinghorizontal             : var(--sem-spacing-xsmall);
 }

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

@@ -6,6 +6,7 @@
     --core-fontfamily-mono     : 'Source Code Pro';
     --core-fontfamily-sans     : 'Source Sans 3';
     --core-fontfamily-serif    : 'Source Serif Pro';
+    --core-fontsize-label      : 1rem;
     --core-fontsize-body       : 16px;
     --core-fontsize-h1         : 2.5rem;
     --core-fontsize-h2         : 1.75rem;
@@ -42,6 +43,7 @@
     --height-48                : 48px;
     --height-56                : 56px;
     --height-8                 : 8px;
+    --height-24                : 24px;
     --purple-100               : #efe3ff;
     --purple-200               : #d0aaff;
     --purple-300               : #b071ff;

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

@@ -3,11 +3,11 @@
     --sem-borderradius-medium                                           : var(--borderradius-4);
     --sem-borderradius-none                                             : var(--borderradius-0);
     --sem-borderwidth-focus                                             : 3px;
-    --sem-color-bg-neutral-active                                       : var(--gray-300);
+    --sem-color-bg-neutral-active                                       : rgba(0, 0, 0, .1);
     --sem-color-bg-neutral-default                                      : var(--gray-50);
     --sem-color-bg-neutral-disabled                                     : var(--gray-200);
     --sem-color-bg-neutral-highlighted                                  : var(--white);
-    --sem-color-bg-neutral-hover                                        : var(--gray-200);
+    --sem-color-bg-neutral-hover                                        :rgba(0, 0, 0, .05);
     --sem-color-bg-primary-active                                       : var(--green-600);
     --sem-color-bg-primary-background                                   : var(--green-50);
     --sem-color-bg-primary-default                                      : var(--green-400);
@@ -64,4 +64,6 @@
     --sem-typo-label-regular-fontFamily                                 : var(--core-fontfamily-sans);
     --sem-typo-label-regular-fontSize                                   : var(--core-fontsize-body);
     --sem-typo-label-regular-fontWeight                                 : var(--core-fontweight-regular);
+    --sem-color-bg-neutral-contrast                                     : var(--gray-900);
+    --sem-color-fg-neutral-inverted                                     : var(--white);
 }

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

@@ -27,15 +27,16 @@
     --tab-button-padding                        : 7px var(--cmp-tab-spacinghorizontal) 6px;
     --tab-button-text-color                     : var(--sem-color-fg-neutral-subdued);
     --tab-button-text-transform                 : uppercase;
-}
 
-.neo-button-text {
-    font-size: var(--sem-typo-label-regular-fontSize) !important;
-}
+    // custom overrides
+    .neo-button-text {
+        font-size: var(--sem-typo-label-regular-fontSize) !important;
+    }
 
-.pressed {
-    .neo-button-glyph, .neo-button-text {
-        color: var(--sem-color-fg-neutral-contrast) !important;
+    .pressed {
+        .neo-button-glyph, .neo-button-text {
+            color: var(--sem-color-fg-neutral-contrast) !important;
+        }
     }
 }
 

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

@@ -0,0 +1,13 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : var(--cmp-tooltip-bg);
+    --tooltip-border        : none;
+    --tooltip-borderradius  : var(--cmp-tooltip-borderradius);
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : var(--cmp-tooltip-fg);
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : var(--cmp-tooltip-height);
+    --tooltip-padding       : 2px var(--cmp-tooltip-spacinghorizontal) 0;
+}
+
+
+// 3px 3px 4px rgba(0,0,0, .6);

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -454,7 +454,7 @@ class Main extends core.Base {
      * @param {String} data.y
      */
     windowMoveTo(data) {
-        this.openWindows[data.windowName].moveTo(data.x, data.y);
+        this.openWindows[data.windowName]?.moveTo(data.x, data.y);
     }
 
     /**

package/src/component/Base.mjs

@@ -335,6 +335,11 @@ class Base extends CoreBase {
          * @member {Number|String|null} width_=null
          */
         width_: null,
+        /**
+         * The custom windowIs (timestamp) this component belongs to
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null,
         /**
          * @member {String[]|null} wrapperCls_=null
          */

package/src/component/Toast.mjs

@@ -56,6 +56,10 @@ class Toast extends Base {
          * @member {Boolean} closable=false
          */
         closable_: false,
+        /**
+         * @member {Boolean} floating=true
+         */
+        floating: true,
         /**
          * If set, it shows this icon in front of the text
          * e.g. 'fa fa-cog'
@@ -107,8 +111,7 @@ class Toast extends Base {
                 ]},
                 {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
             ]
-        }]},
-        floating : true
+        }]}
     }
 
     /**

package/src/container/Base.mjs

@@ -217,6 +217,20 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && this.items?.forEach(item => {
+            if (Neo.isObject(item)) {
+                item.windowId = value
+            }
+        })
+    }
+
     /**
      * Convert items object to an array for onward storage as _items
      * @param {Object|Object[]} value

package/src/controller/Application.mjs

@@ -107,7 +107,8 @@ class Application extends Base {
         if (value) {
             return ClassSystemUtil.beforeSetInstance(value, null, {
                 appName : this.name,
-                parentId: this.parentId
+                parentId: this.parentId,
+                windowId: Neo.config.windowId
             })
         }
 

package/src/controller/Base.mjs

@@ -21,6 +21,12 @@ class Base extends CoreBase {
          * @protected
          */
         ntype: 'controller',
+        /**
+         * If the URL does not contain a hash value when creating this controller instance,
+         * neo will set this hash value for us.
+         * @member {String|null} defaultHash=null
+         */
+        defaultHash: null,
         /**
          * @member {String|null} defaultRoute=null
          */
@@ -90,9 +96,14 @@ class Base extends CoreBase {
      *
      */
     onConstructed() {
-        let currentHash = HashHistory.first();
+        let currentHash = HashHistory.first(),
+            defaultHash = this.defaultHash;
 
-        currentHash && this.onHashChange(currentHash, null)
+        if (currentHash) {
+            this.onHashChange(currentHash, null)
+        } else if (defaultHash) {
+            Neo.Main.setRoute({value: defaultHash})
+        }
     }
 
     /**
@@ -185,7 +196,7 @@ class Base extends CoreBase {
      * @returns {Number}
      */
     #sortRoutes(route1, route2) {
-        return route1.match(amountSlashesRegex).length - route2.match(amountSlashesRegex).length
+        return (route1.match(amountSlashesRegex) || []).length - (route2.match(amountSlashesRegex)|| []).length
     }
 }
 

package/src/controller/Component.mjs

@@ -189,7 +189,7 @@ class Component extends Base {
                                 handlerScope = me.getHandlerScope(eventHandler, component);
 
                                 if (!handlerScope) {
-                                    Logger.logError('Unknown event handler for', eventHandler, component)
+                                    console.error('Unknown event handler for', eventHandler, component)
                                 } else if (handlerScope !== true) {
                                     listener.fn = handlerScope[eventHandler].bind(handlerScope)
                                 }

package/src/core/Base.mjs

@@ -189,12 +189,14 @@ class Base {
             delayable     = me.delayable ? Neo.merge({}, me.delayable, ctorDelayable) : ctorDelayable;
 
         Object.entries(delayable).forEach(([key, value]) => {
-            let map = {
-                debounce() {me[key] = new debounce(me[key], me, value.timer)},
-                throttle() {me[key] = new throttle(me[key], me, value.timer)}
-            };
+            if (value) {
+                let map = {
+                    debounce() {me[key] = new debounce(me[key], me, value.timer)},
+                    throttle() {me[key] = new throttle(me[key], me, value.timer)}
+                };
 
-            map[value.type]?.()
+                map[value.type]?.()
+            }
         })
     }
 

package/src/core/Observable.mjs

@@ -91,6 +91,21 @@ class Observable extends Base {
         return null;
     }
 
+    /**
+     * Call the passed function, or a function by *name* which exists in the passed scope's
+     * or this component's ownership chain.
+     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
+     * @param {Object} scope The scope to find the function in if it is specified as a string.
+     * @param {Array} args Arguments to pass to the callback.
+     */
+    callback(fn, scope=this, args) {
+        if (fn) {
+            const handler = this.resolveCallback(fn, scope);
+
+            handler.fn.apply(handler.scope, args);
+        }
+    }
+
     /**
      * @param name
      */
@@ -127,21 +142,6 @@ class Observable extends Base {
         }
     }
 
-    /**
-     * Call the passed function, or a function by *name* which exists in the passed scope's
-     * or this component's ownership chain.
-     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
-     * @param {Object} scope The scope to find the function in if it is specified as a string.
-     * @param {Array} args Arguments to pass to the callback.
-     */
-    callback(fn, scope=this, args) {
-        if (fn) {
-            const handler = this.resolveCallback(fn, scope);
-
-            handler.fn.apply(handler.scope, args);
-        }
-    }
-
     /**
      * @param {Object} config
      */

package/src/data/RecordFactory.mjs

@@ -68,6 +68,9 @@ class RecordFactory extends Base {
                             properties;
 
                         Object.defineProperties(me, {
+                            [Symbol.for('isRecord')]: {
+                                value: true
+                            },
                             _isModified: {
                                 value   : false,
                                 writable: true
@@ -87,9 +90,6 @@ class RecordFactory extends Base {
                                 parsedValue = instance.parseRecordValue(me, field, value, config);
 
                                 properties = {
-                                    [Symbol.for('isRecord')]: {
-                                        value: true
-                                    },
                                     [symbol]: {
                                         value   : parsedValue,
                                         writable: true

package/src/form/Container.mjs

@@ -136,6 +136,56 @@ class Container extends BaseContainer {
         return fields
     }
 
+
+    /**
+     * This function will return one of the following states:
+     * - clean      => all fields are clean (untouched)
+     * - invalid    => at least one field is invalid
+     * - valid      => all required fields are valid
+     * - inProgress => at least one field is valid, at least one field is clean
+     * @returns {Promise<String>}
+     */
+    async getFormState() {
+        let fields           = await this.getFields(),
+            i                = 0,
+            hasCleanFields   = false,
+            hasInvalidFields = false,
+            hasUncleanFields = false,
+            hasValidFields   = false,
+            len              = fields.length,
+            field, isClean, isValid;
+
+        for (; i < len; i++) {
+            field   = fields[i];
+            isClean = field.clean;
+            isValid = field.isValid();
+
+            if (!isClean && !isValid) {
+                return 'invalid'
+            } else if (isValid) {
+                hasValidFields = true
+            } else if (!isValid) {
+                hasInvalidFields = true
+            }
+
+            if (isClean) {
+                hasCleanFields = true
+            } else {
+                hasUncleanFields = true
+            }
+        }
+
+        if (!hasInvalidFields) {
+            return 'valid'
+        }
+
+        if (hasCleanFields && !hasUncleanFields) {
+            return 'clean'
+        }
+
+        return 'inProgress'
+    }
+
     /**
      * @returns {Promise<Object>}
      */

package/src/form/field/Text.mjs

@@ -703,7 +703,7 @@ class Text extends Base {
 
         me.silentVdomUpdate = true;
 
-        me.validate(false);
+        oldValue !== undefined && me.validate(me.clean);
         me.changeInputElKey('required', value ? value : null);
         me.labelText = me.labelText; // apply the optional text if needed
 
@@ -1279,7 +1279,7 @@ class Text extends Base {
             cls;
 
         if (!me.readOnly) {
-            me.validate(); // silent
+            me.validate(false);
 
             cls = me.cls; // has to get set after validate()
 

package/src/form/field/TextArea.mjs

@@ -37,6 +37,11 @@ class TextArea extends Text {
          * @member {String[]} baseCls=['neo-textarea','neo-textfield']
          */
         baseCls: ['neo-textarea', 'neo-textfield'],
+        /**
+         * True shows a clear trigger in case the field has a non-empty value.
+         * @member {Boolean} clearable=false
+         */
+        clearable: false,
         /**
          * The visible width of the text control, in average character widths.
          * If it is specified, it must be a positive integer.