neo.mjs 6.15.10 → 6.16.0

package/resources/scss/src/apps/colors/TableContainer.scss

@@ -0,0 +1,44 @@
+$base-color: #1c60a0;
+
+.colors-table-container.neo-table-container {
+    width: 100%;
+
+    .color-1 {
+        background-color: lighten($base-color, 10%);
+    }
+
+    .color-2 {
+        background-color: lighten($base-color, 20%);
+    }
+
+    .color-3 {
+        background-color: lighten($base-color, 30%);
+    }
+
+    .color-4 {
+        background-color: lighten($base-color, 40%);
+    }
+
+    .color-5 {
+        background-color: lighten($base-color, 50%);
+    }
+
+    .neo-index-column {
+        max-width: 40px;
+        min-width: 40px;
+        width    : 40px;
+    }
+
+    .neo-table-view {
+        .neo-table-row {
+            &:hover .neo-table-cell {
+                background-color: #d0aa72;
+                color           : #2b2b2b;
+            }
+        }
+    }
+
+    td, th {
+        min-width: 10%;
+    }
+}

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

@@ -0,0 +1,17 @@
+.colors-viewport {
+    padding: 2em;
+
+    > * {
+        &:not(:first-child) {
+            margin-top: 2em;
+        }
+    }
+
+    .portal-header-toolbar {
+        .neo-button {
+            &:not(:first-child) {
+                margin-left: .5em;
+            }
+        }
+    }
+}

package/resources/scss/src/layout/Card.scss

@@ -9,4 +9,21 @@
             display: none !important;
         }
     }
+
+    .neo-animation-wrapper {
+        display    : flex;
+        transition : transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
+        will-change: transform;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+
+    .neo-relative {
+        height  : 100%;
+        overflow: hidden;
+        position: relative;
+        width   : 100%;
+    }
 }

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -944,6 +944,12 @@ class Base extends CoreBase {
         if (controller && value) {
             controller.windowId = value
         }
+
+        // If a component gets moved into a different window, an update cycle might still be running.
+        // Since the update might no longer get mapped, we want to re-enable this instance for future updates.
+        if (oldValue) {
+            this.isVdomUpdating = false
+        }
     }
 
     /**

package/src/component/wrapper/AmChart.mjs

@@ -1,5 +1,4 @@
 import Component from '../Base.mjs';
-import Logger    from '../../util/Logger.mjs';
 
 /**
  * Convenience class to render an amChart
@@ -69,15 +68,17 @@ class AmChart extends Component {
      * @protected
      */
     afterSetChartData(value, oldValue) {
-        let me = this;
+        let me = this,
+            {appName, dataPath, id, windowId} = me;
 
         if (value) {
             Neo.main.addon.AmCharts.updateData({
-                appName : me.appName,
-                data    : value,
-                dataPath: me.dataPath,
-                id      : me.id
-            });
+                appName,
+                data: value,
+                dataPath,
+                id,
+                windowId
+            })
         }
     }
 
@@ -88,25 +89,24 @@ class AmChart extends Component {
      * @protected
      */
     afterSetMounted(value, oldValue) {
-        let me = this;
+        let me = this,
+            {appName, id, windowId} = me;
 
         if (value === false && oldValue !== undefined) {
-            Neo.main.addon.AmCharts.destroy({
-                appName: me.appName,
-                id     : me.id
-            });
+            Neo.main.addon.AmCharts.destroy({appName, id, windowId})
         }
 
         super.afterSetMounted(value, oldValue);
 
         if (value) {
             let opts = {
-                appName             : me.appName,
+                appName,
                 combineSeriesTooltip: me.combineSeriesTooltip,
                 config              : me.chartConfig,
-                id                  : me.id,
+                id,
                 package             : me.package,
-                type                : me.chartType
+                type                : me.chartType,
+                windowId
             };
 
             if (me.chartData) {
@@ -115,7 +115,7 @@ class AmChart extends Component {
             }
 
             setTimeout(() => {
-                Neo.main.addon.AmCharts.create(opts).then(me.onChartMounted);
+                Neo.main.addon.AmCharts.create(opts).then(me.onChartMounted)
             }, 50);
         }
     }

package/src/core/Base.mjs

@@ -233,7 +233,7 @@ class Base {
             }
 
             // Apply configs to prototype
-            overwrites && Object.assign(cfg, overwrites)
+            Object.assign(cfg, overwrites)
         }
     }
 
