neo.mjs 6.3.11 → 6.4.0

package/apps/ServiceWorker.mjs

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

package/examples/ConfigurationViewport.mjs

@@ -56,9 +56,14 @@ class ConfigurationViewport extends Viewport {
      *
      */
     onConstructed() {
-        let me = this,
+        let me    = this,
+            style = me.exampleContainerConfig?.style,
             theme;
 
+        if (style) {
+            delete me.exampleContainerConfig.style;
+        }
+
         me.exampleComponent        = me.createExampleComponent();
         me.configurationComponents = me.createConfigurationComponents() || [];
 
@@ -69,7 +74,7 @@ class ConfigurationViewport extends Viewport {
             items : [me.exampleComponent],
             flex  : me.exampleComponentFlex,
             layout: 'base',
-            style : {overflow: 'auto', padding: '20px'},
+            style : {overflow: 'auto', padding: '20px', ...style},
             ...me.exampleContainerConfig
         }, {
             module: Panel,
@@ -172,22 +177,29 @@ class ConfigurationViewport extends Viewport {
     onSwitchTheme(target) {
         let me     = this,
             button = Neo.getComponent(me.id + (target !== 'cmp' ? '__' : '_cmp_') + 'switchThemeButton'),
-            cls    = target === 'cmp' ? me.exampleComponent.cls : me.cls;
+            newTheme, oldTheme;
 
         if (button.text === 'Theme Light') {
+            newTheme = 'neo-theme-light';
+            oldTheme = 'neo-theme-dark';
+
             button.text = 'Theme Dark';
-            NeoArray.remove(cls, 'neo-theme-dark');
-            NeoArray.add(cls, 'neo-theme-light');
         } else {
+            newTheme = 'neo-theme-dark';
+            oldTheme = 'neo-theme-light';
+
             button.text = 'Theme Light';
-            NeoArray.remove(cls, 'neo-theme-light');
-            NeoArray.add(cls, 'neo-theme-dark');
         }
 
         if (target === 'cmp') {
-            me.exampleComponent.cls = cls;
+            me.exampleComponent.theme = newTheme;
         } else {
-            me.cls = cls;
+            Neo.applyDeltas(me.appName, {
+                cls: {
+                    add   : [newTheme],
+                    remove: [oldTheme]
+                }
+            })
         }
     }
 }

package/examples/ServiceWorker.mjs

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

package/examples/container/dialog/MainContainerController.mjs

@@ -1,4 +1,5 @@
-import Component    from '../../../src/controller/Component.mjs';
+import Component   from '../../../src/controller/Component.mjs';
+import SelectField from '../../../src/form/field/Select.mjs';
 
 /**
  * @class Neo.examples.container.dialog.MainContainerController
@@ -13,22 +14,14 @@ class MainContainerController extends Component {
         className: 'Neo.examples.container.dialog.MainContainerController'
     }
 
-    dialog = null;
-    title = 'example dialog';
-    height = 300;
-    width = 500;
+    dialog = null
+    title  = 'example dialog'
+    height = 300
+    width  = 500
 
     /**
-     * 
-     * @param {*} config 
-     */
-    construct(config) {
-        super.construct(config);
-    }
-
-    /**
-     * 
-     * @param {Object} data 
+     *
+     * @param {Object} data
      */
     async onButtonClick(data) {
         if (!this.dialog) {
@@ -42,7 +35,7 @@ class MainContainerController extends Component {
                 height: this.height,
                 width: this.width,
                 iconCls: ['fa', 'fa-home'],
-                
+
                 headerConfig: {
                     items: [{
                         ntype: 'button',
@@ -54,9 +47,20 @@ class MainContainerController extends Component {
                 items: [{
                     ntype: 'container',
                     html: 'text'
+                }, {
+                    module   : SelectField,
+                    labelText: 'Select',
+
+                    store: {
+                        data: [{
+                            id  : 0,
+                            name: 'Option 1'
+                        }]
+                    }
                 }]
             })
         }
+
         this.dialog.show();
 
         console.log(data, this);

package/examples/dialog/DemoDialog.mjs

@@ -1,4 +1,5 @@
-import Dialog from '../../src/dialog/Base.mjs';
+import Dialog      from '../../src/dialog/Base.mjs';
+import SelectField from '../../src/form/field/Select.mjs';
 
 /**
  * @class Neo.examples.dialog.DemoDialog
@@ -7,12 +8,32 @@ import Dialog from '../../src/dialog/Base.mjs';
 class DemoDialog extends Dialog {
     static config = {
         className: 'Neo.examples.dialog.DemoWindow',
+        modal    : true,
         title    : 'My Dialog',
 
         wrapperStyle: {
-            height: '40%',
             width : '40%'
-        }
+        },
+
+        items : [{
+            module   : SelectField,
+            labelText: 'Select',
+
+            store: {
+                data: (() => {
+                    const result = [];
+
+                    for (let i = 0; i < 20; i++) {
+                        result.push({
+                            id   : i,
+                            name : `Option ${i + 1}`
+                        });
+                    }
+
+                    return result;
+                })()
+            }
+        }]
     }
 }
 

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

@@ -12,10 +12,11 @@ import TextField             from '../../../../src/form/field/Text.mjs';
  */
 class MainContainer extends ConfigurationViewport {
     static config = {
-        className           : 'Neo.examples.form.field.select.MainContainer',
-        autoMount           : true,
-        configItemLabelWidth: 160,
-        layout              : {ntype: 'hbox', align: 'stretch'}
+        className             : 'Neo.examples.form.field.select.MainContainer',
+        autoMount             : true,
+        configItemLabelWidth  : 160,
+        exampleContainerConfig: {style: {position: 'relative'}},
+        layout                : {ntype: 'hbox', align: 'stretch'}
     }
 
     createConfigurationComponents() {
@@ -117,7 +118,7 @@ class MainContainer extends ConfigurationViewport {
             listeners: {change: me.onConfigChange.bind(me, 'typeAhead')},
             style    : {marginTop: '10px'}
         }, {
-            module   : NumberField,
+            module   : TextField,
             labelText: 'width',
             listeners: {change: me.onConfigChange.bind(me, 'width')},
             maxValue : 300,
@@ -125,6 +126,24 @@ class MainContainer extends ConfigurationViewport {
             stepSize : 5,
             style    : {marginTop: '10px'},
             value    : me.exampleComponent.width
+        }, {
+            module   : CheckBox,
+            checked  : false,
+            labelText: 'At end',
+            style    : {marginTop: '10px'},
+
+            listeners: {change: ({ value }) => {
+                const
+                    { exampleComponent } = this,
+                    { style } = exampleComponent;
+
+                Object.assign(style, {
+                    bottom   : value ? '1em' : '',
+                    position : value ? 'absolute' : ''
+                });
+
+                exampleComponent.style = style;
+            }}
         }];
     }
 
@@ -137,7 +156,10 @@ class MainContainer extends ConfigurationViewport {
             store        : MainStore,
             value        : 'Arizona', // or 'AZ'
             valueField   : 'abbreviation',
-            width        : 200
+            width        : '50%',
+            pickerConfig : {
+                minHeight : '6em'
+            }
         })
     }
 }

package/package.json

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

package/resources/scss/src/component/Base.scss

@@ -0,0 +1,26 @@
+.neo-floating {
+    top      : -10000px;
+    left     : -10000px;
+    position : fixed;
+    z-index  : 1000;
+}
+
+// Shadow at the top
+.neo-aligned-top {
+    box-shadow : 0px -2px 10px rgba(0, 0, 0, 0.3);
+}
+
+// Shadow at the bottom
+.neo-aligned-bottom {
+    box-shadow : 0px 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+// Shadow at the left
+.neo-aligned-left {
+    box-shadow : -2px 0px 10px rgba(0, 0, 0, 0.3);
+}
+
+// Shadow at the right
+.neo-aligned-right {
+    box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+}

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

@@ -13,9 +13,6 @@
 .neo-picker-container {
     background-color: var(--pickerfield-container-background-color);
     border          : var(--pickerfield-container-border);
-    box-shadow      : var(--pickerfield-container-box-shadow);
-    position        : absolute;
-    z-index         : 200;
 
     &:focus {
         outline: none;

package/resources/scss/src/menu/List.scss

@@ -1,7 +1,8 @@
 .neo-menu-list {
-    border     : 1px solid var(--menu-list-border-color);
-    overflow-y : auto;
-    width      : fit-content;
+    background-color: var(--menu-list-background-color);
+    border          : 1px solid var(--menu-list-border-color);
+    overflow-y      : auto;
+    width           : fit-content;
 
     .neo-list-item {
         align-items     : center;
@@ -61,9 +62,4 @@
             }
         }
     }
-
-    &.neo-floating {
-        box-shadow: var(--menu-list-box-shadow);
-        position  : absolute;
-    }
 }

package/resources/scss/theme-dark/menu/List.scss

@@ -1,5 +1,6 @@
 :root .neo-theme-dark { // .neo-menu-list
-    --menu-list-border-color                  : #3c3f41;
+    --menu-list-background-color              : #3c3f41;
+    --menu-list-border-color                  : #2b2b2b;
     --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;
     --menu-list-item-background-color-disabled: inherit;

package/resources/scss/theme-light/menu/List.scss

@@ -1,4 +1,5 @@
 :root .neo-theme-light { // .neo-menu-list
+    --menu-list-background-color              : #fff;
     --menu-list-border-color                  : #1c60a0;
     --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.3.11'
+     * @default '6.4.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.3.11'
+    version: '6.4.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -79,7 +79,11 @@ class Base extends Component {
          */
         iconPosition_: 'left',
         /**
-         * @member {Object[]|null} menu_=null
+         * An array representing the configuration of the menu items.
+         *
+         * Or a configuration object which adds custom configuration to the menu to be
+         * created and includes an `items` property to define the menu items.
+         * @member {Object|Object[]|null} menu_=null
          */
         menu_: null,
         /**
@@ -245,24 +249,32 @@ class Base extends Component {
 
     /**
      * Triggered after the menu config got changed
-     * @param {Object[]|null} value
-     * @param {Object[]|null} oldValue
+     * @param {Object|Object[]|null} value
+     * @param {Object|Object[]|null} oldValue
      * @protected
      */
     afterSetMenu(value, oldValue) {
         if (value) {
             import('../menu/List.mjs').then(module => {
-                let me = this;
+                let me         = this,
+                    isArray    = Array.isArray(value),
+                    items      = isArray ? value : value.items,
+                    menuConfig = isArray ? {} : value;
 
                 me.menuList = Neo.create({
+                    align          : {
+                        edgeAlign : 't0-b0',
+                        target    : me.id
+                    },
+                    ...menuConfig,
                     module         : module.default,
                     appName        : me.appName,
                     displayField   : 'text',
                     floating       : true,
                     hidden         : true,
-                    items          : value,
+                    items,
                     parentComponent: me,
-                    style          : {left: '-5000px', top: '-5000px'},
+                    theme          : me.theme,
                     ...me.menuListConfig
                 })
             })
@@ -282,6 +294,20 @@ class Base extends Component {
         this.cls = cls;
     }
 
+    /**
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        if (this.menuList) {
+            this.menuList.theme = value
+        }
+    }
+
     /**
      * Triggered after the text config got changed
      * @param {String|null} value
@@ -420,6 +446,15 @@ class Base extends Component {
         }
     }
 
+    /**
+     * @param {Boolean} updateParentVdom
+     * @param {Boolean} silent
+     */
+    destroy(updateParentVdom=false, silent=false) {
+        this.menuList && this.menuList.destroy(true, false);
+        super.destroy(updateParentVdom, silent);
+    }
+
     /**
      * Convenience shortcut
      * @returns {Object}