neo.mjs 4.7.3 → 4.7.4

package/examples/form/field/select/MainContainer.mjs

@@ -32,6 +32,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'clearToOriginalValue',
             listeners: {change: me.onConfigChange.bind(me, 'clearToOriginalValue')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.editable,
+            labelText: 'editable',
+            listeners: {change: me.onConfigChange.bind(me, 'editable')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,

package/package.json

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

package/resources/scss/src/button/Split.scss

@@ -1,5 +1,5 @@
 .neo-split-button {
-    border       : v(button-border);
+    border       : v(button-border-width) solid v(button-border-color);
     border-radius: v(button-border-radius);
     display      : flex;
     width        : fit-content;
@@ -10,7 +10,7 @@
         padding: .5em;
 
         &:last-child {
-            border-left: v(button-border);
+            border-left: v(button-border-width) solid v(button-border-color);
         }
     }
-}
+}

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

@@ -1,5 +1,13 @@
 .neo-pickerfield {
+    &.neo-not-editable {
+        cursor: pointer;
 
+        .neo-textfield-input {
+            cursor        : pointer;
+            pointer-events: none;
+            user-select   : none;
+        }
+    }
 }
 
 .neo-picker-container {

package/resources/scss/theme-dark/form/field/CheckBox.scss

@@ -1,7 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #eee,
     'checkboxfield-color-checked'   : #64B5F6,
-    'checkboxfield-icon-font-family': "Font Awesome 5 Free",
+    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
     'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));

package/src/button/Split.mjs

@@ -43,7 +43,11 @@ class Split extends Button {
         {cls: ['neo-split-button'], cn: [
             {tag: 'button', cn: [
                 {tag: 'span', cls: ['neo-button-glyph']},
-                {tag: 'span', cls: ['neo-button-text']}
+                {tag: 'span', cls: ['neo-button-text']},
+                {cls: ['neo-button-badge']},
+                {cls: ['neo-button-ripple-wrapper'], cn: [
+                    {cls: ['neo-button-ripple']}
+                ]}
             ]}
         ]}
     }}
@@ -110,10 +114,8 @@ class Split extends Button {
      * @protected
      */
     afterSetTriggerButtonIconCls(value, oldValue) {
-        let me = this;
-
-        if (me.triggerButton) {
-            me.triggerButton.iconCls = value;
+        if (this.triggerButton) {
+            this.triggerButton.iconCls = value;
         }
     }
 

package/src/form/field/Picker.mjs

@@ -1,4 +1,5 @@
 import Container     from '../../container/Base.mjs';
+import NeoArray      from '../../util/Array.mjs';
 import PickerTrigger from './trigger/Picker.mjs';
 import Text          from './Text.mjs';
 import VDomUtil      from '../../util/VDom.mjs';
@@ -32,6 +33,10 @@ class Picker extends Text {
          * @protected
          */
         clientRects: null,
+        /**
+         * @member {Boolean} editable_=true
+         */
+        editable_: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -83,6 +88,19 @@ class Picker extends Text {
         }]
     }}
 
+    /**
+     * Triggered after the editable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetEditable(value, oldValue) {
+        let cls = this.cls;
+
+        NeoArray.toggle(cls, 'neo-not-editable', !value);
+        this.cls = cls;
+    }
+
     /**
      * @param {Boolean} silent
      */

package/src/main/DomEvents.mjs

@@ -251,8 +251,15 @@ class DomEvents extends Base {
      * @returns {Object}
      */
     getEventData(event) {
+        let path = event.composedPath();
+
+        if (path.length < 1) {
+            // our draggable implementation will generate paths, so we do need to check for them
+            path = event.path;
+        }
+
         return {
-            path     : event.composedPath().map(e => this.getTargetData(e)),
+            path     : path.map(e => this.getTargetData(e)),
             target   : this.getTargetData(event.target),
             timeStamp: event.timeStamp,
             type     : event.type