neo.mjs 5.10.2 → 5.10.4

package/examples/container/accordion/MainContainer.mjs

@@ -0,0 +1,123 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Accordion             from '../../../src/container/Accordion.mjs';
+import Container             from '../../../src/container/Base.mjs';
+
+/**
+ * @class Neo.examples.button.base.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.button.base.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            ntype: 'component',
+            html : '<u><b>TOP ACCORDION</b></u>',
+            style: {marginTop: '10px'},
+        }, {
+            ntype: 'component',
+            html : '<b>maxExpandedItems:</b> 2',
+            style: {marginTop: '10px'},
+        }, {
+            ntype: 'component',
+            html : '<b>initialOpen:</b> [0, 1]',
+            style: {marginTop: '10px'},
+        }, {
+            ntype: 'component',
+            html : '<u><b>BOTTOM ACCORDION</b></u>',
+            style: {marginTop: '10px'},
+        }, {
+            ntype: 'component',
+            html : '<b>maxExpandedItems:</b> 1',
+            style: {marginTop: '10px'},
+        }, {
+            ntype: 'component',
+            html : '<b>initialOpen:</b> [0]',
+            style: {marginTop: '10px'},
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create({
+            module: Container,
+            items : [{
+                module: Accordion,
+
+                title           : 'TOP',
+                maxExpandedItems: 2,
+                initialOpen     : [0, 1],
+
+                height: 550,
+                style : {
+                    backgroundColor: 'grey',
+                    padding        : '15px'
+                },
+
+                items: [{
+                    iconCls: 'fa fa-dice-one',
+                    title  : 'First Headerbar',
+                    items  : [{
+                        ntype: 'component',
+                        html : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
+                    }]
+                }, {
+                    iconCls: 'fa-dice-two',
+                    title  : 'Second Headerbar',
+                    items  : [{
+                        html: 'Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.'
+                    }]
+                }, {
+                    iconCls: 'fa-dice-three',
+                    title  : 'Third Headerbar',
+                    items  : [{
+                        html: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.'
+                    }]
+                }]
+            }, {
+                module: Accordion,
+
+                title           : 'bottom',
+                maxExpandedItems: 1,
+                initialOpen     : [0],
+
+                height: 550,
+                style : {
+                    backgroundColor: 'darkgrey',
+                    padding        : '15px'
+                },
+
+                items: [{
+                    iconCls: 'fa fa-1',
+                    title  : 'Define Content',
+                    items  : [{
+                        ntype: 'component',
+                        html : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
+                    }]
+                }, {
+                    iconCls: 'fa-2',
+                    title  : 'Mark Best Fit',
+                    items  : [{
+                        html: 'Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.'
+                    }]
+                }, {
+                    iconCls: 'fa-3',
+                    title  : 'Create Invoice',
+                    items  : [{
+                        html: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.'
+                    }]
+                }]
+            }]
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/container/accordion/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.container.accordion'
+});

package/examples/container/accordion/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Accordion</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/container/accordion/neo-config.json

@@ -0,0 +1,6 @@
+{
+  "appPath": "examples/container/accordion/app.mjs",
+  "basePath": "../../../",
+  "environment": "development",
+  "mainPath": "./Main.mjs"
+}

package/package.json

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

package/resources/scss/src/component/Process.scss

@@ -1,14 +1,12 @@
 .neo-process {
-  // will be set by the component if changes
-  --process-arrow-color: v(process-arrow-color);
-  --process-icon-color: v(process-icon-color);
-
   display: flex;
+  flex-wrap: wrap;
   background-color: v(process-background-color);
   padding: 0.5rem;
 
   .process-step {
     position: relative;
+    flex: 1;
     z-index: 0;
     padding: 0.75rem;
 

package/resources/scss/src/container/Accordion.scss

@@ -0,0 +1,25 @@
+.neo-accordion {
+
+  & > div:not(.neo-accordion-item, .neo-accordion-title) {
+    background-color: transparent;
+    overflow: unset;
+
+  }
+
+  .neo-accordion-title {
+    background-color: v(accordion-title-bg-color);
+    margin-bottom: 15px;
+    padding: 5px;
+    border-radius: v(accordion-item-radius);
+    color: v(accordion-title-color);
+
+    label {
+      text-transform: uppercase;
+      font-weight: 600;
+      font-size: 1.1rem;
+      text-align: center;
+      width: 100%;
+    }
+  }
+}
+

package/resources/scss/src/container/AccordionItem.scss

@@ -0,0 +1,83 @@
+.neo-accordion-item {
+  box-shadow: v(accordion-item-shadow);
+  background-color: v(accordion-item-bg-color);
+  border: 1px solid v(accordion-item-border-color);
+  border-radius: v(accordion-item-radius);
+
+  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+  max-height: v(accordion-item-header-height);
+
+  overflow: hidden;
+
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
+
+  & > div {
+    background-color: transparent;
+  }
+
+  &.neo-expanded {
+    max-height: 1000px;
+    transition: max-height 1s ease-in-out;
+
+    .neo-toolbar {
+      border-bottom-color: v(accordion-item-border-color);
+
+      .neo-accordion-header-arrow::before {
+        transform: rotate(0deg);
+      }
+    }
+  }
+
+  &.neo-scrollable {
+    .neo-accordion-content {
+      overflow: auto;
+    }
+  }
+
+  .neo-toolbar {
+    max-height: v(accordion-item-header-height);
+    min-height: v(accordion-item-header-height);
+    border-bottom: 1px solid transparent;
+
+    .neo-accordion-header-icon {
+      &::before {
+        margin: 0 15px 0 10px;
+      }
+
+      &.no-icon {
+        margin-left: 10px;
+      }
+    }
+
+    .neo-accordion-header-title {
+      flex: 1 !important;
+      font-weight: 600;
+    }
+
+    .neo-accordion-header-arrow {
+      background-color: v(accordion-item-arrow-bg-color);
+      height: 30px;
+      width: 30px;
+      border-radius: v(accordion-item-radius);
+      box-shadow: v(accordion-item-arrow-shadow);
+      padding: 7px;
+      text-align: center;
+
+
+      &::before {
+        display: inline-block;
+        transform: rotate(-180deg);
+        transition: transform .5s ease-out;
+      }
+    }
+  }
+
+  .neo-accordion-content {
+    background-color: v(accordion-item-content-bg-color);
+    border-bottom-left-radius: v(accordion-item-radius);
+    border-bottom-right-radius: v(accordion-item-radius);
+    padding: 15px;
+  }
+}

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

@@ -1,5 +1,6 @@
 .neo-checkboxfield {
     .neo-checkbox-input {
+        margin: 0;
         width: 0; // using display: none would break the keynav
 
         &:checked {

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

@@ -1,6 +1,7 @@
 .neo-rangefield {
     .neo-rangefield-input {
         margin-top: 12px;
+        flex:1;
     }
 
     input[type=range] {

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

@@ -1,11 +1,11 @@
 $neoMap: map-merge($neoMap, (
-        'process-arrow-color'     : #ffdb4a,
-        'process-background-color': #fff,
-        'process-icon-color'      : steelblue,
-        'process-icon-size'     : 2rem,
-        'process-shadow-color'  : rgba(0, 0, 0, .5),
-        'process-title-color'   : #363636,
-        'process-text-color'    : #444444
+  'process-arrow-color'     : #6d5f28,
+  'process-background-color': #2b2b2b,
+  'process-icon-color'      : #a3996f,
+  'process-icon-size'       : 2rem,
+  'process-shadow-color'    : rgba(0, 0, 0, .5),
+  'process-text-color'      : #bbb,
+  'process-title-color'     : #ccc
 ));
 
 @if $useCssVars == true {
@@ -15,7 +15,7 @@ $neoMap: map-merge($neoMap, (
     --process-icon-color      : #{neo(process-icon-color)};
     --process-icon-size       : #{neo(process-icon-size)};
     --process-shadow-color    : #{neo(process-shadow-color)};
-    --process-title-color     : #{neo(process-title-color)};
     --process-text-color      : #{neo(process-text-color)};
+    --process-title-color     : #{neo(process-title-color)};
   }
 }

package/resources/scss/theme-dark/container/Accordion.scss

@@ -0,0 +1,13 @@
+$neoMap: map-merge($neoMap, (
+  'accordion-title-bg-color': #292929,
+  'accordion-title-color' : #ccc,
+  'accordion-item-radius' : 5px
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-dark { // .neo-accordion
+    --accordion-title-bg-color: #{neo(accordion-title-bg-color)};
+    --accordion-title-color: #{neo(accordion-title-color)};
+    --accordion-item-radius: #{neo(accordion-item-radius)};
+  }
+}

package/resources/scss/theme-dark/container/AccordionItem.scss

@@ -0,0 +1,23 @@
+$neoMap: map-merge($neoMap, (
+  'accordion-item-bg-color'        : #212121,
+  'accordion-item-content-bg-color': #050505,
+  'accordion-item-arrow-bg-color'  : #323232,
+  'accordion-item-border-color'    : #333,
+  'accordion-item-shadow'          : 0 4px 8px rgba(0 0 0 / .5),
+  'accordion-item-arrow-shadow'    : 0 4px 16px rgba(0 0 0 / .15),
+  'accordion-item-radius'          : 5px,
+  'accordion-item-header-height'   : 50px
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-dark { // .neo-accordion-item
+    --accordion-item-bg-color        : #{neo(accordion-item-bg-color)};
+    --accordion-item-content-bg-color: #{neo(accordion-item-content-bg-color)};
+    --accordion-item-arrow-bg-color  : #{neo(accordion-item-arrow-bg-color)};
+    --accordion-item-border-color    : #{neo(accordion-item-border-color)};
+    --accordion-item-shadow          : #{neo(accordion-item-shadow)};
+    --accordion-item-arrrow-shadow   : #{neo(accordion-item-arrow-shadow)};
+    --accordion-item-radius          : #{neo(accordion-item-radius)};
+    --accordion-item-header-height   : #{neo(accordion-item-header-height)};
+  }
+}

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

@@ -1,11 +1,11 @@
 $neoMap: map-merge($neoMap, (
-        'process-arrow-color'     : #ffdb4a,
-        'process-background-color': #fff,
-        'process-icon-color'      : steelblue,
-        'process-icon-size'     : 2rem,
-        'process-shadow-color'  : rgba(0, 0, 0, .5),
-        'process-title-color'   : #363636,
-        'process-text-color'    : #444444
+  'process-arrow-color'     :  #6d5f28,
+  'process-background-color': #fff,
+  'process-icon-color'      : #a3996f,
+  'process-icon-size'       : 2rem,
+  'process-shadow-color'    : rgba(0, 0, 0, .5),
+  'process-title-color'     : #363636,
+  'process-text-color'      : #444444
 ));
 
 @if $useCssVars == true {

package/resources/scss/theme-light/container/Accordion.scss

@@ -0,0 +1,13 @@
+$neoMap: map-merge($neoMap, (
+        'accordion-title-bg-color': #292929,
+        'accordion-title-color' : #fff,
+        'accordion-item-radius' : 5px
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-light { // .neo-accordion
+    --accordion-title-bg-color: #{neo(accordion-title-bg-color)};
+    --accordion-title-color: #{neo(accordion-title-color)};
+    --accordion-item-radius: #{neo(accordion-item-radius)};
+  }
+}

package/resources/scss/theme-light/container/AccordionItem.scss

@@ -0,0 +1,23 @@
+$neoMap: map-merge($neoMap, (
+  'accordion-item-bg-color'        : #f9f9f9,
+  'accordion-item-content-bg-color': #ffffff,
+  'accordion-item-arrow-bg-color'  : #dedede,
+  'accordion-item-border-color'    : #ddd,
+  'accordion-item-shadow'          : 0 4px 16px rgba(0 0 0 / .1),
+  'accordion-item-arrow-shadow'    : 0 4px 16px rgba(0 0 0 / .1),
+  'accordion-item-radius'          : 5px,
+  'accordion-item-header-height'   : 50px
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-light { // .neo-accordion-item
+    --accordion-item-bg-color        : #{neo(accordion-item-bg-color)};
+    --accordion-item-content-bg-color: #{neo(accordion-item-content-bg-color)};
+    --accordion-item-arrow-bg-color  : #{neo(accordion-item-arrow-bg-color)};
+    --accordion-item-border-color    : #{neo(accordion-item-border-color)};
+    --accordion-item-shadow          : #{neo(accordion-item-shadow)};
+    --accordion-item-arrow-shadow    : #{neo(accordion-item-arrow-shadow)};
+    --accordion-item-radius          : #{neo(accordion-item-radius)};
+    --accordion-item-header-height   : #{neo(accordion-item-header-height)};
+  }
+}

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.10.2'
+     * @default '5.10.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.10.2'
+    version: '5.10.3'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Process.mjs

@@ -114,10 +114,11 @@ class Process extends Base {
      * @protected
      */
     afterSetArrowColor(newValue) {
-        let style = this.style;
+        if (newValue === null) return;
 
-        style['--process-arrow-color'] = newValue;
+        let style = this.style;
 
+        style['--process-arrow-color'] = newValue + '!important';
         this.style = style;
     }
 
