neo.mjs 6.9.12 → 6.10.1

package/src/main/addon/Mwc.mjs

@@ -2,7 +2,16 @@ import Base from '../../core/Base.mjs';
 
 /**
  * Helper class to include Google's Material Web Components into your neo.mjs app
- * https://www.amcharts.com/docs/v4/
+ * https://github.com/material-components/material-components-web
+ *
+ * You need to add the following dependencies into your package.json:
+ * @material/mwc-button
+ * @material/mwc-textfield
+ *
+ * You also need to un-comment the related imports.
+ * Recommendation: Copy this file into your workspace (src/main/addon), adjust it there and add the custom addon
+ * into the neo-config.json of your app. E.g.: [..., "WS/Mwc"].
+ *
  * @class Neo.main.addon.Mwc
  * @extends Neo.core.Base
  * @singleton
@@ -50,10 +59,10 @@ class Mwc extends Base {
             import(
                 /* webpackIgnore: true */
                 'https://unpkg.com/@material/mwc-button@0.26.1/mwc-button.js?module'
-            );
+                );
         } else {
             // dist/development & dist/production
-            import('@material/mwc-button');
+            // import('@material/mwc-button'); // <= comment me in
         }
     }
 
@@ -65,10 +74,10 @@ class Mwc extends Base {
             import(
                 /* webpackIgnore: true */
                 'https://unpkg.com/@material/mwc-textfield@0.26.1/mwc-textfield.js?module'
-            );
+                );
         } else {
             // dist/development & dist/production
-            import('@material/mwc-textfield');
+            // import('@material/mwc-textfield'); // <= comment me in
         }
     }
 

package/src/worker/Manager.mjs

@@ -180,11 +180,16 @@ class Manager extends Base {
         // pass the initial hash value as Neo.configs
         if (hash) {
             config.hash = {
-                hash      : DomEvents.parseHash(hash.substr(1)),
-                hashString: hash.substr(1)
-            };
+                hash      : DomEvents.parseHash(hash.substring(1)),
+                hashString: hash.substring(1)
+            }
         }
 
+        config.url = {
+            href  : location.href,
+            search: location.search
+        };
+
         for ([key, value] of Object.entries(me.workers)) {
             if (key === 'canvas' && !config.useCanvasWorker ||
                 key === 'vdom'   && !config.useVdomWorker

package/apps/learnneo/view/home/ContentComponent.mjs

@@ -1,24 +0,0 @@
-import Base from '../../../../src/component/Base.mjs';
-
-/**
- * @class LearnNeo.view.home.ContentComponent
- * @extends Neo.component.Base
- */
-class ContentComponent extends Base {
-    static config = {
-        /**
-         * @member {String} className='LearnNeo.view.home.ContentComponent'
-         * @protected
-         */
-        className: 'LearnNeo.view.home.ContentComponent',
-        /**
-         * @member {String[]} baseCls=['learn-content']
-         * @protected
-         */
-         baseCls: ['learn-content']
-    }
-}
-
-Neo.applyClassConfig(ContentComponent);
-
-export default ContentComponent;

package/examples/container/dialog/MainContainer.mjs

@@ -1,68 +0,0 @@
-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

@@ -1,84 +0,0 @@
-import Component   from '../../../src/controller/Component.mjs';
-import SelectField from '../../../src/form/field/Select.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 {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'
-                }, {
-                    module   : SelectField,
-                    labelText: 'Select',
-
-                    store: {
-                        data: [{
-                            id  : 0,
-                            name: 'Option 1'
-                        }]
-                    }
-                }]
-            })
-        }
-
-        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

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

package/examples/container/dialog/index.html

@@ -1,11 +0,0 @@
-<!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

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

package/resources/scss/src/apps/learnneo/home/ContentComponent.scss

