neo.mjs 3.2.2 → 3.2.5

package/apps/covid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -74,6 +69,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -121,10 +121,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/apps/realworld2/view/article/Gallery.mjs

@@ -17,15 +17,15 @@ class Gallery extends BaseGallery {
          */
         cls: ['rw2-article-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 240,
+        itemHeight: 240,
         /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
          */
-        imageWidth: 320,
+        itemWidth: 320,
         /**
          * Array containing the PreviewComponent references
          * @member {Array} items=[]
@@ -69,8 +69,8 @@ class Gallery extends BaseGallery {
             id      : me.getItemVnodeId(record[me.keyProperty]),
             tabIndex: '-1',
             style: {
-                height: me.imageHeight + 'px',
-                width : me.imageWidth  + 'px'
+                height: me.itemHeight + 'px',
+                width : me.itemWidth  + 'px'
             },
             cn: [{
                 cls: ['item-wrapper'],

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -28,15 +28,10 @@ class CountryGallery extends Gallery {
          */
         country_: null,
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -94,6 +89,11 @@ class CountryGallery extends Gallery {
                 }]
             }]
         },
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -141,10 +141,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -70,10 +70,10 @@ export default env => {
         content.appPath = content.appPath.replace(regexTopLevel, '');
 
         Object.assign(content, {
-            basePath      : basePath,
-            environment   : 'dist/development',
-            mainPath      : '../main.js',
-            workerBasePath: workerBasePath
+            basePath,
+            environment: 'dist/development',
+            mainPath   : '../main.js',
+            workerBasePath
         });
 
         fs.writeFileSync(outputPath, JSON.stringify(content, null, 4));

package/buildScripts/webpack/development/webpack.config.myapps.mjs

@@ -80,10 +80,10 @@ export default env => {
                 content.appPath = content.appPath.replace(regexTopLevel, '');
 
                 Object.assign(content, {
-                    basePath      : basePath,
-                    environment   : 'dist/development',
-                    mainPath      : '../main.js',
-                    workerBasePath: workerBasePath
+                    basePath,
+                    environment: 'dist/development',
+                    mainPath   : '../main.js',
+                    workerBasePath
                 });
 
                 fs.writeFileSync(outputPath, JSON.stringify(content, null, 4));

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -75,9 +75,9 @@ export default env => {
         content.appPath = content.appPath.replace(regexTopLevel, '');
 
         Object.assign(content, {
-            basePath      : basePath,
-            mainPath      : '../main.js',
-            workerBasePath: workerBasePath
+            basePath,
+            mainPath: '../main.js',
+            workerBasePath
         });
 
         fs.writeFileSync(outputPath, JSON.stringify(content));

package/buildScripts/webpack/production/webpack.config.myapps.mjs

@@ -86,9 +86,9 @@ export default env => {
                 content.appPath = content.appPath.replace(regexTopLevel, '');
 
                 Object.assign(content, {
-                    basePath      : basePath,
-                    mainPath      : '../main.js',
-                    workerBasePath: workerBasePath
+                    basePath,
+                    mainPath: '../main.js',
+                    workerBasePath
                 });
 
                 fs.writeFileSync(outputPath, JSON.stringify(content));

package/examples/ConfigurationViewport.mjs

@@ -129,7 +129,7 @@ class ConfigurationViewport extends Viewport {
 
     /**
      * Override this method to create the components to show inside the configuration container
-     * @returns {Neo.component.Base[]|null}
+     * @returns {Object[]|null}
      */
     createConfigurationComponents() {
         return null;

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -27,15 +27,10 @@ class CountryGallery extends Gallery {
          */
         cls: ['neo-country-gallery', 'neo-gallery', 'page', 'view'],
         /**
-         * The image height of the gallery
-         * @member {Number} imageHeight=240
+         * The item height of the gallery
+         * @member {Number} itemHeight=240
          */
-        imageHeight: 280,
-        /**
-         * The image width of the gallery
-         * @member {Number} imageWidth=320
-         */
-        imageWidth: 340,
+        itemHeight: 280,
         /**
          * @member {Object} itemTpl_
          */
@@ -73,6 +68,11 @@ class CountryGallery extends Gallery {
                 ]}
             ]}
         ]},
+        /**
+         * The item width of the gallery
+         * @member {Number} itemWidth=320
+         */
+        itemWidth: 340,
         /**
          * The unique record field containing the id.
          * @member {String} keyProperty='id'
@@ -103,10 +103,10 @@ class CountryGallery extends Gallery {
 
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
-        vdomItem.cn[0].style.height = me.imageHeight + 'px';
+        vdomItem.cn[0].style.height = me.itemHeight + 'px';
 
-        firstChild.style.height = (me.imageHeight - 70) + 'px';
-        firstChild.style.width  = me.imageWidth  + 'px';
+        firstChild.style.height = (me.itemHeight - 70) + 'px';
+        firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = me.getCountryFlagUrl(record.country);
         firstChild.cn[0].cn[1].html = record.country;
@@ -184,7 +184,7 @@ class CountryGallery extends Gallery {
 
         imageName = map[imageName] || imageName;
 
-        return 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/' + imageName + '.png'
+        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/examples/component/coronaGallery/CountryModel.mjs

@@ -1,4 +1,4 @@
-import Model  from '../../../src/data/Model.mjs';
+import Model from '../../../src/data/Model.mjs';
 
 /**
  * @class Neo.examples.component.coronaGallery.CountryModel
@@ -6,8 +6,14 @@ import Model  from '../../../src/data/Model.mjs';
  */
 class CountryModel extends Model {
     static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryModel'
+         * @protected
+         */
         className: 'Neo.examples.component.coronaGallery.CountryModel',
-
+        /**
+         * @member {Object[]} fields
+         */
         fields: [{
             name: 'cases',
             type: 'int'

package/examples/component/coronaGallery/CountryStore.mjs

@@ -7,9 +7,19 @@ import Store        from '../../../src/data/Store.mjs';
  */
 class CountryStore extends Store {
     static getConfig() {return {
-        className  : 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.CountryStore'
+         * @protected
+         */
+        className: 'Neo.examples.component.coronaGallery.CountryStore',
+        /**
+         * @member {String} keyProperty='country'
+         */
         keyProperty: 'country',
-        model      : CountryModel
+        /**
+         * @member {Neo.data.Model} model=CountryModel
+         */
+        model: CountryModel
     }}
 }
 

package/examples/component/coronaGallery/MainContainer.mjs

@@ -363,14 +363,11 @@ class MainContainer extends Viewport {
         }
     }
 
+    /**
+     * @param {Object[]} data
+     */
     addStoreItems(data) {
         this.getStore().data = data;
-
-        setTimeout(() => {
-            Neo.main.DomAccess.focus({
-                id: this.gallery.id
-            });
-        }, 200);
     }
 
     /**

package/examples/component/gallery/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/gallery/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.gallery.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.gallery.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.gallery.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/gallery/MainContainer.mjs

@@ -1,4 +1,5 @@
 import Gallery     from '../../../src/component/Gallery.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -228,6 +229,7 @@ class MainContainer extends Viewport {
         me.gallery = Neo.create({
             module: Gallery,
             id    : 'neo-gallery-1',
+            store : ImageStore,
             ...me.galleryConfig
         });
 

package/examples/component/helix/ImageModel.mjs

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageModel
+ * @extends Neo.data.Model
+ */
+class ImageModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(ImageModel);
+
+export default ImageModel;

package/examples/component/helix/ImageStore.mjs

@@ -0,0 +1,32 @@
+import ImageModel from './ImageModel.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.component.helix.ImageStore
+ * @extends Neo.data.Store
+ */
+class ImageStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.component.helix.ImageModel'
+         * @protected
+         */
+        className: 'Neo.examples.component.helix.ImageStore',
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Neo.data.Model} model=ImageModel
+         */
+        model: ImageModel,
+        /**
+         * @member {String} url='../../resources/examples/data/ai_contacts.json'
+         */
+        url: '../../resources/examples/data/ai_contacts.json'
+    }}
+}
+
+Neo.applyClassConfig(ImageStore);
+
+export default ImageStore;

