neo.mjs 6.15.4 → 6.15.6

package/src/form/field/CheckBox.mjs

@@ -201,7 +201,7 @@ class CheckBox extends Base {
         me.update();
 
         if (oldValue !== undefined) {
-            me.fireChangeEvent(me.getValue(), me.getOldValue())
+            me.fireChangeEvent(me.getSubmitValue(), me.getOldSubmitValue())
         }
     }
 
@@ -498,20 +498,28 @@ class CheckBox extends Base {
     }
 
     /**
-     * Counterpart to getValue(), returning the uncheckedValue if checked
+     * Counterpart to getSubmitValue(), returning the uncheckedValue if checked
      * @returns {String|null}
      */
-    getOldValue() {
+    getOldSubmitValue() {
         let me = this;
 
         return me.checked ? me.uncheckedValue : me.value
     }
 
+    /**
+     * @deprecated in v7.x
+     * @returns {String|null}
+     */
+    getOldValue() {
+        return this.getOldSubmitValue()
+    }
+
     /**
      * Returns this.value if checked, otherwise this.uncheckedValue
      * @returns {String|null}
      */
-    getValue() {
+    getSubmitValue() {
         let me = this;
 
         return me.checked ? me.value : me.uncheckedValue
@@ -554,7 +562,7 @@ class CheckBox extends Base {
 
         me.checked = checked;
 
-        me.fireUserChangeEvent(me.getValue(), me.getOldValue())
+        me.fireUserChangeEvent(me.getSubmitValue(), me.getOldSubmitValue())
     }
 
     /**

package/src/form/field/ComboBox.mjs

@@ -254,12 +254,12 @@ class ComboBox extends Picker {
         // Promote an array of items to be a Store
         if (Array.isArray(value)) {
             value = {
-                data : value.map((v, i) => {
+                data: value.map((v, i) => {
                     // Simplest case is just picking string values.
                     if (typeof v === 'string') {
                         v = {
-                            [valueField]  : v,
-                            [displayField]: v
+                            [displayField]: v,
+                            [valueField]  : v
                         }
                     }
 
@@ -273,8 +273,8 @@ class ComboBox extends Picker {
         if (Neo.typeOf(value) === 'Object' && !value.model && !value.module && !value.ntype) {
             value.model = {
                 fields: [
-                    {name: valueField,   type: 'String'},
-                    {name: displayField, type: 'String'}
+                    {name: displayField, type: 'String'},
+                    {name: valueField,   type: 'String'}
                 ]
             }
         }
@@ -483,7 +483,7 @@ class ComboBox extends Picker {
     /**
      * @returns {Number|String}
      */
-    getValue() {
+    getSubmitValue() {
         let me = this;
 
         return me.value?.[me.valueField] || me.emptyValue
@@ -510,6 +510,11 @@ class ComboBox extends Picker {
     onFocusLeave(data) {
         let me = this;
 
+        /*
+         * If we are leaving the field, using forceSelection=true and the field does not have a selected record,
+         * we do want to pick the closest match => the focussed record (honoring filters).
+         * If no record is found, we will clear the field instead.
+         */
         if (me.forceSelection && !me.value) {
             me.programmaticValueChange = true;
             me.value                   = me.store.get(me.activeRecordId);
@@ -533,13 +538,13 @@ class ComboBox extends Picker {
         }
     }
 
-    // TODO:
-    // When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
-    // `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
-    // a `mutate` listener on our own `valueCollection` which backs our `value` field which
-    // will be implemented by a getter which accesses `valueCollection`.
-    // This will become important for implementing multiSelect
     /**
+     * todo:
+     * When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
+     * `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
+     * a `mutate` listener on our own `valueCollection` which backs our `value` field which
+     * will be implemented by a getter which accesses `valueCollection`.
+     * This will become important for implementing multiSelect
      * @param {Object} selectionChangeEvent
      * @param {Object[]} selectionChangeEvent.selection
      * @protected
@@ -584,12 +589,12 @@ class ComboBox extends Picker {
      * @protected
      */
     onListItemNavigate(record) {
-        let {activeItem, activeIndex} = record;
+        let {activeIndex} = record;
 
         if (activeIndex >= 0) {
             const
-                me        = this,
-                { store } = me;
+                me      = this,
+                {store} = me;
 
             me.activeRecord   = store.getAt(activeIndex);
             me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty];
@@ -761,6 +766,7 @@ class ComboBox extends Picker {
         if (!me.programmaticValueChange) {
             // changing the input => silent record reset
             me._value = null;
+            me.list?.selectionModel.deselectAll();
 
             me.filterOnInput(inputValue)
         }

package/src/form/field/Date.mjs

@@ -85,7 +85,7 @@ class DateField extends Picker {
      */
     invalidInput = false
     /**
-     * Setting the value to true will return a Date object when calling getValue()
+     * Setting the value to true will return a Date object when calling getSubmitValue()
      * @member {Boolean} submitDateObject=false
      */
     submitDateObject = false
@@ -183,7 +183,7 @@ class DateField extends Picker {
     /**
      * @returns {Date|String|null}
      */
-    getValue() {
+    getSubmitValue() {
         let value = this.value;
 
         if(this.submitDateObject && value) {

package/src/form/field/Text.mjs

@@ -1003,14 +1003,16 @@ class Text extends Base {
             value = [value]
         }
 
-        let me = this;
+        let me                  = this,
+            {appName, windowId} = me;
 
         value.forEach((item, index) => {
             if (item.isClass) {
                 value[index] = Neo.create(item, {
-                    appName: me.appName,
-                    id     : me.getTriggerId(item.prototype.type),
-                    field  : me
+                    appName,
+                    id   : me.getTriggerId(item.prototype.type),
+                    field: me,
+                    windowId
                 })
             } else if (!(item instanceof BaseTrigger)) {
                 if (!item.module && !item.ntype) {
@@ -1024,8 +1026,9 @@ class Text extends Base {
 
                 value[index] = Neo[item.className ? 'create' : 'ntype']({
                     ...item,
-                    appName: me.appName,
-                    field  : me
+                    appName,
+                    field: me,
+                    windowId
                 })
             }
         });
@@ -1145,6 +1148,15 @@ class Text extends Base {
         return `${this.id}__label`
     }
 
+    /**
+     * @returns {*}
+     */
+    getSubmitValue() {
+        let superSubmitValue = super.getSubmitValue();
+
+        return this.xssProtected ? StringUtil.escapeHtml(superSubmitValue) : superSubmitValue
+    }
+
     /**
      * @param {String} type
      * @returns {Neo.form.field.trigger.Base|null}
@@ -1192,17 +1204,6 @@ class Text extends Base {
         return this.id + '-trigger-' + type
     }
 
-    /**
-     * @returns {*}
-    */
-    getValue() {
-        if (this.xssProtected) {
-            return StringUtil.escapeHtml(super.getValue())
-        } else {
-            return super.getValue()
-        }
-    }
-
     /**
      * @returns {Boolean}
      */

package/src/main/addon/IntersectionObserver.mjs

@@ -80,16 +80,25 @@ class NeoIntersectionObserver extends Base {
     /**
      * Add more or new items into an existing observer instance
      * @param {Object} data
-     * @param {Boolean} data.disconnect=false true removes all currently observed targets
+     * @param {Boolean} [data.disconnect=false] true removes all currently observed targets
      * @param {String} data.id
-     * @param {String} data.observe The querySelector to match elements
+     * @param {String|String[]} data.observe The querySelector to match elements
      * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
      */
     observe(data) {
-        let me       = this,
-            cache    = me.cache,
-            targets  = document.querySelectorAll(data.observe),
-            observer = me.map[data.id];
+        let me            = this,
+            cache         = me.cache,
+            {id, observe} = data,
+            observer      = me.map[data.id],
+            targets       = [];
+
+        if (!Neo.isArray(observe)) {
+            observe = [observe]
+        }
+
+        observe.forEach(item => {
+            targets.push(...document.querySelectorAll(item))
+        })
 
         if (observer) {
             data.disconnect && observer.disconnect();
@@ -98,11 +107,11 @@ class NeoIntersectionObserver extends Base {
                 observer.observe(target)
             })
         } else {
-            if (!cache[data.id]) {
-                cache[data.id] = []
+            if (!cache[id]) {
+                cache[id] = []
             }
 
-            cache[data.id].push(data);
+            cache[id].push(data);
         }
 
         return !!observer
@@ -112,18 +121,18 @@ class NeoIntersectionObserver extends Base {
      * @param {Object} data
      * @param {String} data.callback
      * @param {String} data.id
-     * @param {String} [data.observe] The querySelector to match elements
+     * @param {String|String[]} [data.observe] The querySelector to match elements
      * @param {String} data.root
      * @param {String} data.rootMargin='0px'
      * @param {Number|Number[]} data.threshold=0.0
      */
     register(data) {
-        let me      = this,
-            cache   = me.cache,
-            targets = data.observe && document.querySelectorAll(data.observe),
+        let me            = this,
+            cache         = me.cache,
+            {id, observe} = data,
             observer;
 
-        me.map[data.id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
+        me.map[id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
             root      : document.querySelector(data.root),
             rootMargin: data.rootMargin || '0px',
             threshold : data.threshold  || 0.0
@@ -131,13 +140,11 @@ class NeoIntersectionObserver extends Base {
 
         observer.rootId = data.id; // storing the component id
 
-        targets?.forEach(target => {
-            observer.observe(target)
-        });
+        observe && me.observe({id, observe});
 
-        if (cache[data.id]) {
-            cache[data.id].forEach(item => me.observe(item));
-            delete cache[data.id]
+        if (cache[id]) {
+            cache[id].forEach(item => me.observe(item));
+            delete cache[id]
         }
     }
 

package/src/tab/Container.mjs

@@ -110,7 +110,7 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|Neo.component.Base[]}
      */
     add(item) {
-        return this.insert(this.getTabBar().items.length, item);
+        return this.insert(this.getTabBar().items.length, item)
     }
 
     /**
@@ -125,8 +125,8 @@ class Container extends BaseContainer {
 
         if (Neo.isNumber(value) && value > -1 && !cardContainer) {
             me.on('constructed', () => {
-                me.afterSetActiveIndex(value, oldValue);
-            });
+                me.afterSetActiveIndex(value, oldValue)
+            })
         } else {
             if (Neo.isNumber(value) && value > -1) {
                 // we need to ensure the afterSet method triggers when lazy loading the module
@@ -140,7 +140,7 @@ class Container extends BaseContainer {
                         item: me.getActiveCard(),
                         oldValue,
                         value
-                    });
+                    })
                 }
             }
         }
@@ -157,7 +157,7 @@ class Container extends BaseContainer {
             cls = me.cls;
 
         NeoArray[value ? 'unshift' : 'remove'](cls, me.tabContainerCls + '-plain');
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -168,7 +168,7 @@ class Container extends BaseContainer {
      */
     afterSetSortable(value, oldValue) {
         if (oldValue !== undefined) {
-            this.getTabBar().sortable = value;
+            this.getTabBar().sortable = value
         }
     }
 
@@ -195,7 +195,7 @@ class Container extends BaseContainer {
                 component: me,
                 oldValue,
                 value
-            });
+            })
         }
     }
 
@@ -208,7 +208,7 @@ class Container extends BaseContainer {
     afterSetUseActiveTabIndicator(value, oldValue) {
         if (oldValue !== undefined) {
             this.getTabBar()  .useActiveTabIndicator = value;
-            this.getTabStrip().useActiveTabIndicator = value;
+            this.getTabStrip().useActiveTabIndicator = value
         }
     }
 
@@ -220,7 +220,7 @@ class Container extends BaseContainer {
      * @returns {String} value
      */
     beforeSetTabBarPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'tabBarPosition');
+        return this.beforeSetEnumValue(value, oldValue, 'tabBarPosition')
     }
 
     /**
@@ -242,10 +242,10 @@ class Container extends BaseContainer {
             tabButtons.push(me.getTabButtonConfig(item.tabButtonConfig, index));
 
             if (!(item instanceof Neo.component.Base)) {
-                item = {flex: 1, ...me.itemDefaults, isTab: true, ...item};
+                item = {flex: 1, ...me.itemDefaults, isTab: true, ...item}
             }
 
-            tabComponents.push(item);
+            tabComponents.push(item)
         });
 
         me.items = [{
@@ -278,7 +278,7 @@ class Container extends BaseContainer {
 
         me.itemDefaults = null;
 
-        super.createItems();
+        super.createItems()
     }
 
     /**
@@ -286,7 +286,7 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|null}
      */
     getActiveCard() {
-        return this.getCardContainer().items[this.activeIndex] || null;
+        return this.getCardContainer().items[this.activeIndex] || null
     }
 
     /**
@@ -295,14 +295,14 @@ class Container extends BaseContainer {
      * @returns {Neo.component.Base|null}
      */
     getCard(index) {
-        return this.getCardContainer().items[index] || null;
+        return this.getCardContainer().items[index] || null
     }
 
     /**
      * @returns {Neo.container.Base}
      */
     getCardContainer() {
-        return Neo.getComponent(this.cardContainerId);
+        return Neo.getComponent(this.cardContainerId)
     }
 
     /**
@@ -310,7 +310,7 @@ class Container extends BaseContainer {
      * @returns {Number}
      */
     getCount() {
-        return this.getTabBar().items.length;
+        return this.getTabBar().items.length
     }
 
     /**
@@ -354,7 +354,7 @@ class Container extends BaseContainer {
                 break;
         }
 
-        return layoutConfig;
+        return layoutConfig
     }
 
     /**
@@ -362,14 +362,14 @@ class Container extends BaseContainer {
      * @returns {Neo.tab.header.Button|null}
      */
     getTabAtIndex(index) {
-        return this.getTabBar().items[index] || null;
+        return this.getTabBar().items[index] || null
     }
 
     /**
      * @returns {Neo.toolbar.Base}
      */
     getTabBar() {
-        return Neo.getComponent(this.tabBarId);
+        return Neo.getComponent(this.tabBarId)
     }
 
     /**
@@ -380,28 +380,29 @@ class Container extends BaseContainer {
      */
     getTabButtonConfig(config, index) {
         let me = this,
-            defaultConfig = {
-                module : HeaderButton,
-                flex   : 'none',
-                index  : index,
-                pressed: me.activeIndex === index,
-
-                domListeners: [{
-                    click: function(data) {
-                        me.activeIndex = data.component.index;
-                    },
-                    scope: me
-                }]
-            };
-
-        return {...defaultConfig, ...config};
+
+        defaultConfig = {
+            module : HeaderButton,
+            flex   : 'none',
+            index  : index,
+            pressed: me.activeIndex === index,
+
+            domListeners: [{
+                click: function(data) {
+                    me.activeIndex = data.component.index
+                },
+                scope: me
+            }]
+        };
+
+        return {...defaultConfig, ...config}
     }
 
     /**
      * @returns {Neo.tab.Strip}
      */
     getTabStrip() {
-        return Neo.getComponent(this.tabStripId);
+        return Neo.getComponent(this.tabStripId)
     }
 
     /**
@@ -425,7 +426,7 @@ class Container extends BaseContainer {
 
             for (; i < len; i++) {
                 // insert the array backwards
-                returnArray.unshift(me.insert(index, item[len - 1 - i], true));
+                returnArray.unshift(me.insert(index, item[len - 1 - i], true))
             }
 
             superItem = returnArray;
@@ -439,7 +440,7 @@ class Container extends BaseContainer {
                     superItem = cardContainer.items[i];
 
                     if (me.activateInsertedTabs) {
-                        me.activeIndex = i;
+                        me.activeIndex = i
                     }
 
                     break;
@@ -456,7 +457,7 @@ class Container extends BaseContainer {
                 len = tabBar.items.length;
 
                 for (; i < len; i++) {
-                    tabBar.items[i].index = i;
+                    tabBar.items[i].index = i
                 }
 
                 item.flex = 1;
@@ -464,9 +465,9 @@ class Container extends BaseContainer {
 
                 if (me.activateInsertedTabs) {
                     if (!me.vnode) {
-                        me.activeIndex = index;
+                        me.activeIndex = index
                     } else {
-                        tab.on('mounted', me.onTabButtonMounted, me);
+                        tab.on('mounted', me.onTabButtonMounted, me)
                     }
                 }
             }
@@ -496,17 +497,17 @@ class Container extends BaseContainer {
         if (index !== me.activeIndex) {
             // silent updates
             me._activeIndex = index;
-            cardContainer.layout._activeIndex = index;
+            cardContainer.layout._activeIndex = index
         }
 
         returnValue = cardContainer.moveTo(fromIndex, toIndex);
 
         me.fire('moveTo', {
-            fromIndex: fromIndex,
-            toIndex  : toIndex
+            fromIndex,
+            toIndex
         });
 
-        return returnValue;
+        return returnValue
     }
 
     /**
@@ -514,7 +515,7 @@ class Container extends BaseContainer {
      */
     onConstructed() {
         this._layout = this.getLayoutConfig(); // silent update
-        super.onConstructed();
+        super.onConstructed()
     }
 
     /**
@@ -535,7 +536,7 @@ class Container extends BaseContainer {
         for (; i < len; i++) {
             if (tabBar.items[i].id === buttonId) {
                 index = i;
-                break;
+                break
             }
         }
 
@@ -545,10 +546,10 @@ class Container extends BaseContainer {
             if (me.vnode && !card.mounted) {
                 listenerId = card.on('mounted', () => {
                     card.un('mounted', listenerId);
-                    me.activeIndex = index;
-                });
+                    me.activeIndex = index
+                })
             } else {
-                me.activeIndex = index;
+                me.activeIndex = index
             }
         }
     }
@@ -566,7 +567,7 @@ class Container extends BaseContainer {
 
         for (; i < len; i++) {
             if (items[i].id === component.id) {
-                this.removeAt(i, destroyItem, silent);
+                this.removeAt(i, destroyItem, silent)
             }
         }
     }
@@ -589,9 +590,9 @@ class Container extends BaseContainer {
         if (index < activeIndex) {
             // silent updates
             me._activeIndex = activeIndex - 1;
-            cardContainer.layout._activeIndex = activeIndex - 1;
+            cardContainer.layout._activeIndex = activeIndex - 1
         } else if (index === activeIndex) {
-            me.activeIndex = activeIndex - 1;
+            me.activeIndex = activeIndex - 1
         }
 
         // todo: non index based matching of tab buttons and cards
@@ -599,7 +600,7 @@ class Container extends BaseContainer {
         len = tabBar.items.length;
 
         for (; i < len; i++) {
-            tabBar.items[i].index = i;
+            tabBar.items[i].index = i
         }
     }
 
@@ -612,8 +613,8 @@ class Container extends BaseContainer {
             tabButtons  = me.getTabBar().items || [];
 
         tabButtons.forEach((item, index) => {
-            item.pressed = index === activeIndex;
-        });
+            item.pressed = index === activeIndex
+        })
     }
 }
 

package/test/components/app.mjs

@@ -5,5 +5,6 @@ import '../../src/button/Base.mjs';
 import '../../src/component/DateSelector.mjs';
 import '../../src/form/field/ComboBox.mjs';
 import '../../src/list/Chip.mjs';
+import '../../src/toolbar/Base.mjs';
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})