neo.mjs 4.3.1 → 4.3.2

package/examples/tab/container/MainContainer.mjs

@@ -13,7 +13,8 @@ class MainContainer extends ConfigurationViewport {
     static getConfig() {return {
         className           : 'Neo.examples.tab.container.MainContainer',
         autoMount           : true,
-        configItemLabelWidth: 130,
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
         layout              : {ntype: 'hbox', align: 'stretch'}
     }}
 
@@ -121,6 +122,45 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'Tab 1 text',
             listeners: {change: me.onFirstTabHeaderConfigChange.bind(me, 'text')},
             value    : me.getFirstTabHeader().text
+        }, {
+            module        : Radio,
+            checked       : me.getBadgeTabHeader().badgePosition === 'bottom-left',
+            hideValueLabel: false,
+            labelText     : 'badgePosition',
+            listeners     : {change: me.onBadgeRadioChange.bind(me, 'badgePosition', 'bottom-left')},
+            name          : 'badgePosition',
+            style         : {marginTop: '50px'},
+            valueLabelText: 'bottom-left'
+        }, {
+            module        : Radio,
+            checked       : me.getBadgeTabHeader().badgePosition === 'bottom-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onBadgeRadioChange.bind(me, 'badgePosition', 'bottom-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-right'
+        }, {
+            module        : Radio,
+            checked       : me.getBadgeTabHeader().badgePosition === 'top-left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onBadgeRadioChange.bind(me, 'badgePosition', 'top-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-left'
+        }, {
+            module        : Radio,
+            checked       : me.getBadgeTabHeader().badgePosition === 'top-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onBadgeRadioChange.bind(me, 'badgePosition', 'top-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-right'
+        }, {
+            module   : TextField,
+            labelText: 'badgeText',
+            listeners: {change: me.onBadgeConfigChange.bind(me, 'badgeText')},
+            style    : {marginTop: '10px'},
+            value    : me.getBadgeTabHeader().badgeText
         }];
     }
 
@@ -158,11 +198,17 @@ class MainContainer extends ConfigurationViewport {
     }
 
     /**
-     * @param {String} config
-     * @param {Object} opts
+     * @returns {Neo.tab.header.Button}
      */