package/examples/component/helix/MainContainer.mjs

@@ -1,5 +1,6 @@
 import CheckBox    from '../../../src/form/field/CheckBox.mjs';
 import Helix       from '../../../src/component/Helix.mjs';
+import ImageStore  from './ImageStore.mjs';
 import NumberField from '../../../src/form/field/Number.mjs';
 import Panel       from '../../../src/container/Panel.mjs';
 import RangeField  from '../../../src/form/field/Range.mjs';
@@ -312,6 +313,7 @@ class MainContainer extends Viewport {
         me.helix = Neo.create({
             module: Helix,
             id    : 'neo-helix-1',
+            store : ImageStore,
             ...me.helixConfig
         });
 

package/examples/list/animate/List.mjs

@@ -19,10 +19,20 @@ class List extends BaseList {
          * @member {String[]} cls=['neo-examples-list-animate','neo-list-container','neo-list']
          */
         cls: ['neo-examples-list-animate', 'neo-list-container', 'neo-list'],
+        /**
+         * Value in px
+         * @member {Number} itemHeight=200
+         */
+        itemHeight: 200,
         /**
          * @member {String} itemTagName='div'
          */
-        itemTagName: 'div'
+        itemTagName: 'div',
+        /**
+         * Value in px
+         * @member {Number} itemWidth=300
+         */
+        itemWidth: 300
     }}
 
     /**

package/examples/list/animate/MainStore.mjs

@@ -7,11 +7,10 @@ import Store     from '../../../src/data/Store.mjs';
  */
 class MainStore extends Store {
     static getConfig() {return {
-        className  : 'Neo.examples.list.animate.MainStore',
-        autoLoad   : true,
-        keyProperty: 'id',
-        model      : MainModel,
-        url        : '../../resources/examples/data/circleContacts.json',
+        className: 'Neo.examples.list.animate.MainStore',
+        autoLoad : true,
+        model    : MainModel,
+        url      : '../../resources/examples/data/circles/group1.json',
 
         filters: [{
             disabled : true,

package/examples/list/circle/MainContainer.mjs

@@ -0,0 +1,142 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import CircleList            from '../../../src/list/Circle.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MainStore             from './MainStore.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.list.circle.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className           : 'Neo.examples.list.circle.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 130,
+        configItemWidth     : 230,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    /**
+     * @returns {Object[]}
+     */
+    createConfigurationComponents() {
+        let me     = this,
+            sorter = me.exampleComponent.store.sorters[0];
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.disableSelection,
+            labelText: 'disableSelection',
+            listeners: {change: me.onConfigChange.bind(me, 'disableSelection')}
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 5,
+            value    : me.exampleComponent.height,
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : sorter.direction === 'ASC',
+            hideValueLabel: false,
+            labelText     : 'Sort',
+            listeners     : {change: me.changeSorting.bind(me, 'ASC')},
+            name          : 'sort',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'ASC'
+        }, {
+            module        : Radio,
+            checked       : sorter.direction === 'DESC',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.changeSorting.bind(me, 'DESC')},
+            name          : 'sort',
+            style         : {marginTop: '5px'},
+            valueLabelText: 'DESC'
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }, {
+            module   : TextField,
+            flex     : 'none',
+            labelText: 'Group1 Name',
+            listeners: {change: me.onGroupNameChange.bind(me, 0)},
+            name     : 'group1',
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.store.getAt(0).name
+        }, {
+            module   : TextField,
+            flex     : 'none',
+            labelText: 'Group2 Name',
+            listeners: {change: me.onGroupNameChange.bind(me, 1)},
+            name     : 'group2',
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.store.getAt(1).name
+        }];
+    }
+
+    /**
+     * @param {String} direction
+     * @param {Object} data
+     */
+    changeSorting(direction, data) {
+        if (data.value) {
+            this.exampleComponent.store.sorters[0].direction = direction;
+        }
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        let list = Neo.create({
+            module : CircleList,
+            animate: true,
+            height : 1000,
+            store  : MainStore,
+            width  : 1000
+        });
+
+        list.store.on('sort', this.onStoreSort, this);
+
+        return list;
+    }
+
+    /**
+     * @param {Number} index
+     * @param {Object} data
+     */
+    onGroupNameChange(index, data) {
+        this.exampleComponent.items[index].title = data.value;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStoreSort(data) {
+        setTimeout(() => {
+            let me    = this,
+                items = me.exampleComponent.items;
+
+            me.down({name: 'group1'}).value = items[0].title;
+            me.down({name: 'group2'}).value = items[1].title;
+        }, 10);
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;