neo.mjs 4.7.6 → 4.8.0

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

@@ -144,6 +144,12 @@ 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,

package/package.json

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

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,6 +141,10 @@ 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
@@ -333,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
@@ -405,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(() => {
@@ -521,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
     }
 
     /**
@@ -720,6 +751,26 @@ 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
@@ -780,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) {
@@ -790,7 +842,7 @@ class Text extends Base {
             delete me.getInputEl()[key];
         }
 
-        me.update();
+        !silent && me.update();
     }
 
     /**

package/src/main/addon/Stylesheet.mjs

@@ -31,6 +31,7 @@ class Stylesheet extends Base {
                 'createStyleSheet',
                 'deleteCssRules',
                 'insertCssRules',
+                'setCssVariable',
                 'swapStyleSheet'
             ]
         },
@@ -264,6 +265,37 @@ class Stylesheet extends Base {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} data.key
+     * @param {String} [data.priority] optionally pass 'important'
+     * @param {String} data.theme
+     * @param {String} data.value
+     */
+    setCssVariable(data) {
+        let key = data.key,
+            rule, sheet;
+
+        if (!key.startsWith('--')) {
+            key = '--' + key;
+        }
+
+        for (sheet of document.styleSheets) {
+            if (sheet.href.includes(data.theme)) {
+                for (rule of sheet.cssRules) {
+                    if (rule.type === 1) { // CSSRule.STYLE_RULE
+                        if (rule.style.getPropertyValue(key) !== '') {
+                            rule.style.setProperty(key, data.value, data.priority);
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+
+        return false;
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.href