neo.mjs 4.2.7 → 4.3.1

package/apps/realworld/view/HomeComponent.mjs

@@ -95,15 +95,12 @@ class HomeComponent extends Component {
             cls : 'prevent-click'
         });
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: {fn: me.onNavLinkClick,     delegate: '.nav-link',  scope: me}},
             {click: {fn: me.onPageNavLinkClick, delegate: '.page-link', scope: me}}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.getController().on({
             afterSetCurrentUser: me.onCurrentUserChange,

package/apps/realworld/view/article/CommentComponent.mjs

@@ -66,15 +66,12 @@ class CommentComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: {fn: me.onDeleteButtonClick, delegate: '.ion-trash-a', scope: me}}
             /*{click: {fn: me.onEditButtonClick,   delegate: '.ion-edit',    scope: me}*/
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.getController().on({
             afterSetCurrentUser: me.onCurrentUserChange,

package/apps/realworld/view/article/Component.mjs

@@ -144,17 +144,14 @@ class Component extends BaseComponent {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: {fn: me.onDeleteButtonClick,   delegate: '.delete-button',   scope: me}},
             {click: {fn: me.onEditButtonClick,     delegate: '.edit-button',     scope: me}},
             {click: {fn: me.onFavoriteButtonClick, delegate: '.favorite-button', scope: me}},
-            {click: {fn: me.onFollowButtonClick,   delegate: '.follow-button',   scope: me}
-        });
-
-        me.domListeners = domListeners;
+            {click: {fn: me.onFollowButtonClick,   delegate: '.follow-button',   scope: me}}
+        ]);
 
         me.getController().on({
             afterSetCurrentUser: me.onCurrentUserChange,

package/apps/realworld/view/article/CreateCommentComponent.mjs

@@ -46,11 +46,10 @@ class CreateCommentComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners,
-            vdom         = me.vdom;
+        let me   = this,
+            vdom = me.vdom;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onSubmitButtonClick,
                 delegate: '.btn-primary',
@@ -58,8 +57,6 @@ class CreateCommentComponent extends Component {
             }
         });
 
-        me.domListeners = domListeners;
-
         vdom.cn[0].cn[0].id = me.getInputElId();
         me.vdom = vdom;
 

package/apps/realworld/view/article/CreateComponent.mjs

@@ -82,16 +82,13 @@ class CreateComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click  : {fn: me.onSubmitButtonClick, delegate: '.btn-primary',     scope: me}},
             {click  : {fn: me.onTagClose,          delegate: '.ion-close-round', scope: me}},
             {keydown: {fn: me.onFieldTagsKeyDown,  delegate: '.field-tags',      scope: me}}
-        );
-
-        me.domListeners = domListeners;
+        ]);
     }
 
     /**

package/apps/realworld/view/article/PreviewComponent.mjs

@@ -84,18 +84,15 @@ class PreviewComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onFavoriteButtonClick,
                 delegate: '.pull-xs-right',
                 scope   : me
             }
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/apps/realworld/view/article/TagListComponent.mjs

@@ -55,18 +55,15 @@ class TagListComponent extends Component {
             cls : 'tag-pill'
         });
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onTagLinkClick,
                 delegate: '.tag-pill',
                 scope   : me
             }
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/apps/realworld/view/user/ProfileComponent.mjs

@@ -105,15 +105,12 @@ class ProfileComponent extends Component {
             cls : 'prevent-click'
         });
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: {fn: me.onFollowButtonClick, delegate: '.follow-button', scope: me}},
             {click: {fn: me.onNavLinkClick,      delegate: '.nav-link',      scope: me}}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.getController().on({
             afterSetCurrentUser: me.onCurrentUserChange,

package/apps/realworld/view/user/SettingsComponent.mjs

@@ -80,15 +80,12 @@ class SettingsComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: {fn: me.onLogoutButtonClick, delegate: '.btn-outline-danger', scope: me}},
             {click: {fn: me.onSubmitButtonClick, delegate: '.btn-primary',        scope: me}}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.getController().on({
             afterSetCurrentUser: me.onCurrentUserChange,

package/apps/realworld/view/user/SignUpComponent.mjs

@@ -67,18 +67,15 @@ class SignUpComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onSubmitButtonClick,
                 delegate: '.btn-primary',
                 scope   : me
             }
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/apps/realworld2/view/article/PreviewComponent.mjs

@@ -97,18 +97,15 @@ class PreviewComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onFavoriteButtonClick,
                 delegate: '.pull-xs-right',
                 scope   : me
             }
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/apps/realworld2/view/article/TagListComponent.mjs

@@ -59,18 +59,15 @@ class TagListComponent extends Component {
             cls : 'tag-pill'
         });
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: {
                 fn      : me.onTagLinkClick,
                 delegate: '.tag-pill',
                 scope   : me
             }
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/apps/website/view/MainContainer.mjs

@@ -65,6 +65,7 @@ class MainContainer extends Viewport {
                     tabButtonConfig: {
                         editRoute: false,
                         iconCls  : 'fa fa-rss',
+                        reference: 'blog-header-button',
                         route    : 'mainview=blog',
                         text     : 'Blog'
                     }

package/apps/website/view/MainContainerController.mjs

@@ -42,6 +42,13 @@ class MainContainerController extends ComponentController {
         return this.getReference(this.mainTabs[tabIndex]);
     }
 
+    /**
+     * @param {Object[]} records
+     */
+    onBlogPostStoreLoad(records) {
+        this.getReference('blog-header-button').badgeText = records.length + ''
+    }
+
     /**
      *
      */

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

