neo.mjs 4.8.8 → 4.8.9

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

@@ -49,6 +49,12 @@ class MainContainer extends ConfigurationViewport {
             listeners: {change: me.onConfigChange.bind(me, 'error')},
             reference: 'error-field',
             value    : me.exampleComponent.error
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'errorTextRequired',
+            listeners: {change: me.onConfigChange.bind(me, 'errorTextRequired')},
+            value    : me.exampleComponent.errorTextRequired
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,

package/package.json

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

package/src/form/field/Picker.mjs

@@ -88,6 +88,20 @@ class Picker extends Text {
         }]
     }}
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            click: me.onInputClick,
+            scope: me
+        });
+    }
+
     /**
      * Triggered after the editable config got changed
      * @param {Boolean} value
@@ -244,6 +258,20 @@ class Picker extends Text {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onInputClick(data) {
+        let me = this;
+
+        if (!me.editable) {
+            me.togglePicker();
+
+            // stay in sync to the trigger-click logic
+            !me.pickerIsMounted && me.focus()
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {Function} [callback]
@@ -267,13 +295,7 @@ class Picker extends Text {
      * @protected
      */
     onPickerTriggerClick() {
-        let me = this;
-
-        if (me.pickerIsMounted) {
-            me.hidePicker();
-        } else {
-            me.getClientRectsThenShow();
-        }
+        this.editable && this.togglePicker();
     }
 
     /**
@@ -296,6 +318,19 @@ class Picker extends Text {
 
         picker.render(true);
     }
+
+    /**
+     *
+     */
+    togglePicker() {
+        let me = this;
+
+        if (me.pickerIsMounted) {
+            me.hidePicker();
+        } else {
+            me.getClientRectsThenShow();
+        }
+    }
 }
 
 Neo.applyClassConfig(Picker);

package/src/form/field/Text.mjs

@@ -10,6 +10,20 @@ import VNodeUtil    from '../../util/VNode.mjs';
  * @extends Neo.form.field.Base
  */
 class Text extends Base {
+    /**
+     * data passes maxLength, minLength & valueLength properties
+     * @member {Function} errorTextMaxLength=data=>`Max length violation: ${valueLength} / ${maxLength}`
+     */
+    errorTextMaxLength = data => `Max length violation: ${data.valueLength} / ${data.maxLength}`
+    /**
+     * data passes maxLength, minLength & valueLength properties
+     * @member {Function} errorTextMinLength=data=>`Min length violation: ${data.valueLength} / ${data.minLength}`
+     */
+    errorTextMinLength = data => `Min length violation: ${data.valueLength} / ${data.minLength}`
+    /**
+     * @member {String} errorTextRequired='Required'
+     */
+    errorTextRequired = 'Required'
     /**
      * Set this value to false, in case a field should display errors up front
      * @member {Boolean} validBeforeMount=true
@@ -1275,19 +1289,20 @@ class Text extends Base {
             returnValue = true,
             value       = me.value,
             valueLength = value?.toString().length,
-            isEmpty     = !value || valueLength < 1;
+            isEmpty     = !value || valueLength < 1,
+            errorParam  = {maxLength, minLength, valueLength};
 
         if (required && isEmpty) {
-            me[errorField] = 'Required';
+            me[errorField] = me.errorTextRequired;
             returnValue = false;
         } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
             if (required || !isEmpty) {
-                me[errorField] = `Max length violation: ${valueLength} / ${maxLength}`;
+                me[errorField] = me.errorTextMaxLength(errorParam);
                 returnValue = false;
             }
         } else if (Neo.isNumber(minLength) && valueLength < minLength) {
             if (required || !isEmpty) {
-                me[errorField] = `Min length violation: ${valueLength} / ${minLength}`;
+                me[errorField] = me.errorTextMinLength(errorParam);
                 returnValue = false;
             }
         }