neo.mjs 6.10.6 → 6.10.7

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.6'
+         * @member {String} version='6.10.7'
          */
-        version: '6.10.6'
+        version: '6.10.7'
     }
 
     /**

package/apps/form/Overwrites.mjs

@@ -2,9 +2,13 @@ Neo.overwrites = {
     Neo: {
         form: {
             field: {
+                CheckBox: {
+                    useAlertState_: true
+                },
                 Text: {
                     labelPosition_   : 'inline',
-                    showOptionalText_: true
+                    showOptionalText_: true,
+                    useAlertState_   : true
                 }
             }
         }

package/apps/portal/view/learn/LivePreview.mjs

@@ -24,6 +24,7 @@ class LivePreview extends Base {
         items: [{
             module   : TabContainer,
             reference: 'tab-container',
+            cls: 'live-preview-container',
 
             items: [{
                 module: TextArea,

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.6'
+         * @member {String} version='6.10.7'
          */
-        version: '6.10.6'
+        version: '6.10.7'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.6",
+    "version": "6.10.7",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/apps/portal/learn/MainContainer.scss

@@ -5,3 +5,57 @@
         margin: 0 2px;
     }
 }
+
+
+
+
+// Live preview Container
+.live-preview-container {
+    
+    .neo-tab-header-toolbar {
+        background-color: var(--sem-color-bg-neutral-default);
+        padding: var(--cmp-tab-strip-height);
+        border: 1px solid #F1F1F1;
+        border-top-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+        border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+    }
+
+    .neo-tab-strip {
+       margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
+    }
+
+    .neo-tab-content-container {
+        background-color: transparent;
+        border: 1px solid #F1F1F1;
+        border-top: 0;
+        border-bottom-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+        border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+    }
+}
+
+// Scrollbar Behaviour
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+background: transparent;
+}
+
+.neo-tree-list:hover {
+    ::-webkit-scrollbar-thumb {
+        background: #b2b2b2;
+        border-radius: 100px;
+    }
+}
+
+.learn-content:hover {
+    ::-webkit-scrollbar-thumb {
+        background: #b2b2b2;
+        border-radius: 100px;
+    }
+}

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

@@ -57,6 +57,12 @@
         .neo-checkbox-icon {
             color: var(--textfield-border-color-invalid);
         }
+
+        &.neo-use-alert-state {
+            .neo-checkbox-icon {
+                color: var(--textfield-border-color-alert);
+            }
+        }
     }
 
     &.neo-label-top {
@@ -78,4 +84,10 @@
             flex: 1 0 1px;
         }
     }
+
+    &.neo-use-alert-state {
+        .neo-error {
+            color: var(--textfield-border-color-alert);
+        }
+    }
 }

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

@@ -83,6 +83,50 @@
             }
         }
 
