neo.mjs 7.0.5 → 7.0.6

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-08-30",
+      "datePublished": "2024-09-01",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.0.5'
+                html  : 'v7.0.6'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.0.5",
+    "version": "7.0.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,7 +57,7 @@
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.42",
         "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

package/resources/scss/src/component/Splitter.scss

@@ -1,9 +1,10 @@
 .neo-splitter {
     background-color: var(--splitter-background-color);
     border          : var(--splitter-border);
+    border-radius   : var(--splitter-border-radius);
     transition      : background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
 
-    &:hover {
+    &:active, &:hover {
         background-color: var(--splitter-hover-color);
         border-color    : var(--splitter-hover-color);
     }
@@ -12,12 +13,14 @@
         border-left : none;
         border-right: none;
         cursor      : ns-resize;
+        margin      : var(--splitter-margin-horizontal);
     }
 
     &.neo-vertical {
         border-bottom: none;
         border-top   : none;
         cursor       : ew-resize;
+        margin      : var(--splitter-margin-vertical);
     }
 }
 
@@ -25,5 +28,11 @@
     &.neo-splitter {
         background-color: var(--splitter-hover-color);
         border-color    : var(--splitter-hover-color);
+
+        &.neo-horizontal, &.neo-vertical {
+            // getBoundingClientRect() already adds margins to positions,
+            // so it would get added twice unless we nullify it.
+            margin: 0;
+        }
     }
 }

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

@@ -1,5 +1,8 @@
 :root .neo-theme-dark { // .neo-splitter
-    --splitter-background-color: #3c3f41;
-    --splitter-border          : 1px solid #323232;
-    --splitter-hover-color     : #64B5F6;
+    --splitter-background-color : #3c3f41;
+    --splitter-border           : 1px solid #323232;
+    --splitter-border-radius    : 0;
+    --splitter-hover-color      : #64B5F6;
+    --splitter-margin-horizontal: 0;
+    --splitter-margin-vertical  : 0;
 }

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

@@ -1,5 +1,8 @@
 :root .neo-theme-light { // .neo-splitter
-    --splitter-background-color: #f2f2f2;
-    --splitter-border          : 1px solid #ddd;
-    --splitter-hover-color     : #5d83a7
+    --splitter-background-color : #f2f2f2;
+    --splitter-border           : 1px solid #ddd;
+    --splitter-border-radius    : 0;
+    --splitter-hover-color      : #5d83a7;
+    --splitter-margin-horizontal: 0;
+    --splitter-margin-vertical  : 0;
 }

package/resources/scss/theme-neo-light/component/Splitter.scss

@@ -1,22 +1,8 @@
 :root .neo-theme-neo-light { // .neo-splitter
-    --splitter-background-color: #f2f2f2;
-    --splitter-border          : 1px solid #ddd;
-    --splitter-hover-color     : #5d83a7;
-
-    .neo-splitter {
-        opacity: 1;
-        margin: 8px 2px;
-        border-radius: 100px;
-        border: unset !important;
-
-        &:hover, &:active {
-            background-color: #5595F5 !important;
-        }
-    }
-
-    .neo-dragproxy {
-        &.neo-splitter {
-            background-color: #5595F5 !important;
-        }
-    }
+    --splitter-background-color : #f2f2f2;
+    --splitter-border           : none;
+    --splitter-border-radius    : 5px;
+    --splitter-hover-color      : #5595F5;
+    --splitter-margin-horizontal: 2px 8px;
+    --splitter-margin-vertical  : 8px 2px;
 }

package/src/DefaultConfig.mjs

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

package/src/component/Splitter.mjs

@@ -117,6 +117,22 @@ class Splitter extends Component {
         this[this.direction === 'vertical' ? 'width' : 'height'] = value
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        let {dragZone} = this;
+
+        if (dragZone) {
+            dragZone.windowId = value
+        }
+    }
+
     /**
      * Triggered before the direction config gets changed
      * @param {String} value
@@ -198,16 +214,17 @@ class Splitter extends Component {
      * @param data
      */
     onDragStart(data) {
-        let me       = this,
-            style    = me.style || {},
-            vertical = me.direction === 'vertical';
+        let me                  = this,
+            style               = me.style || {},
+            vertical            = me.direction === 'vertical',
+            {appName, windowId} = me;
 
         me.parent.disabled = true;
 
         if (!me.dragZone) {
             me.dragZone = Neo.create({
                 module             : DragZone,
-                appName            : me.appName,
+                appName,
                 bodyCursorStyle    : vertical ? 'ew-resize !important' : 'ns-resize !important',
                 boundaryContainerId: me.parentId,
                 dragElement        : me.vdom,
@@ -215,6 +232,7 @@ class Splitter extends Component {
                 moveVertical       : !vertical,
                 owner              : me,
                 useProxyWrapper    : false,
+                windowId,
                 ...me.dragZoneConfig
             })
         } else {

package/src/draggable/DragZone.mjs

@@ -305,16 +305,17 @@ class DragZone extends Base {
      * @param {Object} data
      */
     dragStart(data) {
-        let me      = this,
-            {owner} = me,
-            {cls}   = owner,
-            rect    = me.getDragElementRect(data),
+        let me                         = this,
+            {appName, owner, windowId} = me,
+            {cls}                      = owner,
+            rect                       = me.getDragElementRect(data),
             offsetX, offsetY;
 
         me.setData();
 
         Neo.main.addon.DragDrop.setConfigs({
-            appName: me.appName,
+            appName,
+            windowId,
             ...me.getMainThreadConfigs()
         });