neo.mjs 4.6.9 → 4.6.11

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.9",
+    "version": "4.6.11",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -43,6 +43,7 @@
 
         .neo-checkbox-label {
             display: block;
+            margin : v(checkboxfield-label-top-margin);
         }
     }
 }

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

@@ -43,6 +43,7 @@
 
         .neo-radio-label {
             display: block;
+            margin : v(radiofield-label-top-margin);
         }
     }
 }

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

@@ -1,11 +1,13 @@
 $neoMap: map-merge($neoMap, (
-    'checkboxfield-color'        : #eee,
-    'checkboxfield-checked-color': #64B5F6
+    'checkboxfield-color'           : #eee,
+    'checkboxfield-checked-color'   : #64B5F6,
+    '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-checked-color   : #{neo(checkboxfield-checked-color)};
+        --checkboxfield-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
-}
+}

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

@@ -1,11 +1,13 @@
 $neoMap: map-merge($neoMap, (
-    'radiofield-color'        : #eee,
-    'radiofield-checked-color': #64B5F6
+    '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-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/CheckBox.scss

@@ -1,11 +1,13 @@
 $neoMap: map-merge($neoMap, (
-    'checkboxfield-color'        : #aaa,
-    'checkboxfield-checked-color': #1c60a0
+    'checkboxfield-color'           : #aaa,
+    'checkboxfield-checked-color'   : #1c60a0,
+    '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-checked-color   : #{neo(checkboxfield-checked-color)};
+        --checkboxfield-label-top-margin: #{neo(checkboxfield-label-top-margin)};
     }
-}
+}

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

@@ -1,11 +1,13 @@
 $neoMap: map-merge($neoMap, (
-    'radiofield-color'        : #aaa,
-    'radiofield-checked-color': #1c60a0
+    '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-color           : #{neo(radiofield-color)};
+        --radiofield-checked-color   : #{neo(radiofield-checked-color)};
+        --radiofield-label-top-margin: #{neo(radiofield-label-top-margin)};
     }
-}
+}

package/src/component/Base.mjs

@@ -859,7 +859,7 @@ class Base extends CoreBase {
      * @protected
      */
     beforeSetCls(value, oldValue) {
-        return NeoArray.union(value || [], this.baseCls);;
+        return NeoArray.union(value || [], this.baseCls);
     }
 
     /**

package/src/form/field/CheckBox.mjs

@@ -48,6 +48,14 @@ class CheckBox extends Base {
          * @member {String} inputType_='checkbox'
          */
         inputType_: 'checkbox',
+        /**
+         * @member {String[]} labelBaseCls=['neo-checkbox-label']
+         */
+        labelBaseCls: ['neo-checkbox-label'],
+        /**
+         * @member {String[]} labelCls_=[]
+         */
+        labelCls_: [],
         /**
          * Valid values: 'left', 'top'
          * @member {String} labelPosition_='left'
@@ -75,7 +83,7 @@ class CheckBox extends Base {
          */
         _vdom:
         {cn: [
-            {tag: 'label', cls: ['neo-checkbox-label']},
+            {tag: 'label', cls: []},
             {tag: 'input', cls: ['neo-checkbox-input']},
             {tag: 'label', cls: ['neo-checkbox-value-label']}
         ]}
@@ -173,6 +181,22 @@ class CheckBox extends Base {
         this.update();
     }
 
+    /**
+     * Triggered after the labelCls config got changed
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @protected
+     */
+    afterSetLabelCls(value, oldValue) {
+        let me  = this,
+            cls = me.vdom.cn[0].cls;
+
+        NeoArray.remove(cls, oldValue);
+        NeoArray.add(cls, value);
+
+        me.update();
+    }
+
     /**
      * Triggered after the labelPosition config got changed
      * @param {String} value
@@ -259,6 +283,16 @@ class CheckBox extends Base {
         me.update();
     }
 
+    /**
+     * Triggered before the labelCls config gets changed.
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @protected
+     */
+    beforeSetLabelCls(value, oldValue) {
+        return NeoArray.union(value || [], this.labelBaseCls);
+    }
+
     /**
      * Triggered before the labelPosition config gets changed
      * @param {String} value

package/src/form/field/Radio.mjs

@@ -25,12 +25,16 @@ class Radio extends CheckBox {
          * @member {String} inputType='radio'
          */
         inputType: 'radio',
+        /**
+         * @member {String[]} labelBaseCls=['neo-radio-label']
+         */
+        labelBaseCls: ['neo-radio-label'],
         /**
          * @member {Object} _vdom
          */
         _vdom:
         {cn: [
-            {tag: 'label', cls: ['neo-radio-label']},
+            {tag: 'label', cls: []},
             {tag: 'input', cls: ['neo-radio-input']},
             {tag: 'label', cls: ['neo-radio-value-label']}
         ]}

package/src/form/field/Text.mjs

@@ -94,9 +94,13 @@ class Text extends Base {
          */
         inputType_: 'text',
         /**
-         * @member {String[]} labelCls_=['neo-textfield-label']
+         * @member {String[]} labelBaseCls=['neo-textfield-label']
          */
-        labelCls_: ['neo-textfield-label'],
+        labelBaseCls: ['neo-textfield-label'],
+        /**
+         * @member {String[]} labelCls_=[]
+         */
+        labelCls_: [],
         /**
          * Valid values: 'bottom', 'inline', 'left', 'right', 'top'
          * @member {String} labelPosition_='left'
@@ -648,6 +652,16 @@ class Text extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'autoCapitalize', 'autoCapitalizeValues');
     }
 
+    /**
+     * Triggered before the labelCls config gets changed.
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @protected
+     */
+    beforeSetLabelCls(value, oldValue) {
+        return NeoArray.union(value || [], this.labelBaseCls);
+    }
+
     /**
      * Triggered before the labelPosition config gets changed
      * @param {String} value

package/src/main/DomEvents.mjs

@@ -251,14 +251,12 @@ class DomEvents extends Base {
      * @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/examples/toast/neo-config.json

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