neo.mjs 6.5.9 → 6.6.0

package/apps/ServiceWorker.mjs

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

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -255,10 +255,10 @@ class MainContainerController extends ComponentController {
 
         console.log('onAppConnect', name);
 
-        switch (name) {
+        switch(name) {
             case 'SharedCovidChart':
-                view = me.getReference('controls-panel');
-                parentView = Neo.getComponent(view.parentId);
+                view       = me.getReference('controls-panel');
+                parentView = view.parent;
                 parentView.storeReferences();
 
                 toolbar = me.getReference('controls-panel-header');

package/examples/ServiceWorker.mjs

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

package/examples/dialog/DemoDialog.mjs

@@ -1,3 +1,4 @@
+import Button      from '../../src/button/Base.mjs';
 import Dialog      from '../../src/dialog/Base.mjs';
 import SelectField from '../../src/form/field/Select.mjs';
 
@@ -13,9 +14,18 @@ class DemoDialog extends Dialog {
 
         wrapperStyle: {
             width : '40%'
-        },
+        }
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        const me = this;
 
-        items : [{
+        me.items = [{
             module   : SelectField,
             labelText: 'Select',
 
@@ -33,7 +43,36 @@ class DemoDialog extends Dialog {
                     return result;
                 })()
             }
-        }]
+        }, {
+            module : Button,
+            handler: me.createDialog.bind(me),
+            iconCls: 'fa fa-window-maximize',
+            text   : 'Create new modal Dialog',
+        }];
+    }
+
+    /**
+     * @param {Object} data
+     */
+    createDialog(data) {
+        let me = this;
+
+        data.component.disabled = true;
+
+        me.dialog = Neo.create(DemoDialog, {
+            appName            : me.appName,
+            boundaryContainerId: me.boundaryContainerId,
+            listeners          : {close: me.onWindowClose, scope: me},
+            modal              : true
+        });
+    }
+
+    onWindowClose() {
+        let button = this.down({
+            text: 'Create new modal Dialog'
+        });
+
+        button.disabled = false;
     }
 }
 

package/examples/dialog/MainContainer.mjs

@@ -50,6 +50,13 @@ class MainContainer extends Viewport {
                 listeners     : {change: me.onDragLimitChange, scope: me},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Limit Drag&Drop to the document.body'
+            }, {
+                module        : CheckBox,
+                checked       : true,
+                hideLabel     : true,
+                hideValueLabel: false,
+                style         : {marginLeft: '3em'},
+                valueLabelText: 'Modal'
             }, '->', {
                 module : Button,
                 handler: me.switchTheme.bind(me),
@@ -71,7 +78,8 @@ class MainContainer extends Viewport {
             animateTargetId    : data.component.id,
             appName            : me.appName,
             boundaryContainerId: me.boundaryContainerId,
-            listeners          : {close: me.onWindowClose, scope: me}
+            listeners          : {close: me.onWindowClose, scope: me},
+            modal              : me.down({ valueLabelText : 'Modal' }).checked
         });
     }
 

package/examples/tabs/MainContainer.mjs

