neo.mjs 4.6.8 → 4.6.9

package/examples/form/field/checkbox/MainContainer.mjs

@@ -0,0 +1,111 @@
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
+import Radio                 from '../../../../src/form/field/Radio.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.form.field.checkbox.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className           : 'Neo.examples.form.field.checkbox.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 160,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.hideLabel,
+            labelText: 'hideLabel',
+            listeners: {change: me.onConfigChange.bind(me, 'hideLabel')},
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'left',
+            hideValueLabel: false,
+            labelText     : 'labelPosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'left')},
+            name          : 'labelPosition',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'top',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'top')},
+            name          : 'labelPosition',
+            valueLabelText: 'top'
+        }, {
+            module   : TextField,
+            labelText: 'labelText',
+            listeners: {change: me.onConfigChange.bind(me, 'labelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.labelText
+        }, {
+            module   : NumberField,
+            labelText: 'labelWidth',
+            listeners: {change: me.onConfigChange.bind(me, 'labelWidth')},
+            maxValue : 200,
+            minValue : 50,
+            stepSize : 5,
+            value    : me.exampleComponent.labelWidth
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.readOnly,
+            labelText: 'readOnly',
+            listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.required,
+            labelText: 'required',
+            listeners: {change: me.onConfigChange.bind(me, 'required')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            labelText: 'valueLabelText',
+            listeners: {change: me.onConfigChange.bind(me, 'valueLabelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.valueLabelText
+        }, {
+            module   : NumberField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 500,
+            minValue : 50,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }, {
+            ntype  : 'button',
+            handler: (() => {me.exampleComponent.reset()}),
+            style  : {marginTop: '10px', width: '50%'},
+            text   : 'reset()'
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(CheckBox, {
+            labelText : 'Label',
+            labelWidth: 70,
+            width     : 200
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/form/field/checkbox/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.form.field.checkbox'
+});

package/examples/form/field/checkbox/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo CheckBoxField</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/form/field/checkbox/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/form/field/checkbox/app.mjs",
+    "basePath"   : "../../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/form/field/radio/MainContainer.mjs

@@ -0,0 +1,111 @@
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
+import Radio                 from '../../../../src/form/field/Radio.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.form.field.radio.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className           : 'Neo.examples.form.field.radio.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 160,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.hideLabel,
+            labelText: 'hideLabel',
+            listeners: {change: me.onConfigChange.bind(me, 'hideLabel')},
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'left',
+            hideValueLabel: false,
+            labelText     : 'labelPosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'left')},
+            name          : 'labelPosition',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'top',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'top')},
+            name          : 'labelPosition',
+            valueLabelText: 'top'
+        }, {
+            module   : TextField,
+            labelText: 'labelText',
+            listeners: {change: me.onConfigChange.bind(me, 'labelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.labelText
+        }, {
+            module   : NumberField,
+            labelText: 'labelWidth',
+            listeners: {change: me.onConfigChange.bind(me, 'labelWidth')},
+            maxValue : 200,
+            minValue : 50,
+            stepSize : 5,
+            value    : me.exampleComponent.labelWidth
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.readOnly,
+            labelText: 'readOnly',
+            listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.required,
+            labelText: 'required',
+            listeners: {change: me.onConfigChange.bind(me, 'required')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            labelText: 'valueLabelText',
+            listeners: {change: me.onConfigChange.bind(me, 'valueLabelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.valueLabelText
+        }, {
+            module   : NumberField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 500,
+            minValue : 50,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }, {
+            ntype  : 'button',
+            handler: (() => {me.exampleComponent.reset()}),
+            style  : {marginTop: '10px', width: '50%'},
+            text   : 'reset()'
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(Radio, {
+            labelText : 'Label',
+            labelWidth: 70,
+            width     : 200
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/form/field/radio/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.form.field.radio'
+});

package/examples/form/field/radio/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo RadioField</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/form/field/radio/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/form/field/radio/app.mjs",
+    "basePath"   : "../../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.6.8",
+    "version": "4.6.9",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -35,4 +35,14 @@
         color      : v(textfield-label-color);
         user-select: none;
     }
+
+    &.neo-label-top {
+        .neo-checkbox-input {
+            margin-left: 0;
+        }
+
+        .neo-checkbox-label {
+            display: block;
+        }
+    }
 }

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

@@ -35,4 +35,14 @@
         color      : v(textfield-label-color);
         user-select: none;
     }
+
+    &.neo-label-top {
+        .neo-radio-input {
+            margin-left: 0;
+        }
+
+        .neo-radio-label {
+            display: block;
+        }
+    }
 }

package/src/form/field/CheckBox.mjs

@@ -1,10 +1,21 @@
-import Base from './Base.mjs';
+import Base     from './Base.mjs';
+import NeoArray from '../../util/Array.mjs';
 
 /**
  * @class Neo.form.field.CheckBox
  * @extends Neo.form.field.Base
  */
 class CheckBox extends Base {
+    static getStaticConfig() {return {
+        /**
+         * Valid values for labelPosition
+         * @member {String[]} labelPositions=['left','top']
+         * @protected
+         * @static
+         */
+        labelPositions: ['left', 'top']
+    }}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.form.field.CheckBox'
@@ -33,14 +44,15 @@ class CheckBox extends Base {
          * @member {Boolean} hideLabel_=false
          */
         hideLabel_: false,
-        /**
-         * @member {Boolean} hideValueLabel_=false
-         */
-        hideValueLabel_: true,
         /**
          * @member {String} inputType_='checkbox'
          */
         inputType_: 'checkbox',
+        /**
+         * Valid values: 'left', 'top'
+         * @member {String} labelPosition_='left'
+         */
+        labelPosition_: 'left',
         /**
          * @member {String} labelText_='LabelText'
          */
@@ -55,9 +67,9 @@ class CheckBox extends Base {
          */
         name_: '',
         /**
-         * @member {String} valueLabelText_='ValueLabel'
+         * @member {String|null} valueLabelText_=null
          */
-        valueLabelText_: 'ValueLabel',
+        valueLabelText_: null,
         /**
          * @member {Object} _vdom
          */
@@ -132,17 +144,6 @@ class CheckBox extends Base {
         this.update();
     }
 
-    /**
-     * Triggered after the hideLabelValue config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetHideValueLabel(value, oldValue) {
-        this.vdom.cn[2].removeDom = value;
-        this.update();
-    }
-
     /**
      * Triggered after the id config got changed
      * @param {String} value
@@ -172,6 +173,21 @@ class CheckBox extends Base {
         this.update();
     }
 
+    /**
+     * Triggered after the labelPosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetLabelPosition(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        NeoArray.remove(cls, 'neo-label-' + oldValue);
+        NeoArray.add(   cls, 'neo-label-' + value);
+        me.cls = cls;
+    }
+
     /**
      * Triggered after the labelText config got changed
      * @param {String} value
@@ -226,17 +242,32 @@ class CheckBox extends Base {
 
     /**
      * Triggered after the valueLabel config got changed
-     * @param {String} value
-     * @param {String} oldValue
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
     afterSetValueLabelText(value, oldValue) {
-        let me = this;
+        let me         = this,
+            valueLabel = me.vdom.cn[2],
+            showLabel  = !!value; // hide the label, in case value === null || value === ''
 
-        if (!me.hideValueLabel) {
-            me.vdom.cn[2].innerHTML = value;
-            me.update();
+        if (showLabel) {
+            valueLabel.innerHTML = value;
         }
+
+        valueLabel.removeDom = !showLabel;
+        me.update();
+    }
+
+    /**
+     * Triggered before the labelPosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     * @returns {String}
+     */
+    beforeSetLabelPosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'labelPosition');
     }
 
     /**