@@ -24,15 +24,39 @@ class List extends BaseList {
          */
         className: 'Website.view.blog.List',
         /**
-         * @member {String[]} cls=['website-blog-list','neo-list-container','neo-list']
+         * @member {String[]} cls=['website-blog-list','neo-list']
          */
-        cls: ['website-blog-list', 'neo-list-container', 'neo-list'],
+        cls: ['website-blog-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=BlogPosts
          */
-        store: BlogPosts
+        store: BlogPosts,
+        /**
+         * @member {Boolean} useWrapperNode=true
+         */
+        useWrapperNode: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {tag: 'ul', cn: []}
+        ]}
     }}
 
+    /**
+     * @param {Neo.data.Store} value
+     * @param {Neo.data.Store} oldValue
+     */
+    afterSetStore(value, oldValue) {
+        super.afterSetStore(value, oldValue);
+
+        value.on({
+            load : 'onBlogPostStoreLoad',
+            scope: this.getController()
+        });
+    }
+
     /**
      * @param {Object} record
      */
@@ -131,6 +155,20 @@ class List extends BaseList {
 
         me.vdom = vdom;
     }
+
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0];
+    }
 }
 
 Neo.applyClassConfig(List);

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-container','neo-list']
+         * @member {String[]} cls=['website-examples-list','neo-list']
          */
