neo.mjs 6.3.10 → 6.4.0

package/src/form/field/Picker.mjs

@@ -44,10 +44,6 @@ class Picker extends Text {
             Enter : 'onKeyDownEnter',
             Escape: 'onKeyDownEscape'
         },
-        /**
-         * @member {Boolean} matchPickerWidth=true
-         */
-        matchPickerWidth: true,
         /**
          * @member {Object|null} picker=null
          * @protected
@@ -75,9 +71,10 @@ class Picker extends Text {
         pickerMaxHeight: 200,
         /**
          * The width of the picker container. Defaults to px.
-         * @member {Number|null} pickerWidth=100
+         * By default, the width of the picker matches the width of the input wrap element.
+         * @member {Number|null} pickerWidth=null
          */
-        pickerWidth: 100,
+        pickerWidth: null,
         /**
          * @member {Boolean} showPickerOnFocus=false
          * @protected
@@ -141,46 +138,46 @@ class Picker extends Text {
     }
 
     /**
-     * @param {Boolean} silent
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
      */
-    applyClientRects(silent) {
-        let me          = this,
-            rects       = me.clientRects,
-            inputRect   = rects[1],
-            parentRect  = rects[2],
-            triggerRect = rects[0],
-            vdom        = me.picker.vdom,
-            width       = me.matchPickerWidth ? inputRect.width : me.pickerWidth;
-
-        me.pickerWidth = width;
-
-        vdom.style = vdom.style || {};
-
-        Object.assign(vdom.style, {
-            left : `${inputRect.left}px`,
-            top  : `${inputRect.bottom + 1}px`,
-            width: `${width}px`
-        });
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
 
-        me.picker[silent ? '_vdom' : 'vdom'] = vdom;
+        if (this.picker) {
+            this.picker.theme = value
+        }
     }
 
     /**
      * @returns {Neo.container.Base}
      */
     createPicker() {
-        let me              = this,
+        const
+            me              = this,
+            { pickerWidth } = me,
             pickerComponent = me.createPickerComponent();
 
         return Neo.create(Container, {
+            parentId : 'document.body',
+            floating : true,
+            align    : {
+                edgeAlign : pickerWidth ? 't0-b0' : 't-b',
+                matchSize : pickerWidth ? false : true,
+                axisLock  : true,
+                target    : me.getInputWrapperId()
+            },
             appName  : me.appName,
             cls      : ['neo-picker-container', 'neo-container'],
             height   : me.pickerHeight,
             id       : me.getPickerId(),
             items    : pickerComponent ? [pickerComponent] : [],
             maxHeight: me.pickerMaxHeight,
+            theme    : me.theme,
             vdom     : {cn: [], 'aria-activedescendant': me.id, tabIndex: -1},
-            width    : me.pickerWidth,
+            width    : pickerWidth,
             ...me.pickerConfig,
 
             // scoped to the field instance
@@ -225,20 +222,6 @@ class Picker extends Text {
         super.destroy(...args);
     }
 
-    /**
-     * @param {Function} [callback]
-     * @param {Object} [callbackScope]
-     */
-    getClientRectsThenShow(callback, callbackScope) {
-        let me        = this,
-            triggerId = me.getTriggerId('picker');
-
-        me.getDomRect([triggerId, me.getInputWrapperId(), me.parentId]).then(data => {
-            me.clientRects = data;
-            me.showPicker(callback, callbackScope);
-        });
-    }
-
     /**
      * Returns the picker instance and creates it in case it does not exist yet
      * @returns {Neo.container.Base}
@@ -276,6 +259,7 @@ class Picker extends Text {
             me.pickerIsMounted = false;
 
             Neo.main.addon.ScrollSync.unregister({
+                appName : me.appName,
                 sourceId: me.id,
                 targetId: picker.id
             })
@@ -291,7 +275,7 @@ class Picker extends Text {
 
         let me = this;
 
-        me.showPickerOnFocus && !me.pickerIsMounted && me.getClientRectsThenShow();
+        me.showPickerOnFocus && !me.pickerIsMounted && me.showPicker();
     }
 
     /**
@@ -330,7 +314,7 @@ class Picker extends Text {
      * @protected
      */
     onKeyDownEnter(data, callback, callbackScope) {
-        !this.pickerIsMounted && this.getClientRectsThenShow(callback, callbackScope);
+        !this.pickerIsMounted && this.showPicker(callback, callbackScope);
     }
 
     /**
@@ -361,8 +345,6 @@ class Picker extends Text {
         if (!me.pickerIsMounting) {
             me.pickerIsMounting = true;
 
-            me.applyClientRects(true);
-
             listenerId = picker.on('mounted', () => {
                 picker.un('mounted', listenerId);
 
@@ -374,6 +356,7 @@ class Picker extends Text {
             picker.render(true);
 
             Neo.main.addon.ScrollSync.register({
+                appName : me.appName,
                 sourceId: me.id,
                 targetId: picker.id
             })
@@ -389,7 +372,7 @@ class Picker extends Text {
         if (me.pickerIsMounted) {
             me.hidePicker();
         } else {
-            me.getClientRectsThenShow();
+            me.showPicker();
         }
     }
 }

package/src/form/field/Time.mjs

@@ -296,12 +296,11 @@ class Time extends Picker {
         let me = this;
 
         Neo.main.DomAccess.focus({
-            id: me.getInputElId()
+            appName: me.appName,
+            id     : me.getInputElId()
         }).then(() => {
-            if (callback) {
-                callback.apply(me);
-            }
-        });
+            callback?.apply(me)
+        })
     }
 
     /**
@@ -410,11 +409,12 @@ class Time extends Picker {
         list.selectionModel.select(id);
 
         if (!preventFocus) {
-            list.focus(id);
+            list.focus(id)
         } else {
             Neo.main.DomAccess.scrollIntoView({
-                id: id
-            });
+                appName: me.appName,
+                id     : id
+            })
         }
     }
 }

package/src/form/field/trigger/Base.mjs

@@ -29,7 +29,7 @@ class Base extends Component {
         /**
          * @member {String} align_='end'
          */
-        align_: 'end',
+        align: 'end',
         /**
          * @member {String[]} baseCls=['neo-field-trigger']
          */

package/src/form/field/trigger/CopyToClipboard.mjs

@@ -89,10 +89,14 @@ class CopyToClipboard extends Base {
      * @param {Object} data
      */
     onTriggerClick(data) {
+        let me = this;
+
         Neo.main.DomAccess.selectNode({
-            id: this.field.getInputEl().id
+            appName: me.appName,
+            id     : me.field.getInputEl().id
         }).then(data => {
             Neo.main.DomAccess.execCommand({
+                appName: me.appName,
                 command: 'copy'
             });
         });

package/src/grid/View.mjs

@@ -153,9 +153,12 @@ class View extends Component {
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
                 // this logic only works for selection.table.RowModel
-                Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});
+                Neo.main.DomAccess.scrollToTableRow({
+                    appName: me.appName,
+                    id     : selectedRows[0]
+                })
             }
-        });
+        })
     }
 
     /**

package/src/grid/header/Button.mjs

@@ -8,11 +8,11 @@ import NeoArray   from '../../util/Array.mjs';
 class Button extends BaseButton {
     /**
      * Valid values for align
-     * @member {String[]} alignValues: ['left', 'center', 'right']
+     * @member {String[]} cellAlignValues: ['left', 'center', 'right']
      * @protected
      * @static
      */