@@ -1,61 +0,0 @@
-.learn-content {
-    font-family   : 'Open Sans';
-    font-size     : 13pt;
-    letter-spacing: 1px;
-    overflow      : scroll;
-    padding       : 1em;
-
-    em,
-    i {
-        font-family: Palatino, "Times New Roman", serif;
-        font-size  : 1.07em;
-    }
-
-    p {
-        margin: 0.5em 0em 0.7em 0em;
-    }
-
-    mark {
-        background-color: #B8FCE3;
-        color           : black;
-        padding         : 0.1em 0.2em;
-    }
-
-    details summary {
-        cursor: pointer;
-        transition: margin 300ms ease-out;
-    }
-
-    details[open] {
-        margin-bottom: 2em;
-    }
-
-    details summary {
-        list-style: none;
-        color: #555;
-        display: flex;
-        /* also removes the list marker */
-        align-items: center;
-        font-weight: bold;
-    }
-
-    details summary::before {
-        content: "\f055";
-    }
-
-    details[open] summary::before {
-        content: "\f056";
-    }
-
-    details summary::before {
-        color      : #c4c4c4;
-        font-family: var(--fa-style-family, "Font Awesome 6 Free");
-        font-size  : 1.3em;
-        font-weight: var(--fa-style, 900);
-        margin     : 0.4em 0.4em 0.4em 0;
-    }
-
-    summary::-webkit-details-marker {
-        display: none;
-    }
-}

package/resources/scss/src/apps/newwebsite/MainContainer.css

@@ -1,33 +0,0 @@
-
-.newwebsite-main-container {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    gap: 48px;
-    padding: 10% 15% 15% 15%;
-}
-
-.button-group {
-    display: flex !important;
-    flex-direction: row-reverse !important;
-    gap: 8px !important;
-}
-
-.neo-h1 {
-    font-size: 48px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.vector {
-    background-image: url("../../../../images/Neo_Vector.svg");
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center center;
-    width: 100%;
-    height: 150px;
-}
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

package/resources/scss/theme-neo-light/design-tokens/Components.scss

@@ -1,3 +0,0 @@
-:root .neo-theme-neo-light {
-    --cmp-button-bg                       : blue;
-}

package/src/container/Dialog.mjs

@@ -1,205 +0,0 @@
-import Base          from '../container/Panel.mjs';
-import NeoArray      from '../util/Array.mjs';
-import HeaderToolbar from '../dialog/header/Toolbar.mjs';
-
-/**
- * Lightweight implementation using the dialog tag.
- * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
- * @class Neo.container.Dialog
- * @extends Neo.container.Panel
- */
-class Dialog extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.container.Dialog'
-         * @protected
-         */
-        className: 'Neo.container.Dialog',
-        /**
-         * @member {String} ntype='container-dialog'
-         * @protected
-         */
-        ntype: 'container-dialog',
-        /**
-         * @member {Boolean} autoMount=true
-         */
-        autoMount: true,
-        /**
-         * @member {Boolean} autoRender=true
-         */
-        autoRender: true,
-        /**
-         * @member {String[]} baseCls=['neo-container-dialog', 'neo-panel', 'neo-container']
-         * @protected
-         */
-        baseCls: ['neo-container-dialog', 'neo-panel', 'neo-container'],
-        /**
-         * @member {Object} headerConfig=null
-         */
-        headerConfig: null,
-        /**
-         * @member {Neo.toolbar.Base|null} headerToolbar=null
-         */
-        headerToolbar: null,
-        /**
-         * The CSS class to use for an icon, e.g. ['fa', 'fa-home']
-         * @member {String[]} [iconCls_=null]
-         */
-        iconCls_: null,
-        /**
-         * @member {Object} itemDefaults
-         */
-        itemDefaults: {
-            baseCls: ['neo-dialog-content']
-        },
-        /**
-         * @member {Object[]} items
-         */
-        items: [],
-        /**
-         * @member {String} title=null
-         */
-        title_: null,
-        /**
-         * @member {Object} _vdom={tag: 'dialog', cn: []}
-         */
-        _vdom:
-        {tag: 'dialog', cn: []}
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-        this.createHeader();
-    }
-
-    /**
-     * Triggered after the iconCls config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetIconCls(value, oldValue) {
-        if (!this.headers) { return }
-        let iconNode    = this.headers.down({flag: 'dialog-header-icon'}),
-            iconNodeCls = [...iconNode.cls];
-
-        NeoArray.remove(iconNodeCls, oldValue);
-        NeoArray.add(   iconNodeCls, value);
-
-        iconNode.cls = iconNodeCls;
-
-        iconNode.removeDom = !value || value === '';
-        this.update();
-    }
-
-    /**
-     * Triggered after the title config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetTitle(value, oldValue) {
-        this.headerToolbar?.down({flag: 'panel-header-title'}).set({
-            text: value
-        })
-    }
-
-    /**
-     * close the dialog in main thread
-     */
-    close() {
-        let me = this;
-
-        Neo.main.addon.Dialog.close({
-            appName: me.appName,
-            id     : me.id
-        })
-    }
-
-    /**
-     * @protected
-     */
-    createHeader() {
-        let me               = this,
-            cls              = ['neo-header-toolbar', 'neo-toolbar'],
-            headers          = me.headers || [],
-            headerConfigCopy = {...me.headerConfig};
-        delete headerConfigCopy.items;
-
-        me.headerToolbar = Neo.create({
-            module   : HeaderToolbar,
-            actions  : [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
-            appName  : me.appName,
-            cls,
-            dock     : 'top',
-            flex     : 'none',
-            id       : me.getHeaderToolbarId(),
-            listeners: {headerAction: me.executeHeaderAction, scope: me},
-            items    : [{
-                ntype: '',
-                cls  : ['neo-dialog-header-icon', ...me.iconCls],
-                flag : 'dialog-header-icon',
-            }, {
-                ntype : 'label',
-                cls   : ['neo-panel-header-text', 'neo-label'],
-                flag  : 'panel-header-title',
-                hidden: !me.title,
-                text  : me.title
-            }, ...me.headerConfig.items || []],
-
-            ...headerConfigCopy
-        });
-
-        headers.unshift(me.headerToolbar);
-
-        me.headers = headers;
-    }
-
-    /**
-     * {Object} data
-     */
-    executeHeaderAction(data) {
-        let me = this,
-
-        map = {
-            close: me.close
-        };
-
-        map[data.action]?.call(me, data);
-
-        me.fire('headerAction', {
-            dialog: me,
-            ...data
-        })
-    }
-
-    /**
-     * Returns the id of the header toolbar
-     * @returns {String}
-     */
-    getHeaderToolbarId() {
-        return this.id + '-header-toolbar';
-    }
-
-    /**
-     * Shows the dialog (with / without Modal) in main thread
-     * @param {Boolean} modal
-     */
-    async show(modal = true) {
-        let me = this;
-
-        await me.timeout(20);
-
-        Neo.main.addon.Dialog[modal ? 'showModal': 'show']({
-            appName: me.appName,
-            id     : me.id
-        });
-    }
-}
-
-Neo.applyClassConfig(Dialog);
-
-export default Dialog;

