neo.mjs 4.1.0 → 4.2.0

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.2.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -11,6 +11,7 @@
         "neo-cc": "./buildScripts/createClass.mjs"
     },
     "scripts": {
+        "add-config": "node ./buildScripts/addConfig.mjs",
         "build-all": "node ./buildScripts/buildAll.mjs -f -n",
         "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
         "build-my-apps": "node ./buildScripts/webpack/buildMyApps.mjs -f",
@@ -39,7 +40,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",
@@ -50,11 +51,11 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.1.0",
+        "inquirer": "^9.1.1",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.6",
+        "sass": "^1.54.8",
         "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%;
-    }
+    overflow      : auto;
 
     .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,76 @@
 .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-locked { // todo: for testing, will get removed once the header toolbar is outside of the scroll region
+        position: sticky;
+        top     : 0;
+        z-index : 5001;
+    }
+
+    &.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,7 @@
 .neo-grid-header-toolbar {
-
-}
+    border-bottom: 2px solid v(grid-container-border-color);
+    border-top   : 1px solid v(grid-container-border-color);
+    padding      : 0;
+    position     : sticky;
+    top          : 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 @@
             }
         }
     }
-}
+}

package/resources/scss/theme-dark/grid/Container.scss

@@ -0,0 +1,17 @@
+$neoMap: map-merge($neoMap, (
+    'grid-container-border-color'              : #2b2b2b,
+    'grid-container-cell-background-color'     : #3c3f41,
+    'grid-container-cell-background-color-even': #323232,
+    'grid-container-color'                     : #bbb,
+    'grid-container-header-cell-border-bottom' : 2px solid #2b2b2b
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-container
+        --grid-container-border-color              : #{neo(grid-container-border-color)};
+        --grid-container-cell-background-color     : #{neo(grid-container-cell-background-color)};
+        --grid-container-cell-background-color-even: #{neo(grid-container-cell-background-color-even)};
+        --grid-container-color                     : #{neo(grid-container-color)};
+        --grid-container-header-cell-border-bottom : #{neo(grid-container-header-cell-border-bottom)};
+    }
+}

package/resources/scss/theme-dark/grid/View.scss

@@ -0,0 +1,29 @@
+$neoMap: map-merge($neoMap, (
+    'grid-cell-background-color-hover'                    : #54595c,
+    'grid-cellmodel-selected-cell-background-color'       : #64B5F6,
+    'grid-cellmodel-selected-cell-color'                  : #2b2b2b,
+    'grid-cellmodel-selected-column-cell-background-color': #4f558a,
+    'grid-cellmodel-selected-column-cell-color'           : #bbb,
+    'grid-cellrowmodel-selected-cell-background-color'    : #64B5F6,
+    'grid-cellrowmodel-selected-cell-color'               : #2b2b2b,
+    'grid-cellrowmodel-selected-row-cell-background-color': #4f558a,
+    'grid-cellrowmodel-selected-row-cell-color'           : #bbb,
+    'grid-rowmodel-selected-cell-background-color'        : #64B5F6,
+    'grid-rowmodel-selected-cell-color'                   : #2b2b2b
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-view
+        --grid-cell-background-color-hover                    : #{neo(grid-cell-background-color-hover)};
+        --grid-cellmodel-selected-cell-background-color       : #{neo(grid-cellmodel-selected-cell-background-color)};
+        --grid-cellmodel-selected-cell-color                  : #{neo(grid-cellmodel-selected-cell-color)};
+        --grid-cellmodel-selected-column-cell-background-color: #{neo(grid-cellmodel-selected-column-cell-background-color)};
+        --grid-cellmodel-selected-column-cell-color           : #{neo(grid-cellmodel-selected-column-cell-color)};
+        --grid-cellrowmodel-selected-cell-background-color    : #{neo(grid-cellrowmodel-selected-cell-background-color)};
+        --grid-cellrowmodel-selected-cell-color               : #{neo(grid-cellrowmodel-selected-cell-color)};
+        --grid-cellrowmodel-selected-row-cell-background-color: #{neo(grid-cellrowmodel-selected-row-cell-background-color)};
+        --grid-cellrowmodel-selected-row-cell-color           : #{neo(grid-cellrowmodel-selected-row-cell-color)};
+        --grid-rowmodel-selected-cell-background-color        : #{neo(grid-rowmodel-selected-cell-background-color)};
+        --grid-rowmodel-selected-cell-color                   : #{neo(grid-rowmodel-selected-cell-color)};
+    }
+}

package/resources/scss/theme-dark/grid/_all.scss

@@ -0,0 +1,3 @@
+@import "header/all";
+@import "Container";
+@import "View";

package/resources/scss/theme-dark/grid/header/Button.scss

@@ -0,0 +1,15 @@
+$neoMap: map-merge($neoMap, (
+    'grid-header-button-background-color': #323232,
+    'grid-header-button-background-image': linear-gradient(#3c3f41, #323232),
+    'grid-header-button-color'           : #bbb,
+    'grid-header-button-glyph-color'     : #bbb
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-header
+        --grid-header-button-background-color: #{neo(grid-header-button-background-color)};
+        --grid-header-button-background-image: #{neo(grid-header-button-background-image)};
+        --grid-header-button-color           : #{neo(grid-header-button-color)};
+        --grid-header-button-glyph-color     : #{neo(grid-header-button-glyph-color)};
+    }
+}