neo.mjs 4.6.3 → 4.6.5

package/examples/button/base/MainContainer.mjs

@@ -1,8 +1,9 @@
 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';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import SelectField           from '../../../src/form/field/Select.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
 /**
@@ -136,6 +137,21 @@ class MainContainer extends ConfigurationViewport {
             listeners : {change: me.onConfigChange.bind(me, 'text')},
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
+        }, {
+            module        : SelectField,
+            forceSelection: true,
+            labelText     : 'ui',
+            listeners     : {change: me.onConfigChange.bind(me, 'ui')},
+            style         : {marginTop: '10px'},
+            value         : me.exampleComponent.ui,
+
+            store: {
+                data: [
+                    {id: 'primary',   name: 'primary'},
+                    {id: 'secondary', name: 'secondary'},
+                    {id: 'tertiary',  name: 'tertiary'}
+                ]
+            }
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.useRippleEffect,
@@ -162,6 +178,7 @@ class MainContainer extends ConfigurationViewport {
             height   : 50,
             iconCls  : 'fa fa-home',
             text     : 'Hello World',
+            ui       : 'primary',
             width    : 150,
 
             handler: (data) => {

package/examples/toast/MainContainer.mjs

@@ -44,7 +44,7 @@ class MainContainer extends Viewport {
                 style    : {paddingBottom: '40px', marginLeft: '10px'}
             }, {
                 module   : TextField,
-                labelText: 'tile',
+                labelText: 'title',
                 name     : 'title'
             }, {
                 module   : TextField,
@@ -57,7 +57,7 @@ class MainContainer extends Viewport {
                 store    : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
             }, {
                 module   : SelectField,
-                labelText: 'slideDirection = down',
+                labelText: 'slideDirection = right',
                 name     : 'slideDirection',
                 store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
             }, {

package/examples/toast/MainContainerController.mjs

@@ -1,5 +1,5 @@
 import ComponentController from '../../src/controller/Component.mjs';
-import Toast               from '../../src/dialog/Toast.mjs';
+import Toast               from '../../src/component/Toast.mjs';
 
 /**
  * @class Neo.examples.toast.MainContainerController

package/package.json

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

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

@@ -10,29 +10,42 @@
 }
 
 .neo-disabled {
-    .neo-button {
-        cursor: default;
+    .neo-button,
+    &.neo-button {
+        background-color: v(button-background-color-disabled);
+        border-color    : v(button-border-color-disabled);
+        cursor          : default;
+        opacity         : v(button-opacity-disabled);
+
+        .neo-button-glyph {
+            color: v(button-glyph-color-disabled);
+        }
+
+        .neo-button-text {
+            color: v(button-text-color-disabled);
+        }
     }
 }
 
 .neo-button {
-    align-items        : center;
-    background-color   : v(button-background-color);
-    background-image   : v(button-background-image);
-    border             : v(button-border);
-    border-radius      : v(button-border-radius);
-    box-sizing         : border-box;
-    cursor             : pointer;
-    display            : flex;
-    flex-direction     : row;
-    justify-content    : center;
-    margin             : v(button-margin);
-    padding            : v(button-padding);
-    position           : relative;
-    text-decoration    : none; // for url buttons => links
-    user-select        : none;
-    white-space        : nowrap;
-    -webkit-appearance : button;
+    align-items       : center;
+    background-color  : v(button-background-color);
+    background-image  : v(button-background-image);
+    border            : v(button-border-width) solid v(button-border-color);
+    border-radius     : v(button-border-radius);
+    box-sizing        : border-box;
+    cursor            : pointer;
+    display           : flex;
+    flex-direction    : row;
+    justify-content   : center;
+    margin            : v(button-margin);
+    padding           : v(button-padding);
+    position          : relative;
+    text-decoration   : none; // for url buttons => links
+    transition        : outline-width .1s ease-out;
+    user-select       : none;
+    white-space       : nowrap;
+    -webkit-appearance: button;
 
     &:active {
         background-color: v(button-active-background-color) !important;
@@ -41,6 +54,10 @@
         color           : v(button-active-color) !important;
     }
 
+    &:focus {
+        outline: v(button-outline-active);
+    }
+
     &:hover {
         background-color: v(button-hover-background-color);
         background-image: none !important;
@@ -48,6 +65,30 @@
         color           : v(button-hover-color);
     }
 
+    &.neo-button-secondary {
+        background-color: v(button-text-color);
+        background-image: none;
+
+        .neo-button-badge {
+            background-color: v(button-badge-color);
+            color           : v(button-badge-background-color);
+        }
+
+        .neo-button-glyph {
+            color: v(button-background-color);
+        }
+
+        .neo-button-text {
+            color: v(button-background-color);
+        }
+    }
+
+    &.neo-button-tertiary {
+        background-color: transparent;
+        background-image: none;
+        border-width    : 0;
+    }
+
     &.no-text {
         .neo-button-glyph {
             margin: 0 !important;
@@ -125,10 +166,6 @@
         z-index       : 2;
     }
 
-    &:focus {
-        outline : 0;
-    }
-
     &.icon-bottom {
         flex-direction: column-reverse;
 

package/resources/scss/src/component/Toast.scss

@@ -0,0 +1,191 @@
+.neo-toast {
+    z-index         : 20; // ensure to be on top of table headers
+    align-items     : center;
+    background-color: v(toast-background-color);
+    border-radius   : 0.5rem;
+    box-shadow      : 0 0.25rem 0.5rem v(toast-shadow-color);
+    color           : v(toast-color);
+    display         : flex;
+    position        : fixed;
+    transition      : bottom .3s ease-out, top .3s ease-out;
+
+    .neo-toast-inner {
+        align-items: center;
+        display    : flex;
+
+        &.neo-toast-has-title {
+            .neo-toast-text {
+                text-align: left;
+            }
+        }
+
+        & > div {
+            padding: 0.25em 0.5em;
+        }
+
+        .neo-toast-icon {
+            border-right: 2px solid v(toast-color);
+            flex        : 1;
+            font-size   : 1.5em;
+        }
+
+        .neo-toast-text {
+            padding   : 0.25em 1em;
+            text-align: center;
+
+            .neo-toast-msg {
+                font-size: 0.8em;
+            }
+
+            .neo-toast-title {
+                padding-bottom: 0.2em;
+                text-transform: uppercase;
+            }
+        }
+
+        .neo-toast-close {
+            background : transparent;
+            border     : 0;
+            color      : inherit;
+            cursor     : pointer;
+            font-size  : 1.5rem;
+            line-height: 1.5;
+            margin-left: auto;
+        }
+    }
+}
+
+// ui: danger
+.neo-toast-danger {
+    background-color: v(toast-danger-background-color);
+    color: v(toast-danger-color);
+
+    & > div {
+
+        .neo-toast-inner {
+
+            .neo-toast-icon {
+                border-right: 2px solid v(toast-danger-color);
+            }
+        }
+    }
+}
+
+// ui: success
+.neo-toast-success {
+    background-color: v(toast-success-background-color);
+    color: v(toast-success-color);
+
+    & > div {
+
+        .neo-toast-inner {
+
+            .neo-toast-icon {
+                border-right: 2px solid v(toast-success-color);
+            }
+        }
+    }
+}
+
+/* Toast positions */
+.neo-toast-tr {
+    right: 1rem;
+    top  : 1rem;
+}
+
+.neo-toast-tc {
+    left     : 50%;
+    top      : 1rem;
+    transform: translateX(-50%);
+}
+
+.neo-toast-tl {
+    left: 1rem;
+    top : 1rem;
+}
+
+.neo-toast-br {
+    bottom: 1rem;
+    right : 1rem;
+}
+
+.neo-toast-bc {
+    bottom   : 1rem;
+    left     : 50%;
+    transform: translateX(-50%);
+}
+
+.neo-toast-bl {
+    bottom: 1rem;
+    left  : 1rem;
+}
+
+/* Toast slide-in animation */
+@keyframes neo-toast-slide-down-in {
+    from {
+        transform: translateY(-150%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes neo-toast-slide-up-in {
+    from {
+        transform: translateY(150%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes neo-toast-slide-left-in {
+    from {
+        transform: translateX(-150%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes neo-toast-slide-right-in {
+    from {
+        transform: translateX(150%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* Add the slide-in animation to the toast when the slide-in class is added */
+.neo-toast-slide-down-in {
+    animation: neo-toast-slide-down-in 0.25s ease-out;
+}
+
+.neo-toast-slide-up-in {
+    animation: neo-toast-slide-up-in 0.25s ease-out;
+}
+
+.neo-toast-slide-left-in {
+    animation: neo-toast-slide-left-in 0.25s ease-out;
+}
+
+.neo-toast-slide-right-in {
+    animation: neo-toast-slide-right-in 0.25s ease-out;
+}
+
+/* Toast fade-out animation */
+@keyframes neo-toast-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Add the fade-out animation to the toast when the fade-out class is added */
+.neo-toast-fade-out {
+    animation          : neo-toast-fade-out 0.25s ease-out;
+    animation-fill-mode: forwards;
+}

package/resources/scss/theme-dark/button/Base.scss

@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
     'button-active-border-color'      : #282828,
     'button-active-color'             : #bbb,
     'button-background-color'         : #3c3f41,
+    'button-background-color-disabled': #3c3f41,
     'button-background-image'         : linear-gradient(#434749, #323536),
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
@@ -10,17 +11,23 @@ $neoMap: map-merge($neoMap, (
     'button-badge-color'              : #282828,
     'button-badge-margin-left'        : -10px,
     'button-badge-margin-top'         : -10px,
-    'button-border'                   : 1px solid #2b2b2b,
+    'button-border-color'             : #2b2b2b,
+    'button-border-color-disabled'    : #2b2b2b,
     'button-border-radius'            : 0,
+    'button-border-width'             : 1px,
     'button-glyph-color'              : #bbb,
+    'button-glyph-color-disabled'     : #bbb,
     'button-hover-background-color'   : #3a3c3e,
     'button-hover-border-color'       : #292929,
     'button-hover-color'              : #bbb,
     'button-margin'                   : 2px,
+    'button-opacity-disabled'         : #{neo(neo-disabled-opacity)},
+    'button-outline-active'           : none,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #5d83a7,
     'button-ripple-background-color'  : darken(#5d83a7, 10%),
     'button-text-color'               : #bbb,
+    'button-text-color-disabled'      : #bbb,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
     'button-text-font-weight'         : 600,
@@ -35,6 +42,7 @@ $neoMap: map-merge($neoMap, (
         --button-active-border-color      : #{neo(button-active-border-color)};
         --button-active-color             : #{neo(button-active-color)};
         --button-background-color         : #{neo(button-background-color)};
+        --button-background-color-disabled: #{neo(button-background-color-disabled)};
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
@@ -42,17 +50,23 @@ $neoMap: map-merge($neoMap, (
         --button-badge-color              : #{neo(button-badge-color)};
         --button-badge-margin-left        : #{neo(button-badge-margin-left)};
         --button-badge-margin-top         : #{neo(button-badge-margin-top)};
-        --button-border                   : #{neo(button-border)};
+        --button-border-color             : #{neo(button-border-color)};
+        --button-border-color-disabled    : #{neo(button-border-color-disabled)};
         --button-border-radius            : #{neo(button-border-radius)};
+        --button-border-width             : #{neo(button-border-width)};
         --button-glyph-color              : #{neo(button-glyph-color)};
+        --button-glyph-color-disabled     : #{neo(button-glyph-color-disabled)};
         --button-hover-background-color   : #{neo(button-hover-background-color)};
         --button-hover-border-color       : #{neo(button-hover-border-color)};
         --button-hover-color              : #{neo(button-hover-color)};
         --button-margin                   : #{neo(button-margin)};
+        --button-opacity-disabled         : #{neo(button-opacity-disabled)};
+        --button-outline-active           : #{neo(button-outline-active)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
         --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
+        --button-text-color-disabled      : #{neo(button-text-color-disabled)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
         --button-text-font-weight         : #{neo(button-text-font-weight)};

package/resources/scss/theme-dark/component/Toast.scss

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+    'toast-background-color'        : lightblue,
+    'toast-color'                   : #083741,
+    'toast-danger-background-color' : #e6adad,
+    'toast-danger-color'            : #410808,
+    'toast-shadow-color'            : rgba(255, 255, 255, 0.15),
+    'toast-success-background-color': #b7e6ad,
+    'toast-success-color'           : #124108
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-dark { // .neo-toast
+    --toast-background-color        : #{neo(toast-background-color)};
+    --toast-color                   : #{neo(toast-color)};
+    --toast-shadow-color            : #{neo(toast-shadow-color)};
+    --toast-danger-background-color : #{neo(toast-danger-background-color)};
+    --toast-danger-color            : #{neo(toast-danger-color)};
+    --toast-success-background-color: #{neo(toast-success-background-color)};
+    --toast-success-color           : #{neo(toast-success-color)};
+  }
+}

package/resources/scss/theme-light/button/Base.scss

@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
     'button-active-border-color'      : #1c60a0,
     'button-active-color'             : #1c60a0,
     'button-background-color'         : #fff,
+    'button-background-color-disabled': #fff,
     'button-background-image'         : none,
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
@@ -10,17 +11,23 @@ $neoMap: map-merge($neoMap, (
     'button-badge-color'              : #fff,
     'button-badge-margin-left'        : -10px,
     'button-badge-margin-top'         : -10px,
-    'button-border'                   : 1px solid #ddd,
+    'button-border-color'             : #ddd,
+    'button-border-color-disabled'    : #ddd,
     'button-border-radius'            : 3px,
+    'button-border-width'             : 1px,
     'button-glyph-color'              : #1c60a0,
+    'button-glyph-color-disabled'     : #1c60a0,
     'button-hover-background-color'   : #fff,
     'button-hover-border-color'       : #1c60a0,
     'button-hover-color'              : #bbb,
     'button-margin'                   : 2px,
+    'button-opacity-disabled'         : #{neo(neo-disabled-opacity)},
+    'button-outline-active'           : none,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #1c60a0,
     'button-ripple-background-color'  : lighten(#1c60a0, 50%),
     'button-text-color'               : #1c60a0,
+    'button-text-color-disabled'      : #1c60a0,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
     'button-text-font-weight'         : 600,
@@ -35,6 +42,7 @@ $neoMap: map-merge($neoMap, (
         --button-active-border-color      : #{neo(button-active-border-color)};
         --button-active-color             : #{neo(button-active-color)};
         --button-background-color         : #{neo(button-background-color)};
+        --button-background-color-disabled: #{neo(button-background-color-disabled)};
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
@@ -42,17 +50,23 @@ $neoMap: map-merge($neoMap, (
         --button-badge-color              : #{neo(button-badge-color)};
         --button-badge-margin-left        : #{neo(button-badge-margin-left)};
         --button-badge-margin-top         : #{neo(button-badge-margin-top)};
-        --button-border                   : #{neo(button-border)};
+        --button-border-color             : #{neo(button-border-color)};
+        --button-border-color-disabled    : #{neo(button-border-color-disabled)};
         --button-border-radius            : #{neo(button-border-radius)};
+        --button-border-width             : #{neo(button-border-width)};
         --button-glyph-color              : #{neo(button-glyph-color)};
+        --button-glyph-color-disabled     : #{neo(button-glyph-color-disabled)};
         --button-hover-background-color   : #{neo(button-hover-background-color)};
         --button-hover-border-color       : #{neo(button-hover-border-color)};
         --button-hover-color              : #{neo(button-hover-color)};
         --button-margin                   : #{neo(button-margin)};
+        --button-opacity-disabled         : #{neo(button-opacity-disabled)};
+        --button-outline-active           : #{neo(button-outline-active)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
         --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
+        --button-text-color-disabled      : #{neo(button-text-color-disabled)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
         --button-text-font-weight         : #{neo(button-text-font-weight)};

package/resources/scss/theme-light/component/Toast.scss

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+    'toast-background-color'        : lightblue,
+    'toast-color'                   : #083741,
+    'toast-danger-background-color' : #e6adad,
+    'toast-danger-color'            : #410808,
+    'toast-shadow-color'            : rgba(0, 0, 0, 0.15),
+    'toast-success-background-color': #b7e6ad,
+    'toast-success-color'           : #124108
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-light { // .neo-toast
+    --toast-background-color        : #{neo(toast-background-color)};
+    --toast-color                   : #{neo(toast-color)};
+    --toast-shadow-color            : #{neo(toast-shadow-color)};
+    --toast-danger-background-color : #{neo(toast-danger-background-color)};
+    --toast-danger-color            : #{neo(toast-danger-color)};
+    --toast-success-background-color: #{neo(toast-success-background-color)};
+    --toast-success-color           : #{neo(toast-success-color)};
+  }
+}

package/src/component/Base.mjs

@@ -1062,7 +1062,7 @@ class Base extends CoreBase {
      * Convenience shortcut for Neo.manager.Component.down
      * @param {Object|String} config
      * @param {Boolean} returnFirstMatch=true
-     * @returns {Neo.core.Base} The matching instance or null
+     * @returns {Neo.component.Base|null} The matching instance or null
      */
     down(config, returnFirstMatch=true) {
         return ComponentManager.down(this, config, returnFirstMatch);
@@ -1187,6 +1187,15 @@ class Base extends CoreBase {
         return null;
     }
 
+    /**
+     * convenience shortcut
+     * @param {String} value
+     * @returns {Neo.component.Base|null}
+     */
+    getReference(value) {
+        return this.down({reference: value})
+    }
+
     /**
      * Walks up the vdom tree and returns the closest theme found
      * @returns {String}