neo.mjs 4.4.16 → 4.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.16",
+    "version": "4.4.18",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -1,13 +1,15 @@
 .neo-pickerfield {
-    .neo-picker-container {
-        background-color: v(pickerfield-container-background-color);
-        border          : v(pickerfield-container-border);
-        box-shadow      : v(pickerfield-container-box-shadow);
-        position        : fixed;
-        z-index         : 20;
 
-        &:focus {
-            outline: none;
-        }
+}
+
+.neo-picker-container {
+    background-color: v(pickerfield-container-background-color);
+    border          : v(pickerfield-container-border);
+    box-shadow      : v(pickerfield-container-box-shadow);
+    position        : absolute;
+    z-index         : 200;
+
+    &:focus {
+        outline: none;
     }
-}
+}

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

@@ -24,6 +24,7 @@
     }
 
     .neo-list {
+        overflow-x: hidden;
         overflow-y: auto;
         text-align: left;
 

package/resources/scss/theme-dark/form/field/Select.scss

@@ -4,7 +4,7 @@ $neoMap: map-merge($neoMap, (
     'selectfield-list-search-background-color'  : inherit,
     'selectfield-list-search-color'             : #fff,
     'selectfield-list-search-color-selected'    : #000,
-    'selectfield-picker-container-border'       : none,
+    'selectfield-picker-container-border'       : 1px solid #bbb,
     'selectfield-picker-container-border-radius': 0
 ));
 
@@ -18,4 +18,4 @@ $neoMap: map-merge($neoMap, (
         --selectfield-picker-container-border       : #{neo(selectfield-picker-container-border)};
         --selectfield-picker-container-border-radius: #{neo(selectfield-picker-container-border-radius)};
     }
-}
+}

package/src/component/Base.mjs

@@ -265,6 +265,12 @@ class Base extends CoreBase {
          * @member {Array|Object} tooltips_=null
          */
         tooltips_: null,
+        /**
+         * Add 'primary' and other attributes to make it
+         * an outstanding design
+         * @member {String|null} ui_=null
+         */
+        ui_: null,
         /**
          * The component vnode tree. Available after the component got rendered.
          * @member {Object} vnode_=null
@@ -648,6 +654,26 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * For styling purposes only.
+     * To define button styles or component styles,
+     * this will add a css class: neo-ntype-value
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetUi(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        NeoArray.remove(cls, `neo-${me.ntype}-${oldValue}`);
+
+        if (value && value !== '') {
+            NeoArray.add(cls, `neo-${me.ntype}-${value}`);
+        }
+
+        me.cls = cls;
+    }
+
     /**
      * Triggered after the vdom config got changed
      * @param {Object} value

package/src/data/RecordFactory.mjs

@@ -235,6 +235,14 @@ class RecordFactory extends Base {
      * @returns {*}
      */
     parseRecordValue(record, field, value, recordConfig=null) {
+        if (field.calculate) {
+            return field.calculate(record, field, recordConfig);
+        }
+
+        if (field.convert) {
+            value = field.convert(value);
+        }
+
         let fieldName = field.name,
             mapping   = field.mapping,
             maxLength = field.maxLength,

package/src/data/Store.mjs

@@ -95,6 +95,12 @@ class Store extends Base {
          * @member {Boolean} remoteSort=false
          */
         remoteSort: false,
+        /**
+         * Add a path to the root of your data.
+         * If the responseRoot is 'data' this is optional.
+         * @member {String} responseRoot='data'
+         */
+        responseRoot: 'data',
         /**
          * @member {Number} totalCount=0
          */
@@ -340,9 +346,9 @@ class Store extends Base {
             }).catch(err => {
                 console.log('Error for Neo.Xhr.request', err, me.id);
             }).then(data => {
-                me.data = Array.isArray(data.json) ? data.json : data.json.data;
+                me.data = Neo.ns(me.responseRoot, false, data.json) || data.json;
                 // we do not need to fire a load event => onCollectionMutate()
-            });
+            })
         }
     }
 

package/src/dialog/Toast.mjs

@@ -0,0 +1,28 @@
+import Base         from './Base.mjs';
+import ToastManager from '../manager/ToastDialog.mjs';
+
+/**
+ * @class Neo.dialog.Toast
+ * @extends Neo.dialog.Base
+ */
+class Toast extends Base {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.dialog.Toast'
+         * @protected
+         */
+        className: 'Neo.dialog.Toast'
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        ToastManager.register(this);
+    }
+}
+
+Neo.applyClassConfig(Toast);
+
+export default Toast;

package/src/form/field/Picker.mjs

