neo.mjs 8.0.0-alpha.1 → 8.0.0-beta.1

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -147,12 +147,12 @@ class MainView extends FormContainer {
         }, {
             module: TabContainer,
             items : [{
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'user-form',
-                tabButtonConfig: {text: 'User'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'User'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'user-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Firstname',
@@ -165,12 +165,12 @@ class MainView extends FormContainer {
                     value    : 'Doe'
                 }]
             }, {
-                module         : FormContainer,
-                itemDefaults   : {module: TextField, labelPosition: 'inline'},
-                layout         : {ntype:'vbox', align:'start'},
-                reference      : 'product-form',
-                tabButtonConfig: {text: 'Product'},
-                tag            : 'div',
+                module      : FormContainer,
+                header      : {text: 'Product'},
+                itemDefaults: {module: TextField, labelPosition: 'inline'},
+                layout      : {ntype:'vbox', align:'start'},
+                reference   : 'product-form',
+                tag         : 'div',
 
                 items: [{
                     labelText: 'Name',
@@ -189,7 +189,7 @@ class MainView extends FormContainer {
             itemDefaults: {module: Button},
             layout      : {ntype: 'hbox'},
 
-            items : [{
+            items: [{
                 handler: 'up.getMainFormValues',
                 text   : 'Get Main Values'
             }, {

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -21,9 +21,10 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base from '../container/Base.mjs';
+import Base  from '../container/Base.mjs';
 import Helix from '../component/Helix.mjs';
-class Foo extends Base {
+
+class MainView extends Base {
     static config = {
         className: 'Benefits.speed.MainView',
         layout   : 'fit',
@@ -34,14 +35,14 @@ class Foo extends Base {
             store: {
                 autoLoad: true,
                 model: {
-                    fields: [ { name: 'image' , type: 'String'   } ],
+                    fields: [{name: 'image', type: 'String'}],
                 },
                 url: '../../../../resources/examples/data/ai_contacts.json'
             }
         }]
     }
 }
-Foo = Neo.setupClass(Foo);
+MainView = Neo.setupClass(MainView);
 </pre>
 
 

package/resources/data/deck/training/pages/2022-12-27T21-55-23-144Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-28T17-11-34-653Z.md

@@ -13,18 +13,18 @@ Give it the `ntype:'yelp-businesses-tabs',`.
 
 It needs *two* tabs, with the tab button text set to 'Map' and 'Table'.
 
-Remember that a tab is configured with the `tabButtonConfig`, and you'll use the
+Remember that a tab is configured with the `header`, and you'll use the
 `html` config as a placeholder to indicate that a map and a table will eventually
 be used. The generated class already has two tabs. 
 
-The first tab shoudl end up looking like this. 
+The first tab should end up looking like this. 
 
     {
-        ntype: 'component',
-        html: 'The map goes here',
-        tabButtonConfig: {
+        ntype : 'component',
+        html  : 'The map goes here',
+        header: {
             text: 'Map'
-        },
+        }
     }
 
 

package/resources/data/deck/training/pages/2022-12-29T18-36-08-226Z.md

@@ -33,7 +33,7 @@ to inspect it, and run methods on it.
 Now add a new tab: 
 
     tabContainer.add({
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Hi there!'
         },
@@ -103,4 +103,4 @@ and change the value.
 Clear the console and do another _Ctrl-right-click_, then right-click on the button component logged in 
 the console and choose _Store object as global variable_. It'll use a value like _temp1_.
 
-Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.
+Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.

package/resources/data/deck/training/pages/2022-12-29T18-36-56-893Z.md

@@ -80,7 +80,7 @@ class MainContainer extends Viewport {
             },
 
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
@@ -88,7 +88,7 @@ class MainContainer extends Viewport {
                     innerHTML: 'Welcome to your new Neo App.'
                 }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-08-919Z.md

@@ -26,13 +26,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2022-12-29T20-37-20-344Z.md

@@ -23,13 +23,13 @@ class MainContainer extends Viewport {
                 style: { padding: '20px' }
             },
             items: [{
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
                 vdom: { innerHTML: 'Welcome to your new Neo App.' }
             }, {
-                tabButtonConfig: {
+                header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },

package/resources/data/deck/training/pages/2023-01-01T21-11-58-025Z.md

@@ -14,12 +14,12 @@ class Simple extends Base {
 items: [{
     module: Simple
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 
 }, {
     module: Simple
     foo: 2, // This value is used for the instance
 
-    tabButtonConfig: {iconCls: 'fa fa-home', text: 'Simple'},
+    header: {iconCls: 'fa fa-home', text: 'Simple'},
 }],
-</pre>
+</pre>

package/resources/data/deck/training/pages/2023-01-16T20-24-09-690Z.md

@@ -1,23 +1,23 @@
 A tab container is a card-layout container with a tab bar and styled buttons.
 Do not specify a `layout` for tab containers.
 
-The buttons are configured via `tabButtonConfig`
+The buttons are configured via `header`
 
     activeIndex: 2,
     tabBarPosition: 'left', // top, right, bottom, left
     itemDefaults: { module: Button },
     items: [{
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-home',
             text: 'Tab 1'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-play-circle',
             text: 'Tab 2'
         }
     }, {
-        tabButtonConfig: {
+        header: {
             iconCls: 'fa fa-bell',
             text: 'Tab 3'
         }

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -19,7 +19,7 @@ in the `afterSetBusiness()` method.
     items: [{
         module: Component,
         reference: 'view',
-        tabButtonConfig: {
+        header: {
             text: 'View'
         },
         style: {
@@ -33,7 +33,7 @@ in the `afterSetBusiness()` method.
         }
     }, {
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         }
     }]
@@ -192,4 +192,4 @@ Here's one way to code it. How does this compare to your solution?
 
 The view tab will become more and more complicated as we add content.
 It should be refactored into its own view class to isolate that complexity.
-We won't bother, but on a project that would be the right thing to do.
+We won't bother, but on a project that would be the right thing to do.

package/resources/data/deck/training/pages/2023-02-05T17-45-40-114Z.md

@@ -16,7 +16,7 @@ Configure the form to use vbox, along with some other configs.
     {
         module: Form,
         reference: 'form',
-        tabButtonConfig: {
+        header: {
             text: 'Edit'
         },
         style: {

package/resources/scss/src/calendar/view/week/Component.scss

@@ -84,6 +84,12 @@
             top              .4s  ease-out,
             width            .4s  ease-out;
 
+        &.neo-dragproxy {
+            > * {
+                height: unset;
+            }
+        }
+
         &.neo-focus {
             color  : #fff;
             outline: 0;

package/resources/scss/src/component/DateSelector.scss

@@ -163,6 +163,7 @@
                 flex           : 1;
                 font-weight    : bold;
                 justify-content: end;
+                padding-bottom : 1px;
             }
 
             .neo-year-text {

package/src/DefaultConfig.mjs

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

package/src/calendar/view/MainContainer.mjs

@@ -259,6 +259,9 @@ class MainContainer extends Container {
                 style   = sideBar.style || {};
 
             if (value) {
+                me.updateDepth = -1;
+
+                // todo: updates colliding with parent updates need to pass the update depth for the next parent update cycle
                 delete sideBar.vdom.removeDom;
 
                 me.promiseUpdate().then(() => {
@@ -274,7 +277,7 @@ class MainContainer extends Container {
                 sideBar._style      = style; // silent update
                 sideBar._vdom.style = style; // silent update
 
-                me.promiseUpdate().then(() => {
+                sideBar.promiseUpdate().then(() => {
                     me.timeout(400).then(() => {
                         sideBar.vdom.removeDom = true;
                         sideBar.update();

package/src/calendar/view/SettingsContainer.mjs

@@ -89,44 +89,29 @@ class SettingsContainer extends Container {
             items: [{
                 module: () => import('./settings/GeneralContainer.mjs'),
                 flag  : 'general',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'General'
-                }
+                header: {text: 'General'},
+                style : {padding: '20px'}
             }, {
-                ntype: 'component',
-                flag : 'day',
-                html : 'Day',
-                style: {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Day'
-                }
+                ntype : 'component',
+                flag  : 'day',
+                header: {text: 'Day'},
+                html  : 'Day',
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/WeekContainer.mjs'),
                 flag  : 'week',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Week'
-                }
+                header: {text: 'Week'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/MonthContainer.mjs'),
                 flag  : 'month',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Month'
-                }
+                header: {text: 'Month'},
+                style : {padding: '20px'}
             }, {
                 module: () => import('./settings/YearContainer.mjs'),
                 flag  : 'year',
-                style : {padding: '20px'},
-
-                tabButtonConfig: {
-                    text: 'Year'
-                }
+                header: {text: 'Year'},
+                style : {padding: '20px'}
             }],
 
             listeners: {

package/src/calendar/view/YearComponent.mjs

@@ -224,9 +224,6 @@ class YearComponent extends Component {
 
             if (year !== oldYear) {
                 this.changeYear(year - oldYear)
-            } else {
-                // todo
-                console.log('## select a new day', value.getMonth(), value.getDate())
             }
         }
     }

package/src/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,11 @@ class ColorsList extends List {
         bind: {
             store: 'stores.colors'
         },
+        /**
+         * Set this to true in case a keyboard navigation should immediately select the focussed item
+         * @member {Boolean} selectOnFocus=true
+         */
+        selectOnFocus: true,
         /**
          * @member {Boolean} useWrapperNode=false
          */

package/src/calendar/view/calendars/List.mjs

@@ -150,6 +150,14 @@ class List extends ComponentList {
     onSelect(items) {
         this.getModel().setData('activeCalendarId', this.getItemRecordId(items[0]))
     }
+
+    /**
+     * Disabling the super class logic for now, since the collection.Base mutation event already covers the sorting
+     * @param {Object} data
+     */
+    sortItems(data) {
+
+    }
 }
 
 export default Neo.setupClass(List);

package/src/code/LivePreview.mjs

@@ -63,16 +63,16 @@ class LivePreview extends Container {
             removeInactiveCards: false,
 
             items: [{
-                module         : MonacoEditor,
-                hideLabel      : true,
-                listeners      : {editorChange: 'up.onEditorChange'},
-                style          : {height: '100%'},
-                reference      : 'editor',
-                tabButtonConfig: {text: 'Source'}
+                module   : MonacoEditor,
+                header   : {text: 'Source'},
+                hideLabel: true,
+                listeners: {editorChange: 'up.onEditorChange'},
+                style    : {height: '100%'},
+                reference: 'editor'
             }, {
-                module         : Container,
-                reference      : 'preview',
-                tabButtonConfig: {text: 'Preview'}
+                module   : Container,
+                header   : {text: 'Preview'},
+                reference: 'preview'
             }]
         }],
         /**
@@ -410,7 +410,7 @@ class LivePreview extends Container {
             ui       : 'ghost'
         });
 
-        items[0].style = {marginLeft: 'auto'};
+        items.unshift('->');
 
         // we want to add a normal (non-header) button
         tabContainer.getTabBar().add(items);