neo.mjs 4.3.0 → 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.0",
+    "version": "4.3.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/apps/website/blog/List.scss

@@ -1,4 +1,4 @@
-.website-blog-list.neo-list-container.neo-list {
+.website-blog-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -180,4 +180,4 @@
             width : 44px;
         }
     }
-}
+}

package/resources/scss/src/apps/website/examples/List.scss

@@ -1,4 +1,4 @@
-.website-examples-list.neo-list-container.neo-list {
+.website-examples-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -154,4 +154,4 @@
             margin-top: 20px;
         }
     }
-}
+}

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/calendar/view/calendars/ColorsList.scss

@@ -1,4 +1,6 @@
 .neo-calendars-colors-list {
+    overflow: visible;
+
     &:focus {
         outline: none;
     }
@@ -7,11 +9,12 @@
         border-radius: 50%;
         display      : inline-block;
         height       : 1.5em;
-        margin-right : 0.3em;
+        margin       : 0.3em 0.3em 0.3em 0;
+        transition   : box-shadow .2s;
         width        : 1.5em;
 
         &.neo-selected {
-            box-shadow: 0 0 0 3px currentColor;
+            box-shadow: 0 0 0 0.25em currentColor;
         }
     }
 }

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/layout/Card.scss

@@ -1,16 +1,12 @@
 .neo-layout-card {
     display    : flex;
     align-items: stretch;
-}
-
-.neo-layout-card-item {
-    flex: 1 0 100%;
 
-    &.active-item {
+    > * {
+        flex: 1 0 100%;
 
+        &.neo-inactive-item {
+            display: none !important;
+        }
     }
-
-    &.inactive-item {
-        display: none !important;
-    }
-}
+}

package/resources/scss/src/list/Base.scss

@@ -1,7 +1,8 @@
-.neo-list-container {
+.neo-list-wrapper {
     background-color: v(list-container-background-color);
     border          : v(list-container-border);
-    overflow        : auto;
+    overflow        : hidden;
+    position        : relative;
 }
 
 .neo-list {
@@ -12,6 +13,7 @@
     margin-inline-start : 0;
     margin-inline-end   : 0;
     padding-inline-start: 0;
+    overflow            : auto;
 
     &.neo-use-checkicons {
         .neo-list-item:before {
@@ -28,6 +30,12 @@
         }
     }
 
+    &.neo-use-wrapper-node {
+        height  : 100%;
+        position: absolute;
+        width   : 100%;
+    }
+
     .neo-list-item {
         background-color: v(list-item-background-color);
         cursor          : pointer;
@@ -51,4 +59,4 @@
             color: v(list-item-highlight-search-color);
         }
     }
-}
+}

package/resources/scss/src/tab/Container.scss

@@ -29,7 +29,8 @@
 }
 
 .neo-tab-content-container {
-    border: v(tab-container-content-border);
+    border  : v(tab-container-content-border);
+    overflow: hidden;
 }
 
 .neo-tab-header-toolbar {

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

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

package/resources/scss/src/table/Container.scss

@@ -1,5 +1,6 @@
 .neo-table-wrapper {
     overflow: auto;
+    position: relative;
     height  : 100%;
 }
 
@@ -12,6 +13,7 @@
     font-weight     : 400;
     line-height     : 19px;
     overflow        : auto;
+    position        : absolute;
 
     tr {
         height    : 32px !important;
@@ -118,4 +120,4 @@
     }
 }
 
-#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}
+#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}

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/src/tree/List.scss

@@ -4,6 +4,16 @@
     display : flex;
     position: relative;
 
+    .neo-list {
+        overflow: visible;
+    }
+
+    .neo-list-container {
+        background-color: v(list-container-background-color);
+        border          : v(list-container-border);
+        overflow        : auto;
+    }
+
     .neo-list-folder {
         + .neo-list {
             display: none;
@@ -85,4 +95,4 @@
             content: "\f07c";
         }
     }
-}
+}

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/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,10 @@ class ColorsList extends List {
          * @member {String[]} cls=['neo-calendars-colors-list','neo-list']
          */
         cls: ['neo-calendars-colors-list', 'neo-list'],
+        /**
+         * @member {Boolean} useWrapperNode=false
+         */
+        useWrapperNode: false,
         /**
          * The list gets used as a form field, so we are adjusting the selection based on this config
          * @member {String} value_=null
@@ -63,6 +67,20 @@ class ColorsList extends List {
         }};
     }
 
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom;
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode;
+    }
+
     /**
      *
      */

package/src/calendar/view/calendars/EditContainer.mjs

@@ -64,9 +64,7 @@ class EditContainer extends FormContainer {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        if (value) {
-            this.getField('name').focus();
-        }
+        value && this.getField('name').focus();
     }
 
     /**
@@ -117,12 +115,12 @@ class EditContainer extends FormContainer {
 
         if (record) {
             me.colorsList = Neo.create({
-                module   : ColorsList,
-                appName  : me.appName,
-                listeners: {change: me.onColorChange, scope: me},
-                parentId : me.parentId,
-                style    : {marginTop: '0.5em'},
-                value    : record.color,
+                module      : ColorsList,
+                appName     : me.appName,
+                listeners   : {change: me.onColorChange, scope: me},
+                parentId    : me.parentId,
+                value       : record.color,
+                wrapperStyle: {marginTop: '0.2em'},
                 ...me.colorsListConfig
             });