neo.mjs 4.5.0 → 4.6.0

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

@@ -11,16 +11,16 @@ class ColorsList extends List {
          * @protected
          */
         className: 'Neo.calendar.view.calendars.ColorsList',
+        /**
+         * @member {String[]} baseCls=['neo-calendars-colors-list','neo-list']
+         */
+        baseCls: ['neo-calendars-colors-list', 'neo-list'],
         /**
          * @member {Object} bind
          */
         bind: {
             store: 'stores.colors'
         },
-        /**
-         * @member {String[]} cls=['neo-calendars-colors-list','neo-list']
-         */
-        cls: ['neo-calendars-colors-list', 'neo-list'],
         /**
          * @member {Boolean} useWrapperNode=false
          */

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

@@ -12,6 +12,10 @@ class Container extends BaseContainer {
          * @protected
          */
         className: 'Neo.calendar.view.calendars.Container',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-calendarscontainer','neo-container']
+         */
+        baseCls: ['neo-calendar-calendarscontainer', 'neo-container'],
         /**
          * @member {Object} bind
          */
@@ -22,10 +26,6 @@ class Container extends BaseContainer {
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore: null,
-        /**
-         * @member {String[]} cls=['neo-calendar-calendarscontainer', 'neo-container']
-         */
-        cls: ['neo-calendar-calendarscontainer', 'neo-container'],
         /**
          * @member {Object[]} items
          */
@@ -34,7 +34,7 @@ class Container extends BaseContainer {
             owner : '@config:owner' // passing the owner config downwards
         }, {
             ntype       : 'button',
-            cls         : ['neo-add-calendar-button', 'neo-button'],
+            cls         : ['neo-add-calendar-button'],
             flex        : 'none',
             handler     : 'onAddCalendarButtonClick',
             handlerScope: 'this',

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

@@ -15,9 +15,9 @@ class EditContainer extends FormContainer {
          */
         className: 'Neo.calendar.view.calendars.EditContainer',
         /**
-         * @member {String[]} cls=['neo-calendar-edit-container']
+         * @member {String[]} baseCls=['neo-calendar-edit-container']
          */
-        cls: ['neo-calendar-edit-container'],
+        baseCls: ['neo-calendar-edit-container'],
         /**
          * @member {Neo.calendar.view.calendars.ColorsList|null} colorsList=null
          */
@@ -138,7 +138,7 @@ class EditContainer extends FormContainer {
             },
             me.colorsList, {
                 module : Button,
-                cls    : ['neo-button', 'neo-red'],
+                cls    : ['neo-red'],
                 handler: me.onDeleteButtonClick.bind(me),
                 iconCls: 'fas fa-trash-alt',
                 style  : {marginTop: '3em'},

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

@@ -12,16 +12,16 @@ class List extends ComponentList {
          * @protected
          */
         className: 'Neo.calendar.view.calendars.List',
+        /**
+         * @member {String[]} baseCls=['neo-calendars-list','neo-list']
+         */
+        baseCls: ['neo-calendars-list', 'neo-list'],
         /**
          * @member {Object} bind
          */
         bind: {
             store: 'stores.calendars'
         },
-        /**
-         * @member {String[]} cls=['neo-calendars-list','neo-list']
-         */
-        cls: ['neo-calendars-list', 'neo-list'],
         /**
          * @member {Object} itemDefaults
          */
@@ -53,7 +53,7 @@ class List extends ComponentList {
 
         config = {
             checked       : record.active,
-            cls           : ['neo-checkboxfield', `neo-color-${record.color}`],
+            cls           : [`neo-color-${record.color}`],
             fieldValue    : id,
             id            : me.getComponentId(index),
             valueLabelText: record.name

package/src/calendar/view/month/Component.mjs

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

package/src/calendar/view/week/Component.mjs

@@ -33,6 +33,10 @@ class Component extends BaseComponent {
          * @protected
          */
         className: 'Neo.calendar.view.week.Component',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-weekcomponent']
+         */
+        baseCls: ['neo-calendar-weekcomponent'],
         /**
          * @member {Object} bind
          */
@@ -55,10 +59,6 @@ class Component extends BaseComponent {
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
          */
         calendarStore_: null,
-        /**
-         * @member {String[]} cls=['neo-calendar-weekcomponent']
-         */
-        cls: ['neo-calendar-weekcomponent'],
         /**
          * Amount of hidden columns on both sides each inside this view.
          * @member {Number} columnsBuffer_=7

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -21,6 +21,10 @@ class TimeAxisComponent extends Component {
          * @protected
          */
         className: 'Neo.calendar.view.week.TimeAxisComponent',
+        /**
+         * @member {String[]} baseCls=['neo-calendar-timeaxis']
+         */
+        baseCls: ['neo-calendar-timeaxis'],
         /**
          * @member {Object} bind
          */
@@ -28,10 +32,6 @@ class TimeAxisComponent extends Component {
             endTime  : data => data.endTime,
             startTime: data => data.startTime
         },
-        /**
-         * @member {String[]} cls=['neo-calendar-timeaxis']
-         */
-        cls: ['neo-calendar-timeaxis'],
         /**
          * Only full hours are valid for now
          * format: 'hh:mm'

package/src/component/Base.mjs

@@ -16,6 +16,13 @@ import VNodeUtil        from '../util/VNode.mjs';
  * @extends Neo.core.Base
  */
 class Base extends CoreBase {
+    /**
+     * Internal flag to prevent multiple CSS merges
+     * @member {Boolean} baseClsApplied=false
+     * @protected
+     */
+    baseClsApplied = false
+
     static getStaticConfig() {return {
         /**
          * Valid values for hideMode
@@ -63,6 +70,11 @@ class Base extends CoreBase {
          * @tutorial 02_ClassSystem
          */
         autoRender: false,
+        /**
+         * CSS selectors to apply to the root level node of this component
+         * @member {String[]} baseCls=[]
+         */
+        baseCls: [],
         /**
          * Bind configs to model.Component data properties.
          * Example for a button.Base:
@@ -76,7 +88,8 @@ class Base extends CoreBase {
          */
         bind: null,
         /**
-         * CSS selectors to apply to the root level node of this component
+         * Custom CSS selectors to apply to the root level node of this component
+         * You can override baseCls to remove default selectors.
          * @member {String[]} cls_=null
          */
         cls_: null,
@@ -399,7 +412,6 @@ class Base extends CoreBase {
      */
     afterSetCls(value, oldValue) {
         oldValue = oldValue || [];
-        value    = value    || [];
 
         let me       = this,
             vdom     = me.vdom,
@@ -847,6 +859,25 @@ class Base extends CoreBase {
         return {...Object.assign(this.vdom.style || {}, value)};
     }
 
+    /**
+     * Triggered before the cls config gets changed.
+     * @param {String[]} value
+     * @param {String[]} oldValue
+     * @protected
+     */
+    beforeSetCls(value, oldValue) {
+        value = value || [];
+
+        let me = this;
+
+        if (!me.baseClsApplied) {
+            value = NeoArray.union(value, me.baseCls);
+            me.baseClsApplied = true;
+        }
+
+        return value;
+    }
+
     /**
      * Triggered before the controller config gets changed.
      * Creates a controller.Component instance if needed.
@@ -1136,6 +1167,14 @@ class Base extends CoreBase {
         return this.getConfigInstanceByNtype('model', ntype);
     }
 
+    /**
+     * Get the parent components as an array
+     * @returns {Neo.component.Base[]}
+     */
+    getParents() {
+        return ComponentManager.getParents(this);
+    }
+
     /**
      * @param {Object|String} opts
      * @returns {Neo.plugin.Base|null}

package/src/component/BoxLabel.mjs

@@ -18,9 +18,9 @@ class BoxLabel extends Label {
          */
         ntype: 'box-label',
         /**
-         * @member {String[]} cls=['neo-label']
+         * @member {String[]} baseCls=['neo-box-label','neo-label']
          */
-        cls: ['neo-box-label', 'neo-label']
+        baseCls: ['neo-box-label', 'neo-label']
     }}
 }
 

package/src/component/Carousel.mjs

@@ -46,9 +46,9 @@ class Carousel extends Component {
          */
         autoRun_: 0,
         /**
-         * @member {String[]} cls=['neo-carousel']
+         * @member {String[]} baseCls=['neo-carousel']
          */
-        cls : ['neo-carousel'],
+        baseCls: ['neo-carousel'],
         /**
          * Custom cls added to each item
          * This is only a single string

package/src/component/Chip.mjs

@@ -17,15 +17,15 @@ class Chip extends Component {
          * @protected
          */
         ntype: 'chip',
+        /**
+         * @member {String[]} baseCls=['neo-chip']
+         */
+        baseCls: ['neo-chip'],
         /**
          * True shows a close button on the right side
          * @member {Boolean} closable_=true
          */
         closable_: true,
-        /**
-         * @member {String[]} cls=['neo-chip']
-         */
-        cls: ['neo-chip'],
         /**
          * Convenience shortcut for style.display
          * @member {String} display_='inline-flex'

package/src/component/Circle.mjs

@@ -28,15 +28,15 @@ class Circle extends Component {
          * @member {String|null} backsideIconPath=Neo.config.resourcesPath + 'images/circle/'
          */
         backsideIconPath: null,
+        /**
+         * @member {String[]} baseCls=['neo-circle-component']
+         */
+        baseCls: ['neo-circle-component'],
         /**
          * @member {Boolean} circleCenterHasTransitionCls=true
          * @protected
          */
         circleCenterHasTransitionCls: true,
-        /**
-         * @member {String[]} cls=['neo-circle-component']
-         */
-        cls: ['neo-circle-component'],
         /**
          * @member {Boolean} collapsed=true
          */

package/src/component/Clock.mjs

@@ -19,9 +19,9 @@ class Clock extends Component {
          */
         ntype: 'clock',
         /**
-         * @member {String[]} cls=['neo-clock']
+         * @member {String[]} baseCls=['neo-clock']
          */
-        cls: ['neo-clock'],
+        baseCls: ['neo-clock'],
         /**
          * Value in px
          * @member {Number} fontSize_=20

package/src/component/DateSelector.mjs

@@ -29,16 +29,16 @@ class DateSelector extends Component {
          * @protected
          */
         ntype: 'dateselector',
+        /**
+         * @member {String[]} baseCls=['neo-dateselector']
+         */
+        baseCls: ['neo-dateselector'],
         /**
          * Stores the last date change which got triggered while a month / year transition was running
          * @member {Date|null} cachedUpdate=null
          * @protected
          */
         cachedUpdate: null,
-        /**
-         * @member {String[]} cls=['neo-dateselector']
-         */
-        cls: ['neo-dateselector'],
         /**
          * Date object created on the value config
          * @member {Date|null} currentDate_=null

package/src/component/Gallery.mjs

@@ -33,9 +33,9 @@ class Gallery extends Component {
          */
         backgroundColor_: '#000000',
         /**
-         * @member {String[]} cls=['neo-gallery', 'page', 'view']
+         * @member {String[]} baseCls=['neo-gallery', 'page', 'view']
          */
-        cls: ['neo-gallery', 'page', 'view'],
+        baseCls: ['neo-gallery', 'page', 'view'],
         /**
          * True disables selection of gallery items
          * @member {Boolean} disableSelection=false

package/src/component/Helix.mjs

@@ -34,16 +34,16 @@ class Helix extends Component {
          * @member {String} backgroundImage_=''
          */
         backgroundImage_: '',
+        /**
+         * @member {String[]} baseCls=['neo-helix']
+         */
+        baseCls: ['neo-helix'],
         /**
          * The ids of expanded items will get stored here
          * @member {Array} clonedItems=[]
          * @protected
          */
         clonedItems: [],
-        /**
-         * @member {String[]} cls=['neo-helix']
-         */
-        cls: ['neo-helix'],
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY_=1.5

package/src/component/Iframe.mjs

@@ -12,9 +12,9 @@ class Iframe extends Base {
          */
         className: 'Neo.component.Iframe',
         /*
-         * @member {String[]} cls=['neo-iframe']
+         * @member {String[]} baseCls=['neo-iframe']
          */
-        cls: ['neo-iframe'],
+        baseCls: ['neo-iframe'],
         /*
          * @member {String|null} src_=null
          */

package/src/component/Label.mjs

@@ -18,9 +18,9 @@ class Label extends Component {
          */
         ntype: 'label',
         /**
-         * @member {String[]} cls=['neo-label']
+         * @member {String[]} baseCls=['neo-label']
          */
-        cls: ['neo-label'],
+        baseCls: ['neo-label'],
         /**
          * @member {String} text_=''
          */

package/src/component/Legend.mjs

@@ -19,9 +19,9 @@ class Legend extends Component {
          */
         ntype: 'legend',
         /**
-         * @member {String[]} cls=['neo-legend']
+         * @member {String[]} baseCls=['neo-legend']
          */
-        cls: ['neo-legend'],
+        baseCls: ['neo-legend'],
         /**
          * @member {String} iconCls_='far fa-check'
          */

package/src/component/Splitter.mjs

@@ -37,9 +37,9 @@ class Splitter extends Component {
          */
         ntype: 'splitter',
         /**
-         * @member {String[]} cls=['neo-splitter','neo-draggable']
+         * @member {String[]} baseCls=['neo-splitter','neo-draggable']
          */
-        cls: ['neo-splitter', 'neo-draggable'],
+        baseCls: ['neo-splitter', 'neo-draggable'],
         /**
          * Either 'horizontal' or 'vertical'
          * @member {String} direction_='vertical'

package/src/component/wrapper/AmChart.mjs

@@ -24,6 +24,11 @@ class AmChart extends Component {
          * @member {Object} chartConfig_=null
          */
         chartConfig_: null,
+        /**
+         * Stores the chart data
+         * @member {Array|null} chartData_=null
+         */
+        chartData_: null,
         /**
          * @member {String} chartType='XYChart'
          */
@@ -33,11 +38,6 @@ class AmChart extends Component {
          * @member {Boolean} combineSeriesTooltip=false
          */
         combineSeriesTooltip: false,
-        /**
-         * Stores the chart data
-         * @member {Array|null} chartData_=null
-         */
-        chartData_: null,
         /**
          * Charts & maps can have different targets to apply the data to. E.g.:
          * myChart.data = data; // => ''

package/src/component/wrapper/MapboxGL.mjs

@@ -23,6 +23,10 @@ class MapboxGL extends Component {
          * @member {String|null} accessToken=null
          */
         accessToken: null,
+        /**
+         * @member {Array|null} chartData_=null
+         */
+        chartData_: null,
         /**
          * @member {Object} center_={lat: 0, lng: 0}
          */
@@ -32,10 +36,6 @@ class MapboxGL extends Component {
          * @protected
          */
         convertDataToGeoJson: true,
-        /**
-         * @member {Array|null} chartData_=null
-         */
-        chartData_: null,
         /**
          * Assuming there is just 1 source for data changes.
          * Create a ticket in case it needs to get enhanced.

package/src/container/Base.mjs

@@ -25,9 +25,9 @@ class Base extends Component {
          */
         ntype: 'container',
         /**
-         * @member {String[]} cls=['neo-container']
+         * @member {String[]} baseCls=['neo-container']
          */
-        cls: ['neo-container'],
+        baseCls: ['neo-container'],
         /**
          * @member {Object} itemDefaults_=null
          */

package/src/container/Panel.mjs

@@ -19,9 +19,9 @@ class Panel extends Container {
          */
         ntype: 'panel',
         /**
-         * @member {String[]} cls=['neo-panel','neo-container']
+         * @member {String[]} baseCls=['neo-panel','neo-container']
          */
-        cls: ['neo-panel', 'neo-container'],
+        baseCls: ['neo-panel', 'neo-container'],
         /**
          * @member {Object} containerConfig=null
          */

package/src/container/Viewport.mjs

@@ -22,9 +22,9 @@ class Viewport extends Container {
          */
         applyBodyCls: true,
         /**
-         * @member {String[]} cls=['neo-viewport']
+         * @member {String[]} baseCls=['neo-viewport']
          */
-        cls: ['neo-viewport']
+        baseCls: ['neo-viewport']
     }}
 
     /**
@@ -36,7 +36,7 @@ class Viewport extends Container {
         this.applyBodyCls && Neo.main.DomAccess.applyBodyCls({
             appName: this.appName,
             cls    : ['neo-body-viewport']
-        });
+        })
     }
 }
 

package/src/dialog/Base.mjs

@@ -47,6 +47,11 @@ class Base extends Panel {
          * @member {Boolean} autoRender=true
          */
         autoRender: true,
+        /**
+         * @member {String[]} baseCls=['neo-dialog','neo-panel','neo-container']
+         * @protected
+         */
+        baseCls: ['neo-dialog', 'neo-panel', 'neo-container'],
         /**
          * Either a dom node id, 'document.body' or null
          * @member {String|null} boundaryContainerId='document.body'
@@ -59,11 +64,6 @@ class Base extends Panel {
          * @member {String} closeAction='close'
          */
         closeAction: 'close',
-        /**
-         * @member {String[]} cls=['neo-dialog','neo-panel','neo-container']
-         * @protected
-         */
-        cls: ['neo-dialog', 'neo-panel', 'neo-container'],
         /**
          * @member {Boolean} draggable_=true
          */

package/src/filter/BooleanContainer.mjs

@@ -18,9 +18,9 @@ class BooleanContainer extends Container {
          */
         ntype: 'filter-booleancontainer',
         /**
-         * @member {Array} cls=['neo-filter-booleancontainer']
+         * @member {String[]} baseCls=['neo-filter-booleancontainer']
          */
-        cls: ['neo-filter-booleancontainer'],
+        baseCls: ['neo-filter-booleancontainer'],
         /**
          * @member {Object} layout={ntype: 'hbox', align: 'center'}
          */

package/src/filter/NumberContainer.mjs

@@ -18,15 +18,15 @@ class NumberContainer extends Container {
          * @protected
          */
         ntype: 'filter-numbercontainer',
+        /**
+         * @member {String[]} baseCls=['neo-filter-numbercontainer']
+         */
+        baseCls: ['neo-filter-numbercontainer'],
         /**
          * Pass config to the ToggleOperatorsButton
          * @member {Object|null} buttonConfig=null
          */
         buttonConfig: null,
-        /**
-         * @member {Array} cls=['neo-filter-numbercontainer']
-         */
-        cls: ['neo-filter-numbercontainer'],
         /**
          * @member {Neo.form.field.Base} fieldModule=Number
          */

package/src/form/Container.mjs

@@ -19,10 +19,10 @@ class Container extends BaseContainer {
          */
         ntype: 'form-container',
         /**
-         * @member {String[]} cls=['neo-form-container'],
+         * @member {String[]} baseCls=['neo-form-container'],
          * @protected
          */
-        cls: ['neo-form-container'],
+        baseCls: ['neo-form-container'],
         /**
          * @member {Object} vdom={tag: 'form',cn:[],onsubmit:'return false;'}
          */

package/src/form/Fieldset.mjs

@@ -19,9 +19,9 @@ class Fieldset extends Container {
          */
         ntype: 'fieldset',
         /**
-         * @member {String[]} cls=['neo-fieldset'],
+         * @member {String[]} baseCls=['neo-fieldset'],
          */
-        cls: ['neo-fieldset'],
+        baseCls: ['neo-fieldset'],
         /**
          * @member {Boolean} collapsed_=false,
          */

package/src/form/field/CheckBox.mjs

@@ -17,13 +17,13 @@ class CheckBox extends Base {
          */
         ntype: 'checkboxfield',
         /**
-         * @member {Boolean} checked_=false
+         * @member {String[]} baseCls=['neo-checkboxfield']
          */
-        checked_: false,
+        baseCls: ['neo-checkboxfield'],
         /**
-         * @member {Array} cls=['neo-checkboxfield']
+         * @member {Boolean} checked_=false
          */
-        cls: ['neo-checkboxfield'],
+        checked_: false,
         /**
          * True to change the checked state when clicking on the value label
          * @member {Boolean} enableLabelClicks_=true

package/src/form/field/Color.mjs

@@ -19,9 +19,9 @@ class Color extends Select {
          */
         ntype: 'colorfield',
         /**
-         * @member {String[]} cls=['neo-colorfield','neo-selectfield','neo-pickerfield','neo-textfield']
+         * @member {String[]} baseCls=['neo-colorfield','neo-selectfield','neo-pickerfield','neo-textfield']
          */
-        cls: ['neo-colorfield', 'neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
+        baseCls: ['neo-colorfield', 'neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
         /**
          * The data.Model field which contains the color value
          * @member {String} colorField='name'