neo.mjs 5.11.1 → 5.12.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/button/base/MainContainer.mjs

@@ -170,19 +170,33 @@ class MainContainer extends ConfigurationViewport {
         }];
     }
 
+    /**
+     * @returns {Neo.component.Base}
+     */
     createExampleComponent() {
         return Neo.create({
             module   : Button,
             badgeText: 'Badge',
+            handler  : data => console.log('button click =>', data.component.id),
             height   : 50,
             iconCls  : 'fa fa-home',
             text     : 'Hello World',
             ui       : 'primary',
             width    : 150,
 
-            handler: (data) => {
-                console.log('button click =>', data.component.id);
-            }
+            menu: [{
+                handler: data => console.log('menu item click =>', data.component.id),
+                iconCls: 'fa fa-home',
+                text   : 'Item 1'
+            }, {
+                handler: data => console.log('menu item click =>', data.component.id),
+                iconCls: 'fa fa-user',
+                text   : 'Item 2'
+            }, {
+                handler: data => console.log('menu item click =>', data.component.id),
+                iconCls: 'fa fa-play',
+                text   : 'Item 3'
+            }]
 
             /*tooltips: [{
                 text: 'Hello World Tooltip'

package/examples/menu/list/MainContainer.mjs

@@ -45,7 +45,7 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create({
             module      : MenuList,
-            displayField: 'name',
+            displayField: 'text',
             store       : MainStore
         });
     }

package/examples/menu/list/MainStore.mjs

@@ -17,48 +17,48 @@ class MainStore extends Store {
         data: [{
             iconCls: 'fa fa-user',
             id     : 1,
-            name   : 'Item 1'
+            text   : 'Item 1'
         }, {
             iconCls: 'fa fa-home',
             id     : 2,
-            name   : 'Group 1',
+            text   : 'Group 1',
             items  : [{
                 iconCls: 'fa fa-home',
                 id     : 6,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 7,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 8,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }]
         }, {
             iconCls: 'fa fa-cog',
             id     : 3,
-            name   : 'Item 2'
+            text   : 'Item 2'
         }, {
             iconCls: 'far fa-calendar',
             id     : 4,
-            name   : 'Item 3'
+            text   : 'Item 3'
         }, {
             iconCls: 'far fa-clock',
             id     : 5,
-            name   : 'Group 2',
+            text   : 'Group 2',
             items  : [{
                 iconCls: 'fa fa-clock',
                 id     : 9,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-clock',
                 id     : 10,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'fa fa-clock',
                 id     : 11,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }]
         }]
     }

package/examples/menu/panel/MainContainer.mjs

@@ -56,70 +56,70 @@ class MainContainer extends ConfigurationViewport {
             module: Menu,
 
             listConfig: {
-                displayField: 'name'
+                displayField: 'text'
             },
 
             listItems: [{
                 iconCls: 'fa fa-user',
                 id     : 1,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 2,
-                name   : 'Group 1',
+                text   : 'Group 1',
                 items  : [{
                     iconCls: 'fa fa-home',
                     id     : 6,
-                    name   : 'Item 1'
+                    text   : 'Item 1'
                 }, {
                     iconCls: 'fa fa-home',
                     id     : 7,
-                    name   : 'Item 2'
+                    text   : 'Item 2'
                 }, {
                     iconCls: 'fa fa-home',
                     id     : 8,
-                    name   : 'Item 3'
+                    text   : 'Item 3'
                 }]
             }, {
                 iconCls: 'fa fa-cog',
                 id     : 3,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'far fa-calendar',
                 id     : 4,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }, {
                 iconCls: 'far fa-clock',
                 id     : 5,
-                name   : 'Group 2',
+                text   : 'Group 2',
                 items  : [{
                     iconCls: 'fa fa-clock',
                     id     : 9,
-                    name   : 'Item 1'
+                    text   : 'Item 1'
                 }, {
                     iconCls: 'fa fa-clock',
                     id     : 10,
-                    name   : 'Item 2'
+                    text   : 'Item 2'
                 }, {
                     iconCls: 'fa fa-clock',
                     id     : 11,
-                    name   : 'Group 1',
+                    text   : 'Group 1',
                     items  : [{
                         iconCls: 'far fa-clock',
                         id     : 12,
-                        name   : 'Item 1'
+                        text   : 'Item 1'
                     }, {
                         iconCls: 'far fa-clock',
                         id     : 13,
-                        name   : 'Item 2'
+                        text   : 'Item 2'
                     }, {
                         iconCls: 'far fa-clock',
                         id     : 14,
-                        name   : 'Item 3'
+                        text   : 'Item 3'
                     }]
                 }]
             }]
-        });
+        })
     }
 }
 

package/examples/table/container/MainContainer.mjs

@@ -1,3 +1,4 @@
+import Button                from '../../../src/button/Base.mjs';
 import CellColumnModel       from '../../../src/selection/table/CellColumnModel.mjs';
 import CellColumnRowModel    from '../../../src/selection/table/CellColumnRowModel.mjs';
 import CellModel             from '../../../src/selection/table/CellModel.mjs';
@@ -78,15 +79,18 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Cell & Column & Row'
         }, {
             module   : Checkbox,
+            checked  : me.exampleComponent.sortable,
             labelText: 'sortable',
             listeners: {change: me.onConfigChange.bind(me, 'sortable')},
-            value    : me.exampleComponent.sortable
+            style    : {marginTop: '10px'}
         }];
     }
 
+    /**
+     * @returns {Neo.table.Container}
+     */
     createExampleComponent() {
         return Neo.create(TableContainer, {
-            autoRender    : false,
             id            : 'myTableStoreContainer',
             selectionModel: CellModel,
             store         : MainStore,
@@ -95,10 +99,31 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'firstname', text: 'Firstname'},
                 {dataField: 'lastname',  text: 'Lastname'},
                 {dataField: 'githubId',  text: 'Github Id'},
-                {dataField: 'country',   text: 'Country'}
+                {dataField: 'country',   text: 'Country'},
+                {
+                    text: 'Edit Action',
+                    renderer: data => {
+                        let button = Neo.create({
+                            module  : Button,
+                            appName : this.appName,
+                            handler : this.editButtonHandler,
+                            parentId: 'myTableStoreContainer',
+                            text    : 'Edit'
+                        });
+
+                        return button.vdom
+                    }
+                }
             ]
         });
     }
+
+    /**
+     * @param {Object} data
+     */
+    editButtonHandler(data) {
+        console.log(data)
+    }
 }
 
 Neo.applyClassConfig(MainContainer);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.11.1",
