neo.mjs 4.0.93 → 4.1.1

package/examples/table/covid/TableContainer.mjs

@@ -0,0 +1,112 @@
+import BaseTableContainer       from '../../../src/table/Container.mjs';
+import Store                    from './Store.mjs';
+import TableContainerController from './TableContainerController.mjs';
+import Util                     from './Util.mjs';
+
+/**
+ * @class Neo.examples.table.covid.TableContainer
+ * @extends Neo.table.Container
+ */
+class TableContainer extends BaseTableContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.table.covid.TableContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.TableContainer',
+        /**
+         * @member {String[]} cls=['covid-country-table', 'neo-table-container']
+         */
+        cls: ['covid-country-table', 'neo-table-container'],
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults
+         */
+        columnDefaults: {
+            align               : 'right',
+            defaultSortDirection: 'DESC',
+            renderer            : Util.formatNumber
+        },
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            cls      : ['neo-index-column', 'neo-table-header-button'],
+            dataField: 'index',
+            dock     : 'left',
+            minWidth : 40,
+            text     : '#',
+            renderer : Util.indexRenderer,
+            width    : 40
+        }, {
+            align               : 'left',
+            dataField           : 'country',
+            defaultSortDirection: 'ASC',
+            dock                : 'left',
+            text                : 'Country',
+            width               : 200,
+
+            renderer: data => {
+                return {
+                    cls : ['neo-country-column', 'neo-table-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('')
+                };
+            }
+        }, {
+            dataField: 'cases',
+            text     : 'Cases'
+        }, {
+            dataField: 'casesPerOneMillion',
+            text     : 'Cases / 1M'
+        }, {
+            dataField: 'infected',
+            text     : 'Infected',
+            renderer : data => Util.formatInfected(data)
+        }, {
+            dataField: 'active',
+            text     : 'Active',
+            renderer : data => Util.formatNumber(data, '#64B5F6')
+        },  {
+            dataField: 'recovered',
+            text     : 'Recovered',
+            renderer : data => Util.formatNumber(data, '#28ca68')
+        }, {
+            dataField: 'critical',
+            text     : 'Critical',
+            renderer : data => Util.formatNumber(data, 'orange')
+        }, {
+            dataField: 'deaths',
+            text     : 'Deaths',
+            renderer : data => Util.formatNumber(data, '#fb6767')
+        }, {
+            dataField: 'todayCases',
+            text     : 'Cases today'
+        }, {
+            dataField: 'todayDeaths',
+            text     : 'Deaths today',
+            renderer : data => Util.formatNumber(data, '#fb6767')
+        }, {
+            dataField: 'tests',
+            text     : 'Tests'
+        }, {
+            dataField: 'testsPerOneMillion',
+            text     : 'Tests / 1M'
+        }],
+        /**
+         * @member {Neo.controller.Component} controller=TableContainerController
+         */
+        controller: TableContainerController,
+        /**
+         * @member {Object[]} store=MainStore
+         */
+        store: Store
+    }}
+}
+
+Neo.applyClassConfig(TableContainer);
+
+export default TableContainer;

package/examples/table/covid/TableContainerController.mjs

