neo.mjs 4.7.5 → 4.7.6

package/examples/form/field/text/MainContainer.mjs

@@ -150,6 +150,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'spellCheck',
             listeners: {change: me.onConfigChange.bind(me, 'spellCheck')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            labelText: 'subLabelText',
+            listeners: {change: me.onConfigChange.bind(me, 'subLabelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.subLabelText
         }, {
             module   : NumberField,
             labelText: 'width',

package/package.json

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

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

@@ -356,4 +356,13 @@
         flex       : 0 0 auto;
         user-select: none;
     }
+
+    .neo-textfield-sublabel {
+        color      : v(textfield-sublabel-color);
+        display    : inline-block;
+        flex       : 0 0 auto;
+        font-size  : v(textfield-sublabel-font-size);
+        margin     : v(textfield-sublabel-margin);
+        user-select: none;
+    }
 }

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

@@ -25,7 +25,10 @@ $neoMap: map-merge($neoMap, (
     'textfield-opacity-disabled'               : #{neo(neo-disabled-opacity)},
     'textfield-opacity-readonly'               : 1,
     'textfield-outline-active'                 : none,
-    'textfield-outline-hovered'                : none
+    'textfield-outline-hovered'                : none,
+    'textfield-sublabel-color'                 : #999,
+    'textfield-sublabel-font-size'             : 12px,
+    'textfield-sublabel-margin'                : 0 0 5px
 ));
 
 @if $useCssVars == true {
@@ -57,5 +60,8 @@ $neoMap: map-merge($neoMap, (
         --textfield-opacity-readonly               : #{neo(textfield-opacity-readonly)};
         --textfield-outline-active                 : #{neo(textfield-outline-active)};
         --textfield-outline-hovered                : #{neo(textfield-outline-hovered)};
+        --textfield-sublabel-color                 : #{neo(textfield-sublabel-color)};
+        --textfield-sublabel-font-size             : #{neo(textfield-sublabel-font-size)};
+        --textfield-sublabel-margin                : #{neo(textfield-sublabel-margin)};
     }
 }

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

@@ -25,7 +25,10 @@ $neoMap: map-merge($neoMap, (
     'textfield-opacity-disabled'               : #{neo(neo-disabled-opacity)},
     'textfield-opacity-readonly'               : 1,
     'textfield-outline-active'                 : none,
-    'textfield-outline-hovered'                : none
+    'textfield-outline-hovered'                : none,
+    'textfield-sublabel-color'                 : #666,
+    'textfield-sublabel-font-size'             : 12px,
+    'textfield-sublabel-margin'                : 0 0 5px
 ));
 
 @if $useCssVars == true {
@@ -57,5 +60,8 @@ $neoMap: map-merge($neoMap, (
         --textfield-opacity-readonly               : #{neo(textfield-opacity-readonly)};
         --textfield-outline-active                 : #{neo(textfield-outline-active)};
         --textfield-outline-hovered                : #{neo(textfield-outline-hovered)};
+        --textfield-sublabel-color                 : #{neo(textfield-sublabel-color)};
+        --textfield-sublabel-font-size             : #{neo(textfield-sublabel-font-size)};
+        --textfield-sublabel-margin                : #{neo(textfield-sublabel-margin)};
     }
 }

package/src/form/field/Range.mjs

@@ -52,13 +52,13 @@ class Range extends Number {
         super.construct(config);
 
         let me      = this,
-            inputEl = me.vdom.cn[1];
+            inputEl = me.vdom.cn[2];
 
         if (me.useInputEvent) {
             me.addDomListeners({
                 input: {
                     fn    : me.onInputValueChange,
-                    id    : me.vdom.cn[1].id,
+                    id    : me.vdom.cn[2].id,
                     scope : me
                 }
             });

package/src/form/field/Text.mjs

@@ -142,6 +142,18 @@ class Text extends Base {
          * @member {Boolean|null} spellCheck_=false
          */
         spellCheck_: false,
+        /**
+         * @member {String[]} subLabelBaseCls=['neo-textfield-sublabel']
+         */
+        subLabelBaseCls: ['neo-textfield-sublabel'],
+        /**
+         * @member {String[]} subLabelCls_=[]
+         */
+        subLabelCls_: [],
+        /**
+         * @member {String} subLabelText_=null
+         */
+        subLabelText_: null,
         /**
          * @member {Object|Object[]|null} triggers_=null
          */
@@ -152,6 +164,7 @@ class Text extends Base {
         _vdom:
         {cn: [
             {tag: 'label', cls: [], style: {}},
+            {tag: 'label', cls: []},
             {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
             {cls: ['neo-textfield-error'], removeDom: true}
         ]}
@@ -327,17 +340,18 @@ class Text extends Base {
      * @protected
      */
     afterSetLabelPosition(value, oldValue) {
-        let me  = this,
-            cls = me.cls,
-            centerBorderElCls, isEmpty, vdom;
+        let me   = this,
+            cls  = me.cls,
+            vdom = me.vdom,
+            centerBorderElCls, isEmpty;
+
+        vdom.cn[1].removeDom = value !== 'top' ? true : !Boolean(me.subLabelText);
 
         NeoArray.remove(cls, 'label-' + oldValue);
         NeoArray.add(cls, 'label-' + value);
         me.cls = cls; // todo: silent update if needed
 
         if (oldValue === 'inline') {
-            vdom = me.vdom;
-
             vdom.cn[0] = me.getLabelEl(); // remove the wrapper
 
             vdom.cn[0].removeDom = me.hideLabel;
@@ -521,6 +535,39 @@ class Text extends Base {
         this.changeInputElKey('spellcheck', Neo.isBoolean(value) ? value : null);
     }
 
+    /**
+     * Triggered after the subLabelCls config got changed
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @protected
+     */
+    afterSetSubLabelCls(value, oldValue) {
+        let me  = this,
+            cls = me.vdom.cn[1].cls;
+
+        NeoArray.remove(cls, oldValue);
+        NeoArray.add(cls, value);
+
+        me.update();
+    }
+
+    /**
+     * Triggered after the subLabelText config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetSubLabelText(value, oldValue) {
+        let me        = this,
+            showLabel = me.labelPosition === 'top',
+            subLabel  = me.vdom.cn[1];
+
+        subLabel.html      = value;
+        subLabel.removeDom = !showLabel;
+
+        me.update();
+    }
+
     /**
      * Triggered after the triggers config got changed
      * @param {Object[]} value
@@ -530,7 +577,7 @@ class Text extends Base {
     afterSetTriggers(value, oldValue) {
         let me           = this,
             vdom         = me.vdom,
-            inputEl      = vdom.cn[1], // inputEl or inputWrapperEl
+            inputEl      = vdom.cn[2], // inputEl or inputWrapperEl
             preTriggers  = [],
             postTriggers = [],
             width;
@@ -558,7 +605,7 @@ class Text extends Base {
 
             if (inputEl.tag === 'input') {
                 // wrap the input tag
-                vdom.cn[1] = {
+                vdom.cn[2] = {
                     cls  : ['neo-input-wrapper'],
                     cn   : [...preTriggers, inputEl, ...postTriggers],
                     id   : me.getInputWrapperId(),
@@ -573,8 +620,8 @@ class Text extends Base {
             if (inputEl.tag !== 'input') {
                 // replacing the input wrapper div with the input tag
                 width = inputEl.width;
-                vdom.cn[1] = me.getInputEl();
-                vdom.cn[1].width = width;
+                vdom.cn[2] = me.getInputEl();
+                vdom.cn[2].width = width;
             }
         }
 
@@ -673,6 +720,17 @@ class Text extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
     }
 
+    /**
+     * Triggered before the subLabelCls config gets changed
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @returns {String[]}
+     * @protected
+     */
+    beforeSetSubLabelCls(value, oldValue) {
+        return NeoArray.union(value || [], this.subLabelBaseCls);
+    }
+
     /**
      * Triggered before the triggers config gets changed
      * @param {Object|Object[]} value