neo.mjs 5.5.3 → 5.5.5

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

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

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

@@ -19,6 +19,7 @@
         display    : inline-block;
         font-family: v(checkboxfield-icon-font-family);
         font-size  : v(checkboxfield-icon-font-size);
+        margin     : v(checkboxfield-icon-margin);
         width      : 20px;
     }
 
@@ -53,7 +54,7 @@
         }
 
         .neo-checkbox-label {
-            display: block;
+            display: flex;
             margin : v(checkboxfield-label-top-margin);
         }
     }

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

@@ -325,6 +325,14 @@
         margin-top : .3em;
         white-space: break-spaces;
         word-break : break-word;
+
+        &.neo-absolute {
+            position: absolute;
+        }
+    }
+
+    .neo-textfield-error-wrapper {
+        position: relative;
     }
 
     .neo-textfield-input {

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

@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
     'checkboxfield-color-checked'   : #64B5F6,
     'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
+    'checkboxfield-icon-margin'     : 0,
     'checkboxfield-label-top-margin': 0 0 3px
 ));
 
@@ -12,6 +13,7 @@ $neoMap: map-merge($neoMap, (
         --checkboxfield-color-checked   : #{neo(checkboxfield-color-checked)};
         --checkboxfield-icon-font-family: #{neo(checkboxfield-icon-font-family)};
         --checkboxfield-icon-font-size  : #{neo(checkboxfield-icon-font-size)};
+        --checkboxfield-icon-margin     : #{neo(checkboxfield-icon-margin)};
         --checkboxfield-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
 }

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

@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
     'checkboxfield-color-checked'   : #1c60a0,
     'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
+    'checkboxfield-icon-margin'     : 0,
     'checkboxfield-label-top-margin': 0 0 3px
 ));
 
@@ -12,6 +13,7 @@ $neoMap: map-merge($neoMap, (
         --checkboxfield-color-checked   : #{neo(checkboxfield-color-checked)};
         --checkboxfield-icon-font-family: #{neo(checkboxfield-icon-font-family)};
         --checkboxfield-icon-font-size  : #{neo(checkboxfield-icon-font-size)};
+        --checkboxfield-icon-margin     : #{neo(checkboxfield-icon-margin)};
         --checkboxfield-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
 }

package/src/DefaultConfig.mjs

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

package/src/form/field/Text.mjs

@@ -59,7 +59,7 @@ class Text extends Base {
          */
         centerBorderElWidth: null,
         /**
-         * True shows a clear trigger in case the field has a non empty value.
+         * True shows a clear trigger in case the field has a non-empty value.
          * @member {Boolean} clearable_=true
          */
         clearable_: true,
@@ -73,6 +73,11 @@ class Text extends Base {
          * @member {String|null} error_=null
          */
         error_: null,
+        /**
+         * Useful for fields inside a css grid where errors should live outside the layout
+         * @member {Boolean} errorPositionAbsolute_=false
+         */
+        errorPositionAbsolute_: false,
         /**
          * data passes inputPattern, maxLength, minLength & valueLength properties
          * @member {Function} errorTextInputPattern=data=>`Input pattern violation: ${data.inputPattern}`
@@ -190,7 +195,9 @@ class Text extends Base {
             {tag: 'label', cls: [], style: {}},
             {tag: 'label', cls: []},
             {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
-            {cls: ['neo-textfield-error'], removeDom: true}
+            {cls: ['neo-textfield-error-wrapper'], removeDom: true, cn: [
+                {cls: ['neo-textfield-error']}
+            ]}
         ]}
     }
 
@@ -294,6 +301,21 @@ class Text extends Base {
         this.updateError(value)
     }
 
+    /**
+     * Triggered after the errorPositionAbsolute config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetErrorPositionAbsolute(value, oldValue) {
+        let me  = this,
+            cls = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom.cls;
+
+        NeoArray[value ? 'add' : 'remove'](cls, 'neo-absolute');
+
+        me.update()
+    }
+
     /**
      * Triggered after the hideLabel config got changed
      * @param {Boolean} value
@@ -1256,13 +1278,14 @@ class Text extends Base {
     updateError(value, silent=false) {
         let me  = this,
             cls = me.cls,
-            errorNode;
+            errorNode, errorWrapper;
 
         if (!(me.clean && !me.mounted)) {
             NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
             me.cls = cls;
 
-            errorNode = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom;
+            errorWrapper = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error-wrapper'}).vdom;
+            errorNode    = errorWrapper.cn[0];
 
             if (value) {
                 errorNode.html = value;
@@ -1270,7 +1293,7 @@ class Text extends Base {
                 delete errorNode.html;
             }
 
-            errorNode.removeDom = !value;
+            errorWrapper.removeDom = !value;
 
             !silent && me.update()
         }