neo.mjs 6.18.3 → 6.19.0

package/resources/data/deck/learnneo/tree.json

@@ -18,7 +18,8 @@
         {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
     {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials",  "collapsed":  true},
         {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
-        {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes"},
+        {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes", "collapsed":  true},
+
         {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
     {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},

package/resources/scss/src/apps/portal/Viewport.scss

@@ -0,0 +1,18 @@
+.neo-viewport {
+    .neo-layout-cube {
+        &.neo-animate {
+            .neo-box {
+                transition: transform 800ms ease-in-out;
+            }
+        }
+
+        .neo-face {
+            opacity: 0.8;
+            transition: opacity 50ms ease-out;
+        }
+
+        .neo-plane {
+            transform: translateZ(0px);
+        }
+    }
+}

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

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

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

@@ -1,15 +1,17 @@
-.website-blog-list.neo-list {
-    transition: padding var(--website-transition-duration) ease-out;
+.portal-blog-list.neo-list {
+    transition: padding var(--portal-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%;
+        cursor      : default;
+        display     : flex;
+        margin-left : auto;
+        margin-right: auto;
+        max-width   : 800px;
+        overflow    : hidden;
+        padding     : 0;
+        transition  : height var(--portal-transition-duration) ease-out, margin-bottom var(--portal-transition-duration) ease-out;
+        white-space : normal;
+        width       : 100%;
 
         .content {
             flex: 1;
@@ -32,7 +34,7 @@
             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;
+            transition : font-size var(--portal-transition-duration) ease-out;
         }
 
         .neo-full-size {
@@ -41,13 +43,13 @@
         }
 
         .neo-inner-details {
-            transition: line-height var(--website-transition-duration) ease-out;
+            transition: line-height var(--portal-transition-duration) ease-out;
         }
 
         .neo-item-bottom-position {
             bottom    : 0;
             left      : 0;
-            transition: margin var(--website-transition-duration) ease-out;
+            transition: margin var(--portal-transition-duration) ease-out;
         }
 
         .neo-item-top-position {
@@ -55,11 +57,13 @@
             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;
+            transition : font-size var(--portal-transition-duration) ease-out, margin var(--portal-transition-duration) ease-out;
         }
 
         .neo-relative {
+            height  : 100%;
             position: relative;
+            width   : 100%;
         }
 
         .neo-title {
@@ -78,13 +82,13 @@
         .neo-top-20 {
             align-items: center;
             display    : flex;
-            transition : margin var(--website-transition-duration) ease-out;
+            transition : margin var(--portal-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;
+            transition   : height var(--portal-transition-duration) ease-out, width var(--portal-transition-duration) ease-out;
         }
 
         .preview-image {

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/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/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.3'
+     * @default '6.19.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.18.3'
+    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/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;

package/src/container/Base.mjs

@@ -149,7 +149,9 @@ class Base extends Component {
             me.items.forEach((item, index) => {
                 oldValue?.removeChildAttributes(item, index);
                 value.applyChildAttributes(item, index)
-            })
+            });
+
+            oldValue?.destroy()
         }
     }
 

package/src/dialog/Base.mjs

@@ -363,12 +363,11 @@ class Base extends Panel {
         await me.render(true);
 
         let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
-        console.log(dialogRect, bodyRect);
 
         // Move to cover the animation target
         await Neo.applyDeltas(appName, {
             id,
-            style : {
+            style: {
                 height: `${rect.height}px`,
                 left  : `${rect.left  }px`,
                 top   : `${rect.top   }px`,