-        cls: ['website-examples-list', 'neo-list-container', 'neo-list'],
+        cls: ['website-examples-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=Examples
          */
@@ -33,7 +33,18 @@ class List extends BaseList {
         /**
          * @member {String|null} storeUrl_=null
          */
-        storeUrl_: null
+        storeUrl_: null,
+        /**
+         * @member {Boolean} useWrapperNode=true
+         */
+        useWrapperNode: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {tag: 'ul', cn: []}
+        ]}
     }}
 
     /**
@@ -96,6 +107,20 @@ class List extends BaseList {
             ]}
         ];
     }
+
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0];
+    }
 }
 
 Neo.applyClassConfig(List);

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

@@ -17,10 +17,15 @@ class TabContainer extends Container {
          */
         activeIndex: 2,
         /**
-         * @member {Array} items
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: List
+        },
+        /**
+         * @member {Object[]} items
          */
         items: [{
-            module         : List,
             reference      : 'examples-devmode-list',
             storeUrl       : '../../apps/website/data/examples_devmode.json',
             tabButtonConfig: {
@@ -29,7 +34,6 @@ class TabContainer extends Container {
                 text   : 'DevMode'
             }
         }, {
-            module         : List,
             reference      : 'examples-dist-dev-list',
             storeUrl       : '../../apps/website/data/examples_dist_dev.json',
             tabButtonConfig: {
@@ -38,7 +42,6 @@ class TabContainer extends Container {
                 text   : 'dist/dev'
             }
         }, {
-            module         : List,
             reference      : 'examples-dist-prod-list',
             storeUrl       : '../../apps/website/data/examples_dist_prod.json',
             tabButtonConfig: {

package/buildScripts/addConfig.mjs

@@ -261,6 +261,7 @@ if (programOpts.info) {
             default: 'Custom',
             choices: [
                 'Custom',
+                'Boolean',
                 'Object',
                 'Object[]',
                 'Number',

package/examples/ConfigurationViewport.mjs

@@ -74,7 +74,7 @@ class ConfigurationViewport extends Viewport {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],
             flex  : me.configPanelFlex,
-            style : {margin: '20px'},
+            style : {margin: '20px', minWidth: '350px'},
 
             containerConfig: {
                 style: {overflowY: 'scroll'}

package/examples/button/base/MainContainer.mjs

@@ -1,4 +1,5 @@
 import Button                from '../../../src/button/Base.mjs';
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
@@ -12,8 +13,8 @@ class MainContainer extends ConfigurationViewport {
     static getConfig() {return {
         className           : 'Neo.examples.button.base.MainContainer',
         autoMount           : true,
-        configItemLabelWidth: 110,
-        configItemWidth     : 230,
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
         layout              : {ntype: 'hbox', align: 'stretch'}
     }}
 
@@ -21,6 +22,50 @@ class MainContainer extends ConfigurationViewport {
         let me = this;
 
         return [{
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-left',
+            hideValueLabel: false,
+            labelText     : 'badgePosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-right'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-right'
+        }, {
+            module    :  TextField,
+            labelText : 'badgeText',
+            listeners : {change: me.onConfigChange.bind(me, 'badgeText')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.badgeText
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
             module    :  NumberField,
             clearable : true,
             labelText : 'height',
@@ -28,6 +73,7 @@ class MainContainer extends ConfigurationViewport {
             maxValue  : 300,
             minValue  : 30,
             stepSize  : 5,
+            style     : {marginTop: '10px'},
             value     : me.exampleComponent.height
         }, {
             module    :  TextField, // todo: selectField with options
@@ -48,7 +94,7 @@ class MainContainer extends ConfigurationViewport {
             listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'top')},
             name          : 'iconPosition',
             style         : {marginTop: '10px'},
-            valueLabelText: 'Top'
+            valueLabelText: 'top'
         }, {
             module        : Radio,
             checked       : me.exampleComponent.iconPosition === 'right',
@@ -56,7 +102,7 @@ class MainContainer extends ConfigurationViewport {
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'right')},
             name          : 'iconPosition',
-            valueLabelText: 'Right'
+            valueLabelText: 'right'
         }, {
             module        : Radio,
             checked       : me.exampleComponent.iconPosition === 'bottom',
@@ -64,7 +110,7 @@ class MainContainer extends ConfigurationViewport {
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'bottom')},
             name          : 'iconPosition',
-            valueLabelText: 'Bottom'
+            valueLabelText: 'bottom'
         }, {
             module        : Radio,
             checked       : me.exampleComponent.iconPosition === 'left',
@@ -72,7 +118,17 @@ class MainContainer extends ConfigurationViewport {
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'left')},
             name          : 'iconPosition',
-            valueLabelText: 'Left'
+            valueLabelText: 'left'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'rippleEffectDuration',
+            listeners : {change: me.onConfigChange.bind(me, 'rippleEffectDuration')},
+            maxValue  : 5000,
+            minValue  : 100,
+            stepSize  : 100,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.rippleEffectDuration
         }, {
             module    :  TextField,
             clearable : true,
@@ -80,6 +136,12 @@ class MainContainer extends ConfigurationViewport {
             listeners : {change: me.onConfigChange.bind(me, 'text')},
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.useRippleEffect,
+            labelText: 'useRippleEffect',
+            listeners: {change: me.onConfigChange.bind(me, 'useRippleEffect')},
+            style    : {marginTop: '10px'}
         }, {
             module    :  NumberField,
             clearable : true,
@@ -88,18 +150,19 @@ class MainContainer extends ConfigurationViewport {
             maxValue  : 300,
             minValue  : 100,
             stepSize  : 5,
+            style     : {marginTop: '10px'},
             value     : me.exampleComponent.width
         }];
     }
 
     createExampleComponent() {
         return Neo.create({
-            height         : 50,
-            iconCls        : 'fa fa-home',
-            module         : Button,
-            text           : 'Hello World',
-            useRippleEffect: true,
-            width          : 150,
+            module   : Button,
+            badgeText: 'Badge',
+            height   : 50,
+            iconCls  : 'fa fa-home',
+            text     : 'Hello World',
+            width    : 150,
 
             handler: (data) => {
                 console.log('button click =>', data.component.id);

package/examples/tab/container/MainContainer.mjs

@@ -140,13 +140,13 @@ class MainContainer extends ConfigurationViewport {
             },
 
             items: [{
-                tabButtonConfig: {iconCls: 'fa fa-home',        text     : 'Tab 1'},
+                tabButtonConfig: {iconCls: 'fa fa-home',        text: 'Tab 1'},
                 vdom           : {innerHTML: 'Tab 1 Content'}
             }, {
-                tabButtonConfig: {iconCls: 'fa fa-play-circle', text     : 'Tab 2'},
+                tabButtonConfig: {iconCls: 'fa fa-play-circle', text: 'Tab 2'},
                 vdom           : {innerHTML: 'Tab 2 Content'}
             }, {
-                tabButtonConfig: {iconCls: 'fa fa-user',        text     : 'Tab 3'},
+                tabButtonConfig: {iconCls: 'fa fa-user',        text: 'Tab 3', badgeText: 'hello'},
                 vdom           : {innerHTML: 'Tab 3 Content'}
             }],
 

package/examples/todoList/version1/MainComponent.mjs

@@ -43,16 +43,13 @@ class MainComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners || [];
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {click: me.onAddButtonClick,   delegate: 'todo-add-button'},
             {click: me.onCheckIconClick,   delegate: 'todo-item'},
             {input: me.onInputFieldChange, delegate: 'todo-input'}
-        );
-
-        me.domListeners = domListeners;
+        ]);
 
         me.createItems(me.data || []);
     }

package/package.json

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

package/resources/scss/src/apps/website/blog/List.scss

@@ -1,4 +1,4 @@
-.website-blog-list.neo-list-container.neo-list {
+.website-blog-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -180,4 +180,4 @@
             width : 44px;
         }
     }
-}
+}