@@ -97,7 +97,7 @@ class MainContainer extends TabContainer {
                     text   : 'Move Fields',
                     handler: function () {
                         let field  = Neo.getComponent('firstNameField'),
-                            parent = Neo.getComponent(field.parentId),
+                            parent = field.parent,
                             cn     = parent.vdom.cn,
                             tmp    = cn[1];
 
@@ -114,7 +114,7 @@ class MainContainer extends TabContainer {
                     text   : 'Insert Textfield',
                     handler: function () {
                         let button = Neo.getComponent('firstNameField'),
-                            parent = Neo.getComponent(button.parentId);
+                            parent = button.parent;
 
                         // global variable for testing
                         if (!this.fieldCount) {

package/package.json

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

package/resources/scss/src/dialog/Base.scss

@@ -17,20 +17,33 @@
     }
 }
 
-.neo-dialog-wrapper {
-    display : flex;
-    position: absolute;
-    z-index : 20; // ensure to be on top of table headers
+.neo-dialog-modal-mask {
+    position         : fixed;
+    top              : 0;
+    left             : 0;
+    bottom           : 0;
+    right            : 0;
+    background-color : rgba(100, 100, 100, 0.5);
+    backdrop-filter  : blur(1px);
+    z-index          : 1000;
+}
 
-    transition-duration       : 200ms;
-    transition-property       : height, left, top, transform, width;
-    transition-timing-function: ease-out;
+.neo-dialog {
+    border        : 1px solid var(--dialog-border-color);
+    display       : flex;
+    flex-direction: column;
+
+    &.animated-hiding-showing {
+        transition-duration       : 200ms;
+        transition-property       : height, left, top, transform, width;
+        transition-timing-function: ease-out;
+    }
 
     &.neo-maximized {
         height   : 98% !important;
         left     : 1%  !important;
         top      : 1%  !important;
-        transform: none;
+        transform: none!important;
         width    : 98% !important;
 
         &.neo-panel {
@@ -41,14 +54,6 @@
             }
         }
     }
-}
-
-.neo-dialog {
-    border        : 1px solid var(--dialog-border-color);
-    display       : flex;
-    flex          : 1 0 auto;
-    flex-direction: column;
-    position      : relative;
 
     &.neo-panel {
         .neo-footer-toolbar {

package/src/DefaultConfig.mjs

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

package/src/calendar/view/SettingsContainer.mjs

@@ -57,7 +57,7 @@ class SettingsContainer extends Container {
         me._style      = style; // silent update
         me._vdom.style = style; // silent update
 
-        Neo.getComponent(me.parentId).promiseUpdate().then(() => {
+        me.parent.promiseUpdate().then(() => {
             setTimeout(() => {
                 me.collapsed = true;
 
@@ -145,7 +145,7 @@ class SettingsContainer extends Container {
 
         delete me.vdom.removeDom;
 
-        Neo.getComponent(me.parentId).promiseUpdate().then(() => {
+        me.parent.promiseUpdate().then(() => {
             me.collapsed = false;
             me.mounted   = true;
 

package/src/component/Base.mjs

@@ -367,6 +367,14 @@ class Base extends CoreBase {
         this._listeners = value
     }
 
+    /**
+     * Convenience method to access the parent component
+     * @returns {Neo.component.Base|null}
+     */
+    get parent() {
+        return this.parentId !== 'document.body' ? Neo.getComponent(this.parentId) : null
+    }
+
     /**
      * True after the component render() method was called. Also fires the rendered event.
      * @member {Boolean} rendered=false
@@ -894,20 +902,24 @@ class Base extends CoreBase {
      * @returns {Promise<void>}
      */
     async alignTo(spec={}) {
-        const me = this;
+        const
+            me    = this,
+            align = {
+                ...me.align,
+                ...spec,
+                id                  : me.id,
+                configuredFlex      : me.configuredFlex,
+                configuredWidth     : me.configuredWidth,
+                configuredHeight    : me.configuredHeight,
+                configuredMinWidth  : me.configuredMinWidth,
+                configuredMinHeight : me.configuredMinHeight,
+                configuredMaxWidth  : me.configuredMaxWidth,
+                configuredMaxHeight : me.configuredMaxHeight
+            };
 
-        await Neo.main.DomAccess.align({
-            ...me.align,
-            ...spec,
-            id                  : me.id,
-            configuredFlex      : me.configuredFlex,
-            configuredWidth     : me.configuredWidth,
-            configuredHeight    : me.configuredHeight,
-            configuredMinWidth  : me.configuredMinWidth,
-            configuredMinHeight : me.configuredMinHeight,
-            configuredMaxWidth  : me.configuredMaxWidth,
-            configuredMaxHeight : me.configuredMaxHeight
-        });
+        if (align.target) {
+            await Neo.main.DomAccess.align(align);
+        }
     }
 
     /**

package/src/component/Splitter.mjs

@@ -145,12 +145,13 @@ class Splitter extends Component {
     onDragEnd(data) {
         let me         = this,
             style      = me.style || {},
+            parent     = me.parent,
             parentId   = me.parentId,
             resizeNext = me.resizeTarget === 'next',
             size       = me.size,
-            index, newSize, sibling, parent;
+            index, newSize, sibling;
 
-        Neo.getComponent(parentId).disabled = false;
+        parent.disabled = false;
 
         me.dragZone.dragEnd(data);
 
@@ -159,7 +160,6 @@ class Splitter extends Component {
         me.style = style;
 
         me.getDomRect(parentId).then(parentRect => {
-            parent  = Neo.getComponent(parentId);
             index   = parent.indexOf(me);
             sibling = parent.items[resizeNext ? index + 1 :index - 1];
             style   = sibling.style || {};
@@ -204,7 +204,7 @@ class Splitter extends Component {
             style    = me.style || {},
             vertical = me.direction === 'vertical';
 
-        Neo.getComponent(me.parentId).disabled = true;
+        me.parent.disabled = true;
 
         if (!me.dragZone) {
             me.dragZone = Neo.create({

package/src/controller/Component.mjs

@@ -93,17 +93,13 @@ class Component extends Base {
      * @returns {Neo.controller.Component|null}
      */
     getParent() {
-        let me = this,
-            parentComponent, parentId;
+        let me = this;
 
         if (me.parent) {
             return me.parent;
         }
 
-        parentId        = me.component.parentId;
-        parentComponent = parentId && Neo.getComponent(parentId);
-
-        return parentComponent?.getController() || null
+        return me.component.parent?.getController() || null
     }
 
     /**