-    onFirstTabHeaderConfigChange(config, opts) {
-        this.exampleComponent.getTabBar().items[0][config] = opts.value;
+    getBadgeTabHeader() {
+        let tabHeaders = this.exampleComponent.getTabBar().items,
+            item
+
+        for (item of tabHeaders) {
+            if (item.text === 'Tab 3') {
+                return item;
+            }
+        }
     }
 
     /**
@@ -172,6 +218,33 @@ class MainContainer extends ConfigurationViewport {
         return this.exampleComponent.getTabBar().items[0];
     }
 
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onBadgeConfigChange(config, opts) {
+        this.getBadgeTabHeader()[config] = opts.value;
+    }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onBadgeRadioChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.getBadgeTabHeader()[config] = value;
+        }
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onFirstTabHeaderConfigChange(config, opts) {
+        this.exampleComponent.getTabBar().items[0][config] = opts.value;
+    }
+
     /**
      * @param {Object} data
      * @param {Neo.component.Base} data.component

package/package.json

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

package/resources/scss/src/apps/website/home/TabContainer.scss

@@ -8,8 +8,13 @@
         flex       : auto !important;
         font-weight: 400;
         overflow-y : auto;
+        position   : relative;
         word-break : break-word;
 
+        .neo-absolute {
+            position: absolute;
+        }
+
         a {
             color: #1c60a0;
         }
@@ -109,4 +114,4 @@
             }
         }
     }
-}
+}

package/resources/scss/src/button/Base.scss

@@ -64,27 +64,29 @@
         color           : v(button-badge-color);
         margin-left     : auto;
         padding         : 3px;
+        pointer-events  : none;
         position        : absolute;
+        user-select     : none;
         z-index         : 2;
 
         &.neo-bottom-left {
-            bottom: -10px;
-            left  : -10px;
+            bottom: v(button-badge-margin-top);
+            left  : v(button-badge-margin-left);
         }
 
         &.neo-bottom-right {
-            bottom: -10px;
-            right : -10px;
+            bottom: v(button-badge-margin-top);
+            right : v(button-badge-margin-left);
         }
 
         &.neo-top-left {
-            left: -10px;
-            top : -10px;
+            left: v(button-badge-margin-left);
+            top : v(button-badge-margin-top);
         }
 
         &.neo-top-right {
-            right: -10px;
-            top  : -10px;
+            right: v(button-badge-margin-left);
+            top  : v(button-badge-margin-top);
         }
     }
 

package/resources/scss/src/component/Label.scss

@@ -1,3 +1,4 @@
 .neo-label {
+    user-select: none;
     white-space: nowrap;
-}
+}

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

@@ -26,11 +26,13 @@
     }
 
     .neo-radio-label {
-        color  : v(textfield-label-color);
-        display: inline-block;
+        color      : v(textfield-label-color);
+        display    : inline-block;
+        user-select: none;
     }
 
     .neo-radio-value-label {
-        color: v(textfield-label-color);
+        color      : v(textfield-label-color);
+        user-select: none;
     }
-}
+}

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

@@ -232,8 +232,9 @@
     }
 
     .neo-textfield-label {
-        color  : v(textfield-label-color);
-        display: inline-block;
-        flex   : 0 0 auto;
+        color      : v(textfield-label-color);
+        display    : inline-block;
+        flex       : 0 0 auto;
+        user-select: none;
     }
 }

package/resources/scss/src/tab/header/Toolbar.scss

@@ -62,4 +62,4 @@
             animation-duration: 0ms !important;
         }
     }
-}
+}

package/resources/scss/src/toolbar/Base.scss

@@ -24,12 +24,45 @@
             }
         }
 
+        .neo-button-badge {
+            transform   : rotate(180deg);
+            writing-mode: vertical-rl;
+
+            &.neo-bottom-left {
+                bottom: v(button-badge-margin-top);
+                left  : unset;
+                right : v(button-badge-margin-left);
+                top   : unset;
+            }
+
+            &.neo-bottom-right {
+                bottom: unset;
+                left  : unset;
+                right : v(button-badge-margin-left);
+                top   : v(button-badge-margin-top);
+            }
+
+            &.neo-top-left {
+                bottom: v(button-badge-margin-top);
+                left  : v(button-badge-margin-left);
+                right : unset;
+                top   : unset;
+            }
+
+            &.neo-top-right {
+                bottom: unset;
+                left  : v(button-badge-margin-left);
+                right : unset;
+                top   : v(button-badge-margin-top);
+            }
+        }
+
         .neo-button-glyph {
             transform: rotate(-90deg);
         }
 
         .neo-button-text {
-            transform: rotate(180deg);
+            transform   : rotate(180deg);
             writing-mode: vertical-rl;
         }
 
@@ -58,6 +91,38 @@
             }
         }
 
+        .neo-button-badge {
+            writing-mode: vertical-lr;
+
+            &.neo-bottom-left {
+                bottom: unset;
+                left  : v(button-badge-margin-left);
+                right : unset;
+                top   : v(button-badge-margin-top);
+            }
+
+            &.neo-bottom-right {
+                bottom: v(button-badge-margin-top);
+                left  : v(button-badge-margin-left);
+                right : unset;
+                top   : unset;
+            }
+
+            &.neo-top-left {
+                bottom: unset;
+                left  : unset;
+                right : v(button-badge-margin-left);
+                top   : v(button-badge-margin-top);
+            }
+
+            &.neo-top-right {
+                bottom: v(button-badge-margin-top);
+                left  : unset;
+                right : v(button-badge-margin-left);
+                top   : unset;
+            }
+        }
+
         .neo-button-glyph {
             transform: rotate(90deg);
         }
@@ -73,7 +138,8 @@
         }
     }
 
-    &.neo-dock-bottom, &.neo-dock-top {
+    &.neo-dock-bottom,
+    &.neo-dock-top {
         .neo-button {
             &.icon-left {
                 .neo-button-glyph {
@@ -85,4 +151,4 @@
             margin: 0 10px 0 5px;
         }
     }
-}
+}

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

@@ -8,6 +8,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-gradient-start': #434749,
     'button-badge-background-color'   : #64b5f6,
     'button-badge-color'              : #282828,
+    'button-badge-margin-left'        : -10px,
+    'button-badge-margin-top'         : -10px,
     'button-border'                   : 1px solid #2b2b2b,
     'button-border-radius'            : 0,
     'button-glyph-color'              : #bbb,
@@ -38,6 +40,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
         --button-badge-background-color   : #{neo(button-badge-background-color)};
         --button-badge-color              : #{neo(button-badge-color)};
+        --button-badge-margin-left        : #{neo(button-badge-margin-left)};
+        --button-badge-margin-top         : #{neo(button-badge-margin-top)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};

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

@@ -8,6 +8,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-gradient-start': #434749,
     'button-badge-background-color'   : #1c60a0,
     'button-badge-color'              : #fff,
+    'button-badge-margin-left'        : -10px,
+    'button-badge-margin-top'         : -10px,
     'button-border'                   : 1px solid #ddd,
     'button-border-radius'            : 3px,
     'button-glyph-color'              : #1c60a0,
@@ -38,6 +40,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
         --button-badge-background-color   : #{neo(button-badge-background-color)};
         --button-badge-color              : #{neo(button-badge-color)};
+        --button-badge-margin-left        : #{neo(button-badge-margin-left)};
+        --button-badge-margin-top         : #{neo(button-badge-margin-top)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};

package/src/component/Base.mjs

@@ -255,10 +255,10 @@ class Base extends CoreBase {
          */
         silentVdomUpdate: false,
         /**
-         * Top level style attributes
-         * @member {Object} style={}
+         * Style attributes added to this vdom root. see: getVdomRoot()
+         * @member {Object} style_=null
          */
-        style: {},
+        style_: null,
         /**
          * Add tooltip config objects
          * See tooltip/Base.mjs
@@ -321,23 +321,6 @@ class Base extends CoreBase {
         }
     }
 
-    /**
-     * Top level style attributes
-     * @member {Object} style={}
-     */
-    get style() {
-        // we need to "clone" the object, otherwise changes will get applied directly and there are no deltas
-        // this only affects non vdom related style to DOM deltas
-        return Neo.clone(this._style || {});
-    }
-    set style(value) {
-        let me       = this,
-            oldStyle = me.style; // cloned => getter
-
-        me._style = value;
-        me.updateStyle(value, oldStyle);
-    }
-
     /**
      * The setter will handle vdom updates automatically
      * @member {Object} vdom=this._vdom
@@ -346,45 +329,7 @@ class Base extends CoreBase {
         return this._vdom;
     }
     set vdom(value) {
-        let me   = this,
-            app  = Neo.apps[me.appName],
-            vdom = value,
-            listenerId;
-
-        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
-        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
-        // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
-            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
-
-            Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key];
-            });
-
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
-        }
-
-        if (me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
-        } else {
-            if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
-                me.hasRenderingListener = true;
-
-                listenerId = app.on('mounted', () => {
-                    app.un('mounted', listenerId);
-
-                    setTimeout(() => {
-                        me.vnode && me.updateVdom(me.vdom, me.vnode);
-                    }, 50);
-                });
-            } else if (me.mounted) {
-                me.vnode && me.updateVdom(vdom, me.vnode);
-            }
-
-            me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
-        }
+        this.afterSetVdom(value, value);
     }
 
     /**
@@ -665,6 +610,18 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the style config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetStyle(value, oldValue) {
+        if (!(!value && oldValue === undefined)) {
+            this.updateStyle(value, oldValue);
+        }
+    }
+
     /**
      * Triggered after the tooltips config got changed
      * @param {Boolean} value
@@ -685,6 +642,54 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the vdom config got changed
+     * @param {Object} value
+     * @param {Object|null} oldValue
+     * @protected
+     */
+    afterSetVdom(value, oldValue) {
+        let me   = this,
+            app  = Neo.apps[me.appName],
+            vdom = value,
+            listenerId;
+
+        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
+        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
+        // the content over seems to be the best strategy
+        if (me._vdom !== vdom) {
+            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
+
+            Object.keys(me._vdom).forEach(key => {
+                delete me._vdom[key];
+            });
+
+            Object.assign(me._vdom, vdom);
+        } else {
+            me._vdom = vdom;
+        }
+
+        if (me.silentVdomUpdate) {
+            me.needsVdomUpdate = true;
+        } else {
+            if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
+                me.hasRenderingListener = true;
+
+                listenerId = app.on('mounted', () => {
+                    app.un('mounted', listenerId);
+
+                    setTimeout(() => {
+                        me.vnode && me.updateVdom(me.vdom, me.vnode);
+                    }, 50);
+                });
+            } else if (me.mounted) {
+                me.vnode && me.updateVdom(vdom, me.vnode);
+            }
+
+            me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
+        }
+    }
+
     /**
      * Triggered after the vnode config got changed
      * @param {Object} value
@@ -714,15 +719,22 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWrapperCls(value, oldValue) {
+        oldValue = oldValue ? oldValue : [];
+        value    = value    ? value    : [];
+
         let me       = this,
             vdom     = me.vdom,
             vdomRoot = me.getVdomRoot(),
             cls      = me.vdom?.cls || [];
 
         if (vdom === vdomRoot) {
-            // we are not using a wrapper => cls & wrapperCls share the same node
-            me.afterSetCls(me._cls, me._cls);
+            // we need to merge changes
+            cls = [...cls, ...value];
+            NeoArray.remove(cls, NeoArray.difference(oldValue, value));
+            vdom.cls = cls;
+
         } else {
+            // we are not using a wrapper => cls & wrapperCls share the same node
             value = value ? value : [];
 
             oldValue && NeoArray.remove(cls, oldValue);
@@ -731,12 +743,12 @@ class Base extends CoreBase {
             if (vdom) {
                 vdom.cls = cls;
             }
+        }
 
-            if (me.isVdomUpdating || me.silentVdomUpdate) {
-                me.needsVdomUpdate = true;
-            } else if (me.mounted) {
-                me.updateCls(value, oldValue);
-            }
+        if (me.isVdomUpdating || me.silentVdomUpdate) {
+            me.needsVdomUpdate = true;
+        } else if (me.mounted) {
+            me.updateCls(value, oldValue);
         }
     }
 
@@ -780,6 +792,15 @@ class Base extends CoreBase {
         return this.getModel().getHierarchyData();
     }
 
+    /**
+     * Triggered when accessing the style config
+     * @param {Object} value
+     * @protected
+     */
+    beforeGetStyle(value) {
+        return {...value};
+    }
+
     /**
      * Triggered when accessing the wrapperCls config
      * @param {String[]|null} value

package/src/container/Base.mjs

@@ -171,10 +171,11 @@ class Base extends Component {
 
     /**
      * @param {Object|String} value
+     * @param {Object|String|Neo.layout.Base} oldValue
      * @returns {Neo.layout.Base}
      * @protected
      */
