neo.mjs 4.3.8 → 4.3.10

package/docs/app/view/ExamplesTreeList.mjs

@@ -44,13 +44,9 @@ class ExamplesTreeList extends TreeList {
         Neo.Xhr.promiseJson({
             url: '../../docs/examples.json'
         }).then(data => {
-            let vdom     = me.vdom,
-                itemRoot = me.getListItemsRoot();
-
             me.store.data = data.json;
-            itemRoot = me.createItems(null, itemRoot, 0);
-
-            me.vdom = vdom;
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.update();
         });
     }
 }

package/docs/app/view/TutorialsTreeList.mjs

@@ -44,13 +44,9 @@ class TutorialsTreeList extends TreeList {
         Neo.Xhr.promiseJson({
             url: '../../docs/tutorials/tutorials.json'
         }).then(data => {
-            let vdom     = me.vdom,
-                itemRoot = me.getListItemsRoot();
-
             me.store.data = data.json;
-            itemRoot = me.createItems(null, itemRoot, 0);
-
-            me.vdom = vdom;
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.update();
         });
     }
 }

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -50,7 +50,6 @@ class HeaderComponent extends Component {
         super.onConstructed();
 
         let me         = this,
-            vdom      = me.vdom,
             className = me.record.className,
             store     = me.up('main-container').store,
             record    = store.find({$kind: className === 'Neo' ? 'module' : 'class', neoClassName: className})[0],
@@ -65,16 +64,16 @@ class HeaderComponent extends Component {
             }
         }
 
