neo.mjs 4.6.11 → 4.6.12

package/.github/CONCEPT.md

@@ -181,8 +181,9 @@ Pros:
 
 Cons:
 1. neo.mjs is not using TypeScript (you could do it for your own app code, in case you want to use a build process)
-2. Firefox & Safari do not support JS modules inside workers yet, so the development mode only runs in Chrome v80+.
-Of course the dist (dev&prod) versions do run fine in FF & Safari as well.
+2. Firefox does not support JS modules inside workers yet, so the development mode only runs in Chromium (Chrome & Edge),
+as well as Safari. Mozilla is actively working on it.
+Of course the dist (dev&prod) versions do run fine in Firefox as well.
 3. Several npm dependencies can not easily get used, since they do not use a correct ES6 import syntax (e.g. missing file names)
 
 ## No string based pseudo XML templates

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.6.11",
+    "version": "4.6.12",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -47,7 +47,7 @@
         "autoprefixer": "^10.4.13",
         "chalk": "^5.2.0",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^9.5.0",
+        "commander": "^10.0.0",
         "cssnano": "^5.1.14",
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.0",

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

@@ -1,30 +1,27 @@
 .neo-checkboxfield {
     .neo-checkbox-input {
-        appearance: none;
+        display: none;
 
         &:checked {
-            &::after {
-                color      : v(checkboxfield-checked-color);
-                content    : "\f00c";
-                font-weight: 900;
+            +.neo-checkbox-icon {
+                color: v(checkboxfield-color-checked);
             }
         }
 
-        &::after {
-            color      : v(checkboxfield-color);
-            content    : "\f0c8";
-            cursor     : pointer;
-            display    : inline-block;
-            font-family: "Font Awesome 5 Free";
-            font-size  : 14px;
-            width      : 20px;
-        }
-
         &:focus {
             outline : 0;
         }
     }
 
+    .neo-checkbox-icon {
+        color      : v(checkboxfield-color);
+        cursor     : pointer;
+        display    : inline-block;
+        font-family: v(checkboxfield-icon-font-family);
+        font-size  : v(checkboxfield-icon-font-size);
+        width      : 20px;
+    }
+
     .neo-checkbox-label {
         color      : v(textfield-label-color);
         display    : inline-block;

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

@@ -1,49 +1,3 @@
 .neo-radiofield {
-    .neo-radio-input {
-        appearance: none;
 
-        &:checked {
-            &::after {
-                color      : v(radiofield-checked-color);
-                content    : "\f00c";
-                font-weight: 900;
-            }
-        }
-
-        &::after {
-            color      : v(radiofield-color);
-            content    : "\f111";
-            cursor     : pointer;
-            display    : inline-block;
-            font-family: "Font Awesome 5 Free";
-            font-size  : 14px;
-            width      : 20px;
-        }
-
-        &:focus {
-            outline : 0;
-        }
-    }
-
-    .neo-radio-label {
-        color      : v(textfield-label-color);
-        display    : inline-block;
-        user-select: none;
-    }
-
-    .neo-radio-value-label {
-        color      : v(textfield-label-color);
-        user-select: none;
-    }
-
-    &.neo-label-top {
-        .neo-radio-input {
-            margin-left: 0;
-        }
-
-        .neo-radio-label {
-            display: block;
-            margin : v(radiofield-label-top-margin);
-        }
-    }
 }

package/resources/scss/theme-dark/form/_all.scss

@@ -1,7 +1,6 @@
 @import "field/trigger/all";
 @import "field/CheckBox";
 @import "field/Picker";
-@import "field/Radio";
 @import "field/Range";
 @import "field/Search";
 @import "field/Select";

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

@@ -1,13 +1,17 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #eee,
-    'checkboxfield-checked-color'   : #64B5F6,
+    'checkboxfield-color-checked'   : #64B5F6,
+    'checkboxfield-icon-font-family': "Font Awesome 5 Free",
+    'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-dark { // .neo-checkboxfield
         --checkboxfield-color           : #{neo(checkboxfield-color)};
-        --checkboxfield-checked-color   : #{neo(checkboxfield-checked-color)};
+        --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-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
 }

package/resources/scss/theme-light/form/_all.scss

@@ -1,7 +1,6 @@
 @import "field/trigger/all";
 @import "field/CheckBox";
 @import "field/Picker";
-@import "field/Radio";
 @import "field/Range";
 @import "field/Search";
 @import "field/Select";

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

@@ -1,13 +1,17 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #aaa,
-    'checkboxfield-checked-color'   : #1c60a0,
+    'checkboxfield-color-checked'   : #1c60a0,
+    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
+    'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-checkboxfield
         --checkboxfield-color           : #{neo(checkboxfield-color)};
-        --checkboxfield-checked-color   : #{neo(checkboxfield-checked-color)};
+        --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-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
 }

package/src/Neo.mjs

@@ -214,48 +214,30 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * @memberOf module:Neo
      * @param {Object|Array|*} obj
-     * @param {Boolean} [deep=false] Set this to true in case you want to clone nested objects as well
-     * @param {Boolean} [ignoreNeoInstances=false] returns existing instances if set to true
+     * @param {Boolean} deep=false Set this to true in case you want to clone nested objects as well
+     * @param {Boolean} ignoreNeoInstances=false returns existing instances if set to true
      * @returns {Object|Array|*} the cloned input
      */
     clone(obj, deep=false, ignoreNeoInstances=false) {
         let out;
 
-        switch (Neo.typeOf(obj)) {
-            case 'Array': {
-                return !deep ? [...obj] : [...obj.map(val => Neo.clone(val, deep, ignoreNeoInstances))];
-            }
-
-            case 'Date': {
-                return new Date(obj.valueOf());
-            }
-
-            case 'Map': {
-                return new Map(obj); // shallow copy
-            }
+        return {
+            Array      : () => !deep ? [...obj] : [...obj.map(val => Neo.clone(val, deep, ignoreNeoInstances))],
+            Date       : () => new Date(obj.valueOf()),
+            Map        : () => new Map(obj), // shallow copy
+            NeoInstance: () => ignoreNeoInstances ? obj : this.cloneNeoInstance(obj),
+            Set        : () => new Set(obj),
 
-            case 'NeoInstance': {
-                return ignoreNeoInstances ? obj : this.cloneNeoInstance(obj);
-            }
-
-            case 'Object': {
+            Object: () => {
                 out = {};
 
                 Object.entries(obj).forEach(([key, value]) => {
                     out[key] = !deep ? value : Neo.clone(value, deep, ignoreNeoInstances);
                 });
 
-                return out;
+                return out
             }
-
-            case 'Set': {
-                return new Set(obj); // shallow copy
-            }
-
-            default: {
-                return obj; // return all other data types
-            }
-        }
+        }[Neo.typeOf(obj)]?.() || obj
     },
 
     /**
@@ -469,23 +451,18 @@ Neo = globalThis.Neo = Object.assign({
             return null;
         }
 
-        switch (typeof item) {
-            case 'function': {
+        return {
+            function: () => {
                 if (item.prototype?.constructor.isClass) {
-                    return 'NeoClass';
+                    return 'NeoClass'
                 }
-
-                break;
-            }
-
-            case 'object': {
+            },
+            object: () => {
                 if (item.constructor.isClass && item instanceof Neo.core.Base) {
-                    return 'NeoInstance';
+                    return 'NeoInstance'
                 }
             }
-        }
-
-        return item.constructor.name;
+        }[typeof item]?.() || item.constructor.name
     }
 }, Neo);
 

package/src/component/Base.mjs

@@ -1730,11 +1730,12 @@ class Base extends CoreBase {
     /**
      * Toggle a cls inside the vdomRoot of the component
      * @param {String} value
+     * @param {Boolean} [add] Use this param to enforce an add() or remove() operation.
      */
-    toggleCls(value) {
+    toggleCls(value, add) {
         let cls = this.cls;
 
-        NeoArray.toggle(cls, value);
+        NeoArray.toggle(cls, value, add);
         this.cls = cls;
     }
 
@@ -1841,10 +1842,7 @@ class Base extends CoreBase {
 
                 opts = {
                     action: 'updateDom',
-                    deltas: [{
-                        id   : id,
-                        style: delta
-                    }]
+                    deltas: [{id, style: delta}]
                 };
 
                 if (Neo.currentWorker.isSharedWorker) {

package/src/form/field/CheckBox.mjs

@@ -35,15 +35,18 @@ class CheckBox extends Base {
          * @member {Boolean} checked_=false
          */
         checked_: false,
-        /**
-         * True to change the checked state when clicking on the value label
-         * @member {Boolean} enableLabelClicks_=true
-         */
-        enableLabelClicks_: true,
         /**
          * @member {Boolean} hideLabel_=false
          */
         hideLabel_: false,
+        /**
+         * @member {String[]} iconCls=['far','fa-square']
+         */
+        iconCls: ['far', 'fa-square'],
+        /**
+         * @member {String[]} iconClsChecked=['fas','fa-check']
+         */
+        iconClsChecked: ['fas', 'fa-check'],
         /**
          * @member {String} inputType_='checkbox'
          */
@@ -82,10 +85,11 @@ class CheckBox extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
-            {tag: 'label', cls: []},
+        {tag: 'label', cn: [
+            {tag: 'span',  cls: []},
             {tag: 'input', cls: ['neo-checkbox-input']},
-            {tag: 'label', cls: ['neo-checkbox-value-label']}
+            {tag: 'i',     cls: ['neo-checkbox-icon']},
+            {tag: 'span',  cls: ['neo-checkbox-value-label']}
         ]}
     }}
 
@@ -108,9 +112,14 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetChecked(value, oldValue) {
-        let me = this;
+        let me      = this,
+            iconCls = me.vdom.cn[2].cls;
 
         me.vdom.cn[1].checked = value;
+
+        NeoArray.toggle(iconCls, me.iconClsChecked, value);
+        NeoArray.toggle(iconCls, me.iconCls,        !value);
+
         me.update();
 
         if (oldValue !== undefined) {
@@ -122,25 +131,6 @@ class CheckBox extends Base {
         }
     }
 
-    /**
-     * Triggered after the enableLabelClicks config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetEnableLabelClicks(value, oldValue) {
-        let me    = this,
-            label = me.vdom.cn[2];
-
-        if (value) {
-            label.for = me.getInputElId();
-        } else {
-            delete label.for;
-        }
-
-        me.update();
-    }
-
     /**
      * Triggered after the hideLabel config got changed
      * @param {String} value
@@ -164,7 +154,8 @@ class CheckBox extends Base {
 
         vdom.cn[0].id = me.getLabelId();
         vdom.cn[1].id = me.getInputElId();
-        vdom.cn[2].id = me.getValueLabelId();
+        vdom.cn[2].id = me.getIconElId();
+        vdom.cn[3].id = me.getValueLabelId();
 
         // silent vdom update, the super call will trigger the engine
         super.afterSetId(value, oldValue);
@@ -272,7 +263,7 @@ class CheckBox extends Base {
      */
     afterSetValueLabelText(value, oldValue) {
         let me         = this,
-            valueLabel = me.vdom.cn[2],
+            valueLabel = me.vdom.cn[3],
             showLabel  = !!value; // hide the label, in case value === null || value === ''
 
         if (showLabel) {
@@ -304,6 +295,13 @@ class CheckBox extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
     }
 
+    /**
+     * @returns {String}
+     */
+    getIconElId() {
+        return `${this.id}__icon`;
+    }
+
     /**
      * @returns {String}
      */
@@ -333,17 +331,10 @@ class CheckBox extends Base {
         let me      = this,
             checked = data.target.checked;
 
-        me._checked = checked; // silent update
-
         // keep the vdom & vnode in sync for future updates
-        me.vdom.cn[1].checked = checked;
         me.vnode.childNodes[me.hideLabel ? 0 : 1].attributes.checked = `${checked}`;
 
-        me.fire('change', {
-            component: me,
-            oldValue : !checked,
-            value    : checked
-        });
+        me.checked = checked;
     }
 }
 

package/src/form/field/Radio.mjs

@@ -18,26 +18,17 @@ class Radio extends CheckBox {
          */
         ntype: 'radiofield',
         /**
-         * @member {String[]} baseCls=['neo-radiofield']
+         * @member {String[]} baseCls=['neo-radiofield','neo-checkboxfield']
          */
-        baseCls: ['neo-radiofield'],
+        baseCls: ['neo-radiofield', 'neo-checkboxfield'],
         /**
-         * @member {String} inputType='radio'
-         */
-        inputType: 'radio',
-        /**
-         * @member {String[]} labelBaseCls=['neo-radio-label']
+         * @member {String[]} iconCls=['far','fa-circle']
          */
-        labelBaseCls: ['neo-radio-label'],
+        iconCls: ['far', 'fa-circle'],
         /**
-         * @member {Object} _vdom
+         * @member {String} inputType='radio'
          */
-        _vdom:
-        {cn: [
-            {tag: 'label', cls: []},
-            {tag: 'input', cls: ['neo-radio-input']},
-            {tag: 'label', cls: ['neo-radio-value-label']}
-        ]}
+        inputType: 'radio'
     }}
 
     /**
@@ -50,18 +41,7 @@ class Radio extends CheckBox {
         super.afterSetChecked(value, oldValue);
 
         // update radios with the same name to be unchecked
-        if (value) {
-            this.uncheckGroupItems();
-        }
-    }
-
-    /**
-     * Gets triggered when a user checks a radio input.
-     * @param {Object} data
-     */
-    onInputValueChange(data) {
-        super.onInputValueChange(data);
-        this.uncheckGroupItems();
+        value && this.uncheckGroupItems()
     }
 
     /**
@@ -79,22 +59,9 @@ class Radio extends CheckBox {
 
         radios.forEach(item => {
             if (item.id !== me.id && item._checked) {
-                item._checked = false; // silent update
-
-                // keep the vdom & vnode in sync for future updates
-                item.vdom.cn[1].checked = false;
-
-                if (item.vnode) {
-                    item.vnode.childNodes[me.hideLabel ? 0 : 1].attributes.checked = 'false';
-                }
-
-                item.fire('change', {
-                    component: me,
-                    oldValue : true,
-                    value    : false
-                });
+                item.checked = false;
             }
-        });
+        })
     }
 }
 

package/src/main/DomEvents.mjs

@@ -171,18 +171,6 @@ class DomEvents extends Base {
         });
     }
 
-    /**
-     * Returns the distance between two points
-     * @param  {Number} x1 The X position of the first point
-     * @param  {Number} y1 The Y position of the first point
-     * @param  {Number} x2 The X position of the second point
-     * @param  {Number} y2 The Y position of the second point
-     * @returns {Number}
-     */
-    getDistance(x1, y1, x2, y2) {
-        return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-    }
-
     /**
      * Local domEvent listener
      * @param {Object} event
@@ -246,6 +234,18 @@ class DomEvents extends Base {
         Neo.worker.Manager.sendMessage('app', config);
     }
 
+    /**
+     * Returns the distance between two points
+     * @param  {Number} x1 The X position of the first point
+     * @param  {Number} y1 The Y position of the first point
+     * @param  {Number} x2 The X position of the second point
+     * @param  {Number} y2 The Y position of the second point
+     * @returns {Number}
+     */
+    getDistance(x1, y1, x2, y2) {
+        return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+
     /**
      * @param {Object} event
      * @returns {Object}

package/src/manager/DomEvent.mjs

@@ -123,7 +123,7 @@ class DomEvent extends Base {
             if (eventName === 'focusin' || eventName === 'focusout') {
                 FocusManager['on' + Neo.capitalize(eventName)]({
                     componentPath: path,
-                    data         : data
+                    data
                 });
 
                 break;
@@ -303,14 +303,14 @@ class DomEvent extends Base {
         listenerConfig = {
             bubble        : config.hasOwnProperty('bubble') ? config.bubble : opts.hasOwnProperty('bubble') ? opts.bubble : true,
             delegate      : config.delegate,
-            eventName     : eventName,
-            fn            : fn,
+            eventName,
+            fn,
             id            : listenerId,
             mounted       : !config.local && globalDomEvents.includes(eventName),
             originalConfig: config.originalConfig,
             ownerId       : config.ownerId,
             priority      : config.priority || 1,
-            scope         : scope,
+            scope,
             vnodeId       : config.vnodeId
         };
 

package/src/util/Array.mjs

@@ -115,9 +115,20 @@ class NeoArray extends Base {
      * Removes an item from an array in case it does exist, otherwise adds it
      * @param {Array} arr
      * @param {*} item
+     * @param {Boolean} [add]
      */
-    static toggle(arr, item) {
-        this[this.hasItem(arr, item) ? 'remove' : 'add'](arr, item);
+    static toggle(arr, item, add) {
+        let operation;
+
+        if (add === true) {
+            operation = 'add';
+        } else if (add === false) {
+            operation = 'remove';
+        } else {
+            operation = this.hasItem(arr, item) ? 'remove' : 'add';
+        }
+
+        this[operation](arr, item);
     }
 
     /**

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

@@ -1,13 +0,0 @@
-$neoMap: map-merge($neoMap, (
-    'radiofield-color'           : #eee,
-    'radiofield-checked-color'   : #64B5F6,
-    'radiofield-label-top-margin': 0 0 3px
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-radiofield
-        --radiofield-color           : #{neo(radiofield-color)};
-        --radiofield-checked-color   : #{neo(radiofield-checked-color)};
-        --radiofield-label-top-margin: #{neo(radiofield-label-top-margin)};
-    }
-}

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

@@ -1,13 +0,0 @@
-$neoMap: map-merge($neoMap, (
-    'radiofield-color'           : #aaa,
-    'radiofield-checked-color'   : #1c60a0,
-    'radiofield-label-top-margin': 0 0 3px
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .neo-radiofield
-        --radiofield-color           : #{neo(radiofield-color)};
-        --radiofield-checked-color   : #{neo(radiofield-checked-color)};
-        --radiofield-label-top-margin: #{neo(radiofield-label-top-margin)};
-    }
-}