neo.mjs 4.7.5 → 4.7.7

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

@@ -144,12 +144,24 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'required',
             listeners: {change: me.onConfigChange.bind(me, 'required')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.showOptionalText,
+            labelText: 'showOptionalText',
+            listeners: {change: me.onConfigChange.bind(me, 'showOptionalText')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.spellCheck,
             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.7",
     "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

@@ -101,6 +101,10 @@ class Text extends Base {
          * @member {String[]} labelCls_=[]
          */
         labelCls_: [],
+        /**
+         * @member {String} labelOptionalText_=' (Optional)'
+         */
+        labelOptionalText_: ' (Optional)',
         /**
          * Valid values: 'bottom', 'inline', 'left', 'right', 'top'
          * @member {String} labelPosition_='left'
@@ -137,11 +141,27 @@ class Text extends Base {
          * @member {Boolean} required_=false
          */
         required_: false,
+        /**
+         * @member {Boolean} showOptionalText_=false
+         */
+        showOptionalText_: false,
         /**
          * null => Follow the element's default behavior for spell checking
          * @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 +172,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}
         ]}
@@ -320,6 +341,16 @@ class Text extends Base {
         me.update();
     }
 
+    /**
+     * Triggered after the labelOptionalText config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetLabelOptionalText(value, oldValue) {
+        this.labelText = this.labelText; // triggers a vdom update
+    }
+
     /**
      * Triggered after the labelPosition config got changed
      * @param {String} value
@@ -327,17 +358,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;
@@ -391,7 +423,7 @@ class Text extends Base {
         if (!me.hideLabel) {
             if (me.labelPosition === 'inline') {
                 if (!isEmpty) {
-                    delete me.getCenterBorderEl().width;
+                    delete me.getCenterBorderEl()?.width;
                 }
 
                 me.promiseVdomUpdate().then(() => {
@@ -507,8 +539,21 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
-        this.validate(); // silent
-        this.changeInputElKey('required', value ? value : null);
+        let me = this;
+
+        me.validate(); // silent
+        me.changeInputElKey('required', value ? value : null, true); // silent update
+        me.labelText = me.labelText;
+    }
+
+    /**
+     * Triggered after the showOptionalText config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowOptionalText(value, oldValue) {
+        this.labelText = this.labelText; // triggers a vdom update
     }
 
     /**
@@ -521,6 +566,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 +608,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 +636,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 +651,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 +751,37 @@ class Text extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
     }
 
+    /**
+     * Triggered before the labelText config gets changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     * @returns {String}
+     */
+    beforeSetLabelText(value, oldValue) {
+        let me                = this,
+            labelOptionalText = me.labelOptionalText;
+
+        if (me.showOptionalText && !me.required) {
+            return value + labelOptionalText;
+        } else if (value && value.endsWith(labelOptionalText)) {
+            value = value.replace(labelOptionalText, '');
+        }
+
+        return value;
+    }
+
+    /**
+     * 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
@@ -722,8 +831,9 @@ class Text extends Base {
      * Changes the value of a inputEl vdom object attribute or removes it in case it has no value
      * @param {String} key
      * @param {Array|Number|Object|String|null} value
+     * @param {Boolean} silent=false
      */
-    changeInputElKey(key, value) {
+    changeInputElKey(key, value, silent=false) {
         let me = this;
 
         if (value || Neo.isBoolean(value) || value === 0) {
@@ -732,7 +842,7 @@ class Text extends Base {
             delete me.getInputEl()[key];
         }
 
-        me.update();
+        !silent && me.update();
     }
 
     /**