neo.mjs 6.18.2 → 6.19.0

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

@@ -2,6 +2,39 @@
     min-height       : 100%;
     scroll-snap-align: center;
 
+    @keyframes appear-left {
+        0%   {opacity: 0; transform: translateX(-400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    @keyframes appear-right {
+        0%   {opacity: 0; transform: translateX(400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    &:not(:first-child) {
+        &:not(:last-child) {
+            animation-timeline       : view(block 100% -500%);
+            animation-fill-mode      : both;
+            animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+            animation-timing-function: linear;
+
+            &:nth-child(even) {
+                animation-name: appear-right;
+            }
+
+            &:nth-child(odd) {
+                animation-name: appear-left;
+            }
+        }
+    }
+
+    .neo-content {
+        font-size: min(max(2.3vw, 16px), 30px);
+    }
+
     .neo-h1 {
         font-size  : min(max(5.5vw, 30px), 64px);
         text-align : center;
@@ -17,10 +50,6 @@
         line-height: 1em;
     }
 
-    .neo-content {
-        font-size: min(max(2.3vw, 16px), 30px);
-    }
-
     .page-live-preview {
         margin: 0;
     }

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

@@ -2,13 +2,13 @@
     padding: 3em;
 
     .button-group {
-        display       : flex !important;
-        flex-direction: row-reverse !important;
-        gap           : 8px !important;
+        display       : flex;
+        flex-direction: row-reverse;
+        gap           : 8px;
     }
 
     .neo-h1 {
-        margin-bottom: 1.25em;
+        margin: 3rem;
     }
 
     .vector {
@@ -17,7 +17,6 @@
         background-repeat  : no-repeat;
         background-size    : contain;
         height             : 10vW;
-        margin             : 0 0 3rem 0;
         max-height         : 130px;
         width              : 100%;
     }

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

@@ -0,0 +1,46 @@
+.portal-references {
+  user-select: none;
+
+  .neo-carousel {
+    width: 90%;
+    height: 350px;
+    margin: 0 auto;
+
+    .neo-carousel-inner {
+      border-radius: 15px;
+      border: 1px solid var(--sem-color-fg-neutral-contrast);
+      color: var(--sem-color-fg-neutral-contrast);
+
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 90px;
+        z-index: 11;
+        background: {
+          color: var(--toolbar-background-color);
+          image: url('../../../../../../../../resources/images/apps/portal/neo-references.png');
+          position: center;
+          repeat: no-repeat;
+          size: 70% auto;
+        }
+      }
+
+      .neo-carousel-item {
+        padding-left: 110px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        .neo-details {
+          margin-top: 1em;
+          font-weight: 700;
+          font-style: italic;
+        }
+      }
+    }
+  }
+}

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

@@ -6,6 +6,26 @@
     background-color: white;
     padding         : 8px 2px 8px 8px;
 
+    &.neo-tree-list {
+        .neo-list-container {
+            .neo-list-item {
+                .neo-list-item-content:before {
+                    content: unset !important;
+                }
+
+                &.neo-list-folder {
+                    .neo-list-item-content:before {
+                        content: unset !important;
+                    }
+
+                    &.neo-folder-open .neo-list-item-content:before {
+                        content: unset !important;
+                    }
+                }
+            }
+        }
+    }
+
     .neo-list-container {
         padding: 3px;
     }

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

@@ -18,6 +18,10 @@
         margin: 0.5em 0 0.7em 0;
     }
 
+    details {
+        margin: 1em 0 1em 0;
+    }
+
     details summary {
         cursor    : pointer;
         transition: margin 300ms ease-out;

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

@@ -1,4 +1,4 @@
-.learnneo-maincontainer {
+.portal-learn-maincontainer {
     background-color: #f2f2f2;
 
     .main-content-splitter {

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

@@ -1,11 +1,12 @@
-.learn-content-container {
+.portal-learn-page-container {
     overflow: auto;
 
     .content-bottom-toolbar {
-        gap          : 8px;
-        padding      : 0 3rem;
-        margin-bottom: 3rem;
-        margin-top   : 3rem;
+        gap                  : 8px;
+        grid-template-columns: repeat(2, 1fr);
+        margin-bottom        : 3rem;
+        margin-top           : 3rem;
+        padding              : 0 3rem;
 
         .neo-button {
             flex           : 1 !important;
@@ -18,18 +19,23 @@
         }
 
         .content-bottom-toolbar-previous:before {
-            content         : 'Previous Page';
-            font-family     : var(--core-fontfamily-sans);
-            position        : absolute;
-            top             : var(--cmp-button-spacinghorizontal);
-            left            : var(--cmp-button-spacinghorizontal);
+            content    : 'Previous Page';
+            font-family: var(--core-fontfamily-sans);
+            left       : var(--cmp-button-spacinghorizontal);
+            position   : absolute;
+            top        : var(--cmp-button-spacinghorizontal);
         }
-        .content-bottom-toolbar-next:before {
-            content         : 'Next Page';
-            font-family     : var(--core-fontfamily-sans);
-            position        : absolute;
-            top             : var(--cmp-button-spacinghorizontal);
-            right            : var(--cmp-button-spacinghorizontal);
+
+        .content-bottom-toolbar-next {
+            grid-column: 2/3;
+
+            &:before {
+                content    : 'Next Page';
+                font-family: var(--core-fontfamily-sans);
+                position   : absolute;
+                right      : var(--cmp-button-spacinghorizontal);
+                top        : var(--cmp-button-spacinghorizontal);
+            }
         }
     }
 }

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

@@ -0,0 +1,20 @@
+.portal-services-component {
+    background-color: #fff !important;
+    padding         : 1em 6em;
+
+    .info-block {
+        background-color: lighten(#8BA6FF, 10%);
+        border-radius   : 10px;
+        margin-left     : auto;
+        margin-right    : auto;
+        margin-top      : 2em;
+        max-width       : 800px;
+        padding         : 0.5em 3em 1em 3em;
+    }
+
+    h1 {
+        margin-left : auto;
+        margin-right: auto;
+        width       : fit-content;
+    }
+}

package/resources/scss/src/{apps/portal/learn → code}/LivePreview.scss

@@ -1,4 +1,4 @@
-.learn-live-preview {
+.neo-code-live-preview {
     margin-bottom: 2em;
 
     .live-preview-container {

package/resources/scss/src/component/Carousel.scss

@@ -68,9 +68,30 @@
         height          : 9rem;
         overflow        : hidden;
 
+        &:before {
+            content: '';
+            position: absolute;
+            background: linear-gradient(90deg, var(--button-text-color-active) 0%, var(--button-text-color-active) 50%, rgba(0, 0, 0, 0) 100%);
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 30px;
+            z-index: 11;
+        }
+        &:after {
+            content: '';
+            position: absolute;
+            background: linear-gradient(270deg, var(--button-text-color-active) 0%, var(--button-text-color-active) 50%, rgba(0, 0, 0, 0) 100%);
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 30px;
+            z-index: 11;
+        }
         .neo-carousel-item {
             height : 9rem;
             padding: 15px;
+            text-align: center;
         }
     }
 }

package/resources/scss/src/component/Helix.scss

@@ -4,7 +4,6 @@
     display         : flex;
     font-family     : var(--neo-font-family);
     margin          : 0;
-    overflow        : hidden;
     padding         : 0;
     perspective     : 800px;
     transform       : translateZ(0px);
@@ -65,7 +64,7 @@
         height             : 160px;
         overflow           : hidden;
         width              : 120px;
-        will-change        : transform;
+        will-change        : auto;
 
         &:focus {
             outline: 0;

package/resources/scss/src/examples/layout/cube/MainContainer.scss

@@ -0,0 +1,7 @@
+.examples-layout-cube-maincontainer {
+    .neo-face {
+        align-items    : center;
+        display        : flex;
+        justify-content: center;
+    }
+}

package/resources/scss/src/layout/Cube.scss

@@ -0,0 +1,80 @@
+/*
+ * Container Structure:
+ *    div.neo-layout-cube
+ *        div.neo-plane
+ *            div.neo-box
+ *                div.neo-face.neo-face-z.front
+ *                div.neo-face.neo-face-z.back
+ *                div.neo-face.neo-face-x.left
+ *                div.neo-face.neo-face-x.right
+ *                div.neo-face.neo-face-y.top
+ *                div.neo-face.neo-face-y.bottom
+ */
+.neo-layout-cube {
+    --backface-visibility: visible;
+    --perspective        : 600px;
+
+    --rot-x: 0deg;
+    --rot-y: 0deg;
+    --rot-z: 0deg;
+
+    --side-x: 300px; /* horizontal */
+    --side-y: 300px; /* vertical */
+    --side-z: 300px; /* depth */
+
+    background-color  : transparent;
+    height            : var(--side-y);
+    overflow          : visible;
+    perspective       : var(--perspective);
+    perspective-origin: center center;
+    width             : var(--side-x);
+
+    .neo-plane {
+        transform      : translateZ(calc(var(--side-z) / -2));
+        transform-style: preserve-3d;
+    }
+
+    .neo-box {
+        height          : var(--side-y);
+        position        : relative;
+        transform       : rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));
+        transform-style : preserve-3d;
+        transform-origin: center center;
+        translate       : 0 0 calc(var(--side-z) / -2);
+        width           : var(--side-x);
+    }
+
+    &.neo-animate {
+        .neo-box {
+            transition: transform 300ms ease-out;
+        }
+    }
+
+    .neo-face {
+        backface-visibility: var(--backface-visibility);
+        background         : center/cover no-repeat;
+        position           : absolute;
+
+        &.front  {transform: rotateY(  0deg) translateZ(calc(var(--side-z) / 2));}
+        &.back   {transform: rotateY(180deg) translateZ(calc(var(--side-z) / 2));}
+        &.left   {transform: rotateY(-90deg) translateZ(calc(var(--side-z) / 2));}
+        &.right  {transform: rotateY( 90deg) translateZ(calc(var(--side-x) - var(--side-z) / 2));}
+        &.top    {transform: rotateX( 90deg) translateZ(calc(var(--side-z) / 2));}
+        &.bottom {transform: rotateX(-90deg) translateZ(calc(var(--side-y) - var(--side-z) / 2));}
+    }
+
+    .neo-face-x {
+        height: var(--side-y);
+        width : var(--side-z);
+    }
+
+    .neo-face-y {
+        height: var(--side-z);
+        width : var(--side-x);
+    }
+
+    .neo-face-z {
+        height: var(--side-y);
+        width : var(--side-x);
+    }
+}

package/resources/scss/src/tab/Container.scss

@@ -22,18 +22,18 @@
             border-top: 0;
         }
     }
-}
 
-.neo-tab-container-plain {
+    &.neo-tab-container-plain {
 
-}
+    }
 
-.neo-tab-content-container {
-    border  : var(--tab-container-content-border);
-    overflow: hidden;
-}
+    .neo-tab-content-container {
+        border  : var(--tab-container-content-border);
+        overflow: hidden;
+    }
 
-.neo-tab-header-toolbar {
-    background-color: transparent;
-    padding         : 0;
+    .neo-tab-header-toolbar {
+        background-color: transparent;
+        padding         : 0;
+    }
 }

package/resources/scss/theme-neo-light/apps/portal/blog/Container.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .portal-blog-container
+    --portal-blog-toolbar-background-color: #8BA6FF;
+}

package/resources/scss/theme-neo-light/form/field/Search.scss

@@ -1,3 +1,3 @@
 :root .neo-theme-neo-light { // .neo-searchfield
-    --searchfield-glyph-color: #1c60a0;
+    --searchfield-glyph-color: #3E63DD;
 }

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

@@ -1,6 +1,6 @@
 :root .neo-theme-neo-light { // .neo-tooltip
     // --tooltip-bg            : var(--cmp-tooltip-bg);
-    --tooltip-bg            : red;
+    --tooltip-bg            : #3E63DD;
     --tooltip-border        : none;
     --tooltip-borderradius  : var(--cmp-tooltip-borderradius);
     --tooltip-boxshadow     : none;

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -56,6 +56,7 @@ class Main extends core.Base {
                 'setNeoConfig',
                 'setRoute',
                 'windowClose',
+                'windowCloseAll',
                 'windowMoveTo',
                 'windowOpen',
                 'windowResizeTo'
@@ -471,7 +472,7 @@ class Main extends core.Base {
     /**
      * Closes popup windows
      * @param {Object} data
-     * @param {Array|String} data.names
+     * @param {String|String[]} data.names
      */
     windowClose(data) {
         if (!Array.isArray(data.names)) {
@@ -484,6 +485,19 @@ class Main extends core.Base {
         })
     }
 
+    /**
+     * Closes all popup windows
+     * @param {Object} data
+     */
+    windowCloseAll(data) {
+        Object.values(this.openWindows).forEach(value => {
+            console.log(value);
+            value.close()
+        });
+
+        this.openWindows = {}
+    }
+
     /**
      * Move a popup window
      * @param {Object} data

package/src/Neo.mjs

@@ -430,7 +430,7 @@ Neo = globalThis.Neo = Object.assign({
             {ntypeMap} = Neo,
             proto      = cls.prototype || cls,
             protos     = [],
-            cfg, config, ctor, ntype;
+            cfg, config, ctor, ns, ntype;
 
         while (proto.__proto__) {
             ctor = proto.constructor;
@@ -531,8 +531,19 @@ Neo = globalThis.Neo = Object.assign({
         });
 
         if (proto.singleton) {
-            cls = Neo.create(cls);
-            Neo.applyToGlobalNs(cls)
+            ns = Neo.ns(proto.className);
+
+            // Only create new singleton instances, in case the namespace is not in use. Using multiple neo versions
+            // will cause issues otherwise (e.g. combining dist/production & development). Example: code.LivePreview.
+            if (!ns) {
+                cls = Neo.create(cls);
+                Neo.applyToGlobalNs(cls)
+            }
+            // If the singleton already exists, just return this version instead.
+            // This enables us to still use it with default import statements.
+            else {
+                return ns
+            }
         }
 
         return cls

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

@@ -1,6 +1,6 @@
-import Container    from '../../../../src/container/Base.mjs';
-import MonacoEditor from '../../../../src/component/wrapper/MonacoEditor.mjs'
-import TabContainer from '../../../../src/tab/Container.mjs';
+import Container    from '../container/Base.mjs';
+import MonacoEditor from '../component/wrapper/MonacoEditor.mjs'
+import TabContainer from '../tab/Container.mjs';
 
 const
     classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
@@ -8,7 +8,7 @@ const
     importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
 
 /**
- * @class Portal.view.learn.LivePreview
+ * @class Neo.code.LivePreview
  * @extends Neo.container.Base
  */
 class LivePreview extends Container {
@@ -22,10 +22,10 @@ class LivePreview extends Container {
 
     static config = {
         /**
-         * @member {String} className='Portal.view.learn.LivePreview'
+         * @member {String} className='Neo.code.LivePreview'
          * @protected
          */
-        className: 'Portal.view.learn.LivePreview',
+        className: 'Neo.code.LivePreview',
         /**
          * @member {String} ntype='live-preview'
          * @protected
@@ -36,14 +36,22 @@ class LivePreview extends Container {
          * @member {String} activeView_='source'
          */
         activeView_: 'source',
-
-        baseCls         : ['learn-live-preview'],
-        value_          : null,
-        autoMount       : true,
-        autoRender      : true,
+        /**
+         * @member {String[]} baseCls=['neo-code-live-preview']
+         */
+        baseCls: ['neo-code-live-preview'],
+        /**
+         * @member {Boolean} disableRunSource=false
+         */
         disableRunSource: false,
-        height          : 400,
-        layout          : 'fit',
+        /**
+         * @member {Number} height=400
+         */
+        height: 400,
+        /**
+         * @member {Object|String} layout='fit'
+         */
+        layout: 'fit',
         /**
          * @member {Object[]} items
          */
@@ -56,27 +64,21 @@ class LivePreview extends Container {
             items: [{
                 module         : MonacoEditor,
                 hideLabel      : true,
+                listeners      : {editorChange: 'up.onEditorChange'},
                 style          : {height: '100%'},
                 reference      : 'editor',
-                tabButtonConfig: {
-                    text: 'Source'
-                },
-                listeners      : {
-                    editorChange: data => {
-                        let container         = data.component.up({className: 'Portal.view.learn.LivePreview'});
-                        container.editorValue = data.value;
-
-                        if (container.previewContainer) {
-                            container.doRunSource()
-                        }
-                    }
-                }
+                tabButtonConfig: {text: 'Source'}
             }, {
                 module         : Container,
                 reference      : 'preview',
                 tabButtonConfig: {text: 'Preview'}
             }]
-        }]
+        }],
+        /**
+         * The code to display inside the Monaco editor
+         * @member {String|null} value_=null
+         */
+        value_: null,
     }
 
     /**
@@ -300,6 +302,20 @@ class LivePreview extends Container {
         me.activeView === 'preview' && me.doRunSource()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onEditorChange(data) {
+        let me = this;
+
+        me.editorValue = data.value;
+
+        // We are not using getPreviewContainer(), since we only want to update the LivePreview in case it is visible.
+        if (me.previewContainer) {
+            me.doRunSource()
+        }
+    }
+
     /**
      * @param {Object} data
      */

package/src/component/Base.mjs

@@ -333,6 +333,13 @@ class Base extends CoreBase {
          * @member {String|null} theme_=null
          */
         theme_: null,
+        /**
+         * While it is recommended to define tags inside the vdom of classes,
+         * this shortcut enables us to change the vdom root tag on instance level.
+         * Use cases: switch a Toolbar to a "nav" tag, switch a SideNav to an "aside" tag.
+         * @member {String|null} tag_=null
+         */
+        tag_: null,
         /**
          * Add tooltip config object or a string containing the display text
          * See tooltip/Base.mjs
@@ -920,6 +927,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the tag config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTag(value, oldValue) {
+        value && this.changeVdomRootKey('tag', value)
+    }
+
     /**
      * Triggered after the theme config got changed
      * @param {String|null} value
@@ -1459,7 +1476,7 @@ class Base extends CoreBase {
         // we can not set the config directly => it could already be false,
         // and we still want to pass it further into subtrees
         me._needsVdomUpdate = false;
-        me.afterSetNeedsVdomUpdate?.(false, true)
+        me.afterSetNeedsVdomUpdate?.(false, true);
 
         Neo.vdom.Helper.update(opts).catch(err => {
             me.isVdomUpdating = false;