neo.mjs 6.18.3 → 6.19.1

package/src/component/Base.mjs

@@ -13,10 +13,11 @@ import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
 
 const
-    addUnits          = value => value == null ? value : isNaN(value) ? value : `${value}px`,
-    closestController = Symbol.for('closestController'),
-    closestModel      = Symbol.for('closestModel'),
-    lengthRE          = /^\d+\w+$/;
+    addUnits            = value => value == null ? value : isNaN(value) ? value : `${value}px`,
+    closestController   = Symbol.for('closestController'),
+    closestModel        = Symbol.for('closestModel'),
+    lengthRE            = /^\d+\w+$/,
+    twoWayBindingSymbol = Symbol.for('twoWayBinding');
 
 /**
  * @class Neo.component.Base
@@ -333,6 +334,13 @@ class Base extends CoreBase {
          * @member {String|null} theme_=null
          */
         theme_: null,
+        /**
+         * While it is recommended to define tags inside the vdom of classes,
+         * this shortcut enables us to change the vdom root tag on instance level.
+         * Use cases: switch a Toolbar to a "nav" tag, switch a SideNav to an "aside" tag.
+         * @member {String|null} tag_=null
+         */
+        tag_: null,
         /**
          * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
@@ -548,11 +556,13 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetConfig(key, value, oldValue) {
-        if (Neo.currentWorker.isUsingViewModels && oldValue !== undefined) {
-            let binding = this.bind?.[key];
+        let me = this;
+
+        if (Neo.currentWorker.isUsingViewModels && me[twoWayBindingSymbol] && oldValue !== undefined) {
+            let binding = me.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(key, value)
+                this.getModel()?.setData(binding.key, value)
             }
         }
     }
@@ -920,6 +930,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the tag config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTag(value, oldValue) {
+        value && this.changeVdomRootKey('tag', value)
+    }
+
     /**
      * Triggered after the theme config got changed
      * @param {String|null} value
@@ -1459,7 +1479,7 @@ class Base extends CoreBase {
         // we can not set the config directly => it could already be false,
         // and we still want to pass it further into subtrees
         me._needsVdomUpdate = false;
-        me.afterSetNeedsVdomUpdate?.(false, true)
+        me.afterSetNeedsVdomUpdate?.(false, true);
 
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;

package/src/component/DateSelector.mjs

@@ -759,7 +759,7 @@ class DateSelector extends Component {
      */
     onComponentWheel(data) {
         let me               = this,
-            {deltaX, deltaY} = me,
+            {deltaX, deltaY} = data,
             wheelDelta       = me.mouseWheelDelta,
             date, monthIncrement, yearIncrement;
 
@@ -830,7 +830,7 @@ class DateSelector extends Component {
         // using force => we do want to keep the same ids
         syncIds && me.syncVdomIds(me.vnode, me.vdom, true);
 
-        me.triggerVdomUpdate(silent)
+        !silent && me.update()
     }
 
     /**

package/src/container/Base.mjs

@@ -149,7 +149,9 @@ class Base extends Component {
             me.items.forEach((item, index) => {
                 oldValue?.removeChildAttributes(item, index);
                 value.applyChildAttributes(item, index)
-            })
+            });
+
+            oldValue?.destroy()
         }
     }
 

package/src/dialog/Base.mjs

@@ -363,12 +363,11 @@ class Base extends Panel {
         await me.render(true);
 
         let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
-        console.log(dialogRect, bodyRect);
 
         // Move to cover the animation target
         await Neo.applyDeltas(appName, {
             id,
-            style : {
+            style: {
                 height: `${rect.height}px`,
                 left  : `${rect.left  }px`,
                 top   : `${rect.top   }px`,

package/src/form/field/Time.mjs

@@ -92,9 +92,7 @@ class Time extends Picker {
 
         me.originalConfig.value = me.formatTime(me.value);
 
-        if (clearTrigger) {
-            clearTrigger.onFieldChange();
-        }
+        clearTrigger?.onFieldChange();
 
         me.collection = Neo.create({
             module     : Collection,
@@ -115,9 +113,8 @@ class Time extends Picker {
         );
 
         me.list.on({
-            itemClick   : me.onListItemClick,
-            itemNavigate: me.onListItemNavigate,
-            scope       : me
+            itemClick: me.onListItemClick,
+            scope    : me
         })
     }
 
@@ -273,7 +270,8 @@ class Time extends Picker {
 
         while (currentDate <= endDate) {
             listItems.push({
-                value: dt.format(currentDate)
+                isRecord: true,
+                value   : dt.format(currentDate)
             });
 
             currentDate.setSeconds(currentDate.getSeconds() + me.stepSize)
@@ -350,10 +348,12 @@ class Time extends Picker {
     }
 
     /**
-     * @param {Object} record
+     * @param {Object} data
+     * @param {Object} data.record
      */
-    onListItemClick(record) {
+    onListItemClick(data) {
         let me       = this,
+            {record} = data,
             oldValue = me.value,
             {value}  = record;
 
@@ -365,13 +365,6 @@ class Time extends Picker {
         }
     }
 
-    /**
-     * @param {Object} record
-     */
-    onListItemNavigate(record) {
-        this.onListItemClick(record)
-    }
-
     /**
      *
      */
@@ -409,6 +402,15 @@ class Time extends Picker {
         list.selectionModel.select(id);
 
         if (!preventFocus) {
+
+            if (list.mounted) {
+                list.focus(id)
+            } else {
+                list.on('mounted', () => {
+                    list.focus(id)
+                }, me, {once: true})
+            }
+
             list.focus(id)
         } else {
             Neo.main.DomAccess.scrollIntoView({

package/src/layout/Base.mjs

@@ -1,4 +1,5 @@
 import CoreBase from '../core/Base.mjs';
+import NeoArray from '../util/Array.mjs';
 
 /**
  * The base class for all other layouts.
@@ -29,6 +30,12 @@ class Base extends CoreBase {
          * @protected
          */
         containerId: null,
+        /**
+         * A layout specific CSS selector which gets added to Container the layout is bound to.
+         * @member {String|null} containerCls_=null
+         * @protected
+         */
+        containerCls_: null,
         /**
          * Identifier for all classes that extend layout.Base
          * @member {Boolean} isLayout=true
@@ -45,7 +52,10 @@ class Base extends CoreBase {
      * @returns {Neo.container.Base|null}
      */
     get container() {
-        return Neo.getComponent(this.containerId)
+        let {containerId} = this;
+
+        // the instance might not be registered yet
+        return Neo.getComponent(containerId) || Neo.get(containerId)
     }
 
     /**
@@ -67,10 +77,23 @@ class Base extends CoreBase {
     applyChildAttributes(item, index) {}
 
     /**
-     * Placeholder method
      * @protected
      */
-    applyRenderAttributes() {}
+    applyRenderAttributes() {
+        let me                        = this,
+            {container, containerCls} = me,
+            {wrapperCls}              = container;
+
+        if (containerCls) {
+            if (!container) {
+                Neo.logError(me.className + ': applyRenderAttributes -> container not yet created', me.containerId)
+            }
+
+            NeoArray.add(wrapperCls, containerCls);
+
+            container.wrapperCls = wrapperCls
+        }
+    }
 
     /**
      *
@@ -108,15 +131,29 @@ class Base extends CoreBase {
     /**
      * Placeholder method
      * @param {Neo.component.Base} item
+     * @param {Number} index
      * @protected
      */
-    removeChildAttributes(item) {}
+    removeChildAttributes(item, index) {}
 
     /**
-     * Placeholder method
      * @protected
      */
-    removeRenderAttributes() {}
+    removeRenderAttributes() {
+        let me                        = this,
+            {container, containerCls} = me,
+            {wrapperCls}              = container;
+
+        if (containerCls) {
+            if (!container) {
+                Neo.logError(me.className + ': removeRenderAttributes -> container not yet created', me.containerId)
+            }
+
+            NeoArray.remove(wrapperCls, containerCls);
+
+            container.wrapperCls = wrapperCls
+        }
+    }
 }
 
 Neo.setupClass(Base);

package/src/layout/Card.mjs

@@ -49,6 +49,11 @@ class Card extends Base {
          * @member {Number} activeIndex_=0
          */
         activeIndex_: 0,
+        /**
+         * @member {String|null} containerCls='neo-layout-card'
+         * @protected
+         */
+        containerCls: 'neo-layout-card',
         /*
          * Remove the DOM of inactive cards.
          * This will keep the instances & vdom trees
@@ -72,8 +77,7 @@ class Card extends Base {
      */
     async afterSetActiveIndex(value, oldValue) {
         let me              = this,
-            {containerId, removeInactiveCards} = me,
-            container       = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
+            {container, removeInactiveCards} = me,
             sCfg            = me.constructor,
             needsTransition = me.slideDirection && oldValue !== undefined,
             needsUpdate     = false,
@@ -144,7 +148,7 @@ class Card extends Base {
         let me            = this,
             isActiveIndex = me.activeIndex === index,
             sCfg          = me.constructor,
-            childCls      = item.wrapperCls,
+            childCls      = item.wrapperCls || [],
             {vdom}        = item;
 
         NeoArray.add(childCls, sCfg.itemCls);
@@ -153,29 +157,12 @@ class Card extends Base {
         if (!keepInDom && me.removeInactiveCards) {
             vdom.removeDom  = !isActiveIndex;
             item.wrapperCls = childCls;
-            item.update()
+            item.update?.() // can get called for an item config
         } else {
             item.wrapperCls = childCls
         }
     }
 
-    /**
-     * Applies CSS classes to the container this layout is bound to
-     */
-    applyRenderAttributes() {
-        let me         = this,
-            container  = Neo.getComponent(me.containerId),
-            wrapperCls = container?.wrapperCls || [];
-
-        if (!container) {
-            Neo.logError('layout.Card: applyRenderAttributes -> container not yet created', me.containerId)
-        }
-
-        NeoArray.add(wrapperCls, 'neo-layout-card');
-
-        container.wrapperCls = wrapperCls
-    }
-
     /**
      * Triggered before the slideDirection config gets changed
      * @param {String} value
@@ -194,14 +181,11 @@ class Card extends Base {
      * @returns {Neo.component.Base}
      */
     async loadModule(item, index) {
-        let me            = this,
-            {containerId} = me,
-            container     = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
-            items         = container.items,
-            sCfg          = me.constructor,
-            {vdom}        = container,
-            {module}      = item,
-            proto, wrapperCls;
+        let me          = this,
+            {container} = me,
+            items       = container.items,
+            {module}    = item,
+            proto;
 
         if (!Neo.isNumber(index)) {
             index = items.indexOf(item)
@@ -209,49 +193,27 @@ class Card extends Base {
 
         item.isLoading = true; // prevent the item from getting queued multiple times inside form.Container
 
-        module     = await module();
-        module     = module.default;
-        proto      = module.prototype;
-        wrapperCls = item.wrapperCls || proto.constructor.config.wrapperCls || [];
+        module = await module();
+        module = module.default;
+        proto  = module.prototype;
+
+        item.className = proto.className;
+        item.module    = module;
 
-        item.className  = proto.className;
-        item.wrapperCls = [...wrapperCls, sCfg.itemCls];
-        item.module     = module;
+        me.applyChildAttributes(item, index);
 
         delete item.isLoading;
         delete item.vdom;
 
         items[index] = item = Neo.create(item);
 
-        if (me.removeInactiveCards) {
-            item.vdom.removeDom = true
-        }
+        container.getVdomItemsRoot().cn[index] = item.vdom;
 
         container.fire('cardLoaded', {item});
 
-        vdom.cn[index] = item.vdom;
-
         return item
     }
 
-    /**
-     * Removes all CSS rules from the container this layout is bound to.
-     * Gets called when switching to a different layout.
-     */
-    removeRenderAttributes() {
-        let me         = this,
-            container  = Neo.getComponent(me.containerId),
-            wrapperCls = container?.wrapperCls || [];
-
-        if (!container) {
-            Neo.logError('layout.Card: removeRenderAttributes -> container not yet created', me.containerId)
-        }
-
-        NeoArray.remove(wrapperCls, 'neo-layout-card');
-
-        container.wrapperCls = wrapperCls
-    }
-
     /**
      * @param {Number} index
      * @param {Number} oldIndex