x4js 1.4.37 → 1.4.38

package/lib/dialog.js

@@ -149,6 +149,7 @@ class Dialog extends popup_1.Popup {
             this.setStyleValue('height', this.m_props.dlgHeight + '%');
         }
         this.addClass('@resized');
+        this.m_el_title.setStyleValue("width", "auto");
         if (this.m_props.maximized) {
             this._maximize();
             this.emit('size', (0, component_1.EvSize)(null));

package/lib/gridview.js

@@ -642,6 +642,10 @@ class GridView extends layout_1.VLayout {
             return;
         }
         const update = () => {
+            // element destroyed between updateScroll and now
+            if (!this.dom) {
+                return;
+            }
             let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
             if (newTop != this.m_topIndex || forceUpdate) {
                 this.m_topIndex = newTop;

package/lib/spreadsheet.js

@@ -753,6 +753,7 @@ class Spreadsheet extends layout_1.VLayout {
             case 'Enter': {
                 this.editCurCell();
                 event.stopPropagation();
+                event.preventDefault();
                 break;
             }
             case 'Delete': {
@@ -931,10 +932,15 @@ class Spreadsheet extends layout_1.VLayout {
                 this.killEditor(true);
             });
             input.setDomEvent('keydown', (e) => {
+                // prevented by edit...
+                if (e.defaultPrevented) {
+                    return;
+                }
                 switch (e.key) {
                     case 'Escape': {
                         this.killEditor(false);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'Enter':
@@ -945,18 +951,21 @@ class Spreadsheet extends layout_1.VLayout {
                         }
                         movesel(0, sens);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'ArrowUp':
                     case 'Up': {
                         movesel(-1, 0);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'ArrowDown':
                     case 'Down': {
                         movesel(1, 0);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                 }
@@ -972,6 +981,7 @@ class Spreadsheet extends layout_1.VLayout {
                     case 'Escape': {
                         this.killEditor(false);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'Enter':
@@ -982,6 +992,7 @@ class Spreadsheet extends layout_1.VLayout {
                         }
                         movesel(0, sens);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                 }

package/lib/svgcomponent.d.ts

@@ -62,7 +62,7 @@ declare abstract class SVGItem {
      * @returns this
      */
     attr(name: string, value: string): this;
-    style(name: string, value: string): this;
+    style(name: string, value: string | number): this;
     /**
      * add a class
      * @param name class name to add

package/lib/svgcomponent.js

@@ -114,13 +114,14 @@ class SVGItem {
         return this;
     }
     style(name, value) {
-        if (value === undefined) {
-            value = null;
+        if (value === undefined || value === '' || value === undefined) {
+            this.m_style.delete(name);
+            return;
         }
-        else if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+        if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
             value = value + 'px';
         }
-        this.m_style.set(name, value);
+        this.m_style.set(name, '' + value);
         return this;
     }
     /**

package/lib/x4.css

@@ -840,6 +840,7 @@ textarea::selection {
   display: flex;
   align-items: center;
   background-color: var(--x4-selection-color);
+  width: 0;
 }
 .x-dialog > .title .x-icon {
   width: 2em;
@@ -858,6 +859,9 @@ textarea::selection {
 .x-dialog > .title .x-label {
   border-bottom: none;
   padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .x-dialog > .title .res-btn {
   display: none;
@@ -1213,10 +1217,16 @@ textarea::selection {
 .x-spreadsheet .x-editor {
   position: absolute;
   min-height: 0;
+  height: calc(100% - 1px);
+  margin: 0;
 }
 .x-spreadsheet .x-editor input {
   margin: 0;
   min-height: 0;
+  height: 100%;
+}
+.x-form .x-spreadsheet .x-editor {
+  background-color: white;
 }
 .x-side-bar {
   min-width: 44px;
@@ -1293,9 +1303,13 @@ textarea::selection {
   background-color: white;
   padding: 2px 0;
 }
-.x-popup-table tr:hover,
 .x-popup-table tr.x-selected {
-  background-color: #c8ffff;
+  background-color: var(--x4-selection-color);
+  color: var(--x4-selection-text);
+}
+.x-popup-table tr:hover {
+  background-color: var(--x4-hover-color);
+  color: var(--x4-hover-text);
 }
 .x-popup-table td {
   padding: 3px 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.37",
+	"version": "1.4.38",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/dialog.ts

@@ -233,6 +233,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 		}
 		
 		this.addClass('@resized');
+		this.m_el_title.setStyleValue( "width", "auto" );
 
 		if (this.m_props.maximized) {
 			this._maximize();

package/src/gridview.ts

@@ -855,6 +855,12 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		}
 
 		const update = () => {
+
+			// element destroyed between updateScroll and now
+			if( !this.dom ) {
+				return;
+			}
+
 			let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
 
 			if (newTop != this.m_topIndex || forceUpdate) {

package/src/spreadsheet.ts

@@ -1015,6 +1015,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			case 'Enter': {
 				this.editCurCell();
 				event.stopPropagation( );
+				event.preventDefault( );
 				break;
 			}
 
@@ -1247,11 +1248,16 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			} );
 
 			input.setDomEvent( 'keydown', (e: KeyboardEvent) => {
-				
+				// prevented by edit...
+				if( e.defaultPrevented ) {
+					return;
+				}
+
 				switch (e.key) {
 					case 'Escape': {
 						this.killEditor(false);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1264,6 +1270,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 
 						movesel(0, sens);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1271,6 +1278,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Up': {
 						movesel(-1, 0);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1278,6 +1286,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Down': {
 						movesel(1, 0);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 				}
@@ -1296,6 +1305,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Escape': {
 						this.killEditor(false);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1308,6 +1318,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 
 						movesel(0, sens);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 				}

package/src/svgcomponent.ts

@@ -131,16 +131,18 @@ abstract class SVGItem {
 		return this;
 	}
 
-	style( name: string, value: string ) : this {
+	style( name: string, value: string | number ) : this {
 		
-		if (value === undefined) {
-			value = null;
+		if (value === undefined || value==='' || value===undefined ) {
+			this.m_style.delete( name );
+			return;
 		}
-		else if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
+		
+		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
 			value = value + 'px';
 		}
 
-		this.m_style.set( name, value );
+		this.m_style.set( name, ''+value );
 		return this;
 	}
 

package/src/x4.less

@@ -1052,6 +1052,7 @@ textarea {
 		display: flex;
 		align-items: center;
 		background-color: var( --x4-selection-color );
+		width: 0;	// to avoid title changing dialog size when long
 		
 		.x-icon {
 			width: 2em;
@@ -1074,6 +1075,9 @@ textarea {
 		.x-label {
 			border-bottom: none;
 			padding: 0;
+			overflow: hidden;
+    		text-overflow: ellipsis;
+    		white-space: nowrap;
 		}
 
 		.res-btn {
@@ -1482,14 +1486,21 @@ textarea {
 	.x-editor {
 		position: absolute;
 		min-height: 0;
+		height: calc( 100% - 1px );
+		margin: 0;
 
 		input {
 			margin: 0;
 			min-height: 0;
+			height: 100%;
 		}
 	}
 }
 
+.x-form .x-spreadsheet .x-editor {
+	background-color: white;
+}
+
 .x-side-bar {
 	min-width: 44px;
 
@@ -1594,9 +1605,15 @@ textarea {
 	background-color: white;
 	padding: 2px 0;	
 
-	tr:hover,
 	tr.x-selected {
-		background-color: rgba(200,255,255,1);
+		//background-color: rgba(200,255,255,1);
+		background-color: var(--x4-selection-color);
+		color: var( --x4-selection-text);
+	}
+
+	tr:hover {
+		background-color: var(--x4-hover-color);
+		color: var( --x4-hover-text);
 	}
 
 	td {