neo.mjs 5.10.1 → 5.10.3

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.10.1'
+         * @member {String} version='5.10.3'
          */
-        version: '5.10.1'
+        version: '5.10.3'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.10.1'
+         * @member {String} version='5.10.3'
          */
-        version: '5.10.1'
+        version: '5.10.3'
     }
 
     /**

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

@@ -100,7 +100,7 @@ class MainContainer extends ConfigurationViewport {
             handler: (() => {me.exampleComponent.reset()}),
             style  : {marginTop: '10px', width: '50%'},
             text   : 'reset()'
-        }];
+        }]
     }
 
     createExampleComponent() {
@@ -108,7 +108,7 @@ class MainContainer extends ConfigurationViewport {
             labelText : 'Label',
             labelWidth: 70,
             width     : 200
-        });
+        })
     }
 }
 

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

@@ -182,7 +182,7 @@ class MainContainer extends ConfigurationViewport {
             handler: (() => {me.exampleComponent.reset()}),
             style  : {marginTop: '10px', width: '50%'},
             text   : 'reset()'
-        }];
+        }]
     }
 
     createExampleComponent() {
@@ -201,7 +201,7 @@ class MainContainer extends ConfigurationViewport {
                 },
                 scope: this
             }
-        });
+        })
     }
 }
 

package/package.json

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

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.10.1'
+     * @default '5.10.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.10.1'
+    version: '5.10.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/CheckBox.mjs

@@ -79,6 +79,22 @@ class CheckBox extends Base {
          * @member {String[]} labelCls_=[]
          */
         labelCls_: [],
+        /**
+         * Edge-case config in case we want to render leading content with their own selectors like:
+         * <span class="my-label-id-cls">E10</span> · Firstname
+         * @member {String|null} labelId_=null
+         */
+        labelId_: null,
+        /**
+         * CSS rules for labelId
+         * @member {String[]} labelIdCls_=[]
+         */
+        labelIdCls_: [],
+        /**
+         * Separator between labelId & labelText
+         * @member {String} labelIdSeparator_=' · '
+         */
+        labelIdSeparator_: ' · ',
         /**
          * Valid values: 'left', 'top'
          * @member {String} labelPosition_='left'
@@ -296,8 +312,14 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetLabelText(value, oldValue) {
-        this.vdom.cn[0].cn[0].innerHTML = value;
-        this.update()
+        let me = this;
+
+        if (me.labelId) {
+            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
+        }
+
+        me.vdom.cn[0].cn[0].innerHTML = value;
+        me.update()
     }
 
     /**

package/src/form/field/Text.mjs

@@ -130,6 +130,22 @@ class Text extends Base {
          * @member {String[]} labelCls_=[]
          */
         labelCls_: [],
+        /**
+         * Edge-case config in case we want to render leading content with their own selectors like:
+         * <span class="my-label-id-cls">E10</span> • Firstname
+         * @member {String|null} labelId_=null
+         */
+        labelId_: null,
+        /**
+         * CSS rules for labelId
+         * @member {String[]} labelIdCls_=[]
+         */
+        labelIdCls_: [],
+        /**
+         * Separator between labelId & labelText
+         * @member {String} labelIdSeparator_=' · '
+         */
+        labelIdSeparator_: ' · ',
         /**
          * @member {String} labelOptionalText_=' (Optional)'
          */
@@ -502,6 +518,10 @@ class Text extends Base {
         let me      = this,
             isEmpty = me.isEmpty();
 
+        if (me.labelId) {
+            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
+        }
+
         me.getLabelEl().innerHTML = value;
 
         if (!me.hideLabel) {
@@ -512,9 +532,9 @@ class Text extends Base {
 
                 me.promiseVdomUpdate().then(() => {
                     me.updateCenterBorderElWidth(isEmpty)
-                });
+                })
             } else {
-                me.update();
+                me.update()
             }
         }
     }
@@ -532,7 +552,7 @@ class Text extends Base {
                 label = vdom.cn[0];
 
             label.width = value;
-            !me.hideLabel && me.updateInputWidth();
+            !me.hideLabel && me.updateInputWidth()
         }
     }
 
@@ -544,7 +564,7 @@ class Text extends Base {
      */
     afterSetMaxLength(value, oldValue) {
         this.validate(); // silent
-        this.changeInputElKey('maxlength', value);
+        this.changeInputElKey('maxlength', value)
     }
 
     /**
@@ -576,7 +596,7 @@ class Text extends Base {
 
             for (; i < len; i++) {
                 if (!triggers[i].vdom.removeDom) {
-                    triggers[i].mounted = value;
+                    triggers[i].mounted = value
                 }
             }