neo.mjs 4.5.0 → 4.6.0

package/apps/sharedcovid/view/country/Helix.mjs

@@ -13,16 +13,16 @@ class CountryHelix extends Helix {
          * @protected
          */
         className: 'SharedCovid.view.country.Helix',
+        /**
+         * @member {String[]} baseCls=['covid-country-helix','neo-helix']
+         */
+        baseCls: ['covid-country-helix', 'neo-helix'],
         /**
          * @member {Object} bind
          */
         bind: {
             country: {twoWay: true, value: data => data.country}
         },
-        /**
-         * @member {String[]} cls=['covid-country-helix', 'neo-helix']
-         */
-        cls: ['covid-country-helix', 'neo-helix'],
         /**
          * @member {String|null} country_=null
          */

package/apps/sharedcovid/view/country/HistoricalDataTable.mjs

@@ -14,9 +14,9 @@ class HistoricalDataTable extends Container {
          */
         className: 'SharedCovid.view.country.HistoricalDataTable',
         /**
-         * @member {String[]} cls=['covid-historical-data-table', 'neo-table-container']
+         * @member {String[]} baseCls=['covid-historical-data-table','neo-table-container']
          */
-        cls: ['covid-historical-data-table', 'neo-table-container'],
+        baseCls: ['covid-historical-data-table', 'neo-table-container'],
         /**
          * Default configs for each column
          * @member {Object} columnDefaults

package/apps/sharedcovid/view/country/LineChartComponent.mjs

@@ -12,9 +12,9 @@ class LineChartComponent extends AmChartComponent {
          */
         className: 'SharedCovid.view.country.LineChartComponent',
         /**
-         * @member {String[]} cls=['covid-line-chart']
+         * @member {String[]} baseCls=['covid-line-chart']
          */
-        cls: ['covid-line-chart'],
+        baseCls: ['covid-line-chart'],
         /**
          * @member {Object} chartConfig
          */

package/apps/sharedcovid/view/country/Table.mjs

@@ -13,16 +13,16 @@ class Table extends Container {
          * @protected
          */
         className: 'SharedCovid.view.country.Table',
+        /**
+         * @member {String[]} baseCls=['covid-country-table','neo-table-container']
+         */
+        baseCls: ['covid-country-table', 'neo-table-container'],
         /**
          * @member {Object} bind
          */
         bind: {
             country: {twoWay: true, value: data => data.country}
         },
-        /**
-         * @member {String[]} cls=['covid-country-table', 'neo-table-container']
-         */
-        cls: ['covid-country-table', 'neo-table-container'],
         /**
          * Default configs for each column
          * @member {Object} columnDefaults

package/apps/website/view/HeaderContainer.mjs

@@ -12,9 +12,9 @@ class HeaderContainer extends Container {
          */
         className: 'Website.view.HeaderContainer',
         /**
-         * @member {String[]} cls=['website-header-container']
+         * @member {String[]} baseCls=['website-header-container']
          */
-        cls: ['website-header-container'],
+        baseCls: ['website-header-container'],
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'stretch'}
          */

package/apps/website/view/MainContainer.mjs

@@ -20,9 +20,9 @@ class MainContainer extends Viewport {
          */
         autoMount: true,
         /**
-         * @member {String[]} cls=['website-main-container','neo-viewport']
+         * @member {String[]} baseCls=['website-main-container','neo-viewport']
          */
-        cls: ['website-main-container', 'neo-viewport'],
+        baseCls: ['website-main-container', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */

package/apps/website/view/blog/Container.mjs

@@ -14,9 +14,9 @@ class Container extends BaseContainer {
          */
         className: 'Website.view.blog.Container',
         /**
-         * @member {String[]} cls=['website-blog-container', 'neo-container']
+         * @member {String[]} baseCls=['website-blog-container','neo-container']
          */
-        cls: ['website-blog-container', 'neo-container'],
+        baseCls: ['website-blog-container', 'neo-container'],
         /**
          * @member {Array} items
          */

package/apps/website/view/blog/List.mjs

@@ -24,9 +24,9 @@ class List extends BaseList {
          */
         className: 'Website.view.blog.List',
         /**
-         * @member {String[]} cls=['website-blog-list','neo-list']
+         * @member {String[]} baseCls=['website-blog-list','neo-list']
          */
-        cls: ['website-blog-list', 'neo-list'],
+        baseCls: ['website-blog-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=BlogPosts
          */

package/apps/website/view/examples/List.mjs

@@ -23,9 +23,9 @@ class List extends BaseList {
          */
         className: 'Website.view.examples.List',
         /**
-         * @member {String[]} cls=['website-examples-list','neo-list']
+         * @member {String[]} baseCls=['website-examples-list','neo-list']
          */
-        cls: ['website-examples-list', 'neo-list'],
+        baseCls: ['website-examples-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=Examples
          */

package/apps/website/view/home/DeveloperIntroComponent.mjs

@@ -12,10 +12,10 @@ class DeveloperIntroComponent extends Component {
          */
         className: 'Website.view.home.DeveloperIntroComponent',
         /**
-         * @member {String[]} cls=['website-intro-component']
+         * @member {String[]} baseCls=['website-intro-component']
          * @protected
          */
-        cls: ['website-intro-component'],
+        baseCls: ['website-intro-component'],
         /**
          * @member {Object[]} domListeners
          * @protected

package/apps/website/view/home/ExecutiveIntroComponent.mjs

@@ -12,10 +12,10 @@ class ExecutiveIntroComponent extends Component {
          */
         className: 'Website.view.home.ExecutiveIntroComponent',
         /**
-         * @member {String[]} cls=['website-intro-component']
+         * @member {String[]} baseCls=['website-intro-component']
          * @protected
          */
-        cls: ['website-intro-component'],
+        baseCls: ['website-intro-component'],
         /**
          * @member {Object[]} domListeners
          * @protected

package/apps/website/view/home/TabContainer.mjs

@@ -18,10 +18,10 @@ class TabContainer extends Container {
          */
         activeIndex: 1,
         /**
-         * @member {String[]} cls=['website-home-tab-container', 'neo-tab-container'],
+         * @member {String[]} baseCls=['website-home-tab-container','neo-tab-container'],
          * @protected
          */
-        cls: ['website-home-tab-container', 'neo-tab-container'],
+        baseCls: ['website-home-tab-container', 'neo-tab-container'],
         /**
          * @member {Array} items
          */

package/docs/app/view/ContentTabContainer.mjs

@@ -22,24 +22,16 @@ class ContentTabContainer extends Container {
          */
         activateInsertedTabs: true,
         /**
-         * @member {Object} contentContainerDefaults={cls:[//...]}
+         * @member {Object} contentContainerDefaults
          */
         contentContainerDefaults: {
-            cls: [
-                'neo-docs-tab-content-container',
-                'neo-tab-content-container',
-                'neo-container'
-            ]
+            cls: ['neo-docs-tab-content-container']
         },
         /**
-         * @member {Object} headerToolbarDefaults={cls:[//...]}
+         * @member {Object} headerToolbarDefaults
          */
         headerToolbarDefaults: {
-            cls: [
-                'docs-tab-header-toolbar',
-                'neo-tab-header-toolbar',
-                'neo-toolbar'
-            ]
+            cls: ['docs-tab-header-toolbar']
         },
         /**
          * @member {Array} items=[//...]]

package/docs/app/view/ExamplesTreeList.mjs

@@ -18,14 +18,9 @@ class ExamplesTreeList extends TreeList {
          */
         ntype: 'examples-treelist',
         /**
-         * @member {String[]} cls=['docs-examples-treelist', 'neo-tree-list', 'neo-list-container', 'neo-list']
+         * @member {String[]} cls=['docs-examples-treelist']
          */
-        cls: [
-            'docs-examples-treelist',
-            'neo-tree-list',
-            'neo-list-container',
-            'neo-list'
-        ],
+        cls: ['docs-examples-treelist'],
         /**
          * @member {Neo.data.Store|null} store=ExamplesStore
          * @protected

package/docs/app/view/HeaderContainer.mjs

@@ -19,9 +19,9 @@ class HeaderContainer extends Container {
          */
         ntype: 'neo-docs-header-container',
         /**
-         * @member {String[]} cls=['neo-docs-header-container']
+         * @member {String[]} baseCls=['neo-docs-header-container']
          */
-        cls: ['neo-docs-header-container'],
+        baseCls: ['neo-docs-header-container'],
         /**
          * @member {Number} height=55
          */

package/docs/app/view/MainContainer.mjs

@@ -31,9 +31,9 @@ class MainContainer extends Viewport {
          */
         autoMount : true,
         /**
-         * @member {String[]} cls=['neo-docs-maincontainer', 'neo-viewport']
+         * @member {String[]} baseCls=['neo-docs-maincontainer','neo-viewport']
          */
-        cls: ['neo-docs-maincontainer', 'neo-viewport'],
+        baseCls: ['neo-docs-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */

package/docs/app/view/TutorialsTreeList.mjs

@@ -18,14 +18,9 @@ class TutorialsTreeList extends TreeList {
          */
         ntype: 'tutorials-treelist',
         /**
-         * @member {String[]} cls=['docs-tutorials-treelist', 'neo-tree-list', 'neo-list-container', 'neo-list']
+         * @member {String[]} cls=['docs-tutorials-treelist']
          */
-        cls: [
-            'docs-tutorials-treelist',
-            'neo-tree-list',
-            'neo-list-container',
-            'neo-list'
-        ],
+        cls: ['docs-tutorials-treelist'],
         /**
          * @member {Neo.data.Store|null} store=TutorialsStore
          * @protected

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -18,9 +18,9 @@ class HeaderComponent extends Component {
          */
         ntype: 'classdetails-headercomponent',
         /**
-         * @member {String[]} cls=['neo-docs-classdetails-headercomponent']
+         * @member {String[]} baseCls=['neo-docs-classdetails-headercomponent']
          */
-        cls: ['neo-docs-classdetails-headercomponent'],
+        baseCls: ['neo-docs-classdetails-headercomponent'],
         /**
          * @member {Object|null} record_=null
          */

package/docs/app/view/classdetails/HierarchyTreeList.mjs

@@ -18,9 +18,9 @@ class HierarchyTreeList extends TreeList {
          */
         ntype: 'classhierarchy-treelist',
         /**
-         * @member {String[]} cls=['docs-classhierarchy-treelist', 'neo-list-container', 'neo-list']
+         * @member {String[]} baseCls=['docs-classhierarchy-treelist','neo-list-container','neo-tree-list','neo-list']
          */
-        cls: [
+        baseCls: [
             'docs-classhierarchy-treelist',
             'neo-list-container',
             'neo-tree-list',

package/docs/app/view/classdetails/MainContainer.mjs

@@ -23,9 +23,9 @@ class MainContainer extends Container {
          */
         ntype: 'classdetails-maincontainer',
         /**
-         * @member {String[]} cls=['neo-docs-classdetails-maincontainer', 'neo-container']
+         * @member {String[]} baseCls=['neo-docs-classdetails-maincontainer','neo-container']
          */
-        cls: ['neo-docs-classdetails-maincontainer', 'neo-container'],
+        baseCls: ['neo-docs-classdetails-maincontainer', 'neo-container'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */

package/docs/app/view/classdetails/MembersList.mjs

@@ -18,9 +18,9 @@ class MembersList extends Base {
          */
         ntype: 'classdetails-memberslist',
         /**
-         * @member {String[]} cls=['docs-classhierarchy-memberslist']
+         * @member {String[]} baseCls=['docs-classhierarchy-memberslist']
          */
-        cls: ['docs-classhierarchy-memberslist'],
+        baseCls: ['docs-classhierarchy-memberslist'],
         /**
          * @member {String} filterMembersQuery_=''
          * @protected

package/docs/app/view/classdetails/TutorialComponent.mjs

@@ -17,9 +17,9 @@ class TutorialComponent extends Component {
          */
         ntype: 'classdetails-tutorialcomponent',
         /**
-         * @member {String[]} cls=['neo-classdetails-tutorialcomponent']
+         * @member {String[]} baseCls=['neo-classdetails-tutorialcomponent']
          */
-        cls: ['neo-classdetails-tutorialcomponent'],
+        baseCls: ['neo-classdetails-tutorialcomponent'],
         /**
          * @member {String|null} fileName=null
          */

package/examples/calendar/basic/MainContainerController.mjs

@@ -48,8 +48,8 @@ class MainContainerController extends ComponentController {
         component.cls = cls;
 
         button.set({
-            iconCls: iconCls,
-            text   : buttonText
+            iconCls,
+            text: buttonText
         });
 
         style = headerToolbar.style || {};

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -23,9 +23,9 @@ class CountryGallery extends Gallery {
          */
         className: 'Neo.examples.component.coronaGallery.CountryGallery',
         /**
-         * @member {String[]} cls=['neo-country-gallery', 'neo-gallery', 'page', 'view']
+         * @member {String[]} cls=['neo-country-gallery']
          */
-        cls: ['neo-country-gallery', 'neo-gallery', 'page', 'view'],
+        cls: ['neo-country-gallery'],
         /**
          * The item height of the gallery
          * @member {Number} itemHeight=240

package/examples/component/coronaGallery/MainContainer.mjs

@@ -19,9 +19,9 @@ class MainContainer extends Viewport {
          */
         autoMount: true,
         /**
-         * @member {String[]} cls=['neo-gallery-maincontainer', 'neo-viewport']
+         * @member {String[]} baseCls=['neo-gallery-maincontainer','neo-viewport']
          */
-        cls: ['neo-gallery-maincontainer', 'neo-viewport'],
+        baseCls: ['neo-gallery-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.component.Gallery|null} gallery=null
          */

package/examples/component/coronaHelix/CountryHelix.mjs

@@ -23,9 +23,9 @@ class CountryHelix extends Helix {
          */
         className: 'Neo.examples.component.coronaHelix.CountryHelix',
         /**
-         * @member {String[]} cls=['neo-country-helix', 'neo-helix']
+         * @member {String[]} baseCls=['neo-country-helix','neo-helix']
          */
-        cls: ['neo-country-helix', 'neo-helix'],
+        baseCls: ['neo-country-helix', 'neo-helix'],
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY=1.2

package/examples/component/coronaHelix/MainContainer.mjs

@@ -20,9 +20,9 @@ class MainContainer extends Viewport {
          */
         autoMount: true,
         /**
-         * @member {String[]} cls=['neo-helix-maincontainer', 'neo-viewport']
+         * @member {String[]} baseCls=['neo-helix-maincontainer','neo-viewport']
          */
-        cls: ['neo-helix-maincontainer', 'neo-viewport'],
+        baseCls: ['neo-helix-maincontainer', 'neo-viewport'],
         /**
          * @member {Neo.component.Helix|null} helix=null
          */

package/examples/component/wrapper/googleMaps/MarkerDialog.mjs

@@ -22,23 +22,16 @@ class MarkerDialog extends DialogBase {
 
         items: [{
             ntype: 'component',
-            cls: ['detail-container'],
-            vdom: {/* here goes the itemTpl */}
+            cls  : ['detail-container'],
+            vdom : {/* here goes the itemTpl */}
         }],
 
-        itemTpl: data => [{
-            cls: 'detail-depth',
-            innerHTML: `Depth: ${data.depth}`
-        }, {
-            cls: 'detail-date',
-            innerHTML: `${data.visualDate}`
-        }, {
-            cls: 'detail-quality',
-            innerHTML: `Quality: ${data.quality}`
-        }, {
-            cls: 'detail-quality',
-            innerHTML: `Size: ${data.size}`
-        }]
+        itemTpl: data => [
+            {cls: ['detail-depth'],   innerHTML: `Depth: ${data.depth}`},
+            {cls: ['detail-date'],    innerHTML: `${data.visualDate}`},
+            {cls: ['detail-quality'], innerHTML: `Quality: ${data.quality}`},
+            {cls: ['detail-quality'], innerHTML: `Size: ${data.size}`}
+        ]
     }}
 
     /**
@@ -56,14 +49,14 @@ class MarkerDialog extends DialogBase {
      *      timestamp: "2017-10-11T18:34:56.000Z"
      */
     afterSetRecord(value, oldValue) {
-        let me = this,
+        let me              = this,
             outputContainer = me.items[0],
-            vdom = outputContainer.vdom;
+            vdom            = outputContainer.vdom;
 
         value.visualDate = me.calcVisualDate(value.timestamp);
 
         me.title = `${value.humanReadableLocation}$ | ${value.size}`;
-        vdom.cn = me.itemTpl(value);
+        vdom.cn  = me.itemTpl(value);
     }
 
     calcVisualDate(dateString) {

package/examples/dialog/MainContainer.mjs

@@ -119,8 +119,8 @@ class MainContainer extends Viewport {
         });
 
         button.set({
-            iconCls: iconCls,
-            text   : buttonText
+            iconCls,
+            text: buttonText
         });
 
         if (dialog) {

package/examples/grid/covid/GridContainer.mjs

@@ -15,9 +15,9 @@ class GridContainer extends BaseGridContainer {
          */
         className: 'Neo.examples.grid.covid.GridContainer',
         /**
-         * @member {String[]} cls=['covid-country-grid', 'neo-grid-container']
+         * @member {String[]} cls=['covid-country-grid']
          */
-        cls: ['covid-country-grid', 'neo-grid-container'],
+        cls: ['covid-country-grid'],
         /**
          * Default configs for each column
          * @member {Object} columnDefaults
@@ -32,7 +32,7 @@ class GridContainer extends BaseGridContainer {
          * @member {Object[]} columns
          */
         columns: [{
-            cls     : ['neo-index-column', 'neo-grid-header-button'],
+            cls     : ['neo-index-column'],
             dock    : 'left',
             field   : 'index',
             minWidth: 40,

package/examples/list/animate/List.mjs

@@ -16,9 +16,9 @@ class List extends BaseList {
          */
         animate: true,
         /**
-         * @member {String[]} cls=['neo-examples-list-animate','neo-list-container','neo-list']
+         * @member {String[]} cls=['neo-examples-list-animate']
          */
-        cls: ['neo-examples-list-animate', 'neo-list-container', 'neo-list'],
+        cls: ['neo-examples-list-animate'],
         /**
          * Value in px
          * @member {Number} itemHeight=200

package/examples/table/covid/TableContainer.mjs

@@ -15,9 +15,9 @@ class TableContainer extends BaseTableContainer {
          */
         className: 'Neo.examples.table.covid.TableContainer',
         /**
-         * @member {String[]} cls=['covid-country-table', 'neo-table-container']
+         * @member {String[]} cls=['covid-country-table']
          */
-        cls: ['covid-country-table', 'neo-table-container'],
+        cls: ['covid-country-table'],
         /**
          * Default configs for each column
          * @member {Object} columnDefaults

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.5.0",
+    "version": "4.6.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Number.scss

@@ -15,7 +15,8 @@
     .neo-input-wrapper {
         .neo-field-trigger {
             &.neo-spin-buttons {
-                border-left: 0;
+                border-left   : 0;
+                flex-direction: column;
 
                 &:hover {
                     background-color: inherit;

package/src/button/Base.mjs

@@ -56,9 +56,9 @@ class Base extends Component {
          */
         badgeText_: null,
         /**
-         * @member {String[]} cls=['neo-button']
+         * @member {String[]} baseCls=['neo-button']
          */
-        cls: ['neo-button'],
+        baseCls: ['neo-button'],
         /**
          * false calls Neo.Main.setRoute()
          * @member {Boolean} editRoute=true

package/src/calendar/view/DayComponent.mjs

@@ -12,9 +12,9 @@ class DayComponent extends WeekComponent {
          */
         className: 'Neo.calendar.view.DayComponent',
         /**
-         * @member {String[]} cls=['neo-calendar-daycomponent','neo-calendar-weekcomponent']
+         * @member {String[]} baseCls=['neo-calendar-daycomponent','neo-calendar-weekcomponent']
          */
-        cls: ['neo-calendar-daycomponent', 'neo-calendar-weekcomponent'],
+        baseCls: ['neo-calendar-daycomponent', 'neo-calendar-weekcomponent'],
         /**
          * Amount of hidden columns on both sides each inside this view.
          * @member {Number} columnsBuffer=1

package/src/calendar/view/EditEventContainer.mjs

@@ -17,6 +17,10 @@ class EditEventContainer extends FormContainer {
          * @protected
          */
         className: 'Neo.calendar.view.EditEventContainer',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-edit-event-container']
+         */
+        baseCls: ['neo-calendar-edit-event-container'],
         /**
          * @member {Object} bind
          */
@@ -30,10 +34,6 @@ class EditEventContainer extends FormContainer {
          * @member {Object|null} calendarFieldConfig=null
          */
         calendarFieldConfig: null,
-        /**
-         * @member {String[]} cls=['neo-calendar-edit-event-container']
-         */
-        cls: ['neo-calendar-edit-event-container'],
         /**
          * Only full hours are valid for now
          * format: 'hh:mm'

package/src/calendar/view/MainContainer.mjs

@@ -40,6 +40,10 @@ class MainContainer extends Container {
          * @member {String} activeView_='week'
          */
         activeView_: 'week',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-maincontainer','neo-container']
+         */
+        baseCls: ['neo-calendar-maincontainer', 'neo-container'],
         /**
          * Scale the calendar with using s different base font-size
          * @member {Number|null} baseFontSize_=null
@@ -53,10 +57,6 @@ class MainContainer extends Container {
          * @member {Object|null} calendarStoreConfig_=null
          */
         calendarStoreConfig_: null,
-        /**
-         * @member {String[]} cls=['neo-container']
-         */
-        cls: ['neo-calendar-maincontainer', 'neo-container'],
         /**
          * @member {Object|null} colorStoreConfig_=null
          */

package/src/calendar/view/SettingsContainer.mjs

@@ -13,9 +13,9 @@ class SettingsContainer extends Container {
          */
         className: 'Neo.calendar.view.SettingsContainer',
         /**
-         * @member {String[]} cls=['neo-calendar-settingscontainer', 'neo-container']
+         * @member {String[]} baseCls=['neo-calendar-settingscontainer', 'neo-container']
          */
-        cls: ['neo-calendar-settingscontainer', 'neo-container'],
+        baseCls: ['neo-calendar-settingscontainer', 'neo-container'],
         /**
          * Read only
          * @member {Boolean} collapsed=false

package/src/calendar/view/YearComponent.mjs

@@ -21,6 +21,10 @@ class YearComponent extends Component {
          * @protected
          */
         className: 'Neo.calendar.view.YearComponent',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-yearcomponent']
+         */
+        baseCls: ['neo-calendar-yearcomponent'],
         /**
          * @member {Object} bind
          */
@@ -44,10 +48,6 @@ class YearComponent extends Component {
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore_: null,
-        /**
-         * @member {String[]} cls=['neo-calendar-yearcomponent']
-         */
-        cls: ['neo-calendar-yearcomponent'],
         /**
          * Will get passed from the MainContainer
          * @member {Date|null} currentDate_=null