neo.mjs 7.10.0 → 7.12.0

package/resources/scss/src/apps/portal/learn/ContentComponent.scss

@@ -29,11 +29,6 @@
         margin: 1em 0 1em 0;
     }
 
-    details summary {
-        cursor    : pointer;
-        transition: margin 300ms ease-out;
-    }
-
     details[open] {
         margin-bottom: 2em;
     }
@@ -41,9 +36,11 @@
     details summary {
         align-items: center;
         color      : #555;
+        cursor     : pointer;
         display    : flex;
         font-weight: bold;
         list-style : none;
+        transition : margin 300ms ease-out;
     }
 
     details summary::before {
@@ -62,23 +59,12 @@
         margin     : 0.4em 0.4em 0.4em 0;
     }
 
-    summary::-webkit-details-marker {
-        display: none;
+    h1.neo-h1 {
+        color: #3E63DD;
     }
 
-    .lab {
-        /* Add shadows to create the "card" effect */
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-        transition: 0.3s;
-        /* Add some padding inside the card container */
-        padding      : 2px 16px;
-        font-size    : 1em;
-        margin-bottom: 1em;
-
-        &:hover {
-            /* On mouse-over, add a deeper shadow */
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-        }
+    summary::-webkit-details-marker {
+        display: none;
     }
 
     p {
@@ -91,6 +77,19 @@
         overflow-x   : scroll;
         padding      : 12px;
     }
+
+    .lab {
+        box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        font-size    : 1em;
+        margin-bottom: 1em;
+        padding      : 2px 16px;
+        transition   : 0.3s;
+
+        &:hover {
+            /* On mouse-over, add a deeper shadow */
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        }
+    }
 }
 
 .portal-size-large {

package/resources/scss/src/apps/portal/services/Component.scss

@@ -3,22 +3,37 @@
     overflow-y      : auto;
     padding         : 0.1em 6em 1em 6em;
 
+    a {
+        color: #3E63DD;
+    }
+
+    li {
+        &::marker {
+            color: #3E63DD;
+        }
+    }
+
     .info-block {
-        border      : 1px solid var(--sem-color-border-default);
-        box-shadow  : 0 3px 6px rgba(0, 0, 0, 0.3);
-        margin-left : auto;
-        margin-right: auto;
-        margin-top  : 2em;
-        max-width   : 800px;
-        padding     : 0.5em 3em 1em 3em;
+        border       : 1px solid var(--sem-color-border-default);
+        border-radius: .7em;
+        box-shadow   : 0 3px 6px rgba(0, 0, 0, 0.3);
+        margin-left  : auto;
+        margin-right : auto;
+        margin-top   : 2em;
+        max-width    : 800px;
+        padding      : 0.5em 3em 1em 3em;
     }
 
-    h1 {
+    h1.neo-h1 {
         margin-left : auto;
         margin-right: auto;
         width       : fit-content;
     }
 
+    h2.neo-h2 {
+        color: #3e63dd;
+    }
+
     @media (max-width: 600px) {
         padding: 0.1em 1em 1em 1em;
 

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '7.10.0'
+     * @default '7.12.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '7.10.0'
+    version: '7.12.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/filter/DateContainer.mjs

@@ -1,4 +1,4 @@
-import Date            from '../form/field/Date.mjs';
+import DateField       from '../form/field/Date.mjs';
 import NumberContainer from './NumberContainer.mjs';
 
 /**
@@ -18,9 +18,9 @@ class DateContainer extends NumberContainer {
          */
         ntype: 'filter-datecontainer',
         /**
-         * @member {Neo.form.field.Base} fieldModule=Date
+         * @member {Neo.form.field.Base} fieldModule=DateField
          */
-        fieldModule: Date
+        fieldModule: DateField
     }
 }
 

package/src/list/Circle.mjs

@@ -71,6 +71,7 @@ class Circle extends Component {
                 parentId   : me.id,
                 tabIndex   : -1,
                 width      : me.itemWidth,
+                windowId   : me.windowId,
                 ...me.itemDefaults,
                 ...config
             })

package/src/manager/_export.mjs

@@ -3,6 +3,5 @@ import Component from './Component.mjs';
 import DomEvent  from './DomEvent.mjs';
 import Focus     from './Focus.mjs';
 import Instance  from './Instance.mjs';
-import Store     from './Store.mjs';
 
-export {Base, Component, DomEvent, Instance, Focus, Store};
+export {Base, Component, DomEvent, Instance, Focus};

package/src/tab/Container.mjs

@@ -322,43 +322,32 @@ class Container extends BaseContainer {
      * @protected
      */
     getLayoutConfig() {
-        let me           = this,
-            layoutConfig = null;
-
-        switch(me.tabBarPosition) {
-            case 'bottom':
-                layoutConfig = {
-                    ntype    : 'vbox',
-                    align    : 'stretch',
-                    direction: 'column-reverse',
-                    pack     : 'start'
-                };
-                break
-            case 'left':
-                layoutConfig = {
-                    ntype    : 'hbox',
-                    align    : 'stretch',
-                    direction: 'row',
-                    pack     : 'start'
-                };
-                break
-            case 'right':
-                layoutConfig = {
-                    ntype    : 'hbox',
-                    align    : 'stretch',
-                    direction: 'row-reverse',
-                    pack     : 'start'
-                };
-                break
-            case 'top':
-                layoutConfig = {
-                    ntype: 'vbox',
-                    align: 'stretch'
-                };
-                break
-        }
+        const layoutMap = {
+            'bottom': {
+                ntype: 'vbox',
+                align: 'stretch',
+                direction: 'column-reverse',
+                pack: 'start'
+            },
+            'left': {
+                ntype: 'hbox',
+                align: 'stretch',
+                direction: 'row',
+                pack: 'start'
+            },
+            'right': {
+                ntype: 'hbox',
+                align: 'stretch',
+                direction: 'row-reverse',
+                pack: 'start'
+            },
+            'top': {
+                ntype: 'vbox',
+                align: 'stretch'
+            }
+        };
 
-        return layoutConfig
+        return layoutMap[this.tabBarPosition] || null;
     }
 
     /**

package/src/table/Container.mjs

@@ -23,11 +23,6 @@ class Container extends BaseContainer {
          * @protected
          */
         ntype: 'table-container',
-        /**
-         * todo: testing config, remove when Stores are ready
-         * @member {Number} amountRows=20
-         */
-        amountRows: 20,
         /**
          * @member {String[]} baseCls=['neo-table-container']
          */
@@ -37,11 +32,6 @@ class Container extends BaseContainer {
          * @member {Object} columnDefaults=null
          */
         columnDefaults: null,
-        /**
-         * todo: testing config, remove when Stores are ready
-         * @member {Boolean} createRandomData=false
-         */
-        createRandomData: false,
         /**
          * @member {Object[]} columns_=[]
          */
@@ -148,11 +138,10 @@ class Container extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module         : View,
-            containerId    : me.id,
-            id             : me.viewId,
-            store          : me.store,
-            useRowRecordIds: !me.createRandomData,
+            module     : View,
+            containerId: me.id,
+            id         : me.viewId,
+            store      : me.store,
             ...me.viewConfig
         }];
 
@@ -399,27 +388,17 @@ class Container extends BaseContainer {
         return columns
     }
 
-    /**
-     * @param {Number} countRows
-     */
-    createRandomViewData(countRows) {
-        this.loadData(countRows)
-    }
-
     /**
      * @param {Array} inputData
      */
     createViewData(inputData) {
-        let me      = this,
-            {items} = me;
+        let me = this;
 
-        items[1].createViewData(inputData); // todo: save a reference to the view & headerContainer
+        me.view.createViewData(inputData);
 
         if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
-            me.applyCustomScrollbarsCss();
+            me.applyCustomScrollbarsCss()
         }
-
-        me.items = items
     }
 
     /**
@@ -452,35 +431,12 @@ class Container extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
-    /**
-     * @param {Number} countRows
-     */
-    loadData(countRows) {
-        let me           = this,
-            columns      = me.items[0].items,
-            countColumns = columns.length;
-
-        Neo.manager.Store.createRandomData([countColumns, countRows]).then(data => {
-            me.createViewData(data)
-        })
-    }
-
     /**
      *
      */
     onConstructed() {
         super.onConstructed();
-
-        let me = this;
-
-        me.selectionModel?.register(me);
-
-        if (me.createRandomData) {
-            // todo: if mounting apply after mount
-            me.timeout(50).then(() => {
-                me.createRandomViewData(me.amountRows)
-            })
-        }
+        this.selectionModel?.register(this)
     }
 
     /**
@@ -545,7 +501,7 @@ class Container extends BaseContainer {
      * @protected
      */
     removeSortingCss(dataField) {
-        this.items[0].items.forEach(column => {
+        this.headerToolbar.items.forEach(column => {
             if (column.dataField !== dataField) {
                 column.removeSortingCss()
             }

package/src/table/View.mjs

@@ -201,7 +201,7 @@ class View extends Component {
             if (selectedRows?.includes(id)) {
                 trCls.push('neo-selected');
 
-                Neo.getComponent(me.containerId).fire('select', {
+                me.parent.fire('select', {
                     record
                 })
             }
@@ -326,7 +326,7 @@ class View extends Component {
      */
     getColumn(field, returnIndex=false) {
         let container = this.parent,
-            columns   = container.items[0].items, // todo: we need a shortcut for accessing the header toolbar
+            columns   = container.headerToolbar.items,
             i         = 0,
             len       = columns.length,
             column;

package/src/table/header/Button.mjs

@@ -204,6 +204,7 @@ class Button extends BaseButton {
                     flag     : 'filter-field',
                     hideLabel: true,
                     parentId : me.id,
+                    windowId : me.windowId,
 
                     listeners: {
                         change        : me.changeFilterValue,

package/src/worker/Data.mjs

@@ -1,10 +1,9 @@
-import Neo          from '../Neo.mjs';
-import Base         from './Base.mjs';
-import Compare      from '../core/Compare.mjs';
-import Fetch        from '../Fetch.mjs';
-import Util         from '../core/Util.mjs';
-import StoreManager from '../manager/Store.mjs';
-import Xhr          from '../Xhr.mjs';
+import Neo     from '../Neo.mjs';
+import Base    from './Base.mjs';
+import Compare from '../core/Compare.mjs';
+import Fetch   from '../Fetch.mjs';
+import Util    from '../core/Util.mjs';
+import Xhr     from '../Xhr.mjs';
 
 /**
  * The Data worker is responsible to handle all of the communication to the backend (e.g. Ajax-calls).

package/src/manager/Store.mjs

@@ -1,84 +0,0 @@
-import Base from './Base.mjs';
-
-/**
- * todo: except for createRandomData a legacy class, since stores live directly inside the app worker
- * @class Neo.manager.Store
- * @extends Neo.manager.Base
- * @singleton
- */
-class Store extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.manager.Store'
-         * @protected
-         */
-        className: 'Neo.manager.Store',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
-        /**
-         * @member {Object} listeners={}
-         * @protected
-         */
-        listeners: {},
-        /**
-         * @member {Object} remote={app: ['createRandomData', 'filter', 'load', 'sort']}
-         * @protected
-         */
-        remote: {
-            app: ['createRandomData', 'filter', 'load', 'sort']
-        }
-    }
-
-    /**
-     * Dummy method until we have a data package in place
-     * @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
-    }
-
-    /**
-     * @param storeId
-     * @param fieldName
-     * @param value
-     */
-    filter(storeId, fieldName, value) {
-
-    }
-
-    /**
-     * @param storeId
-     * @param params
-     */
-    load(storeId, params) {
-
-    }
-
-    /**
-     * @param storeId
-     * @param fieldName
-     * @param value
-     */
-    sort(storeId, fieldName, value) {
-
-    }
-}
-
-export default Neo.setupClass(Store);