-    static alignValues = ['left', 'center', 'right']
+    static cellAlignValues = ['left', 'center', 'right']
 
     static config = {
         /**
@@ -25,15 +25,15 @@ class Button extends BaseButton {
          * @protected
          */
         ntype: 'grid-header-button',
-        /**
-         * Alignment of the matching table cells. Valid values are left, center, right
-         * @member {String} align_='left'
-         */
-        align_: 'left',
         /**
          * @member {String[]} baseCls=['neo-grid-header-button']
          */
         baseCls: ['neo-grid-header-button'],
+        /**
+         * Alignment of the matching table cells. Valid values are left, center, right
+         * @member {String} cellAlign_='left'
+         */
+        cellAlign_: 'left',
         /**
          * @member {String} iconCls='fa fa-arrow-circle-up'
          */
@@ -109,13 +109,13 @@ class Button extends BaseButton {
     }
 
     /**
-     * Triggered before the align config gets changed
+     * Triggered before the cellAlign config gets changed
      * @param {String} value
      * @param {String} oldValue
      * @protected
      */
-    beforeSetAlign(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'align', 'alignValues');
+    beforeSetCellAlign(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues');
     }
 
     /**

package/src/list/Base.mjs

@@ -492,16 +492,16 @@ class Base extends Component {
     }
 
     /**
-     *
+     * @param args
      */
-    destroy() {
+    destroy(...args) {
         let me = this;
 
         me.selectionModel?.destroy();
 
         me.autoDestroyStore && me.store?.destroy();
 
-        super.destroy();
+        super.destroy(...args);
     }
 
     /**
@@ -511,10 +511,13 @@ class Base extends Component {
     focus(id) {
         super.focus(id);
 
-        id && this.scrollIntoViewOnFocus && Neo.main.DomAccess.scrollIntoView({
+        let me = this;
+
+        id && me.scrollIntoViewOnFocus && Neo.main.DomAccess.scrollIntoView({
+            appName : me.appName,
             behavior: 'auto',
-            id      : id || this.id
-        });
+            id      : id || me.id
+        })
     }
 
     /**
@@ -542,14 +545,6 @@ class Base extends Component {
         return headerlessIndex + delta;
     }
 
-    /**
-     * @param {Number|String} recordId
-     * @returns {String}
-     */
-    getItemId(recordId) {
-        return `${this.id}__${recordId}`;
-    }
-
     /**
      * Returns the index of a list item excluding item headers
      * @param {Number} index
@@ -569,6 +564,14 @@ class Base extends Component {
         return headerlessIndex;
     }
 
+    /**
+     * @param {Number|String} recordId
+     * @returns {String}
+     */
+    getItemId(recordId) {
+        return `${this.id}__${recordId}`;
+    }
+
     /**
      * @param {String} vnodeId
      * @returns {String|Number} itemId

package/src/list/plugin/Animate.mjs

@@ -418,13 +418,13 @@ class Animate extends Base {
             easing   = me.transitionEasing,
             id       = me.owner.id;
 
-        deleteRule && CssUtil.deleteRules(`#${id} .neo-list-item`);
+        deleteRule && CssUtil.deleteRules(me.appName, `#${id} .neo-list-item`);
 
-        CssUtil.insertRules([
+        CssUtil.insertRules(me.appName, [
             `#${id} .neo-list-item {`,
                 `transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
             '}'
-        ].join(''));
+        ].join(''))
     }
 }