neo.mjs 6.18.1 → 6.18.3

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

@@ -0,0 +1,56 @@
+.portal-home-content-view {
+    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;
+        margin     : 0;
+        line-height: 1em;
+    }
+
+    .neo-h2 {
+        font-size  : min(max(3.5vw, 24px), 44px);
+        font-weight: 600;
+        text-align : center;
+        margin     : 0;
+        line-height: 1em;
+    }
+
+    .page-live-preview {
+        margin: 0;
+    }
+}

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

@@ -1,4 +1,6 @@
-.portal-home-main-neo.page {
+.portal-home-main-neo.portal-home-content-view {
+    padding: 3em;
+
     .button-group {
         display       : flex !important;
         flex-direction: row-reverse !important;

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

@@ -7,7 +7,7 @@
     padding         : 8px 2px 8px 8px;
 
     .neo-list-container {
-        padding: 0 3px 3px 3px;
+        padding: 3px;
     }
 
     .neo-list-container>.neo-list-item {

package/resources/scss/src/calendar/view/EditEventContainer.scss

@@ -5,7 +5,7 @@
     padding         : .7em;
     position        : absolute;
     top             : 0;
-    z-index         : 10000;
+    z-index         : 900;
 
     &:before {
         border-bottom: 12px solid transparent;

package/resources/scss/src/calendar/view/calendars/List.scss

@@ -1,4 +1,4 @@
-.neo-calendars-list {
+.neo-calendars-list.neo-list {
     .neo-checkboxfield {
         align-items: center;
         display    : flex;

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/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/dialog/Base.scss

@@ -30,6 +30,7 @@
 
 .neo-dialog {
     border        : 1px solid var(--dialog-border-color);
+    box-shadow    : var(--dialog-box-shadow);
     display       : flex;
     flex-direction: column;
 
@@ -61,12 +62,6 @@
         }
     }
 
-    &.neo-centered {
-        left      : 50%;
-        top       : 50%;
-        transform : translate(-50%, -50%);
-    }
-
     &.neo-panel {
         .neo-footer-toolbar {
             border    : none;

package/resources/scss/theme-dark/dialog/Base.scss

@@ -1,5 +1,6 @@
 :root .neo-theme-dark { // .neo-dialog
     --dialog-border-color: #3c3f41;
+    --dialog-box-shadow  : 0 5px 10px rgba(0,0,0,.4);
     --dialog-header-color: floralwhite;
     --dialog-icon-color  : floralwhite;
 }

package/resources/scss/theme-light/dialog/Base.scss

@@ -1,5 +1,6 @@
 :root .neo-theme-light { // .neo-dialog
     --dialog-border-color: #ddd;
+    --dialog-box-shadow  : 0 5px 10px rgba(0,0,0,.4);
     --dialog-header-color: #1c60a0;
     --dialog-icon-color  : #1c60a0;
 }

package/resources/scss/theme-neo-light/Global.scss

@@ -46,17 +46,19 @@
         font-style: italic;
     }
 
-    code &:not(.hljs) {
-        background-color: #F0F2F0;
-        border          : 1px solid var(--sem-color-border-subtle);
-        border-radius   : 4px;
-        color           : var(--sem-color-fg-neutral-contrast);
-        font-family     : var(--core-fontfamily-mono);
-        font-size       : var(--core-fontsize-body);
-        font-weight     : var(--core-fontweight-regular);
-        line-height     : var(--core-lineheight-headline);
-        padding         : 2px 0.3em;
-        font-size       : 16px;
+    code {
+        &:not(.hljs) {
+            background-color: #F0F2F0;
+            border          : 1px solid var(--sem-color-border-subtle);
+            border-radius   : 4px;
+            color           : var(--sem-color-fg-neutral-contrast);
+            font-family     : var(--core-fontfamily-mono);
+            font-size       : var(--core-fontsize-body);
+            font-weight     : var(--core-fontweight-regular);
+            line-height     : var(--core-lineheight-headline);
+            padding         : 2px 0.3em;
+            font-size       : 16px;
+        }
     }
 
     mark {

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

@@ -1,5 +1,6 @@
 :root .neo-theme-neo-light { // .neo-dialog
     --dialog-border-color: #ddd;
+    --dialog-box-shadow  : 0 5px 10px rgba(0,0,0,.4);
     --dialog-header-color: #1c60a0;
     --dialog-icon-color  : #1c60a0;
 }

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -440,12 +440,13 @@ class Base extends Component {
      * @protected
      */
     changeRoute() {
-        let me = this;
+        let me         = this,
+            {windowId} = me;
 
         if (me.editRoute) {
             Neo.Main.editRoute(me.route)
         } else {
-            Neo.Main.setRoute({value: me.route})
+            Neo.Main.setRoute({value: me.route, windowId})
         }
     }
 

package/src/calendar/view/EditEventContainer.mjs

@@ -239,7 +239,7 @@ class EditEventContainer extends FormContainer {
      */
     onCalendarFieldChange(data) {
         if (!Neo.isEmpty(data.value)) {
-            this.record.calendarId = data.record[data.component.store.keyProperty]
+            this.record.calendarId = data.value[data.component.store.keyProperty]
         }
     }
 

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

@@ -1491,12 +1491,7 @@ class Base extends CoreBase {
      * @param {String} id=this.id
      */
     focus(id=this.id) {
-        Neo.main.DomAccess.focus({
-            id,
-            windowId: this.id
-        }).catch(err => {
-            console.log('Error attempting to receive focus for component', err, this)
-        })
+        Neo.main.DomAccess.focus({id, windowId: this.windowId})
     }
 
     /**

package/src/controller/Base.mjs

@@ -96,15 +96,15 @@ class Base extends CoreBase {
      *
      */
     async onConstructed() {
-        let me            = this,
-            currentHash   = HashHistory.first(),
-            {defaultHash} = me;
+        let me                      = this,
+            {defaultHash, windowId} = me,
+            currentHash             = HashHistory.first(windowId);
 
         // get outside the construction chain => a related cmp & vm has to be constructed too
         await me.timeout(1);
 
         if (currentHash) {
-            if (currentHash.windowId === me.windowId) {
+            if (currentHash.windowId === windowId) {
                 await me.onHashChange(currentHash, null)
             }
         } else {
@@ -113,7 +113,7 @@ class Base extends CoreBase {
              * We only want to set a default route, in case the HashHistory is empty and there is no initial
              * value that will get consumed.
              */
-            !Neo.config.hash && defaultHash && Neo.Main.setRoute({value: defaultHash})
+            !Neo.config.hash && defaultHash && Neo.Main.setRoute({value: defaultHash, windowId})
         }
     }
 

package/src/dialog/Base.mjs

@@ -136,17 +136,10 @@ class Base extends Panel {
         title_: null,
         /**
          * Set to `true` to have tabbing wrap within this Dialog.
-         *
          * Should be used with `modal`.
          * @member {Boolean} trapFocus_=false
          */
-        trapFocus_: false,
-        /**
-         * Set to `true` to have this Dialog centered in the viewport.
-         *
-         * @member {Boolean} centered_=false
-         */
-        centered_: false
+        trapFocus_: false
     }
 
     /**
@@ -154,22 +147,7 @@ class Base extends Panel {
      */
     construct(config) {
         super.construct(config);
-
-        let me      = this,
-            {style} = me;
-
-        me.createHeader();
-
-        if (!me.animateTargetId && !me.centered) {
-            Neo.assignDefaults(style, {
-                left     : '50%',
-                top      : '50%',
-                transform: 'translate(-50%, -50%)',
-                width    : '50%'
-            });
-
-            me.style = style
-        }
+        this.createHeader()
     }
 
     /**
@@ -204,17 +182,6 @@ class Base extends Panel {
         super.afterSetAppName(value, oldValue)
     }
 
-    /**
-     * Triggered after the centered config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetCentered(value, oldValue) {
-        NeoArray.toggle(this.vdom.cls, 'neo-centered', value);
-        this.update();
-    }
-
     /**
      * Triggered after the draggable config got changed
      * @param {Boolean} value
@@ -392,8 +359,12 @@ class Base extends Panel {
             {appName, id, style} = me,
             rect = await me.getDomRect(me.animateTargetId);
 
+        // rendered outside the visible area
         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,
@@ -415,11 +386,10 @@ class Base extends Panel {
                 add: ['animated-hiding-showing']
             },
             style: {
-                height   : style?.height    || null, // height will point to the animation origin, so we need a reset
-                left     : style?.left      || '50%',
-                top      : style?.top       || '50%',
-                transform: style?.transform || 'translate(-50%, -50%)',
-                width    : style?.width     || '50%'
+                height: style?.height || `${dialogRect.height}px`,
+                left  : style?.left   || `${Math.round(bodyRect.width  / 2 - dialogRect.width  / 2)}px`,
+                top   : style?.top    || `${Math.round(bodyRect.height / 2 - dialogRect.height / 2)}px`,
+                width : style?.width  || `${dialogRect.width}px`
             }
         });
 
@@ -699,8 +669,11 @@ class Base extends Panel {
         }
     }
 
+    /**
+     *
+     */
     onKeyDownEscape() {
-        this.hidden = true;
+        this.hidden = true
     }
 
     /**
@@ -710,7 +683,7 @@ class Base extends Panel {
         let me = this;
 
         if (animate) {
-            me.animateShow();
+            me.animateShow()
         } else {
             if (!me.rendered) {
                 me.render(true)
@@ -726,16 +699,21 @@ class Base extends Panel {
      * @param {String} id=this.id
      */
     syncModalMask(id=this.id) {
+        let {modal, windowId} = this;
+
         // This should sync the visibility and position of the modal mask element.
-        Neo.main.DomAccess.syncModalMask({id, modal: this.modal})
+        Neo.main.DomAccess.syncModalMask({id, modal, windowId})
     }
 
     /**
      *
      */
     syncTrapFocus() {
-        if (this.mounted) {
-            Neo.main.DomAccess.trapFocus({id: this.id, trap: this.trapFocus})
+        let me             = this,
+            {id, windowId} = me;
+
+        if (me.mounted) {
+            Neo.main.DomAccess.trapFocus({id, trap: me.trapFocus, windowId})
         }
     }
 }

package/src/form/field/Color.mjs

@@ -19,9 +19,9 @@ class Color extends ComboBox {
          */
         ntype: 'colorfield',
         /**
-         * @member {String[]} baseCls=['neo-colorfield','neo-selectfield','neo-pickerfield','neo-textfield']
+         * @member {String[]} baseCls=['neo-colorfield','neo-combobox','neo-pickerfield','neo-textfield']
          */
-        baseCls: ['neo-colorfield', 'neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
+        baseCls: ['neo-colorfield', 'neo-combobox', 'neo-pickerfield', 'neo-textfield'],
         /**
          * The data.Model field which contains the color value
          * @member {String} colorField='name'
@@ -95,10 +95,10 @@ class Color extends ComboBox {
      * @returns {String}
      */
     getColor() {
-        let me              = this,
-            {record, value} = me;
+        let me                  = this,
+            {inputValue, value} = me;
 
-        return record ? me.colorFormatter(me, record) : me.forceSelection ? null : value
+        return value ? me.colorFormatter(me, value) : me.forceSelection ? null : inputValue
     }
 
     /**

package/src/main/addon/ResizeObserver.mjs

@@ -19,6 +19,12 @@ class NeoResizeObserver extends Base {
          * @protected
          */
         instance: null,
+        /**
+         * If a target node is not found when calling register(),
+         * we can specify the amount of retries with a 100ms delay.
+         * @member {Number} registerAttempts=3
+         */
+        registerAttempts: 3,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -92,9 +98,19 @@ class NeoResizeObserver extends Base {
     /**
      * @param {Object} data
      * @param {String} data.id
+     * @param {Number} count=0
      */
-    register(data) {
-        this.instance.observe(DomAccess.getElement(data.id))
+    async register(data, count=0) {
+        let me   = this,
+            node = DomAccess.getElement(data.id);
+
+        if (node) {
+            me.instance.observe(node)
+        } else if (count < me.registerAttempts) {
+            await me.timeout(100);
+            count++;
+            me.register(data, count)
+        }
     }
 
     /**

package/src/selection/DateSelectorModel.mjs

@@ -138,7 +138,7 @@ class DateSelectorModel extends Model {
         super.register(component);
 
         let scope  = {scope: this.id},
-            {view} = this.view;
+            {view} = this;
 
         view.keys?._keys.push(
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},
@@ -153,7 +153,7 @@ class DateSelectorModel extends Model {
      */
     unregister() {
         let scope  = {scope: this.id},
-            {view} = this.view;
+            {view} = this;
 
         view.keys?.removeKeys([
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},