neo.mjs 6.10.4 → 6.10.6

package/apps/{learnneo/view → portal/view/learn}/LivePreview.mjs

@@ -1,18 +1,18 @@
-import Base         from '../../../src/container/Base.mjs';
-import TabContainer from '../../../src/tab/Container.mjs';
-import TextArea     from '../../../src/form/field/TextArea.mjs';
+import Base         from '../../../../src/container/Base.mjs';
+import TabContainer from '../../../../src/tab/Container.mjs';
+import TextArea     from '../../../../src/form/field/TextArea.mjs';
 
 /**
- * @class LearnNeo.view.LivePreview
+ * @class Portal.view.learn.LivePreview
  * @extends Neo.container.Base
  */
 class LivePreview extends Base {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.LivePreview'
+         * @member {String} className='Portal.view.learn.LivePreview'
          * @protected
          */
-        className: 'LearnNeo.view.LivePreview',
+        className: 'Portal.view.learn.LivePreview',
         value_: null,
         autoMount: true,
         autoRender: true,

package/apps/{learnneo/view/home → portal/view/learn}/MainContainer.mjs

@@ -1,22 +1,21 @@
 import Container               from '../../../../src/container/Base.mjs';
 import ContentView             from './ContentView.mjs';
 import ContentTreeList         from './ContentTreeList.mjs';
-import HeaderToolbar           from './HeaderToolbar.mjs';
 import MainContainerController from './MainContainerController.mjs';
 import MainContainerModel      from './MainContainerModel.mjs';
 import Splitter                from '../../../../src/component/Splitter.mjs';
 
 /**
- * @class LearnNeo.view.home.MainContainer
+ * @class Portal.view.learn.MainContainer
  * @extends Neo.container.Base
  */
 class MainContainer extends Container {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainer'
+         * @member {String} className='Portal.view.learn.MainContainer'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainer',
+        className: 'Portal.view.learn.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
@@ -29,38 +28,35 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module: HeaderToolbar
-        }, {
-            module: Container,
-            layout: {ntype: 'hbox', align: 'stretch'},
-
+            module  : Container,
+            layout  : 'fit',
+            minWidth: 350,
+            width   : 350,
+            cls     : 'sidenav-container',
             items: [{
-                module  : Container,
-                layout  : 'fit',
-                minWidth: 350,
-                width   : 350,
-                cls     : 'sidenav-container',
-                items: [{
-                    module   : ContentTreeList,
-                    reference: 'tree',
-                    listeners: {
-                        contentChange: 'onContentChange',
-                    }
-                }]
-            }, {
-                module      : Splitter,
-                cls         : ['main-content-splitter'],
-                resizeTarget: 'previous',
-                size        : 4
-            }, {
-                module   : ContentView,
-                reference: 'content',
+                module   : ContentTreeList,
+                reference: 'tree',
                 listeners: {
-                    edit   : 'onContentEdit',
-                    refresh: 'onContentRefresh'
+                    contentChange: 'onContentChange',
                 }
             }]
+        }, {
+            module      : Splitter,
+            cls         : ['main-content-splitter'],
+            resizeTarget: 'previous',
+            size        : 4
+        }, {
+            module   : ContentView,
+            reference: 'content',
+            listeners: {
+                edit   : 'onContentEdit',
+                refresh: 'onContentRefresh'
+            }
         }],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Neo.model.Component} model=MainContainerModel
          */

package/apps/{learnneo/view/home → portal/view/learn}/MainContainerController.mjs

@@ -1,16 +1,16 @@
 import Controller from '../../../../src/controller/Component.mjs';
 
 /**
- * @class LearnNeo.view.home.MainContainerController
+ * @class Portal.view.learn.MainContainerController
  * @extends Neo.controller.Component
  */
 class MainContainerController extends Controller {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainerController'
+         * @member {String} className='Portal.view.learn.MainContainerController'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainerController'
+        className: 'Portal.view.learn.MainContainerController'
     }
 
     /**

package/apps/{learnneo/view/home → portal/view/learn}/MainContainerModel.mjs

@@ -2,16 +2,16 @@ import Component from '../../../../src/model/Component.mjs';
 import Store     from '../../store/Content.mjs';
 
 /**
- * @class LearnNeo.view.home.MainContainerModel
+ * @class Portal.view.learn.MainContainerModel
  * @extends Neo.model.Component
  */
 class MainContainerModel extends Component {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainerModel'
+         * @member {String} className='Portal.view.learn.MainContainerModel'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainerModel',
+        className: 'Portal.view.learn.MainContainerModel',
         /**
          * @member {Object} data
          */

package/apps/website/Overwrites.mjs

@@ -0,0 +1,16 @@
+Neo.overwrites = {
+    Neo: {
+        form: {
+            field: {
+                Base: {
+                    delayable: {
+                        fireChangeEvent    : null,
+                        fireUserChangeEvent: null
+                    }
+                }
+            }
+        }
+    }
+}
+
+export default Neo.overwrites;

package/apps/website/app.mjs

@@ -1,6 +1,7 @@
+import Overwrites    from './Overwrites.mjs';
 import MainContainer from './view/MainContainer.mjs';
 
 export const onStart = () => Neo.app({
     mainView: MainContainer,
     name    : 'Website'
-});
+})