@@ -0,0 +1,62 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.table.covid.TableContainerController
+ * @extends Neo.controller.Component
+ */
+class TableContainerController 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.table.covid.TableContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.table.covid.TableContainerController'
+    }}
+
+    /**
+     * @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(TableContainerController);
+
+export default TableContainerController;

package/examples/table/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-table-cell'],
+            html: data.index + 1
+        };
+    }
+}
+
+Neo.applyClassConfig(Util);
+
+export default Util;

package/examples/table/covid/app.mjs

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

package/examples/table/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 CovidTable</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/table/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.0.93",
+    "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,10 +54,10 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.5",
+        "sass": "^1.54.7",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "4.10.0",
+        "webpack-dev-server": "4.10.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

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/examples/table/covid/TableContainer.scss

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

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;
     }
 }

package/resources/scss/src/grid/View.scss

@@ -1,3 +1,75 @@
 .neo-grid-view {
+    .neo-center {
+        justify-content: center;
+    }
 
-}
+    .neo-right {
+        justify-content: right;
+    }
+
+    .neo-grid-row {
+             &:hover {
+                 .neo-grid-cell {
+                     background-color: v(grid-cell-background-color-hover);
+                 }
+             }
+
+             // selection.RowModel
+             &.neo-selected {
+                 .neo-grid-cell {
+                     background-color: v(grid-rowmodel-selected-cell-background-color);
+                     color           : v(grid-rowmodel-selected-cell-color);
+                 }
+             }
+
+             // selection.CellModel
+             .neo-grid-cell {
+                 &.neo-selected {
+                     background-color: v(grid-cellmodel-selected-cell-background-color) !important;
+                     color           : v(grid-cellmodel-selected-cell-color) !important;
+                 }
+
+                 &.selected-column-cell {
+                     background-color: v(grid-cellmodel-selected-column-cell-background-color);
+                     color           : v(grid-cellmodel-selected-column-cell-color);
+                 }
+             }
+         }
+}
+
+.neo-selection-cellrowmodel,
+.neo-selection-cellcolumnrowmodel{
+    .neo-grid-row {
+        &.neo-selected {
+            .neo-grid-cell {
+                background-color: v(grid-cellrowmodel-selected-row-cell-background-color);
+                color           : v(grid-cellrowmodel-selected-row-cell-color);
+            }
+        }
+
+        .neo-grid-cell {
+            &.neo-selected {
+                background-color: v(grid-cellrowmodel-selected-cell-background-color);
+                color           : v(grid-cellrowmodel-selected-cell-color);
+            }
+        }
+    }
+}
+
+.neo-selection-cellcolumnmodel,
+.neo-selection-cellcolumnrowmodel,
+.neo-selection-cellmodel,
+.neo-selection-cellrowmodel,
+.neo-selection-columnmodel,
+.neo-selection-rowmodel {
+    .neo-grid-row {
+        &:focus {
+            outline: 0;
+        }
+        .neo-grid-cell {
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+}

package/resources/scss/src/grid/header/Button.scss

@@ -1,16 +1,70 @@
 .neo-grid-header-button {
-    background-color: #323232;
+    align-items     : center;
+    background-color: v(grid-header-button-background-color);
+    background-image: v(grid-header-button-background-image);
     border-width    : 0;
-    box-sizing      : border-box;
-    color           : #bbb;
+    color           : v(grid-header-button-color);
     cursor          : pointer;
+    display         : flex;
+    flex-direction  : row;
+    flex-shrink     : 0;
     font-size       : 13px;
     font-weight     : 600;
+    height          : 29px; // Webkit => Safari can not handle 100%
+    justify-content : flex-end;
     margin          : 0;
     padding         : 7px 10px 6px;
-    text-align      : left;
     white-space     : nowrap;
-    width           : 100%;
 
-    background-image: linear-gradient(#3c3f41, #323232);
-}
+    &:not(:last-child) {
+        border-right: 1px solid v(grid-container-border-color);
+    }
+
+    &.neo-drag-over {
+        background-image: linear-gradient(green, darkgreen);;
+    }
+
+    &.neo-sort-asc, &.neo-sort-desc {
+        .neo-button-glyph {
+            opacity: 1;
+        }
+    }
+
+    &.neo-sort-hidden {
+        .neo-button-glyph {
+            opacity: 0;
+        }
+    }
+
+    &.neo-sort-desc {
+        .neo-button-glyph {
+            transform: rotate(180deg);
+        }
+    }
+
+    &:focus {
+        outline : 0;
+    }
+
+    &.icon-right {
+        flex-direction: row-reverse;
+
+        .neo-button-glyph {
+            margin: 0 0 0 6px;
+        }
+    }
+
+    .neo-button-glyph {
+        color         : v(grid-header-button-glyph-color);
+        font-size     : 12px;
+        margin        : 0 6px 0 0;
+        opacity       : 0;
+        pointer-events: none;
+        transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+        will-change   : opacity, transform;
+    }
+
+    .neo-button-text {
+        pointer-events: none;
+    }
+}

package/resources/scss/src/grid/header/Toolbar.scss

@@ -1,3 +1,5 @@
 .neo-grid-header-toolbar {
-
-}
+    border-bottom: 2px solid v(grid-container-border-color);
+    border-top   : 1px solid v(grid-container-border-color);
+    padding      : 0;
+}

package/resources/scss/src/table/View.scss

@@ -59,8 +59,8 @@
 .neo-selection-cellcolumnmodel,
 .neo-selection-cellcolumnrowmodel,
 .neo-selection-cellmodel,
-.neo-selection-columnmodel,
 .neo-selection-cellrowmodel,
+.neo-selection-columnmodel,
 .neo-selection-rowmodel {
     .neo-table-row {
         &:focus {
@@ -72,4 +72,4 @@
             }
         }
     }
-}
+}