neo.mjs 5.10.0 → 5.10.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/container/base/MainContainer.mjs

@@ -0,0 +1,78 @@
+import Button    from '../../../src/button/Base.mjs';
+import Container from '../../../src/container/Base.mjs';
+
+/**
+ * @class Neo.examples.container.base.MainContainer
+ * @extends Neo.container.Base
+ */
+class MainContainer extends Container {
+    static config = {
+        className: 'Neo.examples.container.base.MainContainer',
+        autoMount: true,
+        layout   : 'vbox',
+
+        items: [{
+            ntype  : 'button',
+            iconCls: 'fa fa-home',
+            text   : 'Hello',
+            width  : 200
+        }, {
+            ntype  : 'button',
+            iconCls: 'fa fa-user',
+            text   : 'World'
+        }, {
+            ntype : 'container',
+            layout: {
+                ntype: 'hbox',
+                align: 'stretch'
+            },
+            items : [{
+                ntype  : 'button',
+                iconCls: 'fa fa-home',
+                style  : {color: 'red'},
+                text   : 'Hello2',
+                width  : 200
+            }, {
+                ntype    : 'button',
+                flex     : 1,
+                iconCls  : 'fa fa-user',
+                iconColor: 'red',
+                text     : 'World2'
+            }]
+        }, {
+            ntype: 'container',
+
+            layout: {
+                ntype: 'vbox',
+                align: 'start'
+            },
+
+            style: {
+                marginTop: '30px'
+            },
+
+            items: [{
+                ntype       : 'button',
+                iconCls     : 'fa fa-home',
+                iconPosition: 'right',
+                text        : 'Right'
+            }, {
+                ntype       : 'button',
+                flex        : 1,
+                iconCls     : 'fa fa-user',
+                iconPosition: 'top',
+                text        : 'Top'
+            }, {
+                ntype       : 'button',
+                flex        : 1,
+                iconCls     : 'fa fa-play-circle',
+                iconPosition: 'bottom',
+                text        : 'Bottom'
+            }]
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/container/{app.mjs → base/app.mjs}

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

package/examples/container/{index.html → base/index.html}

@@ -9,6 +9,6 @@
     <p>Container Demo</p>
     <div id="main-container"></div>
 
-    <script src="../../src/MicroLoader.mjs" type="module"></script>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
 </body>
 </html>

package/examples/container/{neo-config.json → base/neo-config.json}

@@ -1,6 +1,6 @@
 {
-    "appPath"    : "examples/container/app.mjs",
-    "basePath"   : "../../",
+    "appPath"    : "examples/container/base/app.mjs",
+    "basePath"   : "../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",
     "themes"     : ["neo-theme-dark"]

package/examples/container/dialog/MainContainer.mjs

@@ -0,0 +1,68 @@
+import Button                  from '../../../src/button/Base.mjs';
+import ConfigurationViewport   from '../../ConfigurationViewport.mjs';
+import MainContainerController from './MainContainerController.mjs';
+import NumberField             from '../../../src/form/field/Number.mjs';
+import TextField               from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.container.dialog.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.container.dialog.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        controller          : MainContainerController,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module    : TextField,
+            clearable : true,
+            labelText : 'title',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'title')},
+            style     : {marginTop: '10px'},
+            value     : 'example dialog'
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'height')},
+            maxValue  : 1000,
+            minValue  : 100,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : 300
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'width')},
+            maxValue  : 2000,
+            minValue  : 100,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : 500
+        }];
+    }
+
+    createExampleComponent() {
+        let controller = this.getController();
+        return Neo.create({
+            module   : Button,
+            height   : 50,
+            text     : 'show Dialog',
+            ui       : 'primary',
+            width    : 150,
+            handler  : controller.onButtonClick.bind(controller)
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/container/dialog/MainContainerController.mjs

@@ -0,0 +1,80 @@
+import Component    from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.container.dialog.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.container.dialog.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.container.dialog.MainContainerController'
+    }
+
+    dialog = null;
+    title = 'example dialog';
+    height = 300;
+    width = 500;
+
+    /**
+     * 
+     * @param {*} config 
+     */
+    construct(config) {
+        super.construct(config);
+    }
+
+    /**
+     * 
+     * @param {Object} data 
+     */
+    async onButtonClick(data) {
+        if (!this.dialog) {
+            let module = await import ('../../../src/container/Dialog.mjs');
+            this.dialog = Neo.create({
+                module: module.default,
+                appName: this.component.appName,
+                autoMount: true,
+                autoRender: true,
+                title: this.title,
+                height: this.height,
+                width: this.width,
+                iconCls: ['fa', 'fa-home'],
+                
+                headerConfig: {
+                    items: [{
+                        ntype: 'button',
+                        text: 'foo'
+                    }],
+                    style: {borderBottom: 'solid 1px #bdbdbd'}
+                },
+
+                items: [{
+                    ntype: 'container',
+                    html: 'text'
+                }]
+            })
+        }
+        this.dialog.show();
+
+        console.log(data, this);
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        if (this.dialog) {
+            this.dialog[config] = opts.value;
+        } else {
+            this[config] = opts.value;
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/container/dialog/app.mjs

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

package/examples/container/dialog/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 Dialog</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/container/dialog/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "examples/container/dialog/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "ScrollSync", "Stylesheet", "Dialog"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.10.0",
+    "version": "5.10.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,12 +52,12 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.3",
+        "inquirer": "^9.2.6",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",
         "sass": "^1.62.1",
-        "webpack": "^5.82.1",
+        "webpack": "^5.84.1",
         "webpack-cli": "^5.1.1",
         "webpack-dev-server": "4.15.0",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/container/Dialog.scss

@@ -0,0 +1,12 @@
+.neo-container-dialog {
+    padding: 0;
+    z-index: 100;
+    
+    &:not([open]) {
+        display: none;
+    }
+
+    > div {
+        padding: 1em;
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/container/Dialog.mjs

@@ -0,0 +1,221 @@
+import Base          from '../container/Panel.mjs';
+import NeoArray      from '../util/Array.mjs';
+import HeaderToolbar from '../dialog/header/Toolbar.mjs';
+
+/**
+ * Lightweight implementation using the dialog tag.
+ * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+ * @class Neo.container.Dialog
+ * @extends Neo.container.Panel
+ */
+class Dialog extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.container.Dialog'
+         * @protected
+         */
+        className: 'Neo.container.Dialog',
+        /**
+         * @member {String} ntype='container-dialog'
+         * @protected
+         */
+        ntype: 'container-dialog',
+        /**
+        * @member {String[]} baseCls=['container-dialog']
+        * @protected
+        */
+        baseCls: ['neo-container-dialog', 'neo-panel', 'neo-container'],
+        /**
+         * @member {Object} headerConfig=null
+         */
+        headerConfig: null,
+        /**
+         * @member {Neo.toolbar.Base|null} headerToolbar=null
+         */
+        headerToolbar: null,
+        /**
+         * The CSS class to use for an icon, e.g. 'fa fa-home'
+         * @member {String|null} [iconCls_=null]
+         */
+        iconCls_: null,
+        /**
+         * @member {Object[]} items
+         */
+        items: [],
+        /**
+         * @member {String} title=null
+         */
+        title_: null,
+        /**
+         * @member {Object} _vdom={tag: 'dialog', cn: []}
+         */
+        _vdom:
+        {tag: 'dialog', cn: []}
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createHeader();
+    }
+
+    /**
+     * Triggered after the iconCls config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetIconCls(value, oldValue) {
+        console.log(value, oldValue)
+        
+        if (!this.headers) { return }
+        let iconNode = this.headers.down({flag: 'dialog-header-icon'});
+        let iconNodeCls = [...iconNode.cls];
+
+        NeoArray.remove(iconNodeCls, oldValue);
+        NeoArray.add(   iconNodeCls, value);
+
+        iconNode.cls = iconNodeCls;
+
+        iconNode.removeDom = !value || value === '';
+        this.update();
+    } 
+
+    /**
+     * Triggered after the title config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTitle(value, oldValue) {
+        this.headerToolbar?.set({
+            title: value
+        });
+    }
+
+    /**
+     * Converts the iconCls array into a string on beforeGet
+     * @returns {String}
+     * @protected
+     */
+    beforeGetIconCls() {
+        let iconCls = this._iconCls;
+
+        if (Array.isArray(iconCls)) {
+            return iconCls.join(' ');
+        }
+
+        return iconCls;
+    }
+
+    /**
+     * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
+     * @param {Array|String|null} value
+     * @param {Array|String|null} oldValue
+     * @returns {Array}
+     * @protected
+     */
+    beforeSetIconCls(value, oldValue) {
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+
+        return value;
+    }
+ 
+    /**
+     * close the dialog in main thread
+     */
+    close() {
+        let me = this;
+
+        Neo.main.addon.Dialog.close({
+            id: me.id,
+            appName: me.appName
+        });
+    }
+
+    /**
+     * @protected
+     */
+    createHeader() {
+        let me      = this,
+            cls     = ['neo-header-toolbar', 'neo-toolbar'],
+            headers = me.headers || [],
+            headerConfigCopy = {...me.headerConfig};
+        delete headerConfigCopy.items;
+
+        me.headerToolbar = Neo.create({
+            module   : HeaderToolbar,
+            actions: [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
+            appName  : me.appName,
+            cls,
+            dock     : 'top',
+            flex     : 'none',
+            id       : me.getHeaderToolbarId(),
+            listeners: {headerAction: me.executeHeaderAction, scope: me},
+            items    : [{
+                cls: me.iconCls,
+                flag     : 'dialog-header-icon',
+            }, {
+                ntype    : 'label',
+                cls      : ['neo-panel-header-text', 'neo-label'],
+                flag     : 'title-label',
+                removeDom: !me.title,
+                text     : me.title
+            }, ...me.headerConfig.items],
+            
+            ...headerConfigCopy
+        });
+
+        headers.unshift(me.headerToolbar);
+
+        me.headers = headers;
+    }
+
+    /**
+     * {Object} data
+     */
+    executeHeaderAction(data) {
+        let me = this,
+
+        map = {
+            close   : me.close
+        };
+
+        map[data.action]?.call(me, data);
+
+        me.fire('headerAction', {
+            dialog: me,
+            ...data
+        })
+    }
+
+    /**
+     * Returns the id of the header toolbar
+     * @returns {String}
+     */
+    getHeaderToolbarId() {
+        return this.id + '-header-toolbar';
+    }
+
+    /**
+     * Shows the dialog (with / without Modal) in main thread
+     * @param {Boolean} modal
+     */
+    async show(modal = true) {
+        let me = this;
+        await Neo.timeout(20);
+
+        Neo.main.addon.Dialog[modal ? 'showModal': 'show']({
+            id: me.id,
+            appName: me.appName
+        });
+    }
+}
+
+Neo.applyClassConfig(Dialog);
+
+export default Dialog;

package/src/dialog/header/Toolbar.mjs

@@ -48,8 +48,8 @@ class Toolbar extends Base {
      */
     afterSetTitle(value, oldValue) {
         this.down({flag: 'title-label'})?.set({
-            removeDom: !value,
-            text     : value
+            hidden: !value,
+            text  : value
         })
     }
 
@@ -62,11 +62,11 @@ class Toolbar extends Base {
             items   = me.items || [];
 
         items.push({
-            ntype    : 'label',
-            cls      : ['neo-panel-header-text', 'neo-label'],
-            flag     : 'title-label',
-            removeDom: !me.title,
-            text     : me.title
+            ntype : 'label',
+            cls   : ['neo-panel-header-text', 'neo-label'],
+            flag  : 'title-label',
+            hidden: !me.title,
+            text  : me.title
         });
 
         if (me.actions) {

package/src/form/field/Select.mjs

@@ -193,17 +193,23 @@ class Select extends Picker {
         let me = this,
             filters;
 
-        if (value && me.useFilter) {
-            filters = value.filters || [];
+        if (value) {
+            if (me.useFilter) {
+                filters = value.filters || [];
+
+                filters.push({
+                    includeEmptyValues: true,
+                    operator          : me.filterOperator,
+                    property          : me.displayField,
+                    value             : value.get(me.value)?.[me.displayField] || me.value
+                });
 
-            filters.push({
-                includeEmptyValues: true,
-                operator          : me.filterOperator,
-                property          : me.displayField,
-                value             : value.get(me.value)?.[me.displayField] || me.value
-            });
+                value.filters = filters
+            }
 
-            value.filters = filters
+            if (me.list) {
+                me.list.store = value
+            }
         }
     }
 

package/src/main/addon/Dialog.mjs

@@ -0,0 +1,68 @@
+import Base      from '../../core/Base.mjs';
+import DomAccess from '../DomAccess.mjs'
+/**
+ * Addon for component.Dialog
+ * @class Neo.main.addon.Dialog
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class Dialog extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.Dialog'
+         * @protected
+         */
+        className: 'Neo.main.addon.Dialog',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote={app: [//...]}
+         * @protected
+         */
+        remote: {
+            app: [
+                'close',
+                'show',
+                'showModal'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    close(data) {
+        DomAccess.getElement(data.id).close()
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    show(data) {
+        DomAccess.getElement(data.id).show()
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    showModal(data) {
+        DomAccess.getElement(data.id).showModal()
+        return true;
+    }
+}
+
+let instance = Neo.applyClassConfig(Dialog);
+
+export default instance;

package/examples/container/MainContainer.mjs

@@ -1,93 +0,0 @@
-import Button    from '../../src/button/Base.mjs';
-import Container from '../../src/container/Base.mjs';
-
-/**
- * @class Neo.examples.container.MainContainer
- * @extends Neo.container.Base
- */
-class MainContainer extends Container {
-    static config = {
-        className: 'Neo.examples.container.MainContainer',
-        autoMount: true,
-        layout   : 'vbox',
-
-        items: [
-            {
-                ntype  : 'button',
-                iconCls: 'fa fa-home',
-                text   : 'Hello',
-                width  : 200
-            },
-            {
-                ntype  : 'button',
-                iconCls: 'fa fa-user',
-                text   : 'World'
-            },
-            {
-                ntype : 'container',
-                layout: {
-                    ntype: 'hbox',
-                    align: 'stretch'
-                },
-                items: [
-                    {
-                        ntype  : 'button',
-                        iconCls: 'fa fa-home',
-                        text   : 'Hello2',
-                        width  : 200,
-
-                        style: {
-                            color: 'red'
-                        }
-                    },
-                    {
-                        ntype    : 'button',
-                        flex     : 1,
-                        iconCls  : 'fa fa-user',
-                        iconColor: 'red',
-                        text     : 'World2'
-                    },
-                ]
-            },
-            {
-                ntype : 'container',
-
-                layout: {
-                    ntype: 'vbox',
-                    align: 'start'
-                },
-
-                style: {
-                    marginTop: '30px'
-                },
-
-                items: [
-                    {
-                        ntype       : 'button',
-                        iconCls     : 'fa fa-home',
-                        iconPosition: 'right',
-                        text        : 'Right'
-                    },
-                    {
-                        ntype       : 'button',
-                        flex        : 1,
-                        iconCls     : 'fa fa-user',
-                        iconPosition: 'top',
-                        text        : 'Top'
-                    },
-                    {
-                        ntype       : 'button',
-                        flex        : 1,
-                        iconCls     : 'fa fa-play-circle',
-                        iconPosition: 'bottom',
-                        text        : 'Bottom'
-                    }
-                ]
-            }
-        ]
-    }
-}
-
-Neo.applyClassConfig(MainContainer);
-
-export default MainContainer;