@@ -127,10 +128,12 @@ class Process extends Base {
      * @protected
      */
     afterSetHorizontal(isHorizontal) {
-        let cls = this.cls,
-            positionCls = isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical';
+        let cls         = this.cls,
+            positionCls = isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical',
+            removeCls   = !isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical';
 
         NeoArray.add(cls, positionCls);
+        NeoArray.remove(cls, removeCls);
 
         this.cls = cls;
     }
@@ -141,9 +144,10 @@ class Process extends Base {
      * @protected
      */
     afterSetIconColor(newValue) {
+        if (newValue === null) return;
         let style = this.style;
 
-        style['--process-icon-color'] = newValue;
+        style['--process-icon-color'] = newValue + '!important';
 
         this.style = style;
     }
@@ -159,7 +163,7 @@ class Process extends Base {
             items = [items];
         }
 
-        let vdomRoot = this.vdom,
+        let vdomRoot   = this.vdom,
             itemLayout = this.itemLayout;
 
         items.forEach((newItem) => {
@@ -167,7 +171,7 @@ class Process extends Base {
                 content = curItem.cn[3];
 
             content.cn[0].cls.push(newItem.iconCls);
-            content.cn[1].innerHTML = newItem.header;
+            content.cn[1].innerHTML = newItem.title;
             content.cn[2].innerHTML = newItem.text;
 
             NeoArray.add(vdomRoot.cn, curItem);

package/src/component/Splitter.mjs

@@ -136,16 +136,17 @@ class Splitter extends Component {
     }
 
     /**
-     * @param data
+     * @param {Object} data
      */
     onDragEnd(data) {
         let me         = this,
             style      = me.style || {},
+            parentId   = me.parentId,
             resizeNext = me.resizeTarget === 'next',
             size       = me.size,
             index, newSize, sibling, parent;
 
-        Neo.getComponent(me.parentId).disabled = false;
+        Neo.getComponent(parentId).disabled = false;
 
         me.dragZone.dragEnd(data);
 
@@ -153,8 +154,8 @@ class Splitter extends Component {
 
         me.style = style;
 
-        me.getDomRect(me.parentId).then(parentRect => {
-            parent  = Neo.getComponent(me.parentId);
+        me.getDomRect(parentId).then(parentRect => {
+            parent  = Neo.getComponent(parentId);
             index   = parent.indexOf(me);
             sibling = parent.items[resizeNext ? index + 1 :index - 1];
             style   = sibling.style || {};

package/src/component/Toast.mjs

@@ -245,12 +245,13 @@ class Toast extends Base {
      */
     async destroy(...args) {
         let me = this;
+        const superDestroy = super.destroy.bind(me);
 
         me.addDomListeners({
             animationend: function () {
                 ToastManager.removeToast(me.id);
                 ToastManager.unregister(me);
-                me.destroy(true);
+                superDestroy(...args);
             }
         });