neo.mjs 7.15.0 → 8.0.0-alpha.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.15.0'
+         * @member {String} version='8.0.0-alpha.1'
          */
-        version: '7.15.0'
+        version: '8.0.0-alpha.1'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-10-12",
+      "datePublished": "2024-10-18",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/ViewportController.mjs

@@ -239,7 +239,7 @@ class ViewportController extends Controller {
             connect   : me.onAppConnect,
             disconnect: me.onAppDisconnect,
             scope     : me
-        });
+        })
     }
 
     /**

package/apps/portal/view/about/Container.mjs

@@ -47,7 +47,7 @@ class Container extends Base {
             picture        : 'torsten.png',
             profileGitHub  : 'https://github.com/Dinkh',
             profileLinkedIn: 'https://www.linkedin.com/in/dinkheller/',
-            teamRole       : 'Co-Founder & Core Team Member'
+            teamRole       : 'Contributor'
         },{
             module         : MemberContainer,
             location       : 'Madison, Wisconsin',
@@ -55,7 +55,7 @@ class Container extends Base {
             picture        : 'Max.jpeg',
             profileGitHub  : 'https://github.com/maxrahder/',
             profileLinkedIn: 'https://www.linkedin.com/in/maxrahder/',
-            teamRole       : 'Training'
+            teamRole       : 'Contributor'
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'center'}

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.15.0'
+                html  : 'v8.0.0-alpha.1'
             }]
         }],
         /**

package/apps/realworld/view/HomeComponent.mjs

@@ -231,8 +231,8 @@ class HomeComponent extends Component {
             node, oldNode;
 
         if (me.mounted) {
-            node    = VDomUtil.findVdomChild(me.vdom, me.getNavLinkVdomId(value)).parentNode;
-            oldNode = VDomUtil.findVdomChild(me.vdom, me.getNavLinkVdomId(oldValue)).parentNode;
+            node    = VDomUtil.find(me.vdom, me.getNavLinkVdomId(value)).parentNode;
+            oldNode = VDomUtil.find(me.vdom, me.getNavLinkVdomId(oldValue)).parentNode;
 
             NeoArray.add(node.cls, 'active');
             NeoArray.remove(oldNode.cls, 'active');
@@ -289,7 +289,7 @@ class HomeComponent extends Component {
      */
     afterSetLoggedIn(value, oldValue) {
         let me      = this,
-            navItem = VDomUtil.findVdomChild(me.vdom, me.id + '__nav-item-link_0').vdom;
+            navItem = VDomUtil.find(me.vdom, me.id + '__nav-item-link_0').vdom;
 
         NeoArray[value ? 'remove' : 'add'](navItem.cls, 'disabled');
         me.update();
@@ -339,16 +339,15 @@ class HomeComponent extends Component {
             me.set({
                 articlePreviews: data.json.articles,
                 countArticles  : data.json.articlesCount
-            });
-        });
+            })
+        })
     }
 
     /**
      * @returns {Object} vdom
      */
     getContainer() {
-        let el = VDomUtil.findVdomChild(this.vdom, {cls: 'col-md-9'});
-        return el?.vdom;
+        return VDomUtil.find(this.vdom, {cls: 'col-md-9'})?.vdom
     }
 
     /**
@@ -356,7 +355,7 @@ class HomeComponent extends Component {
      * @returns {Number}
      */
     getNavLinkId(nodeId) {
-        return parseInt(nodeId.split('__')[1]);
+        return parseInt(nodeId.split('__')[1])
     }
 
     /**
@@ -364,7 +363,7 @@ class HomeComponent extends Component {
      * @returns {String}
      */
     getNavLinkVdomId(id) {
-        return this.id + '__' + id;
+        return this.id + '__' + id
     }
 
     /**
@@ -372,7 +371,7 @@ class HomeComponent extends Component {
      */
     onNavLinkClick(data) {
         let me         = this,
-            el         = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            el         = VDomUtil.find(me.vdom, data.path[0].id),
             feedHeader = VDomUtil.getByFlag(me.vdom, 'feed-header'),
             opts       = {};
 
@@ -401,7 +400,7 @@ class HomeComponent extends Component {
             me.update();
 
             me.getController()._articlesOffset = 0; // silent update
-            me.getArticles({}, opts);
+            me.getArticles({}, opts)
         }
     }
 
