neo.mjs 4.6.3 → 4.6.5

package/src/{dialog → component}/Toast.mjs

@@ -3,7 +3,7 @@ import ToastManager from '../manager/Toast.mjs';
 import NeoArray     from "../util/Array.mjs";
 
 /**
- * @class Neo.dialog.Toast
+ * @class Neo.component.Toast
  * @extends Neo.component.Base
  *
  * @example
@@ -16,7 +16,7 @@ import NeoArray     from "../util/Array.mjs";
             iconCls         : 'fa fa-bell', // null
             maxWidth        : 300,          // 250
             position        : 'br',         // 'tr'
-            slideDirection  : 'right',      // 'down'
+            slideDirection  : 'right',      // 'right'
             title           : 'Alarm Clock' // null
         })
  */
@@ -28,11 +28,10 @@ class Toast extends Base {
      */
     running = false
     /**
-     * Used by the ToastManager
-     * @member {String|null} toastManagerId=null
-     * @private
+     * Timeout in ms after which the toast is removed
+     * @member {Number} timeout=3000
      */
-    toastManagerId = null
+    timeout = 3000
 
     static getStaticConfig() {return {
         /**
@@ -52,24 +51,15 @@ class Toast extends Base {
 
     static getConfig() {return {
         /**
-         * @member {String} className='Neo.dialog.Toast'
+         * @member {String} className='Neo.component.Toast'
          * @protected
          */
-        className: 'Neo.dialog.Toast',
+        className: 'Neo.component.Toast',
         /**
          * @member {String} ntype='toast'
          * @protected
          */
         ntype: 'toast',
-
-        /**
-         * @member {Boolean} autoMount=true
-         */
-        autoMount: true,
-        /**
-         * @member {Boolean} autoRender=true
-         */
-        autoRender: true,
         /**
          * @member {String[]} baseCls=['neo-toast']
          * @protected
@@ -110,14 +100,9 @@ class Toast extends Base {
         /**
          * Describes which direction from which side the toasts slides-in
          * This creates a cls `neo-toast-slide-${direction}-in`
-         * @member {'down'|'up'|'left'|'right'} slideDirection_=null
-         */
-        slideDirection_: 'down',
-        /**
-         * Timeout in ms after which the toast is removed
-         * @member {Number} timeout_=3000
+         * @member {'down'|'up'|'left'|'right'} slideDirection_='right'
          */
-        timeout_: 3000,
+        slideDirection_: 'right',
         /**
          * Adds a title to the toast
          * @member {Number} title_=null
@@ -126,7 +111,8 @@ class Toast extends Base {
         /**
          * @member {String|null} title=null
          */
-        vdom: {cn: [{
+        vdom:
+        {cn: [{
             cls: 'neo-toast-inner', cn: [
                 {cls: ['neo-toast-icon'], removeDom: true},
                 {cls: 'neo-toast-text', cn: [
@@ -138,6 +124,9 @@ class Toast extends Base {
         }]}
     }}
 
+    /**
+     * @param {Object} config
+     */
     construct(config) {
         super.construct(config);
 
@@ -145,8 +134,10 @@ class Toast extends Base {
 
         // click listener for close
         me.addDomListeners([
-            {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
-        ])
+            {click: {fn: me.destroy, delegate: '.neo-toast-close', scope: me}}
+        ]);
+
+        ToastManager.register(me);
     }
 
     /**
@@ -164,41 +155,26 @@ class Toast extends Base {
      * @param {String|null} oldValue
      */
     afterSetIconCls(value, oldValue) {
-        let vdom = this.getVdomInner().cn[0],
-            cls = vdom.cls,
-            clsFn = !!value ? 'add' : 'remove';
+        let vdom  = this.getVdomInner().cn[0],
+            cls   = vdom.cls;
 
         vdom.removeDom = Neo.isEmpty(value);
-        NeoArray[clsFn](cls, value);
+        NeoArray[value ? 'add' : 'remove'](cls, value);
     }
 
     /**
      * Using the afterSetMsg to trigger the setup of the dom
      * A new container is added as an item.
      * We cannot use the vdom here.
-     *
      * @param {String|null} value
      * @param {String|null} oldValue
      */
     afterSetMsg(value, oldValue) {
-        let vdom     = this.getTextRootVdom().cn[1];
+        let vdom = this.getTextRootVdom().cn[1];
 
         vdom.innerHTML = value;
     }
 
-    /**
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     */
-    afterSetTitle(value, oldValue) {
-        let vdom = this.getTextRootVdom().cn[0],
-            clsFn = !!value ? 'add' : 'remove';
-
-        vdom.removeDom = Neo.isEmpty(value);
-        vdom.innerHTML = value;
-        NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
-    }
-
     /**
      * Apply a cls, based on the position
      * @param {String} value
@@ -218,17 +194,34 @@ class Toast extends Base {
     }
 
     /**
-     * Close the toast after the timeout if not closable
-     * @param {Number} value
-     * @param {Number} oldValue
+     * Close the toast after the mounted if not closable
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
      */
-    async afterSetTimeout(value, oldValue) {
-        if (!this.closable && value) {
-            await Neo.timeout(value);
-            this.unregister();
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this;
+
+        if (!me.closable && value) {
+            setTimeout(() => {
+                this.destroy(true);
+            }, me.timeout)
         }
     }
 
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetTitle(value, oldValue) {
+        let vdom = this.getTextRootVdom().cn[0];
+
+        vdom.removeDom = Neo.isEmpty(value);
+        vdom.innerHTML = value;
+        NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title');
+    }
+
     /**
      * Triggered before the position config gets changed
      * @param {String} value
@@ -250,32 +243,36 @@ class Toast extends Base {
     }
 
     /**
-     * This is a dialog, so we have to add an item to be able to
-     * @returns {vdom}
+     *
      */
-    getVdomInner() {
-        return this.vdom.cn[0];
+    async destroy(...args) {
+        let me = this;
+
+        me.addDomListeners({
+            animationend: function () {
+                ToastManager.removeToast(me.id);
+                ToastManager.unregister(me);
+                me.destroy(true);
+            }
+        });
+
+        me.addCls('neo-toast-fade-out')
     }
 
+    /**
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
+     */
     getTextRootVdom() {
         return this.getVdomInner().cn[1];
     }
 
     /**
-     * After the close-click or timeout, we unregister the toast
-     * from the ToastManager
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
      */
-    unregister() {
-        let me = this;
-
-        me.addDomListeners({
-            animationend: function () {
-                ToastManager.removeToast(me.toastManagerId);
-                me.destroy(true);
-            }
-        })
-
-        me.addCls('neo-toast-fade-out');
+    getVdomInner() {
+        return this.vdom.cn[0];
     }
 }
 

package/src/form/field/Select.mjs

@@ -102,9 +102,9 @@ class Select extends Picker {
          * Showing the list via the down trigger can either show all list items or only show items which
          * match the filter string inside the input field.
          * Valid values: all, filtered
-         * @member {String} triggerAction_='filtered'
+         * @member {String} triggerAction_='all'
          */
-        triggerAction_: 'filtered',
+        triggerAction_: 'all',
         /**
          * Display the first matching result while typing
          * @member {Boolean} typeAhead_=true
@@ -150,7 +150,7 @@ class Select extends Picker {
             scope             : me
         });
 
-        me.typeAhead && me.updateTypeAhead();
+        me.typeAhead && me.updateTypeAhead()
     }
 
     /**
@@ -173,7 +173,7 @@ class Select extends Picker {
                 value             : value.get(me.value)?.[me.displayField] || me.value
             });
 
-            value.filters = filters;
+            value.filters = filters
         }
     }
 
@@ -184,14 +184,14 @@ class Select extends Picker {
      * @protected
      */
     afterSetTypeAhead(value, oldValue) {
-        this.rendered && this.updateTypeAhead();
+        this.rendered && this.updateTypeAhead()
     }
 
     /**
      * Triggered after the value config got changed
      * @param {Number|String|null} value
      * @param {Number|String|null} oldValue
-     * @param {Boolean} [preventFilter=false]
+     * @param {Boolean} preventFilter=false
      * @protected
      */
     afterSetValue(value, oldValue, preventFilter=false) {
@@ -201,7 +201,7 @@ class Select extends Picker {
         !preventFilter && this.updateValue(true);
         list && (list.silentVdomUpdate = false);
 
-        super.afterSetValue(value, oldValue);
+        super.afterSetValue(value, oldValue)
     }
 
     /**
@@ -213,7 +213,7 @@ class Select extends Picker {
      */
     beforeSetListConfig(value, oldValue) {
         value && this.parseItemConfigs(value);
-        return value;
+        return value
     }
 
     /**
@@ -237,7 +237,7 @@ class Select extends Picker {
             }
         }
 
-        return ClassSystemUtil.beforeSetInstance(value, Store);
+        return ClassSystemUtil.beforeSetInstance(value, Store)
     }
 
     /**
@@ -247,7 +247,7 @@ class Select extends Picker {
      * @protected
      */
     beforeSetTriggerAction(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'triggerAction');
+        return this.beforeSetEnumValue(value, oldValue, 'triggerAction')
     }
 
     /**
@@ -277,14 +277,14 @@ class Select extends Picker {
 
         me.record = store.find(displayField, value)[0] || null;
 
-        return value;
+        return value
     }
 
     /**
      * @returns {Neo.list.Base}
      */
     createPickerComponent() {
-        return this.list;
+        return this.list
     }
 
     /**
@@ -307,7 +307,7 @@ class Select extends Picker {
                 oldValue,
                 record,
                 value
-            });
+            })
         }
     }
 
@@ -322,18 +322,18 @@ class Select extends Picker {
         me.value = lastManualInput;
 
         Neo.main.DomAccess.focus({
-            id: me.getInputElId()
+            appName: me.appName,
+            id     : me.getInputElId()
         }).then(() => {
-            callback?.apply(me);
-        });
+            callback?.apply(me)
+        })
     }
 
     /**
      * @returns {Object}
      */
     getInputHintEl() {
-        let el = VDomUtil.findVdomChild(this.vdom, this.getInputHintId());
-        return el?.vdom;
+        return VDomUtil.findVdomChild(this.vdom, this.getInputHintId())?.vdom
     }
 
     /**
@@ -351,7 +351,7 @@ class Select extends Picker {
         let list      = this.list,
             recordKey = list.selectionModel.getSelection()[0];
 
-        return recordKey && this.store.get(list.getItemRecordId(recordKey)) || null;
+        return recordKey && this.store.get(list.getItemRecordId(recordKey)) || null
     }
 
     /**
@@ -360,7 +360,7 @@ class Select extends Picker {
     getSubmitValue() {
         let me = this;
 
-        return me.record?.[me.valueField] || me.value;
+        return me.record?.[me.valueField] || me.value
     }
 
     /**
@@ -368,7 +368,7 @@ class Select extends Picker {
      * @protected
      */
     onContainerKeyDownEnter(data) {
-        this.hidePicker();
+        this.hidePicker()
     }
 
     /**
@@ -376,7 +376,7 @@ class Select extends Picker {
      * @protected
      */
     onContainerKeyDownEscape(data) {
-        this.focusInputEl(this.hidePicker);
+        this.focusInputEl(this.hidePicker)
     }
 
     /**
@@ -391,7 +391,7 @@ class Select extends Picker {
             me.value = me.hintRecordId;
         }
 
-        super.onFocusLeave(data);
+        super.onFocusLeave(data)
     }
 
     /**
@@ -400,7 +400,7 @@ class Select extends Picker {
      */
     onInputValueChange(data) {
         super.onInputValueChange(data);
-        this.lastManualInput = data.value;
+        this.lastManualInput = data.value
     }
 
     /**
@@ -408,7 +408,7 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownDown(data) {
-        this.onKeyDownEnter(data);
+        this.onKeyDownEnter(data)
     }
 
     /**
@@ -420,9 +420,9 @@ class Select extends Picker {
 
         if (me.pickerIsMounted) {
             me.selectListItem();
-            super.onKeyDownEnter(data);
+            super.onKeyDownEnter(data)
         } else {
-            super.onKeyDownEnter(data, me.selectListItem);
+            super.onKeyDownEnter(data, me.selectListItem)
         }
     }
 
@@ -441,7 +441,7 @@ class Select extends Picker {
             me.record = record;
             me._value = record[me.displayField];
 
-            me.afterSetValue(me._value, oldValue);
+            me.afterSetValue(me._value, oldValue)
         }
     }
 
@@ -454,9 +454,9 @@ class Select extends Picker {
 
         if (me.pickerIsMounted) {
             me.selectLastListItem();
-            super.onKeyDownEnter(data);
+            super.onKeyDownEnter(data)
         } else {
-            super.onKeyDownEnter(data, me.selectLastListItem);
+            super.onKeyDownEnter(data, me.selectLastListItem)
         }
     }
 
@@ -465,7 +465,32 @@ class Select extends Picker {
      */
     onListCreateItems() {
         let me = this;
-        me.typeAhead && me.picker?.mounted && me.updateTypeAheadValue();
+        me.typeAhead && me.picker?.mounted && me.updateTypeAheadValue()
+    }
+
+    /**
+     * @param {Object} record
+     * @protected
+     */
+    onListItemChange(record) {
+        let me           = this,
+            displayField = me.displayField,
+            oldValue     = me.value,
+            value        = record[displayField];
+
+        if (me.value !== value) {
+            me.hintRecordId = null;
+            me.record       = record;
+            me._value       = value;
+            me.getInputHintEl().value = null;
+
+            me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
+
+            me.fire('select', {
+                record,
+                value: record[displayField]
+            })
+        }
     }
 
     /**
@@ -474,7 +499,15 @@ class Select extends Picker {
      */
     onListItemClick(record) {
         this.onListItemChange(record);
-        this.hidePicker();
+        this.hidePicker()
+    }
+
+    /**
+     * @param {Object} record
+     * @protected
+     */
+    onListItemNavigate(record) {
+        this.onListItemChange(record)
     }
 
     /**
@@ -493,7 +526,7 @@ class Select extends Picker {
             }
         }
 
-        super.onPickerTriggerClick();
+        super.onPickerTriggerClick()
     }
 
     /**
@@ -501,7 +534,7 @@ class Select extends Picker {
      */
     onSelectPostLastItem() {
         this.record = null;
-        this.focusInputEl();
+        this.focusInputEl()
     }
 
     /**
@@ -509,55 +542,21 @@ class Select extends Picker {
      */
     onSelectPreFirstItem() {
         this.record = null;
-        this.focusInputEl();
-    }
-
-
-    /**
-     * @param {Object} record
-     * @protected
-     */
-    onListItemChange(record) {
-        let me           = this,
-            displayField = me.displayField,
-            oldValue     = me.value,
-            value        = record[displayField];
-
-        if (me.value !== value) {
-            me.hintRecordId = null;
-            me.record       = record;
-            me._value       = value;
-            me.getInputHintEl().value = null;
-
-            me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
-
-            me.fire('select', {
-                record,
-                value: record[displayField]
-            });
-        }
-    }
-
-    /**
-     * @param {Object} record
-     * @protected
-     */
-    onListItemNavigate(record) {
-        this.onListItemChange(record);
+        this.focusInputEl()
     }
 
     /**
      *
      */
     selectFirstListItem() {
-        this.selectListItem(0);
+        this.selectListItem(0)
     }
 
     /**
      *
      */
     selectLastListItem() {
-        this.selectListItem(this.store.getCount() -1);
+        this.selectListItem(this.store.getCount() -1)
     }
 
     /**
@@ -576,7 +575,7 @@ class Select extends Picker {
         }
 
         me.list.selectItem(index);
-        me.onListItemNavigate(me.store.getAt(index));
+        me.onListItemNavigate(me.store.getAt(index))
     }
 
     /**
@@ -605,7 +604,7 @@ class Select extends Picker {
             VDomUtil.replaceVdomChild(vdom, inputEl.parentNode.id, inputEl.vdom);
         }
 
-        me[silent ? '_vdom' : 'vdom'] = vdom;
+        !silent && me.update()
     }
 
     /**
@@ -619,7 +618,6 @@ class Select extends Picker {
             store       = me.store,
             i           = 0,
             len         = store.getCount(),
-            vdom        = me.vdom,
             inputHintEl = me.getInputHintEl(),
             storeValue;
 
@@ -628,7 +626,6 @@ class Select extends Picker {
                 storeValue = store.items[i][me.displayField];
 
                 if (!Neo.isString(storeValue)) {
-                    console.log(store);
                     return;
                 }
 
@@ -640,7 +637,7 @@ class Select extends Picker {
 
             if (hasMatch && inputHintEl) {
                 inputHintEl.value = value + storeValue.substr(value.length);
-                me.hintRecordId = store.items[i][store.keyProperty || store.model.keyProperty];
+                me.hintRecordId = store.items[i][store.keyProperty || store.model.keyProperty]
             }
         }
 
@@ -649,11 +646,11 @@ class Select extends Picker {
             me.hintRecordId = null;
         }
 
-        me[silent ? '_vdom' : 'vdom'] = vdom;
+        !silent && me.update()
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      * @protected
      */
     updateValue(silent=false) {
@@ -661,19 +658,18 @@ class Select extends Picker {
             displayField = me.displayField,
             store        = me.store,
             value        = me._value,
-            record       = me.record,
             filter;
 
         if (store && !Neo.isEmpty(store.filters)) {
             filter = store.getFilter(displayField);
 
             if (filter) {
-                filter.value = record?.[displayField] || value;
+                filter.value = me.record?.[displayField] || value;
             }
         }
 
         if (me.typeAhead && !me.picker?.containsFocus) {
-            me.updateTypeAheadValue(value, silent);
+            me.updateTypeAheadValue(value, silent)
         }
     }
 }