neo.mjs 4.6.10 → 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/examples/{toast → component/toast}/MainContainer.mjs

@@ -1,20 +1,20 @@
-import Button                  from '../../src/button/Base.mjs';
-import CheckBox                from '../../src/form/field/CheckBox.mjs';
-import Component               from '../../src/component/Base.mjs';
-import FormContainer           from '../../src/form/Container.mjs';
+import Button                  from '../../../src/button/Base.mjs';
+import CheckBox                from '../../../src/form/field/CheckBox.mjs';
+import Component               from '../../../src/component/Base.mjs';
+import FormContainer           from '../../../src/form/Container.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import NumberField             from '../../src/form/field/Number.mjs';
-import SelectField             from '../../src/form/field/Select.mjs';
-import TextField               from '../../src/form/field/Text.mjs';
-import Viewport                from '../../src/container/Viewport.mjs';
+import NumberField             from '../../../src/form/field/Number.mjs';
+import SelectField             from '../../../src/form/field/Select.mjs';
+import TextField               from '../../../src/form/field/Text.mjs';
+import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
- * @class Neo.examples.toast.MainContainer
+ * @class Neo.examples.component.toast.MainContainer
  * @extends Neo.container.Viewport
  */
 class MainContainer extends Viewport {
     static getConfig() {return {
-        className : 'Neo.examples.toast.MainContainer',
+        className : 'Neo.examples.component.toast.MainContainer',
         autoMount : true,
         controller: MainContainerController,
         layout: {ntype: 'hbox', align: 'stretch'},
@@ -79,12 +79,13 @@ class MainContainer extends Viewport {
                 name     : 'timeout',
                 maxValue : 99999
             }, {
-                module    : CheckBox,
-                labelText : 'Closable',
-                labelWidth: 70,
-                name      : 'closable',
-                reference : 'closable',
-                style     : {padding: '8px 0 10px 9px'}
+                module       : CheckBox,
+                labelPosition: 'left',
+                labelText    : 'Closable',
+                labelWidth   : 70,
+                name         : 'closable',
+                reference    : 'closable',
+                style        : {padding: '8px 0 10px 9px'}
             }, {
                 module   : Button,
                 reference: 'creation-button',
@@ -108,7 +109,7 @@ class MainContainer extends Viewport {
 
             itemTpl: data => {
                 return [
-                    {cls: 'import', innerHTML: 'import Toast from \'../../../../node_modules/neo.mjs/src/dialog/Toast.mjs\';'},
+                    {cls: 'import', innerHTML: 'import Toast from \'../../../../node_modules/neo.mjs/src/component/Toast.mjs\';'},
                     {innerHTML: 'Neo.toast({'},
                     {cls: 'tab', cn: [
                         {cls: 'grey', innerHTML: '/* mandatory */'},

package/examples/{toast → component/toast}/MainContainerController.mjs

@@ -1,17 +1,17 @@
-import ComponentController from '../../src/controller/Component.mjs';
-import Toast               from '../../src/component/Toast.mjs';
+import ComponentController from '../../../src/controller/Component.mjs';
+import Toast               from '../../../src/component/Toast.mjs';
 
 /**
- * @class Neo.examples.toast.MainContainerController
+ * @class Neo.examples.component.toast.MainContainerController
  * @extends Neo.controller.Component
  */
 class MainContainerController extends ComponentController {
     static getConfig() {return {
         /**
-         * @member {String} className='Neo.examples.toast.MainContainerController'
+         * @member {String} className='Neo.examples.component.toast.MainContainerController'
          * @protected
          */
-        className: 'Neo.examples.toast.MainContainerController'
+        className: 'Neo.examples.component.toast.MainContainerController'
     }}
 
     /**

package/examples/{toast → component/toast}/app.mjs

@@ -2,6 +2,6 @@ import MainContainer from './MainContainer.mjs';
 
 export const onStart = () => Neo.app({
     mainView: MainContainer,
-    name    : 'Neo.examples.toast'
+    name    : 'Neo.examples.component.toast'
 });
 

package/examples/{toast → component/toast}/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <title>Neo GoogleMaps Component</title>
+    <title>Neo Toast Component</title>
 
     <style>
         .output {
@@ -22,6 +22,6 @@
 </head>
 </head>
 <body>
-    <script src="../../src/MicroLoader.mjs" type="module"></script>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
 </body>
 </html>

package/examples/component/toast/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/component/toast/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["HighlightJS", "Stylesheet"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.6.10",
+    "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;
@@ -43,6 +40,7 @@
 
         .neo-checkbox-label {
             display: block;
+            margin : v(checkboxfield-label-top-margin);
         }
     }
 }

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

@@ -1,48 +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;
-        }
-    }
 }

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,11 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'checkboxfield-color'        : #eee,
-    'checkboxfield-checked-color': #64B5F6
+    'checkboxfield-color'           : #eee,
+    '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           : #{neo(checkboxfield-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,11 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'checkboxfield-color'        : #aaa,
-    'checkboxfield-checked-color': #1c60a0
+    'checkboxfield-color'           : #aaa,
+    '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           : #{neo(checkboxfield-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,19 +234,29 @@ 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}
      */
     getEventData(event) {
-        let path = event.path || event.composedPath(); // FF does not support path
-
         return {
-            path     : path.map(e => this.getTargetData(e)),
+            path     : event.composedPath().map(e => this.getTargetData(e)),
             target   : this.getTargetData(event.target),
             timeStamp: event.timeStamp,
             type     : event.type
-        };
+        }
     }
 
     /**
@@ -277,7 +275,7 @@ class DomEvents extends Base {
             keyCode,
             metaKey,
             shiftKey
-        };
+        }
     }
 
     /**
@@ -301,7 +299,7 @@ class DomEvents extends Base {
             screenX,
             screenY,
             shiftKey
-        };
+        }
     }
 
     /**
@@ -341,7 +339,7 @@ class DomEvents extends Base {
                 width : r.width,
                 x     : r.x,
                 y     : r.y
-            });
+            })
         }
 
         return {
@@ -372,7 +370,7 @@ class DomEvents extends Base {
             style            : node.style?.cssText,
             tabIndex         : node.tabIndex,
             tagName          : node.tagName?.toLowerCase()
-        };
+        }
     }
 
     /**
@@ -686,7 +684,7 @@ class DomEvents extends Base {
             action   : 'domEvent',
             eventName: data.type,
             data
-        });
+        })
     }
 
     /**

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/examples/toast/neo-config.json

@@ -1,7 +0,0 @@
-{
-    "appPath": "examples/toast/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainPath": "./Main.mjs",
-    "mainThreadAddons": ["HighlightJS", "Stylesheet"]
-}

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

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

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

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