@@ -249,7 +249,7 @@ class Base {
         let values = Array.isArray(staticName) ? staticName : this.getStaticConfig(staticName);
 
         if (!values.includes(value)) {
-            console.error(`Supported values for ${name} are: ${values.join(', ')}`, this);
+            console.error(`Supported values for ${name} are:`, ...values, this);
             return oldValue
         }
 

package/src/data/RecordFactory.mjs

@@ -63,6 +63,9 @@ class RecordFactory extends Base {
                 key     = nsArray.pop();
                 ns      = Neo.ns(nsArray, true);
                 cls     = ns[key] = class Record {
+                    // We do not want to minify the ctor class name in dist/production
+                    static name = 'Record'
+
                     constructor(config) {
                         let me = this,
                             properties;

package/src/date/SelectorContainer.mjs

@@ -92,6 +92,9 @@ class SelectorContainer extends Container {
             items : [{
                 module   : DayViewComponent,
                 reference: 'day-view'
+            }, {
+                module   : DayViewComponent,
+                reference: 'day-view-next'
             }]
         }],
         /**

package/src/layout/Card.mjs

@@ -24,6 +24,13 @@ class Card extends Base {
      * @static
      */
     static itemCls = 'neo-layout-card-item'
+    /**
+     * Valid values for slideDirection
+     * @member {String[]} iconPositions=['horizontal','vertical',null]
+     * @protected
+     * @static
+     */
+    static slideDirections = ['horizontal', 'vertical', null]
 
     static config = {
         /**
@@ -47,7 +54,12 @@ class Card extends Base {
          * This will keep the instances & vdom trees
          * @member {Boolean} removeInactiveCards=true
          */
-        removeInactiveCards: true
+        removeInactiveCards: true,
+        /*
+         * Valid values: 'horizontal', 'vertical', null
+         * @member {String|null} slideDirection_=null
+         */
+        slideDirection_: null
     }
 
     /**
@@ -63,6 +75,7 @@ class Card extends Base {
             containerId         = me.containerId,
             container           = Neo.getComponent(containerId) || Neo.get(containerId), // the instance might not be registered yet
             sCfg                = me.constructor,
+            needsTransition     = me.slideDirection && oldValue !== undefined,
             needsUpdate         = false,
             removeInactiveCards = me.removeInactiveCards,
             i, isActiveIndex, item, items, len, module, wrapperCls;
@@ -72,7 +85,7 @@ class Card extends Base {
             len   = items.length;
 
             if (!items[value]) {
-                Neo.error('Trying to activate a non existing card', value, items);
+                Neo.error('Trying to activate a non existing card', value, items)
             }
 
             // we need to run the loop twice, since lazy loading a module at a higher index does affect lower indexes
@@ -81,7 +94,7 @@ class Card extends Base {
 
                 if (i === value && Neo.typeOf(module) === 'Function') {
                     needsUpdate = true;
-                    break;
+                    break
                 }
             }
 
@@ -91,33 +104,33 @@ class Card extends Base {
                 module        = item.module;
 
                 if (isActiveIndex && Neo.typeOf(module) === 'Function') {
-                    item = await me.loadModule(item, i);
+                    item = await me.loadModule(item, i)
                 }
 
-                if (item instanceof Neo.core.Base) {
+                if (item instanceof Neo.component.Base) {
                     wrapperCls = item.wrapperCls;
 
                     NeoArray.remove(wrapperCls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
                     NeoArray.add(   wrapperCls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
 
                     if (removeInactiveCards || needsUpdate) {
-                        item.wrapperCls = wrapperCls;
-
                         if (isActiveIndex) {
                             delete item.vdom.removeDom;
-                            item.activate?.();
+                            !needsTransition && item.activate?.()
                         } else if (removeInactiveCards) {
-                            item.mounted = false;
-                            item.vdom.removeDom = true;
+                            item.mounted        = false;
+                            item.vdom.removeDom = true
                         }
-                    } else {
-                        item.wrapperCls = wrapperCls;
                     }
+
+                    item.wrapperCls = wrapperCls;
                 }
             }
 
-            if (removeInactiveCards || needsUpdate) {
-                container.update();
+            if (needsTransition) {
+                await me.slideCards(value, oldValue)
+            } else if (removeInactiveCards || needsUpdate) {
+                container.update()
             }
         }
     }
@@ -139,11 +152,11 @@ class Card extends Base {
         NeoArray.add(childCls, isActiveIndex ? sCfg.activeItemCls : sCfg.inactiveItemCls);
 
         if (!keepInDom && me.removeInactiveCards) {
-            item.wrapperCls = childCls;
             vdom.removeDom  = !isActiveIndex;
-            item.update();
-        } else {
             item.wrapperCls = childCls;
+            item.update()
+        } else {
+            item.wrapperCls = childCls
         }
     }
 
@@ -156,12 +169,23 @@ class Card extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Card: applyRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Card: applyRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.add(wrapperCls, 'neo-layout-card');
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
+    }
+
+    /**
+     * Triggered before the slideDirection config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetSlideDirection(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'slideDirection')
     }
 
     /**
@@ -181,7 +205,7 @@ class Card extends Base {
             proto, wrapperCls;
 
         if (!Neo.isNumber(index)) {
-            index = items.indexOf(item);
+            index = items.indexOf(item)
         }
 
         item.isLoading = true; // prevent the item from getting queued multiple times inside form.Container
@@ -201,14 +225,14 @@ class Card extends Base {
         items[index] = item = Neo.create(item);
 
         if (me.removeInactiveCards) {
-            item.vdom.removeDom = true;
+            item.vdom.removeDom = true
         }
 
         container.fire('cardLoaded', {item});
 
         vdom.cn[index] = item.vdom;
 
-        return item;
+        return item
     }
 
     /**
@@ -221,12 +245,79 @@ class Card extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Card: removeRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Card: removeRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.remove(wrapperCls, 'neo-layout-card');
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
+    }
+
+    /**
+     * @param {Number} index
+     * @param {Number} oldIndex
+     */
+    async slideCards(index, oldIndex) {
+        let me            = this,
+            {container}   = me,
+            slideVertical = me.slideDirection === 'vertical',
+            {items, vdom} = container,
+            card          = items[index],
+            oldCard       = items[oldIndex],
+            slideIn       = index > oldIndex,
+            rect          = await container.getDomRect(container.id),
+            animationWrapper, style, x, y;
+
+        delete oldCard.vdom.removeDom;
+
+        if (slideVertical) {
+            y = slideIn ? 0 : -rect.height;
+
+            style = {
+                flexDirection: 'column',
+                height       : `${2 * rect.height}px`,
+                transform    : `translateY(${y}px)`,
+                width        : `${rect.width}px`
+            }
+        } else {
+            x = slideIn ? 0 : -rect.width;
+
+            style = {
+                height   : `${rect.height}px`,
+                transform: `translateX(${x}px)`,
+                width    : `${2 * rect.width}px`
+            }
+        }
+
+        vdom.cn = [
+            {cls: ['neo-relative'], cn: [
+                {cls: ['neo-animation-wrapper'], style, cn: [card.vdom]}
+            ]}
+        ];
+
+        animationWrapper = vdom.cn[0].cn[0];
+
+        animationWrapper.cn[slideIn ? 'unshift' : 'push'](oldCard.vdom);
+
+        await container.promiseUpdate();
+
+        animationWrapper.style.transform = slideVertical ?
+            `translateY(${slideIn ? -rect.height : 0}px)` :
+            `translateX(${slideIn ? -rect.width  : 0}px)`;
+
+        await container.promiseUpdate();
+
+        await me.timeout(300); // transition duration defined via CSS for now
+
+        vdom.cn = [];
+
+        container.items.forEach(item => {
+            vdom.cn.push(item.vdom)
+        });
+
+        oldCard.vdom.removeDom = true;
+
+        await container.promiseUpdate()
     }
 }
 

package/src/main/addon/AmCharts.mjs

@@ -154,6 +154,8 @@ class AmCharts extends Base {
         } else {
             // todo: check if globalThis[data.package] exists, if not load it and call create afterwards
 
+            am4core.useTheme(am4themes_dark);
+
             me.charts[data.id] = am4core.createFromConfig(data.config, data.id, globalThis[data.package][data.type || 'XYChart']);
 
             if (data.combineSeriesTooltip) {
@@ -204,6 +206,7 @@ class AmCharts extends Base {
             Promise.all([
                 DomAccess.loadScript(basePath + 'charts.js'),
                 DomAccess.loadScript(basePath + 'maps.js'),
+                DomAccess.loadScript(basePath + 'themes/dark.js'),
                 DomAccess.loadScript(basePath + 'geodata/worldLow.js')
             ]).then(() => {
                 me.scriptsLoaded = true;

package/src/model/Component.mjs

@@ -682,7 +682,11 @@ class Component extends Base {
      * @param {String} storeName
      */
     resolveStore(component, configName, storeName) {
-        component[configName] = this.getStore(storeName)
+        let store = this.getStore(storeName);
+
+        if (component[configName] !== store) {
+            component[configName] = store
+        }
     }
 
     /**

package/src/worker/App.mjs

@@ -323,7 +323,8 @@ class App extends Base {
                     Neo.main.addon.Stylesheet.addThemeFiles({
                         appName,
                         className: mapClassName || className,
-                        folders  : themeFolders
+                        folders  : themeFolders,
+                        windowId
                     })
                 }
             }

package/test/components/files/form/field/ComboBox.mjs

@@ -45,8 +45,9 @@ StartTest(t => {
 
     t.it('Editable', async t => {
         await setup({
-            editable : false
+            editable: false
         });
+
         const blurEl = document.createElement('input');
         document.body.appendChild(blurEl);
 
@@ -72,7 +73,7 @@ StartTest(t => {
         // Nothing selected
         t.hasAttributeValue(inputField, 'aria-activedescendant', '');
 
-        // Should activate the first list item. editable : false means we can still be focused
+        // Should activate the first list item. editable: false means we can still be focused
         // and select values, just that the filter input is read-only.
         await t.type(null, '[DOWN]');
 
@@ -89,7 +90,7 @@ StartTest(t => {
 
         t.is(inputField.value, 'Alabama');
 
-        // Focus nebver leaves the input field
+        // Focus never leaves the input field
         t.is(blurCount, 0);
 
         await t.type(null, '[TAB]');