neo.mjs 4.1.0 → 4.1.1

package/examples/grid/covid/GridContainer.mjs

@@ -0,0 +1,113 @@
+import BaseGridContainer       from '../../../src/grid/Container.mjs';
+import GridContainerController from './GridContainerController.mjs';
+import Store                   from './Store.mjs';
+import Util                    from './Util.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.GridContainer
+ * @extends Neo.grid.Container
+ */
+class GridContainer extends BaseGridContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.GridContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.GridContainer',
+        /**
+         * @member {String[]} cls=['covid-country-grid', 'neo-grid-container']
+         */
+        cls: ['covid-country-grid', 'neo-grid-container'],
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults
+         */
+        columnDefaults: {
+            align               : 'right',
+            defaultSortDirection: 'DESC',
+            renderer            : Util.formatNumber,
+            width               : 100
+        },
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            cls     : ['neo-index-column', 'neo-grid-header-button'],
+            dock    : 'left',
+            field   : 'index',
+            minWidth: 40,
+            text    : '#',
+            renderer: Util.indexRenderer,
+            width   : 40
+        }, {
+            align               : 'left',
+            defaultSortDirection: 'ASC',
+            dock                : 'left',
+            field               : 'country',
+            text                : 'Country',
+            width               : 200,
+
+            renderer: data => {
+                return {
+                    cls : ['neo-country-column', 'neo-grid-cell'],
+                    html: [
+                        '<div style="display: flex; align-items: center">',
+                            '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
+                        '</div>'
+                    ].join('')
+                };
+            }
+        }, {
+            field: 'cases',
+            text : 'Cases'
+        }, {
+            field: 'casesPerOneMillion',
+            text : 'Cases / 1M'
+        }, {
+            field   : 'infected',
+            text    : 'Infected',
+            renderer: data => Util.formatInfected(data)
+        }, {
+            field   : 'active',
+            text    : 'Active',
+            renderer: data => Util.formatNumber(data, '#64B5F6')
+        }, {
+            field   : 'recovered',
+            text    : 'Recovered',
+            renderer: data => Util.formatNumber(data, '#28ca68')
+        }, {
+            field   : 'critical',
+            text    : 'Critical',
+            renderer: data => Util.formatNumber(data, 'orange')
+        }, {
+            field   : 'deaths',
+            text    : 'Deaths',
+            renderer: data => Util.formatNumber(data, '#fb6767')
+        }, {
+            field: 'todayCases',
+            text : 'Cases today'
+        }, {
+            field   : 'todayDeaths',
+            text    : 'Deaths today',
+            renderer: data => Util.formatNumber(data, '#fb6767')
+        }, {
+            field: 'tests',
+            text : 'Tests'
+        }, {
+            field: 'testsPerOneMillion',
+            text : 'Tests / 1M'
+        }],
+        /**
+         * @member {Neo.controller.Component} controller=GridContainerController
+         */
+        controller: GridContainerController,
+        /**
+         * @member {Object[]} store=Store
+         */
+        store: Store
+    }}
+}
+
+Neo.applyClassConfig(GridContainer);
+
+export default GridContainer;

package/examples/grid/covid/GridContainerController.mjs

@@ -0,0 +1,62 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.GridContainerController
+ * @extends Neo.controller.Component
+ */
+class GridContainerController extends Controller {
+    /**
+     * @member {String} apiUrl='https://disease.sh/v3/covid-19/countries'
+     */
+    apiUrl = 'https://disease.sh/v3/covid-19/countries'
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.GridContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.GridContainerController'
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.loadData();
+    }
+
+    /**
+     * @param {Object[]} data
+     */
+    addStoreItems(data) {
+        let store = this.component.store;
+
+        data.forEach(item => {
+            if (item.country.includes('"')) {
+                item.country = item.country.replace('"', "\'");
+            }
+
+            item.casesPerOneMillion = item.casesPerOneMillion > item.cases ? 'N/A' : item.casesPerOneMillion || 0;
+            item.infected           = item.casesPerOneMillion;
+        });
+
+        store.data = data;
+    }
+
+    /**
+     *
+     */
+    loadData() {
+        let me = this;
+
+        fetch(me.apiUrl)
+            .then(response => response.json())
+            .catch(err => console.log('Can’t access ' + me.apiUrl, err))
+            .then(data => me.addStoreItems(data));
+    }
+}
+
+Neo.applyClassConfig(GridContainerController);
+
+export default GridContainerController;

package/examples/grid/covid/MainContainer.mjs