@@ -409,14 +408,14 @@ class HomeComponent extends Component {
      * @param {Object} value
      */
     onCurrentUserChange(value) {
-        this.loggedIn = !!value;
+        this.loggedIn = !!value
     }
 
     /**
      * @param {Object} data
      */
     onPageNavLinkClick(data) {
-        this.currentPage = this.getNavLinkId(data.path[0].id);
+        this.currentPage = this.getNavLinkId(data.path[0].id)
     }
 
     /**
@@ -453,7 +452,7 @@ class HomeComponent extends Component {
 
         me.getArticles({
             tag: opts.value
-        });
+        })
     }
 }
 

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -268,7 +268,7 @@ class ProfileComponent extends Component {
      */
     onNavLinkClick(data) {
         let me         = this,
-            el         = VDomUtil.findVdomChild(me.vdom, data.path[0].id),
+            el         = VDomUtil.find(me.vdom, data.path[0].id),
             feedHeader = VDomUtil.getByFlag(me.vdom, 'feed-header'),
             params     = {};
 

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -160,8 +160,7 @@ class SignUpComponent extends Component {
      * @returns {Object} vdom
      */
     getErrorMessagesList() {
-        let el = VDomUtil.findVdomChild(this.vdom, {cls: 'error-messages'});
-        return el?.vdom;
+        return VDomUtil.find(this.vdom, {cls: 'error-messages'})?.vdom
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.15.0'
+         * @member {String} version='8.0.0-alpha.1'
          */
-        version: '7.15.0'
+        version: '8.0.0-alpha.1'
     }
 
     /**

package/examples/table/container/MainContainer.mjs

@@ -124,31 +124,34 @@ class MainContainer extends ConfigurationViewport {
                 {
                     dataField: 'edit',
                     text     : 'Edit Action',
-                    renderer: ({ column, index }) => {
+                    renderer({column, index}) {
                         const
+                            me       = this,
                             widgetId = `${column.id}-widget-${index}`,
-                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                            button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
                                 module  : Button,
-                                appName : this.appName,
-                                handler : this.editButtonHandler,
+                                appName : me.appName,
+                                handler : 'up.editButtonHandler',
                                 parentId: 'myTableStoreContainer',
                                 text    : 'Edit'
                             }));
 
-                        return button.vdom
+                        me.view.updateDepth = -1;
+
+                        return button.createVdomReference()
                     }
-                },
-                {
+                }, {
                     dataField: 'menu',
                     text     : 'Menu',
-                    renderer({ column, record, index }) {
+                    renderer({column, record, index}) {
                         const
+                            me       = this,
                             widgetId = `${column.id}-widget-${index}`,
-                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
+                            button   = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
                                 ntype   : 'button',
-                                appName : this.appName,
+                                appName : me.appName,
                                 text    : '\u22ee',
-                                windowId: this.windowId,
+                                windowId: me.windowId,
                                 menu    : {
                                     items : [{
                                         text : 'Menu option 1'
@@ -162,7 +165,9 @@ class MainContainer extends ConfigurationViewport {
                                 }
                             }));
 
-                            return button.vdom
+                        me.view.updateDepth = -1;
+
+                        return button.createVdomReference()
                     }
                 }
             ]

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -106,7 +106,9 @@ class MainContainer extends Viewport {
                 windowId
             }));
 
-        return button.vdom
+        me.view.updateDepth = -1;
+
+        return button.createVdomReference()
     }
 }
 

package/examples/todoList/version1/MainComponent.mjs

@@ -99,7 +99,7 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom
+            node   = VdomUtil.find(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
             cls    = ['fa',  'fa-check'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.15.0",
+    "version": "8.0.0-alpha.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,17 +53,17 @@
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
-        "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^11.1.0",
-        "marked": "^14.1.2",
+        "highlightjs-line-numbers.js": "^2.9.0",
+        "inquirer": "^12.0.1",
+        "marked": "^14.1.4",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.47",
-        "sass": "^1.79.5",
+        "sass": "^1.80.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.95.0",
+        "webpack": "^5.96.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.1.0",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/Global.scss

@@ -1,4 +1,4 @@
-@import "global/all";
+@use "global/all";
 
 html, .neo-body-viewport {
     align-items    : center;

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -8,6 +8,14 @@
     background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23504e54' fill-opacity='0.18' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
     padding         : 3em;
 
+    .button-group {
+        background-color: transparent;
+        display         : flex;
+        flex-direction  : row-reverse;
+        gap             : 8px;
+        margin          : 2rem 0;
+    }
+
     .logo-container {
         align-items     : center;
         background-color: transparent;
@@ -19,11 +27,8 @@
         min-width       : 240px;
     }
 
-    .button-group {
-        display       : flex;
-        flex-direction: row-reverse;
-        gap           : 8px;
-        margin        : 2rem 0;
+    .neo-github {
+        background-color: #fff;
     }
 
     .neo-h1 {

package/resources/scss/src/global/_all.scss

@@ -1 +1 @@
-@import "MouseCursor";
+@use "MouseCursor";

package/resources/scss/theme-neo-light/Global.scss

@@ -1,4 +1,4 @@
-@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+@use "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
 
 :root .neo-theme-neo-light {
     --neo-background-color: #fafafa;

package/resources/scss/theme-neo-light/design-tokens/_all.scss

@@ -1,4 +1,4 @@
 // the import order matters
-@import "Core";
-@import "Semantic";
-@import "Component";
+@use "Core";
+@use "Semantic";
+@use "Component";

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -132,6 +132,18 @@ class Base extends Component {
         ]}
     }
 
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get badgeNode() {
+        return this.getVdomRoot().cn[2]
+    }
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get iconNode() {
+        return this.getVdomRoot().cn[0]
+    }
     /**
      * Time in ms for the ripple effect when clicking on the button.
      * Only active if useRippleEffect is set to true.
@@ -144,6 +156,12 @@ class Base extends Component {
      * @private
      */
     #rippleTimeoutId = null
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get rippleWrapper() {
+        return this.getVdomRoot().cn[3]
+    }
 
     /**
      * @param {Object} config
@@ -166,9 +184,9 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgePosition(value, oldValue) {
-        let me        = this,
-            badgeNode = me.getBadgeNode(),
-            cls       = badgeNode.cls || [];
+        let me          = this,
+            {badgeNode} = me,
+            cls         = badgeNode.cls || [];
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
@@ -185,7 +203,7 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgeText(value, oldValue) {
-        let badgeNode = this.getBadgeNode();
+        let {badgeNode} = this;
 
         badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
@@ -200,7 +218,7 @@ class Base extends Component {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        let iconNode = this.getIconNode();
+        let {iconNode} = this;
 
         NeoArray.remove(iconNode.cls, oldValue);
         NeoArray.add(   iconNode.cls, value);
@@ -216,7 +234,7 @@ class Base extends Component {
      * @protected
      */
     afterSetIconColor(value, oldValue) {
-        let iconNode = this.getIconNode();
+        let {iconNode} = this;
 
         if (!iconNode.style) {
             iconNode.style = {};
@@ -261,17 +279,17 @@ class Base extends Component {
                     model      = me.getModel(),
                     {appName, theme, windowId} = me,
 
-                config = Neo.merge({
-                    module         : module.default,
-                    align          : {edgeAlign : 't0-b0', target: me.id},
-                    appName,
-                    displayField   : 'text',
-                    floating       : true,
-                    hidden         : true,
-                    parentComponent: me,
-                    theme,
-                    windowId
-                }, menuConfig);
+                    config = Neo.merge({
+                        module         : module.default,
+                        align          : {edgeAlign: 't0-b0', target: me.id},
+                        appName,
+                        displayField   : 'text',
+                        floating       : true,
+                        hidden         : true,
+                        parentComponent: me,
+                        theme,
+                        windowId
+                    }, menuConfig);
 
                 if (items) {
                     config.items = items
@@ -366,7 +384,7 @@ class Base extends Component {
      */
     afterSetUseRippleEffect(value, oldValue) {
         // setting the config to false ends running ripple animations
-        this.getRippleWrapper().removeDom = true;
+        this.rippleWrapper.removeDom = true;
         this.update()
     }
 
@@ -464,36 +482,11 @@ class Base extends Component {
     }
 
     /**
-     * @param {Boolean} updateParentVdom
-     * @param {Boolean} silent
+     * @param args
      */
-    destroy(updateParentVdom=false, silent=false) {
-        this.menuList && this.menuList.destroy(true, false);
-        super.destroy(updateParentVdom, silent)
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getBadgeNode() {
-        return this.getVdomRoot().cn[2]
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getIconNode() {
-        return this.getVdomRoot().cn[0]
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getRippleWrapper() {
-        return this.getVdomRoot().cn[3]
+    destroy(...args) {
+        this.menuList?.destroy(true, false);
+        super.destroy(...args)
     }
 
     /**
@@ -518,7 +511,7 @@ class Base extends Component {
             diameter             = Math.max(buttonRect.height, buttonRect.width),
             radius               = diameter / 2,
             rippleEffectDuration = me.rippleEffectDuration,
-            rippleWrapper        = me.getRippleWrapper(),
+            {rippleWrapper}      = me,
             rippleEl             = rippleWrapper.cn[0],
             rippleTimeoutId;
 

package/src/calendar/view/SettingsContainer.mjs

@@ -57,6 +57,8 @@ class SettingsContainer extends Container {
         me._style         = style; // silent update
         me._vdom.style    = style; // silent update
 
+        me.parent.updateDepth = -1;
+
         me.parent.promiseUpdate().then(() => {
             me.timeout(400).then(() => {
                 me.collapsed = true;
@@ -145,6 +147,8 @@ class SettingsContainer extends Container {
 
         delete me.vdom.removeDom;
 
+        me.parent.updateDepth = -1;
+
         me.parent.promiseUpdate().then(() => {
             me.collapsed = false;
             me.mounted   = true;

package/src/calendar/view/calendars/ColorsList.mjs

@@ -50,7 +50,7 @@ class ColorsList extends List {
 
         if (value && oldValue !== undefined && !me.disableSelection) {
             record = me.store.find('name', value)[0];
-            me.selectionModel?.select(me.getItemId(record[me.getKeyProperty()]));
+            me.selectionModel?.select(me.getItemId(record[me.getKeyProperty()]))
         }
     }
 
@@ -64,21 +64,21 @@ class ColorsList extends List {
         return {style: {
             backgroundColor: `var(--event-${record.name}-color)`,
             color          : `var(--event-${record.name}-color)` // needed for the box-shadow (CSS currentColor)
-        }};
+        }}
     }
 
     /**
      * @returns {Object}
      */
     getVdomRoot() {
-        return this.vdom;
+        return this.vdom
     }
 
     /**
      * @returns {Object}
      */
     getVnodeRoot() {
-        return this.vnode;
+        return this.vnode
     }
 
     /**
@@ -90,7 +90,7 @@ class ColorsList extends List {
         let me      = this,
             {value} = me;
 
-        value && me.afterSetValue(value, null);
+        value && me.afterSetValue(value, null)
     }
 
     /**
@@ -103,7 +103,7 @@ class ColorsList extends List {
 
         me.fire('change', {
             record: me.store.get(recordId)
-        });
+        })
     }
 }
 

package/src/calendar/view/calendars/Container.mjs

@@ -61,7 +61,7 @@ class Container extends BaseContainer {
             active: true,
             color : 'red',
             name  : 'New Calendar'
-        });
+        })
     }
 }
 

package/src/calendar/view/calendars/List.mjs

@@ -72,9 +72,13 @@ class List extends ComponentList {
             })
         }
 
-        me.items = items;
+        me.items       = items;
+        me.updateDepth = 2;
 
-        return [checkBox.vdom, {tag: 'i', cls: ['neo-edit-icon', 'fas fa-edit'], id: me.getEditIconId(index)}]
+        return [
+            checkBox.createVdomReference(),
+            {tag: 'i', cls: ['neo-edit-icon', 'fas fa-edit'], id: me.getEditIconId(index)}
+        ]
     }
 
     /**

package/src/calendar/view/month/Component.mjs

@@ -575,7 +575,7 @@ class Component extends BaseComponent {
                 eventNode           = path[0],
                 weekNode            = path[2],
                 scrollContainerNode = path[3],
-                eventVdom           = VDomUtil.findVdomChild(me.vdom, eventNode.id).vdom,
+                eventVdom           = VDomUtil.find(me.vdom, eventNode.id).vdom,
                 record              = me.eventStore.get(eventVdom.flag),
                 style               = editEventContainer.style;