+    "version": "5.12.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,9 +55,9 @@
         "inquirer": "^9.2.8",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
-        "postcss": "^8.4.26",
-        "sass": "^1.63.6",
-        "webpack": "^5.88.1",
+        "postcss": "^8.4.27",
+        "sass": "^1.64.1",
+        "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",
         "webpack-hook-plugin": "^1.0.7",

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -48,6 +48,7 @@ class Main extends core.Base {
             app: [
                 'alert',
                 'editRoute',
+                'getByPath',
                 'getWindowData',
                 'redirectTo',
                 'setNeoConfig',
@@ -150,6 +151,18 @@ class Main extends core.Base {
         window.location.hash = hashArr.join('&');
     }
 
+    /**
+     * Request specific accessible window attributes by path into the app worker.
+     * Keep in mind that this excludes anything DOM related or instances.
+     * Example: Neo.Main.getByPath({path: 'navigator.language'}).then(data => {})
+     * @param {Object} data
+     * @param {String} data.path
+     * @returns {*}
+     */
+    getByPath(data) {
+        return Neo.nsWithArrays(data.path)
+    }
+
     /**
      * window.screen is not spreadable
      * @returns {Object}
@@ -385,7 +398,7 @@ class Main extends core.Base {
     }
 
     /**
-     * Change the location.hash value
+     * Change a Neo.config from the app worker
      * @param {Object} data
      * @param {String} data.key
      * @param {*} data.value
@@ -437,7 +450,7 @@ class Main extends core.Base {
      * @param {String} data.windowFeatures
      * @param {String} data.windowName
      * @return {Boolean}
-     */    
+     */
     windowOpen(data) {
         let openedWindow = window.open(data.url, data.windowName, data.windowFeatures),
             success      = !!openedWindow;

package/src/button/Base.mjs

@@ -78,6 +78,10 @@ class Base extends Component {
          * @member {String} iconPosition_='left'
          */
         iconPosition_: 'left',
+        /**
+         * @member {Object[]|null} menu_=null
+         */
+        menu_: null,
         /**
          * The pressed state of the Button
          * @member {Boolean} pressed_=false
@@ -182,6 +186,11 @@ class Base extends Component {
             click: value,
             scope: me.handlerScope || me
         });
+
+        me.menu && me.addDomListeners({
+            click: me.toggleMenu,
+            scope: me
+        })
     }
 
     /**
@@ -197,7 +206,7 @@ class Base extends Component {
         NeoArray.add(   iconNode.cls, value);
 
         iconNode.removeDom = !value || value === '';
-        this.update();
+        this.update()
     }
 
     /**
@@ -218,7 +227,7 @@ class Base extends Component {
         }
 
         iconNode.style.color = value;
-        this.update();
+        this.update()
     }
 
     /**
@@ -236,6 +245,60 @@ class Base extends Component {
         this.cls = cls;
     }
 
+    /**
+     * Triggered after the menu config got changed
+     * @param {Object[]|null} value
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetMenu(value, oldValue) {
+        if (value) {
+            import('../menu/List.mjs').then(module => {
+                let me = this;
+
+                me.menuList = Neo.create({
+                    module      : module.default,
+                    appName     : me.appName,
+                    displayField: 'text',
+                    floating    : true,
+                    hidden      : true,
+                    items       : value,
+                    parentId    : me.id
+                });
+
+                me.vdom.cn.push(me.menuList.vdom)
+            })
+        }
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this,
+            style;
+
+        if (value && me.menu) {
+            setTimeout(() => {
+                me.getDomRect().then(rect => {
+                    style = me.menuList.style || {};
+
+                    Object.assign(style, {
+                        right: 0,
+                        top  : rect.height + 'px'
+                    });
+
+                    me.menuList.style = style
+                })
+            }, 50)
+        }
+    }
+
     /**
      * Triggered after the pressed config got changed
      * @param {Boolean} value
@@ -261,7 +324,7 @@ class Base extends Component {
         value && me.addDomListeners({
             click: me.changeRoute,
             scope: me
-        });
+        })
     }
 
     /**
@@ -477,6 +540,23 @@ class Base extends Component {
             }
         }, rippleEffectDuration);
     }
+
+    /**
+     *
+     */
+    toggleMenu() {
+        let menuList = this.menuList,
+            hidden   = !menuList.hidden;
+
+        menuList.hidden = hidden;
+
+        if (!hidden) {
+            setTimeout(() => {
+                console.log('focus'); // todo: does not activate the key nav
+                menuList.focus()
+            }, 500)
+        }
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/component/Base.mjs

@@ -1106,14 +1106,11 @@ class Base extends CoreBase {
      * @param {String} id=this.id
      */
     focus(id=this.id) {
-        let me = this;
-
-        // remote method access
         Neo.main.DomAccess.focus({
-            id: id || me.id
+            id
         }).catch(err => {
-            console.log('Error attempting to receive focus for component', err, me);
-        });
+            console.log('Error attempting to receive focus for component', err, this);
+        })
     }
 
     /**
@@ -1191,7 +1188,7 @@ class Base extends CoreBase {
     getMountedParentId() {
         let parentId  = this.parentId,
             parent    = Neo.getComponent(parentId),
-            itemsRoot = parent?.getVdomItemsRoot();
+            itemsRoot = parent?.getVdomItemsRoot?.();
 
         return itemsRoot ? itemsRoot.id : parentId
     }

package/src/component/Video.mjs

@@ -17,31 +17,31 @@ class Video extends BaseComponent {
          */
         className: 'Neo.component.Video',
         /*
-         * @member {String} ntype='neo-video'
+         * @member {String} ntype='video'
          * @protected
          */
         ntype: 'video',
         /*
-         * @member {[String]} cls=['neo-video']
+         * @member {String[]} baseCls=['neo-video']
          */
         baseCls: ['neo-video'],
-        /*
-         * @member {String} url=null
-         * @public
-         */
-        url_: null,
-
         /**
          * Current state of the video
-         * @member {boolean} playing=false
+         * @member {Boolean} playing=false
          */
         playing_: false,
         /**
          * Type of the video
-         * @member {boolean} type='video/mp4'
+         * @member {Boolean} type='video/mp4'
          */
         type: 'video/mp4',
-
+        /*
+         * @member {String} url=null
+         */
+        url_: null,
+        /**
+         * @member {Object} _vdom
+         */
         _vdom: {
             cn: [{
                 flag: 'ghost',
@@ -64,17 +64,12 @@ class Video extends BaseComponent {
         }
     }
 
-
     /**
-     * construct is earlier in component life cicle than init
-     *
-     * @param config
+     * @param {Object} config
      */
     construct(config) {
         super.construct(config);
 
-        console.log(this);
-
         let me           = this,
             domListeners = me.domListeners;
 
@@ -162,4 +157,4 @@ class Video extends BaseComponent {
 
 Neo.applyClassConfig(Video);
 
-export default Video;
+export default Video;

package/src/data/connection/Fetch.mjs

@@ -86,12 +86,12 @@ class Fetch extends Base {
 
     /**
      * @param {Object|String} url
-     * @param {Object} config
+     * @param {Object} config={}
      * @param {String} method
      * @param {Object} [data]
      * @returns {Promise<any>}
      */
-    request(url, config, method, data) {
+    request(url, config={}, method, data) {
         if (!Neo.isString(url)) {
             config = url;
             url    = config.url;

package/src/form/field/Picker.mjs

@@ -320,14 +320,7 @@ class Picker extends Text {
      * @param {Object} data
      */
     onInputClick(data) {
-        let me = this;
-
-        if (!me.editable) {
-            me.togglePicker();
-
-            // stay in sync to the trigger-click logic
-            !me.pickerIsMounted && me.focus()
-        }
+        !this.editable && this.togglePicker()
     }
 
     /**

package/src/form/field/Text.mjs

@@ -981,10 +981,10 @@ class Text extends Base {
 
     /**
      * Calls focus() on the inputEl node instead
-     * @param {String} id=this.id
+     * @param {String} id
      * @override
      */
-    focus(id=this.id) {
+    focus(id) {
         super.focus(this.getInputElId())
     }
 
@@ -1442,21 +1442,19 @@ class Text extends Base {
             }
         }
 
-        if (required && isEmpty) {
-            me._error = me.errorTextRequired;
-            returnValue = false;
-        } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
-            if (required || !isEmpty) {
-                me._error = me.errorTextMaxLength(errorParam);
+        if (isEmpty) {
+            if (required) {
+                me._error = me.errorTextRequired;
                 returnValue = false;
             }
-        } else if (Neo.isNumber(minLength) && valueLength < minLength) {
-            if (required || !isEmpty) {
+        } else {
+            if (Neo.isNumber(maxLength) && valueLength > maxLength) {
+                me._error = me.errorTextMaxLength(errorParam);
+                returnValue = false;
+            } else if (Neo.isNumber(minLength) && valueLength < minLength) {
                 me._error = me.errorTextMinLength(errorParam);
                 returnValue = false;
-            }
-        } else if (inputPattern && !inputPattern.test(value)) {
-            if (required || !isEmpty) {
+            } else if (inputPattern && !inputPattern.test(value)) {
                 me._error = me.errorTextInputPattern(errorParam);
                 returnValue = false;
             }

package/src/main/mixin/DeltaUpdates.mjs

@@ -127,12 +127,12 @@ class DeltaUpdates extends Base {
                 startTag  = `<!-- ${delta.id} -->`;
                 reg       = new RegExp(startTag + '[\\s\\S]*?<!-- \/neo-vtext -->');
 
-                node.innerHTML = node.innerHTML.replace(reg, '');
+                node.innerHTML = node.innerHTML.replace(reg, '')
             } else {
                 // console.warn('du_removeNode: dom node not found for id', delta.id);
             }
         } else {
-            node.parentNode.removeChild(node);
+            node.remove()
         }
     }
 

package/src/manager/DomEvent.mjs

@@ -105,7 +105,9 @@ class DomEvent extends Base {
                                 }
 
                                 if (!preventFire) {
-                                    // console.log(Neo.get(id));
+                                    // multiple listeners would change the reference of data.component
+                                    data = Neo.clone(data, true, true);
+
                                     data.component = component;
                                     listener.fn.apply(listener.scope || globalThis, [data]);
 

package/src/menu/List.mjs

@@ -96,7 +96,12 @@ class List extends BaseList {
          * We are applying a z-index style which is 1 number higher to each sub-menu
          * @member {Number} zIndex_=100
          */
-        zIndex_: 100
+        zIndex_: 100,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'ul', tabIndex: -1, cn: []}
     }
 
     /**
@@ -138,6 +143,7 @@ class List extends BaseList {
             if (me.isRoot) {
                 if (!value) {
                     me.focusTimeoutId = setTimeout(() => {
+                        console.log('unmount'); // todo: does not hide a top-level floating menu
                         me[me.floating ? 'unmount' : 'hideSubMenu']();
                     }, 20);
                 } else {
@@ -305,26 +311,27 @@ class List extends BaseList {
 
                 Object.assign(menuStyle, style);
 
-                subMenu.setSilent({style: menuStyle});
+                subMenu.setSilent({style: menuStyle})
             } else {
                 subMenuMap[subMenuMapId] = subMenu = Neo.create({
-                    module     : List,
-                    appName    : me.appName,
-                    floating   : true,
-                    items      : record.items,
-                    isRoot     : false,
-                    parentId   : Neo.apps[me.appName].mainView.id,
-                    parentIndex: store.indexOf(record),
-                    parentMenu : me,
+                    module      : List,
+                    appName     : me.appName,
+                    displayField: me.displayField,
+                    floating    : true,
+                    items       : record.items,
+                    isRoot      : false,
+                    parentId    : Neo.apps[me.appName].mainView.id,
+                    parentIndex : store.indexOf(record),
+                    parentMenu  : me,
                     style,
-                    zIndex     : me.zIndex + 1
-                });
+                    zIndex      : me.zIndex + 1
+                })
             }
 
             me.activeSubMenu = subMenu;
             me.subMenuMap    = subMenuMap;
 
-            subMenu.render(true);
+            subMenu.render(true)
         });
     }
 
@@ -335,7 +342,7 @@ class List extends BaseList {
         this.selectionModel.deselectAll(true); // silent update
         this.hideSubMenu();
 
-        super.unmount();
+        super.unmount()
     }
 }
 

package/src/menu/Model.mjs

@@ -28,7 +28,7 @@ class Model extends BaseModel {
             name: 'items', // optional
             type: 'Array'
         }, {
-            name: 'name',
+            name: 'text',
             type: 'String'
         }]
     }

package/src/table/View.mjs

@@ -59,12 +59,10 @@ class View extends Component {
             i          = 0,
             vdom       = me.vdom,
             cellCls, cellId, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
-            record, rendererValue, selectedRows, trCls;
+            record, rendererType, rendererValue, selectedRows, trCls;
 
         me.recordVnodeMap = {}; // remove old data
 
-        // console.log('createViewData', me.id, inputData);
-
         if (container.selectionModel.ntype === 'selection-table-rowmodel') {
             selectedRows = container.selectionModel.items || [];
         }
@@ -113,17 +111,29 @@ class View extends Component {
                     value    : rendererValue
                 });
 
-                cellCls = rendererOutput?.cls || ['neo-table-cell'];
-
-                if (column.align !== 'left') {
-                    cellCls.push('neo-' + column.align);
+                cellCls      = ['neo-table-cell'];
+                rendererType = Neo.typeOf(rendererOutput);
+
+                switch (rendererType) {
+                    case 'Object': {
+                        if (rendererOutput.cls && rendererOutput.html) {
+                            cellCls.push(...rendererOutput.cls);
+                        } else {
+                            rendererOutput = [rendererOutput];
+                        }
+                        break;
+                    }
+                    case 'String': {
+                        rendererOutput = {
+                            cls : cellCls,
+                            html: rendererOutput?.toString()
+                        };
+                        break;
+                    }
                 }
 
-                if (!Neo.isObject(rendererOutput)) {
-                    rendererOutput = {
-                        cls : cellCls,
-                        html: rendererOutput?.toString()
-                    };
+                if (column.align !== 'left') {
+                    cellCls.push('neo-' + column.align)
                 }
 
                 // todo: remove the else part as soon as all tables use stores (examples table)
@@ -134,14 +144,19 @@ class View extends Component {
                 }
 
                 config = {
-                    tag      : 'td',
-                    id       : cellId,
-                    cls      : cellCls,
-                    innerHTML: rendererOutput.html  || '',
-                    style    : rendererOutput.style || {},
-                    tabIndex : '-1'
+                    tag     : 'td',
+                    id      : cellId,
+                    cls     : cellCls,
+                    style   : rendererOutput.style || {},
+                    tabIndex: '-1'
                 };
 
+                if (rendererType === 'String') {
+                    config.innerHTML = rendererOutput.html  || ''
+                } else {
+                    config.cn = rendererOutput
+                }
+
                 if (column.dock) {
                     config.cls = ['neo-locked', ...config.cls || []];