@@ -0,0 +1,36 @@
+import GridContainer from './GridContainer.mjs';
+import Viewport      from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Object[]} items=[GridContainer]
+         */
+        items: [GridContainer],
+        /**
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'},
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'}
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/grid/covid/Model.mjs

@@ -0,0 +1,65 @@
+import BaseModel from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.Model
+ * @extends Neo.data.Model
+ */
+class Model extends BaseModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.Model'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.Model',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'active',
+            type: 'Integer'
+        }, {
+            name: 'cases',
+            type: 'Integer'
+        }, {
+            name: 'casesPerOneMillion',
+            type: 'Integer'
+        }, {
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'countryInfo',
+            type: 'Object' // _id, flag, iso2, iso3, lat, long
+        }, {
+            name: 'critical',
+            type: 'Integer'
+        }, {
+            name: 'deaths',
+            type: 'Integer'
+        }, {
+            name: 'index',
+            type: 'Integer'
+        }, {
+            name: 'infected', // renderer parses to % of population
+            type: 'Integer'
+        }, {
+            name: 'recovered',
+            type: 'Integer'
+        }, {
+            name: 'tests',
+            type: 'Integer'
+        }, {
+            name: 'testsPerOneMillion',
+            type: 'Integer'
+        }, {
+            name: 'todayCases',
+            type: 'Integer'
+        }, {
+            name: 'todayDeaths',
+            type: 'Integer'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Model);
+
+export default Model;

package/examples/grid/covid/Store.mjs

@@ -0,0 +1,35 @@
+import BaseStore from '../../../src/data/Store.mjs';
+import Model     from './Model.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.Store
+ * @extends Neo.data.Store
+ */
+class Store extends BaseStore {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.Store'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.Store',
+        /**
+         * @member {String} keyProperty='country'
+         */
+        keyProperty: 'country',
+        /**
+         * @member {Neo.data.Model} model=Model
+         */
+        model: Model,
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [{
+            property : 'active',
+            direction: 'DESC'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Store);
+
+export default Store;

package/examples/grid/covid/Util.mjs

@@ -0,0 +1,165 @@
+import Base from '../../../src/core/Base.mjs';
+
+/**
+ * Static utility class
+ * @class Neo.examples.table.covid.Util
+ * @extends Neo.core.Base
+ */
+class Util extends Base {
+    static getStaticConfig() {return {
+        /**
+         * A regex to replace blank chars
+         * @member {RegExp} flagRegEx=/ /gi
+         * @protected
+         * @static
+         */
+        flagRegEx: / /gi,
+        /**
+         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+         * Change this config to enforce a county specific formatting (e.g. 'de-DE')
+         * @member {String} locales='default'
+         * @protected
+         * @static
+         */
+        locales: 'default'
+    }}
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.Util'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.Util'
+    }}
+
+    /**
+     * Used for the casesPerOneMillion column to show % of population
+     * @param {Object} data
+     * @param {Number} data.value
+     * @returns {String}
+     */
+    static formatInfected(data) {
+        let value = data.value;
+
+        if (!Neo.isNumber(value)) {
+            return value || 'N/A';
+        }
+
+        value = Math.round(value / 100);
+        value /= 100;
+
+        value = value.toFixed(2) + ' %';
+
+        return value.toLocaleString(Util.locales);
+    }
+
+    /**
+     * This method will get used as a grid renderer, so the 2nd param is an overload (would be {Object} record)
+     * @param {Object} data
+     * @param {Number} data.value
+     * @param {String} [color]
+     * @returns {String}
+     */
+    static formatNumber(data, color) {
+        let value = data.value;
+
+        if (!Neo.isNumber(value)) {
+            return value || 'N/A';
+        }
+
+        value = value.toLocaleString(Util.locales);
+
+        return typeof color !== 'string' ? value : `<span style="color:${color};">${value}</span>`;
+    }
+
+    /**
+     * @param {String} name
+     * @returns {String} url
+     */
+    static getCountryFlagUrl(name) {
+        const map = {
+            'bosnia'                               : 'bosnia-and-herzegovina',
+            'cabo-verde'                           : 'cape-verde',
+            'car'                                  : 'central-african-republic',
+            'caribbean-netherlands'                : 'netherlands',
+            'channel-islands'                      : 'jersey',
+            'côte-d\'ivoire'                       : 'ivory-coast',
+            'congo'                                : 'republic-of-the-congo',
+            'congo,-the-democratic-republic-of-the': 'democratic-republic-of-congo',
+            'curaçao'                              : 'curacao',
+            'czechia'                              : 'czech-republic',
+            'diamond-princess'                     : 'japan', // cruise ship
+            'drc'                                  : 'democratic-republic-of-congo',
+            'el-salvador'                          : 'salvador',
+            'eswatini'                             : 'swaziland',
+            'faeroe-islands'                       : 'faroe-islands',
+            'falkland-islands-(malvinas)'          : 'falkland-islands',
+            'french-guiana'                        : 'france', // ?
+            'guadeloupe'                           : 'france', // ?
+            'holy-see-(vatican-city-state)'        : 'vatican-city',
+            'iran,-islamic-republic-of'            : 'iran',
+            'lao-people\'s-democratic-republic'    : 'laos',
+            'libyan-arab-jamahiriya'               : 'libya',
+            'macedonia'                            : 'republic-of-macedonia',
+            'marshall-islands'                     : 'marshall-island',
+            'mayotte'                              : 'france', // ?
+            'moldova,-republic-of'                 : 'moldova',
+            'ms-zaandam'                           : 'netherlands', // cruise ship
+            'new-caledonia'                        : 'france',
+            'palestinian-territory,-occupied'      : 'palestine',
+            'poland'                               : 'republic-of-poland',
+            'réunion'                              : 'france',
+            's.-korea'                             : 'south-korea',
+            'st.-barth'                            : 'st-barts',
+            'saint-helena'                         : 'united-kingdom', // sorry, icon not included
+            'saint-lucia'                          : 'st-lucia',
+            'saint-martin'                         : 'sint-maarten',
+            'saint-pierre-miquelon'                : 'france',
+            'saint-vincent-and-the-grenadines'     : 'st-vincent-and-the-grenadines',
+            'syrian-arab-republic'                 : 'syria',
+            'tanzania,-united-republic-of'         : 'tanzania',
+            'timor-leste'                          : 'east-timor',
+            'turks-and-caicos-islands'             : 'turks-and-caicos',
+            'u.s.-virgin-islands'                  : 'virgin-islands',
+            'uae'                                  : 'united-arab-emirates',
+            'uk'                                   : 'united-kingdom',
+            'usa'                                  : 'united-states-of-america',
+            'uzbekistan'                           : 'uzbekistn',
+            'venezuela,-bolivarian-republic-of'    : 'venezuela',
+            'viet-nam'                             : 'vietnam',
+            'wallis-and-futuna'                    : 'france'
+        };
+
+        let imageName = name.toLowerCase().replace(Util.flagRegEx, '-');
+
+        imageName = map[imageName] || imageName;
+
+        if (Neo.config.isGitHubPages) {
+            let path = `../../../../resources/images/flaticon/country_flags/png/${imageName}.png`;
+
+            if (Neo.config.environment !== 'development') {
+                path = `../../${path}`;
+            }
+
+            return path;
+        }
+
+        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} data.index
+     * @returns {Object}
+     */
+    static indexRenderer(data) {
+        return {
+            cls : ['neo-index-column', 'neo-grid-cell'],
+            html: data.index + 1
+        };
+    }
+}
+
+Neo.applyClassConfig(Util);
+
+export default Util;