+        &.neo-empty-required {
+            .neo-input-wrapper {
+                border-color: var(--textfield-border-color-alert);
+            }
+
+            &.label-inline {
+                .neo-label-wrapper {
+                    .neo-center-border, .neo-left-border, .neo-right-border {
+                        border-bottom-color: var(--textfield-border-color-alert);
+                    }
+
+                    .neo-left-border, .neo-right-border {
+                        border-top-color: var(--textfield-border-color-alert);
+                    }
+
+                    .neo-left-border {
+                        border-left-color: var(--textfield-border-color-alert);
+                    }
+
+                    .neo-right-border {
+                        border-right-color: var(--textfield-border-color-alert);
+                    }
+                }
+            }
+
+            .neo-textfield-error {
+                color: var(--textfield-border-color-alert);
+            }
+
+            &:not(.label-inline, .neo-input-wrapper) {
+                .neo-textfield-input {
+                    border-color: var(--textfield-border-color-alert);
+                }
+            }
+
+            &.neo-invalid:not(.neo-disabled, .neo-has-content) {
+                .neo-label-wrapper {
+                    .neo-center-border {
+                        border-top-color: var(--textfield-border-color-alert);
+                    }
+                }
+            }
+        }
+
         &:not(.label-inline, .neo-input-wrapper) {
             .neo-textfield-input {
                 border-color: var(--textfield-border-color-invalid);

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

@@ -1,6 +1,7 @@
 :root .neo-theme-dark { // .neo-textfield
     --textfield-border-color                   : #424242;
     --textfield-border-color-active            : #5d83a7;
+    --textfield-border-color-alert             : orange;
     --textfield-border-color-disabled          : #424242;
     --textfield-border-color-hovered           : #424242;
     --textfield-border-color-invalid           : brown;

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

@@ -1,6 +1,7 @@
 :root .neo-theme-light { // .neo-textfield
     --textfield-border-color                   : #ddd;
     --textfield-border-color-active            : #1c60a0;
+    --textfield-border-color-alert             : darkorange;
     --textfield-border-color-disabled          : #ddd;
     --textfield-border-color-hovered           : #ddd;
     --textfield-border-color-invalid           : brown;

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

@@ -62,7 +62,7 @@
     
     --cmp-tab-borderradius                      : var(--sem-borderradius-large);
     --cmp-tab-gap                               : var(--sem-spacing-xsmall);
-    --cmp-tab-height                            : var(--sem-height-xxlarge);
+    --cmp-tab-height                            : var(--sem-height-xlarge);
     --cmp-tab-spacinghorizontal                 : var(--sem-spacing-medium);
     --cmp-tab-strip-height                      : 3px;
     --cmp-tab-strip-selected                    : var(--sem-color-fg-neutral-contrast);

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

@@ -1,6 +1,7 @@
 :root .neo-theme-neo-light { // .neo-textfield
     --textfield-border-color                   : #ddd;
     --textfield-border-color-active            : #1c60a0;
+    --textfield-border-color-alert             : darkorange;
     --textfield-border-color-disabled          : #ddd;
     --textfield-border-color-hovered           : #ddd;
     --textfield-border-color-invalid           : brown;

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -173,7 +173,7 @@ class Base extends Component {
 
         badgeNode.cls = cls;
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -188,7 +188,7 @@ class Base extends Component {
         badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
 
-        this.update();
+        this.update()
     }
 
     /**
@@ -221,7 +221,7 @@ class Base extends Component {
         }
 
         if (value === '') {
-            value = null;
+            value = null
         }
 
         iconNode.style.color = value;
@@ -240,7 +240,7 @@ class Base extends Component {
         NeoArray.remove(cls, 'icon-' + oldValue);
         NeoArray.add(cls, 'icon-' + value);
 
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -293,7 +293,7 @@ class Base extends Component {
         let cls = this.cls;
 
         NeoArray.toggle(cls, 'pressed', value === true);
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -344,10 +344,10 @@ class Base extends Component {
 
         if (value) {
             vdomRoot.href = value;
-            vdomRoot.tag  = 'a';
+            vdomRoot.tag  = 'a'
         } else {
             delete vdomRoot.href;
-            vdomRoot.tag = 'button';
+            vdomRoot.tag = 'button'
         }
 
         this.update()
@@ -376,9 +376,9 @@ class Base extends Component {
             vdomRoot = me.getVdomRoot();
 
         if (me.url) {
-            vdomRoot.target = value;
+            vdomRoot.target = value
         } else {
-            delete vdomRoot.target;
+            delete vdomRoot.target
         }
 
         me.update()
@@ -393,7 +393,7 @@ class Base extends Component {
         let iconCls = this._iconCls;
 
         if (Array.isArray(iconCls)) {
-            return iconCls.join(' ');
+            return iconCls.join(' ')
         }
 
         return iconCls
@@ -419,7 +419,7 @@ class Base extends Component {
      */
     beforeSetIconCls(value, oldValue) {
         if (value && !Array.isArray(value)) {
-            value = value.split(' ').filter(Boolean);
+            value = value.split(' ').filter(Boolean)
         }
 
         return value
@@ -454,7 +454,7 @@ class Base extends Component {
      */
     destroy(updateParentVdom=false, silent=false) {
         this.menuList && this.menuList.destroy(true, false);
-        super.destroy(updateParentVdom, silent);
+        super.destroy(updateParentVdom, silent)
     }
 
     /**

package/src/form/Container.mjs

@@ -149,6 +149,7 @@ class Container extends BaseContainer {
         let fields           = await this.getFields(),
             i                = 0,
             hasCleanFields   = false,
+            hasAlertFields   = false,
             hasInvalidFields = false,
             hasUncleanFields = false,
             hasValidFields   = false,
@@ -161,11 +162,19 @@ class Container extends BaseContainer {
             isValid = field.isValid();
 
             if (!isClean && !isValid) {
-                return 'invalid'
+                if (field.isEmptyAndRequired?.()) {
+                    hasAlertFields = true
+                } else {
+                    return 'invalid'
+                }
             } else if (isValid) {
                 hasValidFields = true
             } else if (!isValid) {
-                hasInvalidFields = true
+                if (field.isEmptyAndRequired?.()) {
+                    hasAlertFields = true
+                } else {
+                    hasInvalidFields = true
+                }
             }
 
             if (isClean) {
@@ -175,11 +184,11 @@ class Container extends BaseContainer {
             }
         }
 
-        if (!hasInvalidFields) {
+        if (!hasAlertFields && !hasInvalidFields) {
             return 'valid'
         }
 
-        if (hasCleanFields && !hasUncleanFields) {
+        if (!hasAlertFields && hasCleanFields && !hasUncleanFields) {
             return 'clean'
         }
 

package/src/form/field/CheckBox.mjs

@@ -124,6 +124,13 @@ class CheckBox extends Base {
          * @member {*} uncheckedValue=false
          */
         uncheckedValue: false,
+        /**
+         * Using the alert state will display an empty but required field in orange instead of red.
+         * Intended to get combined with form.Container: getFormState().
+         * See apps/form as an example.
+         * @member {Boolean} useAlertState_=false
+         */
+        useAlertState_: false,
         /**
          * @member {Boolean|Number|String|null} value=true
          */
@@ -357,6 +364,18 @@ class CheckBox extends Base {
         oldValue !== undefined && this.validate(false)
     }
 
+    /**
+     * Triggered after the useAlertState groupRequired got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseAlertState(value, oldValue) {
+        let cls = this.cls;
+        NeoArray.toggle(cls, 'neo-use-alert-state', value);
+        this.cls = cls
+    }
+
     /**
      * Triggered after the value config got changed
      * @param {String} value
@@ -505,6 +524,14 @@ class CheckBox extends Base {
         return `${this.id}__value-label`
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    isEmptyAndRequired() {
+        // Assuming that checkboxes & radios can only validate false in case they are empty & required
+        return !this.validate(false)
+    }
+
     /**
      * @returns {Boolean}
      */

package/src/form/field/Text.mjs

@@ -230,6 +230,13 @@ class Text extends Base {
          * @member {Object|Object[]|null} triggers_=null
          */
         triggers_: null,
+        /**
+         * Using the alert state will display an empty but required field in orange instead of red.
+         * Intended to get combined with form.Container: getFormState().
+         * See apps/form as an example.
+         * @member {Boolean} useAlertState_=false
+         */
+        useAlertState_: false,
         /**
          * A string based value will get resolved into the closest controller which implements it
          * @member {Function|String|null} validator=null
@@ -848,6 +855,8 @@ class Text extends Base {
 
         cls = me.cls;
 
+        me.useAlertState && NeoArray.toggle(cls, 'neo-empty-required', me.isEmpty() && me.required);
+
         NeoArray[me.hasContent() ? 'add' : 'remove'](cls, 'neo-has-content');
         NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
         me.cls = cls;
@@ -1219,6 +1228,13 @@ class Text extends Base {
         return !(this.value?.toString().length > 0)
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    isEmptyAndRequired() {
+        return this.isEmpty() && this.required
+    }
+
     /**
      * @returns {Boolean}
      */

package/src/main/DomEvents.mjs

@@ -118,9 +118,10 @@ class DomEvents extends Base {
 
         let me = this;
 
-        document.addEventListener('DOMContentLoaded', me.onDomContentLoaded.bind(me));
-        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
-        window  .addEventListener('hashchange',       me.onHashChange      .bind(me));
+        document.addEventListener('DOMContentLoaded',  me.onDomContentLoaded .bind(me));
+        document.addEventListener('selectionchange',   me.onSelectionChange  .bind(me));
+        window  .addEventListener('orientationchange', me.onOrientationChange.bind(me));
+        window  .addEventListener('hashchange',        me.onHashChange       .bind(me));
 
         if (Neo.config.useSharedWorkers) {
             window.addEventListener('beforeunload', me.onBeforeUnload.bind(me))
@@ -270,10 +271,10 @@ class DomEvents extends Base {
         };
 
         if (event.relatedTarget) {
-            result.relatedTarget = this.getTargetData(event.relatedTarget);
+            result.relatedTarget = this.getTargetData(event.relatedTarget)
         }
 
-        return result;
+        return result
     }
 
     /**
@@ -350,7 +351,7 @@ class DomEvents extends Base {
 
         path.push(this.getTargetData(target));
 
-        return path;
+        return path
     }
 
     /**
@@ -580,6 +581,23 @@ class DomEvents extends Base {
         this.sendMessageToApp(this.getMouseEventData(event))
     }
 
+    /**
+     * @param {Event} event
+     */
+    onOrientationChange(event) {
+        const
+            orientation = screen.orientation,
+            angle       = orientation.angle,
+            layout      = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
+            type        = orientation.type,
+            manager     = Neo.worker.Manager;
+
+        manager.sendMessage('app', {
+            action: 'orientationChange',
+            data  : {angle, layout, type}
+        })
+    }
+
     /**
      * @param {Event} event
      */
@@ -810,10 +828,7 @@ class DomEvents extends Base {
 
             for (j = 0; j < countTargets; j++) {
                 if (node.classList?.contains(targetArray[j])) {
-                    return {
-                        cls: targetArray[j],
-                        node
-                    };
+                    return {cls: targetArray[j], node}
                 }
             }
         }

package/src/worker/App.mjs

@@ -30,6 +30,7 @@ class App extends Base {
                 'createNeoInstance',
                 'destroyNeoInstance',
                 'fireEvent',
+                'getConfigs',
                 'setConfigs'
             ]
         },
@@ -225,6 +226,36 @@ class App extends Base {
         })
     }
 
+    /**
+     * Get configs of any app realm based Neo instance from main
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String|String[]} data.keys
+     * Returns an array of configs if a keys array was passed.
+     * Returns the value of a given config directly, in case no array was passed
+     * Returns false, in case no instance got found.
+     * @returns {*}
+     */
+    getConfigs(data) {
+        let instance    = Neo.get(data.id),
+            keys        = data.keys,
+            returnArray = [];
+
+        if (instance) {
+            if (!Array.isArray(keys)) {
+                return instance[keys]
+            }
+
+            keys.forEach(key => {
+                returnArray.push(instance[key])
+            });
+
+            return returnArray
+        }
+
+        return false
+    }
+
     /**
      * @param {String} path
      * @returns {Promise}
@@ -342,6 +373,19 @@ class App extends Base {
         })
     }
 
+    /**
+     * Fire event on all apps
+     * @param {Object} data
+     * @param {Number} data.angle
+     * @param {String} data.layout landscape|portrait
+     * @param {Number} data.type landscape-primary|landscape-secondary|portrait-primary|portrait-secondary
+     */
+    onOrientationChange(data) {
+        Object.values(Neo.apps).forEach(app => {
+            app.fire('orientationchange', data.data)
+        })
+    }
+
     /**
      * @param {Object} msg
      */

package/src/worker/mixin/RemoteMethodAccess.mjs

@@ -47,7 +47,7 @@ class RemoteMethodAccess extends Base {
 
             me.isSharedWorker && me.assignPort(data, opts);
 
-            return me.promiseMessage(origin, opts, buffer);
+            return me.promiseMessage(origin, opts, buffer)
         }
     }
 
@@ -63,13 +63,13 @@ class RemoteMethodAccess extends Base {
 
             methods.forEach(method => {
                 if (remote.origin !== 'main' && pkg[method]) {
-                    throw new Error('Duplicate remote method definition ' + className + '.' + method);
+                    throw new Error('Duplicate remote method definition ' + className + '.' + method)
                 }
 
                 if (!pkg[method] ) {
-                    pkg[method] = me.generateRemote(remote, method);
+                    pkg[method] = me.generateRemote(remote, method)
                 }
-            });
+            })
         }
     }
 
@@ -82,30 +82,27 @@ class RemoteMethodAccess extends Base {
             out, method;
 
         if (!pkg) {
-            throw new Error('Invalid remote namespace "' + msg.remoteClassName + '"');
+            throw new Error('Invalid remote namespace "' + msg.remoteClassName + '"')
         }
 
         method = pkg[msg.remoteMethod];
 
         if (!method) {
-            throw new Error('Invalid remote method name "' + msg.remoteMethod + '"');
+            throw new Error('Invalid remote method name "' + msg.remoteMethod + '"')
         }
 
         if (Array.isArray(msg.data)) {
-            out = method.call(pkg, ...msg.data);
+            out = method.call(pkg, ...msg.data)
         } else {
-            out = method.call(pkg, msg.data);
+            out = method.call(pkg, msg.data)
         }
 
         if (out instanceof Promise) {
-            out.then(data => {
-                me.resolve(msg, data);
-            })
-            .catch(err => {
-                me.reject(msg, err);
-            });
+            out
+                .catch(err => {me.reject(msg, err)})
+                .then(data => {me.resolve(msg, data)})
         } else {
-            me.resolve(msg, out);
+            me.resolve(msg, out)
         }
     }
 
@@ -125,7 +122,7 @@ class RemoteMethodAccess extends Base {
         };
 
         me.isSharedWorker && me.assignPort(msg, opts);
-        me.sendMessage(msg.origin, opts);
+        me.sendMessage(msg.origin, opts)
     }
 
     /**
@@ -143,7 +140,7 @@ class RemoteMethodAccess extends Base {
         };
 
         me.isSharedWorker && me.assignPort(msg, opts);
-        me.sendMessage(msg.origin, opts);
+        me.sendMessage(msg.origin, opts)
     }
 }