neo.mjs 5.4.12 → 5.5.1

package/apps/ServiceWorker.mjs

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

package/apps/form/view/pages/Page4.mjs

@@ -16,10 +16,12 @@ class Page4 extends FormPageContainer {
          * @member {Object} itemDefaults
          */
         itemDefaults: {
-            module    : CheckBox,
-            labelText : null,
-            labelWidth: 70,
-            name      : 'fruits'
+            module        : CheckBox,
+            groupRequired : true,
+            labelText     : null,
+            labelWidth    : 70,
+            name          : 'fruits',
+            showErrorTexts: false
         },
         /**
          * @member {Object[]} items
@@ -40,11 +42,14 @@ class Page4 extends FormPageContainer {
             value         : 'orange',
             valueLabelText: 'Orange'
         }, {
+            showErrorTexts: true, // overwriting the itemDefaults value
             value         : 'strawberry',
             valueLabelText: 'Strawberry'
         }, {
             labelText     : 'Boolean',
+            groupRequired : false, // overwriting the itemDefaults value
             name          : 'boolean',
+            showErrorTexts: true,  // overwriting the itemDefaults value
             style         : {marginTop: '50px'},
             uncheckedValue: false,
             value         : true

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.4.12",
+    "version": "5.5.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",
-        "sass": "^1.62.0",
+        "sass": "^1.62.1",
         "webpack": "^5.80.0",
         "webpack-cli": "^5.0.2",
         "webpack-dev-server": "4.13.3",

package/src/DefaultConfig.mjs

@@ -113,17 +113,16 @@ const DefaultConfig = {
     logDeltaUpdates: false,
     /**
      * Add addons for the main thread
-     * Possible values: AmCharts, AnalyticsByGoogle, DragDrop, HighlightJS, LocalStorage, MapboxGL, Markdown, Siesta, Stylesheet, WindowPosition
-     * (src/main/addon) contains all framework related options.
+     * ./src/main/addon/ contains all framework related options.
      * You can also create your own addons within your workspace scope. Make sure to put them inside 'src/main/addon/'
      * and prefix them with 'WS/' inside your neo-config.json file.
      * Example: ['DragDrop', 'Stylesheet', 'WS/MyAddon']
-     * @default ['DragDrop','Stylesheet']
+     * @default ['DragDrop','ScrollSync','Stylesheet']
      * @memberOf! module:Neo
      * @name config.mainThreadAddons
      * @type String[]
      */
-    mainThreadAddons: ['DragDrop', 'Stylesheet'],
+    mainThreadAddons: ['DragDrop', 'ScrollSync', 'Stylesheet'],
     /**
      * Pass the URL of a JSON-file, which contains the services and methods from your backend,
      * which you want to expose to the client.
@@ -237,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.4.12'
+     * @default '5.5.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.4.12'
+    version: '5.5.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -1180,6 +1180,31 @@ class Base extends CoreBase {
         return this.getConfigInstanceByNtype('model', ntype);
     }
 
+    /**
+     * Calculate the real parentIndex inside the DOM
+     * @returns {Number|undefined}
+     */
+    getMountedParentIndex() {
+        let parent = Neo.getComponent(this.parentId),
+            items  = parent?.items || [],
+            i      = 0,
+            index  = 0,
+            len    = items.length,
+            item;
+
+        for (; i < len; i++) {
+            item = items[i];
+
+            if (item === this) {
+                return index
+            }
+
+            if (!item.hidden && item.hideMode === 'removeDom') {
+                index++
+            }
+        }
+    }
+
     /**
      * Get the parent components as an array
      * @returns {Neo.component.Base[]}
@@ -1404,7 +1429,7 @@ class Base extends CoreBase {
                 id         : me.id,
                 html       : me.vnode.outerHTML,
                 parentId   : me.parentId,
-                parentIndex: me.parentIndex
+                parentIndex: me.getMountedParentIndex()
             });
 
             delete me.vdom.removeDom;
@@ -1626,8 +1651,8 @@ class Base extends CoreBase {
             Neo.vdom.Helper.create({
                 appName    : me.appName,
                 autoMount,
-                parentId   : autoMount ? me.parentId    : undefined,
-                parentIndex: autoMount ? me.parentIndex : undefined,
+                parentId   : autoMount ? me.parentId                : undefined,
+                parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
                 ...me.vdom
             }).then(data => {
                 me.onRender(data, useVdomWorker ? autoMount : false);

package/src/form/field/CheckBox.mjs

@@ -1,5 +1,6 @@
-import Base     from './Base.mjs';
-import NeoArray from '../../util/Array.mjs';
+import Base             from './Base.mjs';
+import ComponentManager from '../../manager/Component.mjs';
+import NeoArray         from '../../util/Array.mjs';
 
 /**
  * @class Neo.form.field.CheckBox
@@ -37,10 +38,18 @@ class CheckBox extends Base {
          * @member {String|null} error_=null
          */
         error_: null,
+        /**
+         * @member {Function} errorTextGroupRequired='Required'
+         */
+        errorTextGroupRequired: data => `Please check at least one item of the group: ${data.name}`,
         /**
          * @member {String} errorTextRequired='Required'
          */
         errorTextRequired: 'Required',
+        /**
+         * @member {Boolean} groupRequired_=false
+         */
+        groupRequired_: false,
         /**
          * @member {Boolean} hideLabel_=false
          */
@@ -87,6 +96,11 @@ class CheckBox extends Base {
          * @member {Boolean} required_=false
          */
         required_: false,
+        /**
+         * Use case: Set this config to false for all but one items with the same name.
+         * @member {Boolean} showErrorTexts_=true
+         */
+        showErrorTexts_: true,
         /**
          * In case the CheckBox does not belong to a group (multiple fields with the same name),
          * you can pass a custom value for the unchecked state.
@@ -148,6 +162,10 @@ class CheckBox extends Base {
             newCls  = value ? me.iconClsChecked : me.iconCls,
             oldCls  = value ? me.iconCls : me.iconClsChecked;
 
+        if (oldValue) {
+            me.clean = false;
+        }
+
         me.validate(); // silent
 
         labelEl.cn[1].checked = value;
@@ -171,6 +189,16 @@ class CheckBox extends Base {
         this.updateError(value)
     }
 
+    /**
+     * Triggered after the required groupRequired got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetGroupRequired(value, oldValue) {
+        oldValue !== undefined && this.validate(false)
+    }
+
     /**
      * Triggered after the hideLabel config got changed
      * @param {String} value
@@ -291,6 +319,16 @@ class CheckBox extends Base {
         oldValue !== undefined && this.validate(false)
     }
 
+    /**
+     * Triggered after the showErrorTexts config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowErrorTexts(value, oldValue) {
+        oldValue !== undefined && this.validate(false)
+    }
+
     /**
      * Triggered after the value config got changed
      * @param {String} value
@@ -323,6 +361,21 @@ class CheckBox extends Base {
         me.update()
     }
 
+    /**
+     * Triggered before the groupRequired config gets changed.
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    beforeSetGroupRequired(value, oldValue) {
+        if (value && this.required) {
+            console.warn('Do not use groupRequired & required at the same time. Switching to required.', this);
+            return false
+        }
+
+        return value
+    }
+
     /**
      * Triggered before the labelCls config gets changed.
      * @param {String[]} value
@@ -407,8 +460,9 @@ class CheckBox extends Base {
      @param {Boolean} silent=false
      */
     updateError(value, silent=false) {
-        let me  = this,
-            cls = me.cls,
+        let me        = this,
+            cls       = me.cls,
+            showError = value && me.showErrorTexts,
             errorNode;
 
         if (!(me.clean && !me.mounted)) {
@@ -419,13 +473,13 @@ class CheckBox extends Base {
 
             errorNode = me.vdom.cn[1];
 
-            if (value) {
+            if (showError) {
                 errorNode.html = value;
             } else {
                 delete errorNode.html;
             }
 
-            errorNode.removeDom = !value;
+            errorNode.removeDom = !showError;
 
             !silent && me.update()
         }
@@ -438,14 +492,47 @@ class CheckBox extends Base {
      */
     validate(silent=true) {
         let me          = this,
-            returnValue = true;
+            name        = me.name,
+            returnValue = true,
+            checkBox, checkBoxes;
 
         if (!silent) {
             // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
             me.clean = false;
         }
 
-        if (me.required && !me.checked) {
+        if (me.groupRequired) {
+            returnValue = false;
+
+            // discuss: we could limit this to checkBoxes / radios inside the same form, IF a top level form is used
+            checkBoxes = ComponentManager.find({
+                ntype: me.ntype,
+                name : me.name
+            });
+
+            // get the group validity state first
+            for (checkBox of checkBoxes) {
+                if (checkBox.checked) {
+                    returnValue = true;
+                    break;
+                }
+            }
+
+            // update all group items
+            for (checkBox of checkBoxes) {
+                if (checkBox.id !== me.id) {
+                    if (!me.clean) {
+                        checkBox.clean = false;
+                    }
+
+                    checkBox[me.clean ? '_error' : 'error'] = returnValue ? null : checkBox.errorTextGroupRequired({name})
+                }
+            }
+
+            if (!returnValue) {
+                me._error = me.errorTextGroupRequired({name});
+            }
+        } else if (me.required && !me.checked) {
             me._error = me.errorTextRequired;
             returnValue = false;
         }

package/src/form/field/Number.mjs

@@ -162,6 +162,34 @@ class Number extends Text {
         }
     }
 
+    /**
+     * Triggered before the maxLength config gets changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    beforeSetMaxLength(value, oldValue) {
+        if (value !== null) {
+            console.warn('input type number does not support maxLength. use maxValue instead.', this)
+        }
+
+        return null;
+    }
+
+    /**
+     * Triggered before the minLength config gets changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    beforeSetMinLength(value, oldValue) {
+        if (value !== null) {
+            console.warn('input type number does not support minLength. use minValue instead.', this)
+        }
+
+        return null;
+    }
+
     /**
      * Triggered after the triggerPosition config got changed
      * @param {String} value
@@ -351,32 +379,25 @@ class Number extends Text {
             minValue    = me.minValue,
             stepSize    = me.stepSize,
             stepSizePow = Math.pow(10, me.stepSizeDigits),
-            returnValue = true,
+            returnValue = super.validate(silent),
             errorParam  = {maxValue, minValue, stepSize, value};
 
-        if (!silent) {
-            // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
-            me.clean = false;
-        }
-
-        if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
-            me._error = me.errorTextMaxValue(errorParam);
-            returnValue = false;
-        } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
-            me._error = me.errorTextMinValue(errorParam);
-            returnValue = false;
-        } else if ((Math.round((value % me.stepSize) * stepSizePow) / stepSizePow) !== 0) {
-            me._error = me.errorTextStepSize(errorParam);
-            returnValue = false;
-        }
-
         if (returnValue) {
-            me._error = null;
+            if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
+                me._error = me.errorTextMaxValue(errorParam);
+                returnValue = false;
+            } else if (Neo.isNumber(minValue) && isNumber && value < minValue) {
+                me._error = me.errorTextMinValue(errorParam);
+                returnValue = false;
+            } else if ((Math.round((value % me.stepSize) * stepSizePow) / stepSizePow) !== 0) {
+                me._error = me.errorTextStepSize(errorParam);
+                returnValue = false;
+            }
         }
 
-        !me.clean && me.updateError(me._error, silent);
+        !returnValue && !me.clean && me.updateError(me._error, silent);
 
-        return !returnValue ? false : super.validate(silent);
+        return returnValue
     }
 }
 

package/src/form/field/Picker.mjs

@@ -2,7 +2,6 @@ import Container     from '../../container/Base.mjs';
 import NeoArray      from '../../util/Array.mjs';
 import PickerTrigger from './trigger/Picker.mjs';
 import Text          from './Text.mjs';
-import VDomUtil      from '../../util/VDom.mjs';
 
 /**
  * The abstract picker field provides an arrow down trigger which opens a floating container to provide
@@ -274,7 +273,7 @@ class Picker extends Text {
      * @param {Object} data
      * @protected
      */
-    onFocusEnter(data) {console.log('onFocusEnter')
+    onFocusEnter(data) {
         super.onFocusEnter(data);
 
         let me = this;
@@ -286,7 +285,7 @@ class Picker extends Text {
      * @param {Object} data
      * @protected
      */
-    onFocusLeave(data) {console.log('onFocusLeave')
+    onFocusLeave(data) {
         let me           = this,
             insidePicker = false,
             item;
@@ -307,7 +306,7 @@ class Picker extends Text {
     /**
      * @param {Object} data
      */
-    onInputClick(data) {console.log('onInputClick')
+    onInputClick(data) {
         let me = this;
 
         if (!me.editable) {

package/src/form/field/Radio.mjs

@@ -1,5 +1,5 @@
 import CheckBox         from './CheckBox.mjs';
-import ComponentManager from '../../manager/Component.mjs'
+import ComponentManager from '../../manager/Component.mjs';
 
 /**
  * @class Neo.form.field.Radio

package/src/main/addon/ScrollSync.mjs

@@ -0,0 +1,58 @@
+import Base from '../../core/Base.mjs';
+
+/**
+ * @class Neo.main.addon.ScrollSync
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class ScrollSync extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.ScrollSync'
+         * @protected
+         */
+        className: 'Neo.main.addon.ScrollSync',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote={app: [//...]}
+         * @protected
+         */
+        remote: {
+            app: [
+                'register',
+                'unregister'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.sourceId
+     * @param {String} data.targetId
+     */
+    register(data) {
+        console.log('register', data)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.sourceId
+     * @param {String} data.targetId
+     */
+    unregister(data) {
+        console.log('unregister', data)
+    }
+}
+
+Neo.applyClassConfig(ScrollSync);
+
+let instance = Neo.create(ScrollSync);
+
+Neo.applyToGlobalNs(instance);
+
+export default instance;