package/examples/grid/covid/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.grid.covid'
+});

package/examples/grid/covid/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo CovidGrid</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/grid/covid/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/grid/covid/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Stylesheet"],
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.1.0",
+    "version": "4.1.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -39,7 +39,7 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.1.2",
+        "@fortawesome/fontawesome-free": "^6.2.0",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.8",
@@ -54,7 +54,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.6",
+        "sass": "^1.54.7",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.10.1",

package/resources/scss/src/examples/grid/covid/GridContainer.scss

@@ -0,0 +1,21 @@
+.neo-grid-wrapper {
+    width: 100%
+}
+
+.neo-grid-container.covid-country-grid {
+    .neo-country-column {
+        min-width: 200px;
+        width    : initial;
+    }
+
+    .neo-grid-cell {
+        min-width: 100px;
+        width    : 300px;
+    }
+
+    .neo-index-column {
+        max-width: 40px;
+        min-width: 40px;
+        width    : 40px;
+    }
+}

package/resources/scss/src/grid/Container.scss

@@ -1,22 +1,14 @@
 .neo-grid-container {
-    border        : 1px solid #2b2b2b;
+    border        : 1px solid v(grid-container-border-color);
     border-spacing: 0;
     font-size     : 13px;
     font-weight   : 400;
     height        : 100%;
     line-height   : 19px;
     overflow      : hidden;
-    //position      : relative;
-
-    .neo-grid-header-toolbar {
-        //position: sticky;
-        //top     : 0;
-        display : table;
-        width   : 100%;
-    }
 
     .neo-grid-row {
-        display   : table-row;
+        display   : flex;
         height    : 32px !important;
         max-height: 32px !important;
         width     : 100%;
@@ -80,32 +72,12 @@
     }
 
     .neo-grid-cell {
+        align-items     : center;
         background-color: #3c3f41;
-        display         : table-cell;
+        display         : flex;
         height          : 32px !important;
         max-height      : 32px !important;
         padding         : 2px 10px 2px;
-    }
-
-    .neo-grid-header-cell {
-        display: table-cell;
-        padding: 0;
-    }
-
-    /* Scrollbars */
-    /*&::-webkit-scrollbar {
-        display: none;
-    }*/
-
-    .neo-grid-y-scroller {
-        background-color: green;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 32px;
-        width: 17px;
-        overflow: auto;
-        transform: translateZ(0);
-        -webkit-transform: translateZ(0);
+        width           : fit-content;
     }
 }