neo.mjs 4.2.6 → 4.3.0

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/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,28 +150,27 @@ class MainContainer extends ConfigurationViewport {
             maxValue  : 300,
             minValue  : 100,
             stepSize  : 5,
+            style     : {marginTop: '10px'},
             value     : me.exampleComponent.width
         }];
     }
 
     createExampleComponent() {
         return Neo.create({
-            iconCls: 'fa fa-home',
-            module : Button,
-            text   : 'Hello World',
+            module   : Button,
+            badgeText: 'Badge',
+            height   : 50,
+            iconCls  : 'fa fa-home',
+            text     : 'Hello World',
+            width    : 150,
+
+            handler: (data) => {
+                console.log('button click =>', data.component.id);
+            }
 
             /*tooltips: [{
                 text: 'Hello World Tooltip'
-            }],*/
-
-            domListeners: {
-                click: {
-                    fn: (data) => {
-                        let button = Neo.getComponent(data.target.id);
-                        console.log('button click =>', button.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.6",
+    "version": "4.3.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,7 +55,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.16",
-        "sass": "^1.54.9",
+        "sass": "^1.55.0",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.11.1",

package/resources/scss/src/button/Base.scss

@@ -1,3 +1,14 @@
+@keyframes ripple {
+    from {
+        opacity  : 1;
+        transform: scale(0);
+    }
+    to {
+        opacity  : 0;
+        transform: scale(4);
+    }
+}
+
 .neo-disabled {
     .neo-button {
         cursor: default;
@@ -47,11 +58,58 @@
         border-color: v(button-pressed-border-color);
     }
 
+    .neo-button-badge {
+        background-color: v(button-badge-background-color);
+        border-radius   : 5px;
+        color           : v(button-badge-color);
+        margin-left     : auto;
+        padding         : 3px;
+        position        : absolute;
+        z-index         : 2;
+
+        &.neo-bottom-left {
+            bottom: -10px;
+            left  : -10px;
+        }
+
+        &.neo-bottom-right {
+            bottom: -10px;
+            right : -10px;
+        }
+
+        &.neo-top-left {
+            left: -10px;
+            top : -10px;
+        }
+
+        &.neo-top-right {
+            right: -10px;
+            top  : -10px;
+        }
+    }
+
     .neo-button-glyph {
         color         : v(button-glyph-color);
         font-size     : 12px;
         margin        : 0 6px 0 0;
         pointer-events: none;
+        z-index       : 2;
+    }
+
+    .neo-button-ripple {
+        background-color: v(button-ripple-background-color);
+        border-radius   : 50%;
+        opacity         : 0;
+        position        : absolute;
+        transform       : scale(4);
+    }
+
+    .neo-button-ripple-wrapper {
+        height        : 100%;
+        overflow      : hidden;
+        pointer-events: none;
+        position      : absolute;
+        width         : 100%;
     }
 
     .neo-button-text {
@@ -62,6 +120,7 @@
         line-height   : v(button-text-line-height);
         pointer-events: none;
         text-transform: v(button-text-transform);
+        z-index       : 2;
     }
 
     &:focus {

package/resources/scss/src/tab/Container.scss

@@ -1,6 +1,4 @@
 .neo-tab-container {
-    overflow: hidden;
-
     &.neo-bottom {
         > .neo-tab-content-container {
             border-bottom: 0;
@@ -37,4 +35,4 @@
 .neo-tab-header-toolbar {
     background-color: transparent;
     padding         : 0;
-}
+}

package/resources/scss/src/tab/header/Button.scss

@@ -42,6 +42,11 @@
         }
     }
 
+    .neo-button-badge {
+        font-size     : 10px;
+        text-transform: none;
+    }
+
     .neo-button-glyph {
         color: v(tab-button-glyph-color);
     }
@@ -59,4 +64,4 @@
         width           : 100%;
         z-index         : 2;
     }
-}
+}

package/resources/scss/src/table/header/Button.scss

@@ -59,9 +59,29 @@
         pointer-events: none;
         transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
         will-change   : opacity, transform;
+        z-index       : 2;
+    }
+
+    .neo-button-ripple {
+        background-color: v(table-header-button-ripple-background-color);
+        border-radius   : 50%;
+        opacity         : 0;
+        position        : absolute;
+        transform       : scale(4);
+    }
+
+    .neo-button-ripple-wrapper {
+        height        : 100%;
+        left          : 0;
+        overflow      : hidden;
+        pointer-events: none;
+        position      : absolute;
+        top           : 0;
+        width         : 100%;
     }
 
     .neo-button-text {
         pointer-events: none;
+        z-index       : 2;
     }
-}
+}