neo.mjs 7.10.0 → 7.12.0

package/examples/tablePerformance/MainContainer.mjs

@@ -9,7 +9,6 @@ import TableContainer from '../../src/table/Container.mjs';
 class MainContainer extends Container {
     static config = {
         className: 'Neo.examples.tablePerformance.MainContainer',
-        autoMount: true,
 
         layout: {
             ntype: 'vbox',
@@ -44,57 +43,41 @@ class MainContainer extends Container {
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'amountRows',
                 labelText : 'Rows:',
                 labelWidth: 50,
                 maxValue  : 1500,
                 minValue  : 1,
+                reference : 'amount-rows-field',
                 value     : 20,
                 width     : 120
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'interval',
                 labelText : 'Interval:',
                 labelWidth: 62,
                 maxValue  : 5000,
                 minValue  : 10,
+                reference : 'interval-field',
                 value     : 20,
                 width     : 130
             }, {
+                handler: 'up.updateTableViewData',
                 iconCls: 'fa fa-sync-alt',
-                text   : 'Refresh Data',
-                handler: function () {
-                    let rows = Neo.getComponent('amountRows').value;
-                    Neo.getComponent('myTableContainer').createRandomViewData(rows);
-                }
+                text   : 'Refresh Data'
             }, {
+                handler: 'up.updateTableViewData100x',
                 iconCls: 'fa fa-sync-alt',
                 style  : {margin: 0},
-                text   : 'Refresh 100x',
-                handler: function () {
-                    let interval     = Neo.getComponent('interval').value,
-                        rows         = Neo.getComponent('amountRows').value,
-                        maxRefreshes = 100,
-                        intervalId   = setInterval(function () {
-                            if (maxRefreshes < 1) {
-                                clearInterval(intervalId);
-                            }
-
-                            Neo.getComponent('myTableContainer').createRandomViewData(rows);
-                            maxRefreshes--;
-                        }, interval);
-                }
+                text   : 'Refresh 100x'
             }]
         }, {
-            ntype           : 'table-container',
-            id              : 'myTableContainer',
-            amountRows      : 20, // testing var
-            createRandomData: true,
-            width           : '100%',
+            module    : TableContainer,
+            reference : 'table',
+            viewConfig: {useRowRecordIds: false},
+            width     : '100%',
 
             columnDefaults: {
-                renderer: function(data) {
+                renderer(data) {
                     return {
                         html : data.value,
                         style: {
@@ -141,6 +124,43 @@ class MainContainer extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.updateTableViewData()
+    }
+
+    /**
+     *
+     */
+    updateTableViewData() {
+        let me        = this,
+            table     = me.getReference('table'),
+            columns   = table.headerToolbar.items.length,
+            rows      = me.getReference('amount-rows-field').value,
+            inputData = me.up('viewport').createRandomData(columns, rows);
+
+        table.createViewData(inputData)
+    }
+
+    /**
+     *
+     */
+    updateTableViewData100x() {
+        let interval     = this.getReference('interval-field').value,
+            maxRefreshes = 100,
+            intervalId   = setInterval(() => {
+                if (maxRefreshes < 1) {
+                    clearInterval(intervalId);
+                }
+
+                this.updateTableViewData();
+                maxRefreshes--
+            }, interval)
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/tablePerformance/MainContainer2.mjs

@@ -43,57 +43,41 @@ class MainContainer2 extends Container {
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'amountRows2',
                 labelText : 'Rows:',
                 labelWidth: 50,
                 maxValue  : 1500,
                 minValue  : 1,
+                reference : 'amount-rows-field',
                 value     : 50,
                 width     : 120
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'interval2',
                 labelText : 'Interval:',
                 labelWidth: 62,
                 maxValue  : 5000,
                 minValue  : 10,
+                reference : 'interval-field',
                 value     : 30,
                 width     : 130
             }, {
+                handler: 'up.updateTableViewData',
                 iconCls: 'fa fa-sync-alt',
-                text   : 'Refresh Data',
-                handler: function () {
-                    let rows = Neo.getComponent('amountRows2').value;
-                    Neo.getComponent('myTableContainer2').createRandomViewData(rows);
-                }
+                text   : 'Refresh Data'
             }, {
+                handler: 'up.updateTableViewData100x',
                 iconCls: 'fa fa-sync-alt',
                 style  : {margin: 0},
-                text   : 'Refresh 100x',
-                handler: function () {
-                    let interval     = Neo.getComponent('interval2').value,
-                        rows         = Neo.getComponent('amountRows2').value,
-                        maxRefreshes = 100,
-                        intervalId   = setInterval(function(){
-                            if (maxRefreshes < 1) {
-                                clearInterval(intervalId);
-                            }
-
-                            Neo.getComponent('myTableContainer2').createRandomViewData(rows);
-                            maxRefreshes--;
-                        }, interval);
-                }
+                text   : 'Refresh 100x'
             }]
         }, {
-            ntype           : 'table-container',
-            id              : 'myTableContainer2',
-            amountRows      : 50, // testing var
-            createRandomData: true,
-            width           : '100%',
+            module    : TableContainer,
+            reference : 'table',
+            viewConfig: {useRowRecordIds: false},
+            width     : '100%',
 
             columnDefaults: {
-                renderer: function(data) {
+                renderer(data) {
                     return {
                         html : data.value,
                         style: {
@@ -140,6 +124,43 @@ class MainContainer2 extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.updateTableViewData()
+    }
+
+    /**
+     *
+     */
+    updateTableViewData() {
+        let me        = this,
+            table     = me.getReference('table'),
+            columns   = table.headerToolbar.items.length,
+            rows      = me.getReference('amount-rows-field').value,
+            inputData = me.up('viewport').createRandomData(columns, rows);
+
+        table.createViewData(inputData)
+    }
+
+    /**
+     *
+     */
+    updateTableViewData100x() {
+        let interval     = this.getReference('interval-field').value,
+            maxRefreshes = 100,
+            intervalId   = setInterval(() => {
+                if (maxRefreshes < 1) {
+                    clearInterval(intervalId);
+                }
+
+                this.updateTableViewData();
+                maxRefreshes--
+            }, interval)
+    }
 }
 
 export default Neo.setupClass(MainContainer2);

package/examples/tablePerformance/MainContainer3.mjs

@@ -33,7 +33,7 @@ class MainContainer3 extends Container {
 
             items: [{
                 ntype: 'label',
-                text : 'TableContainer App3 (Default Scollbars)',
+                text : 'TableContainer App3 (Default Scrollbars)',
                 style: {
                     margin: '4px 10px 0 5px'
                 }
@@ -43,58 +43,42 @@ class MainContainer3 extends Container {
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'amountRows3',
                 labelText : 'Rows:',
                 labelWidth: 50,
                 maxValue  : 1500,
                 minValue  : 1,
+                reference : 'amount-rows-field',
                 value     : 100,
                 width     : 120
             }, {
                 ntype     : 'numberfield',
                 clearable : false,
-                id        : 'interval3',
                 labelText : 'Interval:',
                 labelWidth: 62,
                 maxValue  : 5000,
                 minValue  : 10,
+                reference : 'interval-field',
                 value     : 50,
                 width     : 130
             }, {
+                handler: 'up.updateTableViewData',
                 iconCls: 'fa fa-sync-alt',
-                text   : 'Refresh Data',
-                handler: function () {
-                    let rows = Neo.getComponent('amountRows3').value;
-                    Neo.getComponent('myTableContainer3').createRandomViewData(rows);
-                }
+                text   : 'Refresh Data'
             }, {
+                handler: 'up.updateTableViewData100x',
                 iconCls: 'fa fa-sync-alt',
                 text   : 'Refresh 100x',
-                style  : {margin: 0},
-                handler: function () {
-                    let interval     = Neo.getComponent('interval3').value,
-                        rows         = Neo.getComponent('amountRows3').value,
-                        maxRefreshes = 100,
-                        intervalId   = setInterval(function(){
-                            if (maxRefreshes < 1) {
-                                clearInterval(intervalId);
-                            }
-
-                            Neo.getComponent('myTableContainer3').createRandomViewData(rows);
-                            maxRefreshes--;
-                        }, interval);
-                }
+                style  : {margin: 0}
             }]
         }, {
-            ntype              : 'table-container',
-            id                 : 'myTableContainer3',
-            amountRows         : 100, // testing var
-            createRandomData   : true,
+            module             : TableContainer,
+            reference          : 'table',
+            viewConfig         : {useRowRecordIds: false},
             useCustomScrollbars: false,
             width              : '100%',
 
             columnDefaults: {
-                renderer: function(data) {
+                renderer(data) {
                     return {
                         html : data.value,
                         style: {
@@ -143,6 +127,43 @@ class MainContainer3 extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.updateTableViewData()
+    }
+
+    /**
+     *
+     */
+    updateTableViewData() {
+        let me        = this,
+            table     = me.getReference('table'),
+            columns   = table.headerToolbar.items.length,
+            rows      = me.getReference('amount-rows-field').value,
+            inputData = me.up('viewport').createRandomData(columns, rows);
+
+        table.view.createViewData(inputData)
+    }
+
+    /**
+     *
+     */
+    updateTableViewData100x() {
+        let interval     = this.getReference('interval-field').value,
+            maxRefreshes = 100,
+            intervalId   = setInterval(() => {
+                if (maxRefreshes < 1) {
+                    clearInterval(intervalId);
+                }
+
+                this.updateTableViewData();
+                maxRefreshes--
+            }, interval)
+    }
 }
 
 export default Neo.setupClass(MainContainer3);

package/examples/tablePerformance/Viewport.mjs

@@ -27,6 +27,27 @@ class Viewport extends BaseViewport {
             style : {marginTop: '20px'}
         }]
     }
+
+    /**
+     * @param {Number} amountColumns
+     * @param {Number} amountRows
+     */
+    createRandomData(amountColumns, amountRows) {
+        let data = [],
+            i    = 0,
+            j;
+
+        for (; i < amountRows; i++) {
+            data.push({});
+
+            for (j=0; j < amountColumns; j++) {
+                data[i]['column' + j] = 'Column' + (j + 1) + ' - ' + Math.round(Math.random() / 1.5);
+                data[i]['column' + j + 'style'] = Math.round(Math.random() / 1.7) > 0 ? 'brown' : i%2 ? '#3c3f41' : '#323232'
+            }
+        }
+
+        return data
+    }
 }
 
 export default Neo.setupClass(Viewport);

package/package.json

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

package/resources/scss/src/apps/portal/about/MemberContainer.scss

@@ -1,9 +1,10 @@
 .portal-about-member-container {
-    border    : 1px solid var(--sem-color-border-default);
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
-    min-width : 600px;
-    padding   : 1em 1em 4em;
-    position  : relative;
+    border       : 1px solid var(--sem-color-border-default);
+    border-radius: .7em;
+    box-shadow   : 0 3px 6px rgba(0, 0, 0, 0.3);
+    min-width    : 600px;
+    padding      : 1em 1em 4em;
+    position     : relative;
 
     &:not(:nth-child(2)) {
         margin-top: 1em;
@@ -13,6 +14,7 @@
         display: flex;
 
         h2.portal-profile-name {
+            color : #3E63DD;
             margin: .3em 0;
         }
 

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -1,65 +1,98 @@
 .portal-content-box {
-    border-radius  : 3px;
-    box-shadow     : 0 3px 6px rgba(0, 0, 0, 0.3);
-    color          : #000;
+    background     : #ffffff;
+    border-radius  : 12px;
+    box-shadow     : 0 4px 16px rgba(0, 0, 0, 0.1);
+    color          : #3e63dd;
     cursor         : pointer;
-    min-width      : 300px;
-    padding        : 0 1em 1em 1em;
+    flex           : 0 0 calc(33.33% - 1.5em);
+    max-width      : 350px;
+    min-width      : 280px;
+    padding        : 1em;
     position       : relative;
     text-decoration: none;
+    transition     : transform 0.3s ease-out, box-shadow 0.3s ease-out;
+
+    &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+        transform : translateY(-8px) scale(1.02);
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
 
     .portal-content-box-content {
-        margin-top  : 0.75em;
-        padding-left: 1.3em;
+        color       : #555;
+        font-size   : 0.95em;
+        list-style  : none;
+        margin-top  : 0.5em;
+        padding     : 8px 8px 8px 0;
+    }
+
+    .portal-content-box-content li {
+        border-radius: 4px;
+        list-style   : none;
+        margin-top   : .4em;
+        padding      : 8px;
+        transition   : background-color 0.2s ease-out, color 0.2s ease-out;
+
+        &:hover {
+            background-color: rgba(62, 99, 221, 0.1);
+            color           : #3e63dd;
+        }
     }
 
-    .portal-content-box-headline {
-        border-bottom : 1px solid #ececec;
-        letter-spacing: 1.5px !important;
-        margin        : 1em auto 0 auto;
-        max-width     : 85%;
-        padding-bottom: 0.75em;
+    h3.portal-content-box-headline {
+        border-bottom : 2px solid #3e63dd;
+        color         : #3e63dd;
+        font-size     : 1.18em;
+        font-weight   : 500;
+        letter-spacing: 1.5px;
+        margin        : 0 auto;
+        max-width     : 90%;
+        padding-bottom: 0.4em;
         text-align    : center;
-        word-spacing  : 1.5px;
     }
-}
 
-.neo-mouse {
-    .portal-content-box {
-        &:hover {
-            background-color: var(--sem-color-surface-primary-background);
+    &:after {
+        align-items     : center;
+        background-color: rgba(62, 99, 221, 0.05);
+        border-radius   : 5px;
+        bottom          : 10px;
+        color           : #3e63dd;
+        content         : "\2192";
+        display         : flex;
+        font-size       : 1.2em;
+        justify-content : center;
+        opacity         : 0.8;
+        padding         : 5px 8px;
+        position        : absolute;
+        right           : 10px;
+        transition      : background-color 0.3s ease;
+    }
 
-            &:after {
-                background-color: var(--purple-200);
-                border-radius   : 2px;
-                bottom          : 10px;
-                content         : attr(href) ' \2192';
-                font-size       : 0.7em;
-                left            : -1px;
-                opacity         : 0.7;
-                padding         : 3px 20px;
-                position        : absolute;
-                right           : -1px;
-                text-align      : center;
-            }
+    &:after:hover:after {
+        background-color: rgba(62, 99, 221, 0.25);
+    }
+
+    .neo-mouse {
+        &:hover {
+            background-color: rgba(62, 99, 221, 0.05);
 
             .portal-content-box-headline {
-                border-bottom-color: #b7c0da;
+                border-bottom-color: #1a47b8;
             }
         }
     }
-}
 
-.neo-no-mouse {
-    .portal-content-box {
+    .neo-no-mouse {
         &:after {
-            bottom     : .5em;
-            color      : var(--purple-200);
-            content    : '\f08e';
-            font-family: var(--fa-style-family-classic);
+            bottom     : 20px;
+            color      : #3e63dd;
+            content    : "\f08e";
             font-weight: 600;
             position   : absolute;
-            right      : .5em;
+            right      : 0.5em;
         }
     }
 }

package/resources/scss/src/apps/portal/home/parts/AfterMath.scss

@@ -1,7 +1,21 @@
 .portal-home-aftermath {
     height: 60em;
 
-    p {
-        text-align: center;
+    a {
+        color: #3E63DD;
+    }
+
+    li {
+        font-size: var(--core-fontsize-body);
+        font-weight: var(--core-fontweight-regular);
+        line-height: var(--core-lineheight-paragraph);
+
+        &::marker {
+            color: #3E63DD;
+        }
+    }
+
+    ul {
+        align-self: center;
     }
 }

package/resources/scss/src/apps/portal/home/parts/Features.scss

@@ -1,17 +1,39 @@
 .portal-home-features {
-    gap                  : 2em;
+    align-self           : center;
+    gap                  : 1.5em;
     grid-template-columns: repeat(3, 1fr);
-    overflow-x           : auto;
-    padding              : 2em;
+    justify-content      : center;
+    max-width            : 1200px;
+    padding              : 1.5em;
     place-content        : start;
+    scrollbar-color      : #3e63dd #f0f0f0;
+    scrollbar-width      : thin;
+
+    &::-webkit-scrollbar {
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background   : #f0f0f0;
+        border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #3e63dd;
+        border-radius   : 10px;
+    }
 
     @media (max-width: 1000px) {
         grid-template-columns: repeat(2, 1fr);
     }
 
     @media (max-width: 700px) {
+        align-self           : start;
         grid-template-columns: repeat(6, 1fr);
+        margin-bottom        : 5em;
+        max-width            : fill-available; // prefixed by postCSS
         min-height           : 50%;
+        overflow-x           : scroll;
     }
 
     @media (max-width: 500px) {