@@ -89,19 +89,19 @@ class Picker extends Text {
     applyClientRects(silent) {
         let me          = this,
             rects       = me.clientRects,
-            bodyRect    = rects[2],
             inputRect   = rects[1],
+            parentRect  = rects[2],
             triggerRect = rects[0],
             vdom        = me.picker.vdom,
-            width       = me.matchPickerWidth ? (inputRect.width - 1) : me.pickerWidth;
+            width       = me.matchPickerWidth ? inputRect.width : me.pickerWidth;
 
         me.pickerWidth = width;
 
         vdom.style = vdom.style || {};
 
         Object.assign(vdom.style, {
-            left : `${triggerRect.left + triggerRect.width - width}px`,
-            top  : `${triggerRect.top + triggerRect.height + 1}px`,
+            left : `${inputRect.left}px`,
+            top  : `${inputRect.bottom + 1}px`,
             width: `${width}px`
         });
 
@@ -124,7 +124,25 @@ class Picker extends Text {
             maxHeight: me.pickerMaxHeight,
             vdom     : {cn: [], tabIndex: -1},
             width    : me.pickerWidth,
-            ...me.pickerConfig
+            ...me.pickerConfig,
+
+            // scoped to the field instance
+            onFocusLeave: data => {
+                let insideField = false,
+                    item;
+
+                for (item of data.oldPath) {
+                    if (item.id === me.id) {
+                        insideField = true;
+                        break;
+                    }
+                }
+
+                if (!insideField) {
+                    me.hidePicker();
+                    super.onFocusLeave(data);
+                }
+            }
         });
     }
 
@@ -138,12 +156,13 @@ class Picker extends Text {
 
     /**
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      */
     getClientRectsThenShow(callback, callbackScope) {
-        let me = this;
+        let me        = this,
+            triggerId = me.getTriggerId('picker');
 
-        me.getDomRect([me.id, me.getInputWrapperId(), 'body']).then(data => {
+        me.getDomRect([triggerId, me.getInputWrapperId(), me.parentId]).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });
@@ -171,24 +190,18 @@ class Picker extends Text {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     *
      */
-    hidePicker(silent=false) {
+    async hidePicker() {
         let me     = this,
-            picker = me.getPicker(),
-            vdom   = me.vdom;
+            picker = me.getPicker();
 
-        me.pickerIsMounted && VDomUtil.removeVdomChild(vdom, me.getPickerId());
+        // avoid breaking selection model cls updates
+        await Neo.timeout(30);
 
-        me.pickerIsMounted = false;
+        me.pickerIsMounted && picker.unmount();
 
-        if (silent) {
-            picker.mounted = false;
-        } else {
-            me.promiseVdomUpdate().then(data => {
-                picker.mounted = me.pickerIsMounted;
-            });
-        }
+        me.pickerIsMounted = false;
     }
 
     /**
@@ -196,22 +209,27 @@ class Picker extends Text {
      * @protected
      */
     onFocusLeave(data) {
-        let me = this;
+        let me           = this,
+            insidePicker = false,
+            item;
+
+        for (item of data.oldPath) {
+            if (item.id === me.getPickerId()) {
+                insidePicker = true;
+                break;
+            }
+        }
 
-        // inline will trigger an vdom update, so hide picker should be silent
-        if (me.labelPosition === 'inline' && (me.value === '' || me.value === null)) {
-            me.hidePicker(true);
-        } else {
+        if (!insidePicker) {
             me.hidePicker();
+            super.onFocusLeave(data);
         }
-
-        super.onFocusLeave(data);
     }
 
     /**
      * @param {Object} data
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      * @protected
      */
     onKeyDownEnter(data, callback, callbackScope) {
@@ -242,23 +260,23 @@ class Picker extends Text {
 
     /**
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      */
     showPicker(callback, callbackScope) {
         let me     = this,
             picker = me.getPicker(),
-            vdom   = me.vdom;
+            listenerId;
 
         me.applyClientRects(true);
-        vdom.cn.push(picker.vdom);
 
-        me.promiseVdomUpdate().then(data => {
-            me.pickerIsMounted = true;
-
-            picker.mounted = me.pickerIsMounted;
+        listenerId = picker.on('mounted', () => {
+            picker.un('mounted', listenerId);
 
+            me.pickerIsMounted = true;
             callback?.apply(callbackScope || me);
         });
+
+        picker.render(true);
     }
 }
 

package/src/form/field/Select.mjs

@@ -132,7 +132,6 @@ class Select extends Picker {
             displayField  : me.displayField,
             parentId      : me.id,
             selectionModel: {stayInList: false},
-            silentSelect  : true,
             store         : me.store,
             ...me.listConfig
         });

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

@@ -121,7 +121,7 @@ class Base extends Component {
     afterSetHidden(value, oldValue) {
         let style = this.style;
 
-        style.display = value ? 'none' : 'inline-block';
+        style.display = value ? 'none' : 'inherit';
         this.style = style;
     }
 

package/src/manager/ToastDialog.mjs

@@ -0,0 +1,29 @@
+import Base from '../manager/Base.mjs';
+
+/**
+ * @class Neo.manager.ToastDialog
+ * @extends Neo.manager.Base
+ * @singleton
+ */
+class ToastDialog extends Base {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.manager.ToastDialog'
+         * @protected
+         */
+        className: 'Neo.manager.ToastDialog',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }}
+}
+
+Neo.applyClassConfig(ToastDialog);
+
+let instance = Neo.create(ToastDialog);
+
+Neo.applyToGlobalNs(instance);
+
+export default instance;