-    beforeSetLayout(value) {
+    beforeSetLayout(value, oldValue) {
         return this.createLayout(value);
     }
 
@@ -458,8 +459,7 @@ class Base extends Component {
             if (config.ntype.indexOf('layout-') < 0) {
                 config.ntype = 'layout-' + config.ntype;
             }
-        }
-        else if (config.indexOf('layout-') < 0) {
+        } else if (config.indexOf('layout-') < 0) {
             config = {
                 ntype: 'layout-' + config
             };

package/src/draggable/toolbar/DragZone.mjs

@@ -47,15 +47,14 @@ class DragZone extends BaseDragZone {
     adjustToolbarItemCls(draggable) {
         let me    = this,
             owner = me.owner,
-            vdom  = owner.vdom;
+            wrapperCls;
 
-        vdom.cn.forEach(item => {
-            item.cls = item.cls || [];
+        owner.items.forEach(item => {
+            wrapperCls = item.wrapperCls || [];
 
-            NeoArray[draggable ? 'add' : 'remove'](item.cls, 'neo-draggable');
+            NeoArray[draggable ? 'add' : 'remove'](wrapperCls, 'neo-draggable');
+            item.wrapperCls = wrapperCls;
         });
-
-        owner.vdom = vdom;
     }
 
     /**

package/src/form/field/Text.mjs

@@ -893,11 +893,13 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
+            cls            = me.cls,
             vdom           = me.vdom;
 
         me.validate(); // silent
 
-        NeoArray.remove(me._cls, 'neo-focus');
+        NeoArray.remove(cls, 'neo-focus');
+        me.cls = cls;
 
         if (centerBorderEl && me.isEmpty()) {
             delete centerBorderEl.width;

package/src/layout/Flexbox.mjs

@@ -82,7 +82,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetAlign(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'align');
+        oldValue && this.updateInputValue(value, oldValue, 'align');
     }
 
     /**
@@ -92,7 +92,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'direction');
+        oldValue && this.updateInputValue(value, oldValue, 'direction');
     }
 
     /**
@@ -102,7 +102,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetPack(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'pack');
+        oldValue && this.updateInputValue(value, oldValue, 'pack');
     }
 
     /**
@@ -112,7 +112,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetWrap(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'wrap');
+        oldValue && this.updateInputValue(value, oldValue, 'wrap');
     }
 
     /**