neo.mjs 5.9.3 → 5.10.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.9.3'
+         * @member {String} version='5.10.1'
          */
-        version: '5.9.3'
+        version: '5.10.1'
     }
 
     /**

package/buildScripts/createClass.mjs

@@ -674,9 +674,7 @@ if (programOpts.info) {
         );
 
         isSingleton && classContent.push(
-            `let instance = Neo.create(${file});`,
-            "",
-            "Neo.applyToGlobalNs(instance);",
+            `let instance = Neo.applyClassConfig(${file});`,
             "",
             "export default instance;"
         );

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.9.3'
+         * @member {String} version='5.10.1'
          */
-        version: '5.9.3'
+        version: '5.10.1'
     }
 
     /**

package/examples/container/base/MainContainer.mjs

@@ -0,0 +1,78 @@
+import Button    from '../../../src/button/Base.mjs';
+import Container from '../../../src/container/Base.mjs';
+
+/**
+ * @class Neo.examples.container.base.MainContainer
+ * @extends Neo.container.Base
+ */
+class MainContainer extends Container {
+    static config = {
+        className: 'Neo.examples.container.base.MainContainer',
+        autoMount: true,
+        layout   : 'vbox',
+
+        items: [{
+            ntype  : 'button',
+            iconCls: 'fa fa-home',
+            text   : 'Hello',
+            width  : 200
+        }, {
+            ntype  : 'button',
+            iconCls: 'fa fa-user',
+            text   : 'World'
+        }, {
+            ntype : 'container',
+            layout: {
+                ntype: 'hbox',
+                align: 'stretch'
+            },
+            items : [{
+                ntype  : 'button',
+                iconCls: 'fa fa-home',
+                style  : {color: 'red'},
+                text   : 'Hello2',
+                width  : 200
+            }, {
+                ntype    : 'button',
+                flex     : 1,
+                iconCls  : 'fa fa-user',
+                iconColor: 'red',
+                text     : 'World2'
+            }]
+        }, {
+            ntype: 'container',
+
+            layout: {
+                ntype: 'vbox',
+                align: 'start'
+            },
+
+            style: {
+                marginTop: '30px'
+            },
+
+            items: [{
+                ntype       : 'button',
+                iconCls     : 'fa fa-home',
+                iconPosition: 'right',
+                text        : 'Right'
+            }, {
+                ntype       : 'button',
+                flex        : 1,
+                iconCls     : 'fa fa-user',
+                iconPosition: 'top',
+                text        : 'Top'
+            }, {
+                ntype       : 'button',
+                flex        : 1,
+                iconCls     : 'fa fa-play-circle',
+                iconPosition: 'bottom',
+                text        : 'Bottom'
+            }]
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/container/{app.mjs → base/app.mjs}

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

package/examples/container/{index.html → base/index.html}

@@ -9,6 +9,6 @@
     <p>Container Demo</p>
     <div id="main-container"></div>
 
-    <script src="../../src/MicroLoader.mjs" type="module"></script>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
 </body>
 </html>

package/examples/container/{neo-config.json → base/neo-config.json}

@@ -1,6 +1,6 @@
 {
-    "appPath"    : "examples/container/app.mjs",
-    "basePath"   : "../../",
+    "appPath"    : "examples/container/base/app.mjs",
+    "basePath"   : "../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",
     "themes"     : ["neo-theme-dark"]

package/examples/container/dialog/MainContainer.mjs

@@ -0,0 +1,68 @@
+import Button                  from '../../../src/button/Base.mjs';
+import ConfigurationViewport   from '../../ConfigurationViewport.mjs';
+import MainContainerController from './MainContainerController.mjs';
+import NumberField             from '../../../src/form/field/Number.mjs';
+import TextField               from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.container.dialog.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.container.dialog.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        controller          : MainContainerController,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module    : TextField,
+            clearable : true,
+            labelText : 'title',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'title')},
+            style     : {marginTop: '10px'},
+            value     : 'example dialog'
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'height')},
+            maxValue  : 1000,
+            minValue  : 100,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : 300
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.controller.onConfigChange.bind(me.controller, 'width')},
+            maxValue  : 2000,
+            minValue  : 100,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : 500
+        }];
+    }
+
+    createExampleComponent() {
+        let controller = this.getController();
+        return Neo.create({
+            module   : Button,
+            height   : 50,
+            text     : 'show Dialog',
+            ui       : 'primary',
+            width    : 150,
+            handler  : controller.onButtonClick.bind(controller)
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/container/dialog/MainContainerController.mjs

@@ -0,0 +1,80 @@
+import Component    from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.container.dialog.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.container.dialog.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.container.dialog.MainContainerController'
+    }
+
+    dialog = null;
+    title = 'example dialog';
+    height = 300;
+    width = 500;
+
+    /**
+     * 
+     * @param {*} config 
+     */
+    construct(config) {
+        super.construct(config);
+    }
+
+    /**
+     * 
+     * @param {Object} data 
+     */
+    async onButtonClick(data) {
+        if (!this.dialog) {
+            let module = await import ('../../../src/container/Dialog.mjs');
+            this.dialog = Neo.create({
+                module: module.default,
+                appName: this.component.appName,
+                autoMount: true,
+                autoRender: true,
+                title: this.title,
+                height: this.height,
+                width: this.width,
+                iconCls: ['fa', 'fa-home'],
+                
+                headerConfig: {
+                    items: [{
+                        ntype: 'button',
+                        text: 'foo'
+                    }],
+                    style: {borderBottom: 'solid 1px #bdbdbd'}
+                },
+
+                items: [{
+                    ntype: 'container',
+                    html: 'text'
+                }]
+            })
+        }
+        this.dialog.show();
+
+        console.log(data, this);
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        if (this.dialog) {
+            this.dialog[config] = opts.value;
+        } else {
+            this[config] = opts.value;
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/container/dialog/app.mjs

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

package/examples/container/dialog/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 Dialog</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "examples/container/dialog/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "ScrollSync", "Stylesheet", "Dialog"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.9.3",
+    "version": "5.10.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,12 +52,12 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.3",
+        "inquirer": "^9.2.6",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",
         "sass": "^1.62.1",
-        "webpack": "^5.82.1",
+        "webpack": "^5.84.1",
         "webpack-cli": "^5.1.1",
         "webpack-dev-server": "4.15.0",
         "webpack-hook-plugin": "^1.0.7",

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

@@ -0,0 +1,190 @@
+.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;
+  background-color: v(process-background-color);
+  padding: 0.5rem;
+
+  .process-step {
+    position: relative;
+    z-index: 0;
+    padding: 0.75rem;
+
+    .arrow {
+      width: 0;
+      height: 0;
+      position: absolute;
+      top: 50%;
+
+      &.white {
+        z-index: 1;
+        border-bottom: 10px solid transparent;
+        border-right: 10px solid transparent;
+      }
+
+      &.yellow {
+        z-index: -1;
+        border-bottom: 20px solid transparent;
+        border-right: 20px solid transparent;
+      }
+    }
+
+    .slit {
+      position: absolute;
+      inset: 0;
+    }
+
+    .process-content {
+      position: relative;
+
+      .process-step-icon {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+        text-align: center;
+        height: v(process-icon-size);
+        z-index: 10;
+
+        &::before {
+          // Do NOT switch to v()
+          color: var(--process-icon-color);
+          font-size: v(process-icon-size);
+        }
+      }
+
+      .process-step-header {
+        display: block;
+        color: v(process-title-color);
+        word-break: break-word;
+        text-align: center;
+        text-transform: uppercase;
+        margin: 1.5rem 0;
+      }
+
+      .process-step-text {
+        text-align: center;
+        display: block;
+        color: v(process-text-color);
+        font-size: 1em;
+        font-weight: 400;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  &.neo-process-horizontal {
+    flex-direction: row;
+
+    .process-step {
+      .arrow.white {
+        border-left: 10px solid v(process-background-color);
+        border-top: 10px solid transparent;
+        top: 50%;
+        left: 0;
+        margin-left: 0;
+        margin-top: -10px;
+      }
+
+      .arrow.yellow {
+        // Do NOT switch to v()
+        border-left: 20px solid var(--process-arrow-color);
+        border-top: 20px solid transparent;
+        top: 50%;
+        left: 0;
+        margin-left: 0;
+        margin-top: -20px;
+      }
+
+      .slit {
+        box-shadow: inset 0 100px 50px -40px v(process-background-color),
+        inset 0 -100px 50px -40px v(process-background-color),
+        inset 5px 0 10px -5px v(process-shadow-color);
+      }
+
+      .process-content {
+        padding-left: 30px;
+        padding-top: 0;
+      }
+    }
+  }
+
+  &.neo-process-vertical {
+    flex-direction: column;
+
+    .process-step {
+      .arrow.white {
+        border-left: 10px solid transparent;
+        border-top: 10px solid v(process-background-color);
+        top: 0;
+        left: 50%;
+        margin-left: -10px;
+        margin-top: 0;
+
+      }
+
+      .arrow.yellow {
+        border-left: 20px solid transparent;
+        // Do NOT switch to v()
+        border-top: 20px solid var(--process-arrow-color);
+        top: 0;
+        left: 50%;
+        margin-left: -20px;
+        margin-top: 0;
+      }
+
+      .slit {
+        box-shadow: inset 80px 0 50px -40px v(process-background-color),
+        inset -80px 0 50px -40px v(process-background-color),
+        inset 0 5px 10px -5px v(process-shadow-color);
+      }
+
+      .process-content {
+        padding-left: 0;
+        padding-top: 30px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .neo-process {
+    &.neo-process-horizontal {
+      flex-direction: column;
+
+      .process-step {
+        .arrow.white {
+          border-left: 10px solid transparent;
+          border-top: 10px solid v(process-background-color);
+          top: 0;
+          left: 50%;
+          margin-left: -10px;
+          margin-top: 0;
+
+        }
+
+        .arrow.yellow {
+          border-left: 20px solid transparent;
+          // Do NOT switch to v()
+          border-top: 20px solid var(--process-arrow-color);
+          top: 0;
+          left: 50%;
+          margin-left: -20px;
+          margin-top: 0;
+        }
+
+        .slit {
+          box-shadow: inset 80px 0 50px -40px v(process-background-color),
+          inset -80px 0 50px -40px v(process-background-color),
+          inset 0 5px 10px -5px v(process-shadow-color);
+        }
+
+        .process-content {
+          padding-left: 0;
+          padding-top: 30px;
+        }
+      }
+    }
+  }
+}

package/resources/scss/src/container/Dialog.scss

@@ -0,0 +1,12 @@
+.neo-container-dialog {
+    padding: 0;
+    z-index: 100;
+    
+    &:not([open]) {
+        display: none;
+    }
+
+    > div {
+        padding: 1em;
+    }
+}

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

@@ -0,0 +1,135 @@
+.switchfield {
+  @keyframes switch-on-position {
+    0% {
+      left: 0;
+      right: 50%
+    }
+    25% {
+      left: 0;
+      right: 37.5%
+    }
+    100% {
+      left: 50%;
+      right: 0
+    }
+  }
+
+  @keyframes switch-off-position {
+    0% {
+      left: 50%;
+      right: 0
+    }
+    25% {
+      left: 37.5%;
+      right: 0
+    }
+    100% {
+      left: 0%;
+      right: 50%
+    }
+  }
+
+  @keyframes switch-on-transform {
+    0% {
+      transform: translate(0) scaleX(1)
+    }
+    25% {
+      transform: translate(0) scaleX(1.33)
+    }
+    100% {
+      transform: translate(100%) scaleX(1)
+    }
+  }
+
+  @keyframes switch-off-transform {
+    0% {
+      transform: translate(100%) scaleX(1)
+    }
+    25% {
+      transform: translate(100%) scaleX(1.33)
+    }
+    100% {
+      transform: translate(0) scaleX(1)
+    }
+  }
+
+  input[type="checkbox"] {
+    position: relative;
+    display: inline-block;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    height: 1.5em;
+    width: 3em;
+    font-size: 1.5em;
+
+    border-radius: 1.25em;
+    background-color: v(switchfield-background-color);
+    border-color: transparent;
+    background-clip: padding-box;
+    color: v(switchfield-inactive-color);
+    vertical-align: middle;
+    transition: all 0.25s linear 0.25s;
+
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 50%;
+      background-color: v(switchfield-thumb-color);
+      border-radius: 100%;
+      border: 0.125em solid transparent;
+      background-clip: padding-box;
+      z-index: 2;
+      transform-origin: right center;
+    }
+
+    &::after {
+      position: absolute;
+      left: 0.5em;
+      top: 0.15em;
+      line-height: 1.5;
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
+      content: "\f00c\f00d";
+      letter-spacing: 1em;
+      z-index: 1;
+      font-size: 1.25rem;
+    }
+
+    &:focus {
+      color: v(switchfield-active-color);
+      border-color: transparent;
+      background-color: v(switchfield-background-color);
+      outline: none;
+    }
+
+    &:checked {
+      color: v(switchfield-inactive-color);
+      background-color: v(switchfield-checked);
+      border-color: transparent;
+
+      &::before {
+        transform-origin: left center;
+      }
+    }
+  }
+
+  input[type="checkbox"]::before {
+    animation: switch-off-position 0.25s ease-out forwards;
+  }
+
+  input[type="checkbox"]:checked::before {
+    animation: switch-on-position 0.25s ease-out forwards;
+  }
+
+  input[type="checkbox"]::before {
+    animation: switch-off-transform 0.25s ease-out forwards;
+  }
+
+  input[type="checkbox"]:checked::before {
+    animation: switch-on-transform 0.25s ease-out forwards;
+  }
+}