-        vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
+        me.vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
 
         if (record.description) {
-            vdom.cn.push({
+            me.vdom.cn.push({
                 cls      : ['neo-docs-header-description'],
                 innerHTML: record.description
             });
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 }
 

package/docs/app/view/classdetails/HierarchyTreeList.mjs

@@ -100,14 +100,13 @@ class HierarchyTreeList extends TreeList {
     onLeafItemClick(record) {
         let me       = this,
             vnodeId  = me.getItemId(record.id),
-            vdom     = me.vdom,
             vdomNode = me.getVdomChild(vnodeId);
 
         NeoArray[record.checked ? 'add' : 'remove'](vdomNode.cls, 'unchecked');
 
         record.checked = !record.checked;
 
-        me.vdom = vdom;
+        me.update();
 
         me.fire('refreshClassMembers');
     }

package/docs/app/view/classdetails/MembersList.mjs

@@ -327,13 +327,11 @@ class MembersList extends Base {
             vdom.cn.push(itemConfig);
         });
 
-        me.vdom = vdom;
+        me.update();
 
-        if (hasExamples) {
-            setTimeout(() => {
-                Neo.main.addon.HighlightJS.syntaxHighlightInit();
-            }, 100);
-        }
+        hasExamples && setTimeout(() => {
+            Neo.main.addon.HighlightJS.syntaxHighlightInit();
+        }, 100);
     }
 
     /**

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -130,15 +130,12 @@ class SourceViewComponent extends Component {
      */
     applySourceCode(data) {
         let me   = this,
-            vdom = me.vdom,
-            node = vdom.cn[0]; // pre tag
+            node = me.vdom.cn[0]; // pre tag
 
         node.cn[0].innerHTML = data; // code tag
-        me.vdom = vdom;
+        me.update();
 
-        if (me.mounted) {
-            me.syntaxHighlight();
-        }
+        me.mounted && me.syntaxHighlight();
     }
 
     /**

package/docs/app/view/classdetails/TutorialComponent.mjs

@@ -61,16 +61,15 @@ class TutorialComponent extends Component {
      * @param {Object} data
      */
     applySourceCode(data) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (me.fileType === 'json') {
-            vdom.cn = data;
+            me.vdom.cn = data;
         } else {
-            vdom.innerHTML = data;
+            me.vdom.innerHTML = data;
         }
 
-        me.vdom = vdom;
+        me.update();
 
         setTimeout(() => {
             TutorialComponent.syntaxHighlight();

package/examples/tabs/MainContainer.mjs

@@ -78,8 +78,7 @@ class MainContainer extends TabContainer {
                     handler: function () {
                         let field = Neo.getComponent('firstNameField'),
                             label = field.getLabelEl(),
-                            style = label.style,
-                            vdom  = field.vdom;
+                            style = label.style;
 
                         if (!style) {
                             style = {};
@@ -92,15 +91,14 @@ class MainContainer extends TabContainer {
                         }
 
                         label.style = style;
-                        field.vdom = vdom;
+                        field.update();
                     }
                 }, {
                     text   : 'Move Fields',
                     handler: function () {
                         let field  = Neo.getComponent('firstNameField'),
                             parent = Neo.getComponent(field.parentId),
-                            vdom   = parent.vdom,
-                            cn     = vdom.cn,
+                            cn     = parent.vdom.cn,
                             tmp    = cn[1];
 
                         cn[1] = cn[3];
@@ -109,7 +107,7 @@ class MainContainer extends TabContainer {
                         cn[1].cn[0].style.color = 'steelblue';
                         cn[3].cn[0].style.color = 'green';
 
-                        parent.vdom = vdom;
+                        parent.update();
                     }
                 }, {
                     iconCls: 'fa fa-plus',

package/examples/todoList/version1/MainComponent.mjs

@@ -55,8 +55,7 @@ class MainComponent extends Component {
     }
 
     createItems(data) {
-        let me   = this,
-            vdom = me.vdom,
+        let me = this,
             cls;
 
         data.forEach(item => {
@@ -68,11 +67,11 @@ class MainComponent extends Component {
                 cls.push('far', 'fa-square');
             }
 
-            vdom.cn[0].cn.push({
+            me.vdom.cn[0].cn.push({
                 tag: 'li',
                 cn : [{
                     tag  : 'span',
-                    cls  : cls,
+                    cls,
                     style: {cursor: 'pointer', width: '20px'}
                 }, {
                     vtype: 'text',
@@ -81,7 +80,7 @@ class MainComponent extends Component {
             });
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     onAddButtonClick() {
@@ -100,7 +99,6 @@ class MainComponent extends Component {
         let me     = this,
             cls    = ['far', 'fa-square'],
             oldCls = ['fa',  'fa-check'],
-            vdom   = me.vdom,
             node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
 
         if (data.path[0].cls.includes('fa-square')) {
@@ -111,7 +109,7 @@ class MainComponent extends Component {
         NeoArray.remove(node.cls, oldCls);
         NeoArray.add(node.cls, cls);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     onInputFieldChange(data) {

package/examples/todoList/version2/TodoList.mjs

@@ -18,8 +18,7 @@ class TodoList extends List {
     }
 
     /*createItems(data) {
-        let me   = this,
-            vdom = me.vdom,
+        let me = this,
             cls;
 
         data.forEach(item => {
@@ -31,11 +30,11 @@ class TodoList extends List {
                 cls.push('far', 'fa-square');
             }
 
-            vdom.cn.push({
+            me.vdom.cn.push({
                 tag: 'li',
                 cn : [{
                     tag  : 'span',
-                    cls  : cls,
+                    cls,
                     style: {cursor: 'pointer', width: '20px'}
                 }, {
                     vtype: 'text',
@@ -44,7 +43,7 @@ class TodoList extends List {
             });
         });
 
-        me.vdom = vdom;
+        me.update();
     }*/
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.8",
+    "version": "4.3.10",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -44,14 +44,14 @@
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.12",
-        "chalk": "^5.0.1",
+        "chalk": "^5.1.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.4.1",
         "cssnano": "^5.1.13",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.2",
+        "inquirer": "^9.1.3",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.17",

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

@@ -45,8 +45,9 @@
     }
 
     &.label-bottom {
-        align-items   : start;
-        flex-direction: column-reverse;
+        align-items    : stretch;
+        flex-direction : column-reverse;
+        justify-content: start;
 
         .neo-textfield-label {
             margin-top: 3px;
@@ -164,7 +165,7 @@
     }
 
     &.label-top {
-        align-items   : start;
+        align-items   : stretch;
         flex-direction: column;
 
         .neo-textfield-label {

package/src/button/Base.mjs

@@ -145,14 +145,13 @@ class Base extends Component {
     afterSetBadgePosition(value, oldValue) {
         let me      = this,
             badgeEl = me.getBadgeNode(),
-            cls     = badgeEl.cls || [],
-            vdom    = me.vdom;
+            cls     = badgeEl.cls || [];
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
 
         badgeEl.cls = cls;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -163,13 +162,12 @@ class Base extends Component {
      */
     afterSetBadgeText(value, oldValue) {
         let me        = this,
-            badgeNode = me.getBadgeNode(),
-            vdom      = me.vdom;
+            badgeNode = me.getBadgeNode();
 
         badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -195,7 +193,6 @@ class Base extends Component {
      */
     afterSetIconCls(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             iconNode = me.getIconNode();
 
         NeoArray.remove(iconNode.cls, oldValue);
@@ -203,7 +200,7 @@ class Base extends Component {
 
         iconNode.removeDom = !value || value === '';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -214,7 +211,6 @@ class Base extends Component {
      */
     afterSetIconColor(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             iconNode = me.getIconNode();
 
         if (!iconNode.style) {
@@ -226,7 +222,7 @@ class Base extends Component {
         }
 
         iconNode.style.color = value;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -280,7 +276,6 @@ class Base extends Component {
      */
     afterSetText(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot(),
             textNode = vdomRoot.cn[1];
 
@@ -295,7 +290,7 @@ class Base extends Component {
             textNode.innerHTML = value;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -306,7 +301,6 @@ class Base extends Component {
      */
     afterSetUrl(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot();
 
         if (value) {
@@ -317,7 +311,7 @@ class Base extends Component {
             vdomRoot.tag = 'button';
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -329,8 +323,7 @@ class Base extends Component {
     afterSetUseRippleEffect(value, oldValue) {
         let me            = this,
             listener      = {click: me.showRipple, scope: me},
-            rippleWrapper = me.getRippleWrapper(),
-            vdom          = me.vdom;
+            rippleWrapper = me.getRippleWrapper();
 
         if (!value && oldValue) {
             me.removeDomListeners(listener);
@@ -340,7 +333,7 @@ class Base extends Component {
 
         // setting the config to false should end running ripple animations
         rippleWrapper.removeDom = true;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -351,7 +344,6 @@ class Base extends Component {
      */
     afterSetUrlTarget(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
             vdomRoot = me.getVdomRoot();
 
         if (me.url) {
@@ -360,7 +352,7 @@ class Base extends Component {
             delete vdomRoot.target;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -459,7 +451,6 @@ class Base extends Component {
             buttonRect           = data.path[0].rect,
             diameter             = Math.max(buttonRect.height, buttonRect.width),
             radius               = diameter / 2,
-            vdom                 = me.vdom,
             rippleEffectDuration = me.rippleEffectDuration,
             rippleWrapper        = me.getRippleWrapper(),
             rippleEl             = rippleWrapper.cn[0],
@@ -474,13 +465,12 @@ class Base extends Component {
         });
 
         delete rippleWrapper.removeDom;
-
-        me.vdom = vdom;
+        me.update();
 
         await Neo.timeout(1);
 
         rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
-        me.vdom = vdom;
+        me.update();
 
         me.#rippleTimeoutId = rippleTimeoutId = setTimeout(() => {
             // we do not want to break animations when clicking multiple times
@@ -488,7 +478,7 @@ class Base extends Component {
                 me.#rippleTimeoutId = null;
 
                 rippleWrapper.removeDom = true;
-                me.vdom = vdom;
+                me.update();
             }
         }, rippleEffectDuration);
     }

package/src/button/Split.mjs

@@ -54,8 +54,7 @@ class Split extends Button {
     construct(config) {
         super.construct(config);
 
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.triggerButton = Neo.create({
             module  : Button,
@@ -68,8 +67,8 @@ class Split extends Button {
             ...me.triggerButtonConfig
         });
 
-        vdom.cn.push(me.triggerButton.vdom);
-        me.vdom = vdom;
+        me.vdom.cn.push(me.triggerButton.vdom);
+        me.update();
     }
 
     /**

package/src/calendar/view/MainContainer.mjs

@@ -258,8 +258,7 @@ class MainContainer extends Container {
         if (oldValue !== undefined) {
             let me      = this,
                 sideBar = me.items[1].items[0],
-                style   = sideBar.style || {},
-                vdom;
+                style   = sideBar.style || {};
 
             if (value) {
                 delete sideBar.vdom.removeDom;
@@ -279,9 +278,8 @@ class MainContainer extends Container {
 
                 me.promiseVdomUpdate().then(() => {
                     setTimeout(() => {
-                        vdom = sideBar.vdom;
-                        vdom.removeDom = true;
-                        sideBar.vdom = vdom;
+                        sideBar.vdom.removeDom = true;
+                        sideBar.update();
 
                         sideBar.mounted = false;
                     }, 400);

package/src/calendar/view/SettingsContainer.mjs

@@ -51,8 +51,7 @@ class SettingsContainer extends Container {
      */
     collapse(width) {
         let me    = this,
-            style = me.style || {},
-            vdom;
+            style = me.style || {};
 
         style.marginRight = `-${width}px`;
         me._style      = style; // silent update
@@ -62,9 +61,8 @@ class SettingsContainer extends Container {
             setTimeout(() => {
                 me.collapsed = true;
 
-                vdom = me.vdom;
-                vdom.removeDom = true;
-                me.vdom = vdom;
+                me.vdom.removeDom = true;
+                me.update();
 
                 me.mounted = false;
             }, 400);

package/src/calendar/view/YearComponent.mjs

@@ -390,13 +390,12 @@ class YearComponent extends Component {
      */
     afterSetShowWeekNumbers(value, oldValue) {
         if (oldValue !== undefined) {
-            let me   = this,
-                vdom = me.vdom,
-                i    = 0,
+            let me = this,
+                i  = 0,
                 itemCn, j, len;
 
             for (; i < 12; i++) {
-                itemCn = vdom.cn[0].cn[1].cn[i].cn;
+                itemCn = me.vdom.cn[0].cn[1].cn[i].cn;
                 len    = itemCn.length;
 
                 for (j = 1; j < len; j++) {
@@ -404,7 +403,7 @@ class YearComponent extends Component {
                 }
             }
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -417,7 +416,6 @@ class YearComponent extends Component {
     afterSetSixWeeksPerMonth(value, oldValue) {
         if (oldValue !== undefined) {
             let me   = this,
-                vdom = me.vdom,
                 date = me.currentDate, // cloned
                 i    = 0;
 
@@ -425,11 +423,11 @@ class YearComponent extends Component {
             date.setDate(1);
 
             for (; i < 12; i++) {
-                vdom.cn[0].cn[1].cn[i].cn[7].removeDom = DateUtil.getWeeksOfMonth(date, me.weekStartDay) === 5 && !value;
+                me.vdom.cn[0].cn[1].cn[i].cn[7].removeDom = DateUtil.getWeeksOfMonth(date, me.weekStartDay) === 5 && !value;
                 date.setMonth(date.getMonth() + 1);
             }
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -517,7 +515,7 @@ class YearComponent extends Component {
                     me.promiseVdomUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             vdom.cn[0] = vdom.cn[0].cn[0].cn[scrollFromTop ? 1 : 0];

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

@@ -376,11 +376,8 @@ class Component extends BaseComponent {
      * @protected
      */
     afterSetUseScrollBoxShadows(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
-
-        NeoArray[value ? 'add' : 'remove'](me.vdom.cn[1].cls, 'neo-scroll-shadows');
-        me.vdom = vdom;
+        NeoArray[value ? 'add' : 'remove'](this.vdom.cn[1].cls, 'neo-scroll-shadows');
+        this.update();
     }
 
     /**
@@ -635,8 +632,7 @@ class Component extends BaseComponent {
     onWheel(data) {
         if (Math.abs(data.deltaY) > Math.abs(data.deltaX)) {
             let me        = this,
-                vdom      = me.vdom,
-                container = vdom.cn[1],
+                container = me.vdom.cn[1],
                 i         = 0,
                 date, len, week;
 
@@ -663,7 +659,7 @@ class Component extends BaseComponent {
                     container.cn.push(week.row);
                 }
 
-                me.vdom = vdom;
+                me.update();
             }
 
             else if (data.deltaY < 0 && Math.round(data.scrollTop / (data.clientHeight - me.headerHeight) * 6) < 1) {
@@ -706,7 +702,7 @@ class Component extends BaseComponent {
                 me.isScrolling = true;
                 NeoArray.add(me.vdom.cn[1].cls, 'neo-is-scrolling');
                 me.vdom.cn[0].cn[0].style.opacity = 0;
-                me.vdom = vdom;
+                me.update();
             }
 
             me.scrollTaskId && clearTimeout(me.scrollTaskId);
@@ -741,8 +737,7 @@ class Component extends BaseComponent {
 
         NeoArray.remove(vdom.cn[1].cls, 'neo-is-scrolling');
         header.style.opacity = 1;
-
-        me.vdom = vdom;
+        me.update();
 
         // todo: #990 => scroll the view to the closest row
     }
@@ -792,7 +787,7 @@ class Component extends BaseComponent {
             date.setDate(date.getDate() + 1);
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

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

@@ -507,7 +507,6 @@ class Component extends BaseComponent {
     afterSetTimeAxisPosition(value, oldValue) {
         let me                = this,
             cls               = me.cls,
-            vdom              = me.vdom,
             timeAxisContainer = me.getColumnTimeAxisContainer();
 
         NeoArray[value === 'end' ? 'add' : 'remove'](cls, 'neo-timeaxis-end');
@@ -516,8 +515,8 @@ class Component extends BaseComponent {
             timeAxisContainer.cn.unshift(timeAxisContainer.cn.pop()); // switch the order of the 2 items
         }
 
-        me._cls = cls; // silent update
-        me.vdom = vdom;
+        me.cls = cls; // silent update
+        me.update();
     }
 
     /**