neo.mjs 4.4.15 → 4.4.17

package/examples/component/wrapper/googleMaps/MainContainer.mjs

@@ -1,7 +1,7 @@
-import Button                  from '../../../../node_modules/neo.mjs/src/button/Base.mjs';
-import NumberField             from '../../../../node_modules/neo.mjs/src/form/field/Number.mjs';
-import Toolbar                 from '../../../../node_modules/neo.mjs/src/toolbar/Base.mjs';
-import Viewport                from '../../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+import Button                  from '../../../../src/button/Base.mjs';
+import NumberField             from '../../../../src/form/field/Number.mjs';
+import Toolbar                 from '../../../../src/toolbar/Base.mjs';
+import Viewport                from '../../../../src/container/Viewport.mjs';
 import MapComponent            from "./MapComponent.mjs";
 import MainContainerController from './MainContainerController.mjs';
 
@@ -19,6 +19,7 @@ class MainContainer extends Viewport {
         items: [{
             module   : MapComponent,
             flex     : 1,
+            listeners: {zoomChange: 'onMapZoomChange'},
             reference: 'google-maps-component'
         }, {
             module: Toolbar,
@@ -32,10 +33,11 @@ class MainContainer extends Viewport {
                 text   : 'Fly to San Fran'
             }, {
                 module : Button,
-                handler: 'onFlyToIslandButtonClick',
+                handler: 'onFlyToIcelandButtonClick',
                 height : 27,
                 iconCls: 'fa-solid fa-plane',
-                text   : 'Fly to Island'
+                style  : {marginLeft: '10px'},
+                text   : 'Fly to Iceland'
             }, {
                 module              : NumberField,
                 clearToOriginalValue: true,

package/examples/component/wrapper/googleMaps/MainContainerController.mjs

@@ -1,4 +1,4 @@
-import ComponentController from '../../../../node_modules/neo.mjs/src/controller/Component.mjs';
+import ComponentController from '../../../../src/controller/Component.mjs';
 
 /**
  * @class Neo.examples.component.wrapper.googleMaps.MainContainerController
@@ -23,14 +23,14 @@ class MainContainerController extends ComponentController {
     /**
      * @param {Object} data
      */
-    onFlyToIslandButtonClick(data) {
+    onFlyToIcelandButtonClick(data) {
         this.getReference('google-maps-component').panTo({ lat: 64.963051,lng: -19.020835})
     }
 
     /**
      * @param {Object} data
      */
-    onMapZoomChance(data) {
+    onMapZoomChange(data) {
         this.getReference('zoom-field').value = data.value;
     }
 

package/examples/component/wrapper/googleMaps/MapComponent.mjs

@@ -1,6 +1,5 @@
-import GoogleMapsComponent      from '../../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';
-import MapComponentController   from "./MapComponentController.mjs";
-import MarkerPopup             from "./MarkerPopup.mjs";
+import GoogleMapsComponent from '../../../../src/component/wrapper/GoogleMaps.mjs';
+import MarkerDialog        from './MarkerDialog.mjs';
 
 /**
  * @class Neo.examples.component.wrapper.googleMaps.MapComponent
@@ -11,8 +10,6 @@ class MapComponent extends GoogleMapsComponent {
         className: 'Neo.examples.component.wrapper.googleMaps.MapComponent',
         ntype: 'worldmap',
 
-        controller: MapComponentController,
-
         // Center the map initially to Island
         center: {
             lat: 64.963051,
@@ -51,18 +48,13 @@ class MapComponent extends GoogleMapsComponent {
 
             me.disabled = true;
 
-            me.dialog = Neo.create(MarkerPopup, {
+            me.dialog = Neo.create(MarkerDialog, {
                 appName             : me.appName,
                 record              : record,
                 domEvent            : data.domEvent,
                 boundaryContainerId : me.id
             });
-        },
-
-        // todo Not working
-        // listeners: {
-        //     zoomChange: 'onMapZoomChance'
-        // }
+        }
     }}
 
     construct(config) {

package/examples/component/wrapper/googleMaps/{MarkerPopup.mjs → MarkerDialog.mjs}

@@ -1,12 +1,12 @@
-import DialogBase from '../../../../node_modules/neo.mjs/src/dialog/Base.mjs';
+import DialogBase from '../../../../src/dialog/Base.mjs';
 
 /**
- * @class Neo.examples.component.wrapper.googleMaps.MarkerPopup
- * @extends Neo.container.Base
+ * @class Neo.examples.component.wrapper.googleMaps.MarkerDialog
+ * @extends Neo.dialog.Base
  */
-class MarkerPopup extends DialogBase {
+class MarkerDialog extends DialogBase {
     static getConfig() {return {
-        className: 'Neo.examples.component.wrapper.googleMaps.MarkerPopup',
+        className: 'Neo.examples.component.wrapper.googleMaps.MarkerDialog',
 
         // turn off dragging and resizing
         draggable           : false,
@@ -108,6 +108,6 @@ class MarkerPopup extends DialogBase {
     }
 }
 
-Neo.applyClassConfig(MarkerPopup);
+Neo.applyClassConfig(MarkerDialog);
 
-export default MarkerPopup;
+export default MarkerDialog;

package/package.json

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

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/container/Base.mjs

@@ -188,7 +188,7 @@ class Base extends Component {
     createItem(item, index) {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index},
-            defaults = me.itemDefaults,
+            defaults = {...me.itemDefaults},
             lazyLoadItem, module;
 
         if (defaults) {

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

@@ -93,15 +93,14 @@ class Picker extends Text {
             inputRect   = rects[1],
             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`,
+            top  : `${inputRect.bottom + 1}px`,
             width: `${width}px`
         });
 
@@ -141,9 +140,10 @@ class Picker extends Text {
      * @param {Function} [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(), 'body']).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });

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;

package/src/toolbar/Base.mjs

@@ -38,7 +38,7 @@ class Base extends Container {
          */
         dock_: 'top',
         /**
-         * @member {Object} itemDefaults={ntype: 'button'}
+         * @member {Object} itemDefaults={ntype:'button'}
          */
         itemDefaults: {
             ntype: 'button'

package/examples/component/wrapper/googleMaps/MapComponentController.mjs

@@ -1,26 +0,0 @@
-import ComponentController from '../../../../node_modules/neo.mjs/src/controller/Component.mjs';
-
-/**
- * @class Neo.examples.component.wrapper.googleMaps.MainContainerController
- * @extends Neo.controller.Component
- */
-class MapComponentController extends ComponentController {
-    static getConfig() {return {
-        /**
-         * @member {String} className='Neo.examples.component.wrapper.googleMaps.MapComponentController'
-         * @protected
-         */
-        className: 'Neo.examples.component.wrapper.googleMaps.MapComponentController'
-    }}
-
-    /**
-     * @param {Object} data
-     */
-    onMapZoomChance(data) {
-        this.getReference('zoom-field').value = data.value;
-    }
-}
-
-Neo.applyClassConfig(MapComponentController);
-
-export default MapComponentController;