package/apps/website/view/blog/List.mjs

@@ -125,7 +125,7 @@ class List extends BaseList {
             valueRegEx = new RegExp(data.value, 'gi'),
             hasMatch, itemName, name, record;
 
-        me.vdom.cn.forEach((item, index) => {
+        me.getVdomRoot().cn.forEach((item, index) => {
             hasMatch = false;
             itemName = VDomUtil.getByFlag(item, 'name');
             record   = store.getAt(index);

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -99,7 +99,9 @@ export default env => {
         createStartingPoint(key.substr(1), 'apps');
     });
 
-    createStartingPoint('Docs', '');
+    if (fs.existsSync(path.join(cwd, 'docs'))) {
+        createStartingPoint('Docs', '');
+    }
 
     examplesPath = path.join(cwd, 'examples');
 

package/buildScripts/webpack/json/myApps.template.json

@@ -4,7 +4,7 @@
         "Docs",
         "Form",
         "Krausest",
-        "NewWebsite",
+        "Portal",
         "RealWorld",
         "RealWorld2",
         "SharedCovid",

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -108,7 +108,9 @@ export default env => {
         createStartingPoint(key.substr(1), 'apps');
     });
 
-    createStartingPoint('Docs', '');
+    if (fs.existsSync(path.join(cwd, 'docs'))) {
+        createStartingPoint('Docs', '');
+    }
 
     examplesPath = path.join(cwd, 'examples');
 

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.4'
+         * @member {String} version='6.10.6'
          */
-        version: '6.10.4'
+        version: '6.10.6'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.4",
+    "version": "6.10.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,7 +54,7 @@
         "inquirer": "^9.2.12",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.32",
         "sass": "^1.69.5",
         "siesta-lite": "5.5.2",
         "showdown": "^2.1.0",

package/resources/examples/data/formSideNav.json

@@ -2,24 +2,24 @@
     "success": true,
 
     "data": [
-        {"id":  1, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "1. Basic data"},
-        {"id":  2, "cardIndex":    0, "isHeader": false, "isValid": null, "name": "Page 1"},
-        {"id":  3, "cardIndex":    1, "isHeader": false, "isValid": null, "name": "Page 2"},
-        {"id":  4, "cardIndex":    2, "isHeader": false, "isValid": null, "name": "Page 3"},
-        {"id":  5, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "2. Personal data"},
-        {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "CheckBoxes"},
-        {"id":  7, "cardIndex":    4, "isHeader": false, "isValid": null, "name": "Radios"},
-        {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "TextAreas"},
-        {"id":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Fieldsets"},
-        {"id": 10, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. More data"},
-        {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "NumberFields"},
-        {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "HiddenFields"},
-        {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "SelectFields"},
-        {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "4. Optional data"},
-        {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "ZipCodeFields"},
-        {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "EmailFields"},
-        {"id": 17, "cardIndex":   12, "isHeader": false, "isValid": null, "name": "UrlFields"},
-        {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "PhoneFields"},
-        {"id": 19, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "CurrencyFields"}
+        {"id":  1, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "1. Basic data"},
+        {"id":  2, "cardIndex":    0, "formState": "clean", "isHeader": false, "name": "Page 1"},
+        {"id":  3, "cardIndex":    1, "formState": "clean", "isHeader": false, "name": "Page 2"},
+        {"id":  4, "cardIndex":    2, "formState": "clean", "isHeader": false, "name": "Page 3"},
+        {"id":  5, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "2. Personal data"},
+        {"id":  6, "cardIndex":    3, "formState": "clean", "isHeader": false, "name": "CheckBoxes"},
+        {"id":  7, "cardIndex":    4, "formState": "clean", "isHeader": false, "name": "Radios"},
+        {"id":  8, "cardIndex":    5, "formState": "clean", "isHeader": false, "name": "TextAreas"},
+        {"id":  9, "cardIndex":    6, "formState": "clean", "isHeader": false, "name": "Fieldsets"},
+        {"id": 10, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "3. More data"},
+        {"id": 11, "cardIndex":    7, "formState": "clean", "isHeader": false, "name": "NumberFields"},
+        {"id": 12, "cardIndex":    8, "formState": "clean", "isHeader": false, "name": "HiddenFields"},
+        {"id": 13, "cardIndex":    9, "formState": "clean", "isHeader": false, "name": "SelectFields"},
+        {"id": 14, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "4. Optional data"},
+        {"id": 15, "cardIndex":   10, "formState": "clean", "isHeader": false, "name": "ZipCodeFields"},
+        {"id": 16, "cardIndex":   11, "formState": "clean", "isHeader": false, "name": "EmailFields"},
+        {"id": 17, "cardIndex":   12, "formState": "clean", "isHeader": false, "name": "UrlFields"},
+        {"id": 18, "cardIndex":   13, "formState": "clean", "isHeader": false, "name": "PhoneFields"},
+        {"id": 19, "cardIndex":   14, "formState": "clean", "isHeader": false, "name": "CurrencyFields"}
     ]
 }

package/resources/scss/src/apps/portal/blog/Container.scss

@@ -0,0 +1,18 @@
+.website-blog-container {
+    .website-blog-searchfield {
+        transition: margin var(--website-transition-duration) ease-out;
+        width     : 240px;
+
+        @media (max-height: 400px), (max-width: 600px) {
+            margin: 5px;
+        }
+
+        @media (min-height: 401px) and (min-width: 601px) {
+            margin: 10px;
+        }
+    }
+
+    .website-blog-toolbar {
+        background-color: var(--website-blog-toolbar-background-color);
+    }
+}

package/resources/scss/src/apps/portal/blog/List.scss

@@ -0,0 +1,183 @@
+.website-blog-list.neo-list {
+    transition: padding var(--website-transition-duration) ease-out;
+
+    .neo-list-item {
+        cursor     : default;
+        display    : flex;
+        max-width  : 800px;
+        overflow   : hidden;
+        padding    : 0;
+        transition : height var(--website-transition-duration) ease-out, margin-bottom var(--website-transition-duration) ease-out;
+        white-space: normal;
+        width      : 100%;
+
+        .content {
+            flex: 1;
+        }
+
+        .neo-absolute {
+            position: absolute;
+        }
+
+        .neo-bold {
+            font-weight: 600;
+        }
+
+        .neo-highlight-search {
+            color: #5d83a7;
+        }
+
+        .neo-inner-content {
+            color      : #fff;
+            display    : inline-block;
+            margin-left: 10px;
+            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition : font-size var(--website-transition-duration) ease-out;
+        }
+
+        .neo-full-size {
+            height: 100%;
+            width : 100%;
+        }
+
+        .neo-inner-details {
+            transition: line-height var(--website-transition-duration) ease-out;
+        }
+
+        .neo-item-bottom-position {
+            bottom    : 0;
+            left      : 0;
+            transition: margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-item-top-position {
+            color      : #fff;
+            right      : 0;
+            text-align : end;
+            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition : font-size var(--website-transition-duration) ease-out, margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-relative {
+            position: relative;
+        }
+
+        .neo-title {
+            color          : #fff;
+            font-weight    : 600;
+            line-height    : 1;
+            text-decoration: none;
+            text-shadow    : 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition     : color 250ms ease-out;
+
+            &:hover {
+                color: #5d83a7
+            }
+        }
+
+        .neo-top-20 {
+            align-items: center;
+            display    : flex;
+            transition : margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-user-image {
+            border-radius: 50%;
+            display      : inline-block;
+            transition   : height var(--website-transition-duration) ease-out, width var(--website-transition-duration) ease-out;
+        }
+
+        .preview-image {
+            background-blend-mode: overlay;
+            background-position  : 50% 50%;
+            background-size      : cover;
+            height               : 100%;
+        }
+    }
+
+    @media (max-height: 400px), (max-width: 600px) {
+        padding: 5px 5px 0 5px;
+
+        .neo-inner-content {
+            font-size: 12px;
+        }
+
+        .neo-inner-details {
+            line-height: 16px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 9px 12px;
+            right : 15%;
+        }
+
+        .neo-item-top-position {
+            font-size: 12px;
+            left     : 15%;
+            margin   : 9px 12px;
+            top      : -200px;
+        }
+
+        .neo-list-item {
+            border-radius: 10px;
+            height       : 200px;
+            margin-bottom: 5px;
+        }
+
+        .neo-title {
+            font-size: 20px;
+        }
+
+        .neo-top-20 {
+            margin-top: 15px;
+        }
+
+        .neo-user-image {
+            height: 30px;
+            width : 30px;
+        }
+    }
+
+    @media (min-height: 401px) and (min-width: 601px) {
+        padding: 10px 10px 0 10px;
+
+        .neo-inner-content {
+            font-size: 16px;
+        }
+
+        .neo-inner-details {
+            line-height: 22px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 30px 40px;
+            right : 30%;
+        }
+
+        .neo-item-top-position {
+            font-size: 16px;
+            left     : 30%;
+            margin   : 30px 40px;
+            top      : -400px;
+        }
+
+        .neo-list-item {
+            border-radius: 20px;
+            height       : 400px;
+            margin-bottom: 10px;
+        }
+
+        .neo-title {
+            font-size: 34px;
+        }
+
+        .neo-top-20 {
+            margin-top: 20px;
+        }
+
+        .neo-user-image {
+            height: 44px;
+            width : 44px;
+        }
+    }
+}

package/resources/scss/src/apps/{newwebsite/Viewport.scss → portal/home/MainContainer.scss}

@@ -19,7 +19,7 @@
 }
 
 .vector {
-    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
+    background-image   : url("../../../../../../../resources/images/Neo_Vector.svg");
     background-position: center center;
     background-repeat  : no-repeat;
     background-size    : contain;

package/resources/scss/src/tab/Strip.scss

@@ -2,6 +2,7 @@
     background-color: var(--tab-strip-background-color);
     height          : var(--tab-strip-height);
     overflow        : hidden;
+    position        : relative;
 
     .neo-active-tab-indicator {
         background-color   : var(--tab-indicator-background-color-active);

package/resources/scss/theme-neo-light/button/Base.scss

@@ -4,7 +4,6 @@ $border-color    : #ddd;
 $border-style    : solid;
 $border-width    : 1px;
 
-
 :root .neo-theme-neo-light { // .neo-button
     --button-background-color                   : var(--cmp-button-primary-bg-default);
     --button-background-color-active            : var(--cmp-button-primary-bg-active);
@@ -115,8 +114,9 @@ $border-width    : 1px;
     --button-tertiary-text-color-active         : var(--button-text-color);
     --button-tertiary-text-color-disabled       : inherit;
     --button-tertiary-text-color-hover          : var(--button-text-color);
-}
 
-.neo-button {
-    min-width: var(--cmp-button-height);
-}
+    // custom overrides
+    .neo-button {
+        min-width: var(--cmp-button-height);
+    }
+}

package/resources/scss/theme-neo-light/tab/header/Button.scss

@@ -27,15 +27,16 @@
     --tab-button-padding                        : 7px var(--cmp-tab-spacinghorizontal) 6px;
     --tab-button-text-color                     : var(--sem-color-fg-neutral-subdued);
     --tab-button-text-transform                 : uppercase;
-}
 
-.neo-button-text {
-    font-size: var(--sem-typo-label-regular-fontSize) !important;
-}
+    // custom overrides
+    .neo-button-text {
+        font-size: var(--sem-typo-label-regular-fontSize) !important;
+    }
 
-.pressed {
-    .neo-button-glyph, .neo-button-text {
-        color: var(--sem-color-fg-neutral-contrast) !important;
+    .pressed {
+        .neo-button-glyph, .neo-button-text {
+            color: var(--sem-color-fg-neutral-contrast) !important;
+        }
     }
 }
 

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -335,6 +335,11 @@ class Base extends CoreBase {
          * @member {Number|String|null} width_=null
          */
         width_: null,
+        /**
+         * The custom windowIs (timestamp) this component belongs to
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null,
         /**
          * @member {String[]|null} wrapperCls_=null
          */

package/src/component/Toast.mjs

@@ -56,6 +56,10 @@ class Toast extends Base {
          * @member {Boolean} closable=false
          */
         closable_: false,
+        /**
+         * @member {Boolean} floating=true
+         */
+        floating: true,
         /**
          * If set, it shows this icon in front of the text
          * e.g. 'fa fa-cog'
@@ -107,8 +111,7 @@ class Toast extends Base {
                 ]},
                 {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
             ]
-        }]},
-        floating : true
+        }]}
     }
 
     /**

package/src/container/Base.mjs

@@ -217,6 +217,20 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && this.items?.forEach(item => {
+            if (Neo.isObject(item)) {
+                item.windowId = value
+            }
+        })
+    }
+
     /**
      * Convert items object to an array for onward storage as _items
      * @param {Object|Object[]} value

package/src/controller/Application.mjs

@@ -107,7 +107,8 @@ class Application extends Base {
         if (value) {
             return ClassSystemUtil.beforeSetInstance(value, null, {
                 appName : this.name,
-                parentId: this.parentId
+                parentId: this.parentId,
+                windowId: Neo.config.windowId
             })
         }