package/src/main/addon/Dialog.mjs

@@ -1,68 +0,0 @@
-import Base      from '../../core/Base.mjs';
-import DomAccess from '../DomAccess.mjs'
-/**
- * Addon for component.Dialog
- * @class Neo.main.addon.Dialog
- * @extends Neo.core.Base
- * @singleton
- */
-class Dialog extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.main.addon.Dialog'
-         * @protected
-         */
-        className: 'Neo.main.addon.Dialog',
-        /**
-         * Remote method access for other workers
-         * @member {Object} remote={app: [//...]}
-         * @protected
-         */
-        remote: {
-            app: [
-                'close',
-                'show',
-                'showModal'
-            ]
-        },
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
-    }
-
-    /**
-     * @param {Object} data
-     * @param {String} data.id
-     * @returns {Boolean}
-     */
-    close(data) {
-        DomAccess.getElement(data.id).close()
-        return true;
-    }
-
-    /**
-     * @param {Object} data
-     * @param {String} data.id
-     * @returns {Boolean}
-     */
-    show(data) {
-        DomAccess.getElement(data.id).show()
-        return true;
-    }
-
-    /**
-     * @param {Object} data
-     * @param {String} data.id
-     * @returns {Boolean}
-     */
-    showModal(data) {
-        DomAccess.getElement(data.id).showModal()
-        return true;
-    }
-}
-
-let instance = Neo.applyClassConfig(Dialog);
-
-export default instance;