neo.mjs 6.5.2 → 6.5.3

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainerController.mjs

@@ -19,12 +19,10 @@ class FormContainerController extends Component {
     onComponentConstructed() {
         super.onComponentConstructed();
 
-        this.component.on('fieldFocusLeave', data => {
-            console.log('fieldFocusLeave', data);
-        })
-
-        this.component.on('fieldChange', data => {
-            console.log('fieldChange', data);
+        this.component.on({
+            fieldChange    : data => console.log('fieldChange'    , data),
+            fieldFocusLeave: data => console.log('fieldFocusLeave', data),
+            fieldUserChange: data => console.log('fieldUserChange', data)
         })
     }
 

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.5.2",
+    "version": "6.5.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,11 +53,11 @@
         "envinfo": "^7.10.0",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.10",
+        "inquirer": "^9.2.11",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.29",
-        "sass": "^1.66.1",
+        "sass": "^1.67.0",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
@@ -67,7 +67,7 @@
     },
     "devDependencies": {
         "siesta-lite": "5.5.2",
-        "url": "^0.11.1"
+        "url": "^0.11.2"
     },
     "funding": {
         "type": "GitHub Sponsors",

package/src/DefaultConfig.mjs

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

package/src/form/field/Base.mjs

@@ -7,6 +7,16 @@ import ComponentManager from '../../manager/Component.mjs';
  * @extends Neo.component.Base
  */
 class Base extends Component {
+    /**
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {
+        fireChangeEvent    : {type: 'debounce', timer: 300},
+        fireUserChangeEvent: {type: 'debounce', timer: 300}
+    }
+
     static config = {
         /**
          * @member {String} className='Neo.form.field.Base'
@@ -127,29 +137,49 @@ class Base extends Component {
 
     /**
      * Override this method as needed
-     * @param {*} value
-     * @param {*} oldValue
+     * @param {*}      value
+     * @param {*}      oldValue
+     * @param {String} eventName
      */
-    fireChangeEvent(value, oldValue) {
+    doFireChangeEvent(value, oldValue, eventName) {
         let me            = this,
             FormContainer = Neo.form?.Container,
+            formEvent     = 'field' + Neo.capitalize(eventName),
             opts          = {component: me, oldValue, value};
 
         if (Neo.isFunction(me.getGroupValue)) {
             opts.groupValue = me.getGroupValue()
         }
 
-        me.fire('change', opts);
+        me.fire(eventName, opts);
 
         if (!me.suspendEvents) {
             ComponentManager.getParents(me).forEach(parent => {
                 if (FormContainer && parent instanceof FormContainer) {
-                    parent.fire('fieldChange', opts)
+                    parent.fire(formEvent, opts)
                 }
             })
         }
     }
 
+    /**
+     * Override this method as needed
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    fireChangeEvent(value, oldValue) {
+        this.doFireChangeEvent(value, oldValue, 'change')
+    }
+
+    /**
+     * Override this method as needed
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    fireUserChangeEvent(value, oldValue) {
+        this.doFireChangeEvent(value, oldValue, 'userChange')
+    }
+
     /**
      * Forms in neo can be nested. This method will return the closest parent which is a form.Container or null.
      * @returns {Neo.form.Container|null}

package/src/form/field/CheckBox.mjs

@@ -525,7 +525,9 @@ class CheckBox extends Base {
         // keep the vdom & vnode in sync for future updates
         me.vnode.childNodes[0].childNodes[me.hideLabel ? 0 : 1].attributes.checked = `${checked}`;
 
-        me.checked = checked
+        me.checked = checked;
+
+        me.fireUserChangeEvent(me.getValue(), me.getOldValue())
     }
 
     /**

package/src/form/field/Text.mjs

@@ -1242,16 +1242,19 @@ class Text extends Base {
      * @protected
      */
     onInputValueChange(data) {
-        let me    = this,
-            value = data.value,
-            vnode = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+        let me       = this,
+            oldValue = me.value,
+            value    = data.value,
+            vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
             // required for validation -> revert a wrong user input
             vnode.vnode.attributes.value = value;
         }
 
-        me.value = me.inputValueAdjustor(value)
+        me.value = me.inputValueAdjustor(value);
+
+        me.fireUserChangeEvent(value, oldValue)
     }
 
     /**

package/src/util/Function.mjs

@@ -47,7 +47,7 @@ export function createSequence(target, methodName, fn, scope) {
 /**
  * @param {Function} func
  * @param {Neo.core.Base} scope
- * @param {Number} timeout
+ * @param {Number} timeout=300
  * @returns {Function}
  */
 export function debounce(func, scope, timeout=300) {