x4js 1.4.35 → 1.4.39

package/lib/component.d.ts

@@ -44,6 +44,43 @@ export interface ICaptureInfo {
     handler: EventHandler<UIEvent>;
     iframes: NodeListOf<HTMLIFrameElement>;
 }
+/** @ignore properties without 'px' unit */
+export declare const _x4_unitless: {
+    animationIterationCount: number;
+    borderImageOutset: number;
+    borderImageSlice: number;
+    borderImageWidth: number;
+    boxFlex: number;
+    boxFlexGroup: number;
+    boxOrdinalGroup: number;
+    columnCount: number;
+    flex: number;
+    flexGrow: number;
+    flexPositive: number;
+    flexShrink: number;
+    flexNegative: number;
+    flexOrder: number;
+    gridRow: number;
+    gridColumn: number;
+    fontWeight: number;
+    lineClamp: number;
+    lineHeight: number;
+    opacity: number;
+    order: number;
+    orphans: number;
+    tabSize: number;
+    widows: number;
+    zIndex: number;
+    zoom: number;
+    fillOpacity: number;
+    floodOpacity: number;
+    stopOpacity: number;
+    strokeDasharray: number;
+    strokeDashoffset: number;
+    strokeMiterlimit: number;
+    strokeOpacity: number;
+    strokeWidth: number;
+};
 /**
  *
  */

package/lib/component.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
+exports.Container = exports.SizerOverlay = exports.EvOverlayResize = exports.Separator = exports.EvSize = exports.Space = exports.Flex = exports.flyWrap = exports.Component = exports.EvFocus = exports.EvDblClick = exports._x4_unitless = exports.html = exports.isHtmlString = exports.HtmlString = void 0;
 /**
  * @todo
  *		create Container class
@@ -50,7 +50,7 @@ const _x4_el_store = Symbol();
 /** @ignore where Component is stored in dom */
 const _x4_el_sym = Symbol();
 /** @ignore properties without 'px' unit */
-const _x4_unitless = {
+exports._x4_unitless = {
     animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
     boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
     gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
@@ -273,7 +273,7 @@ class Component extends base_component_1.BaseComponent {
             if (value === undefined) {
                 value = null;
             }
-            else if (!_x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+            else if (!exports._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
                 value = value + 'px';
             }
             this.m_dom.style[name] = value;

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/formatters.js

@@ -64,8 +64,9 @@ function money_formatter(input) {
         return '';
     }
     let val = (0, tools_1.roundTo)(typeof (input) == 'string' ? parseFloat(input) : input, 2);
-    if (val === -0.00)
+    if (Object.is(val, -0.00)) {
         val = 0.00;
+    }
     let res = moneyFmt.format(val);
     return res;
 }

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': {
@@ -894,8 +895,8 @@ class Spreadsheet extends layout_1.VLayout {
             style: {
                 left: rc.left - prc.left,
                 top: rc.top - prc.top,
-                width: rc.width,
-                height: rc.height
+                width: rc.width - 1,
+                height: rc.height - 1
             },
             tabIndex: false,
             value: cellvalue,
@@ -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

@@ -33,6 +33,7 @@ import { Component, CProps } from './component';
 declare abstract class SVGItem {
     private m_tag;
     private m_attrs;
+    private m_style;
     constructor(tag: string);
     /**
      * render the item
@@ -61,6 +62,7 @@ declare abstract class SVGItem {
      * @returns this
      */
     attr(name: string, value: string): this;
+    style(name: string, value: string | number): this;
     /**
      * add a class
      * @param name class name to add
@@ -70,6 +72,10 @@ declare abstract class SVGItem {
      *
      */
     renderAttrs(): string;
+    /**
+     *
+     */
+    renderStyle(): string;
     renderContent(): string;
 }
 /**

package/lib/svgcomponent.js

@@ -30,6 +30,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGComponent = exports.SVGPathBuilder = void 0;
 const component_1 = require("./component");
+const tools_1 = require("./tools");
+const reNumber = /^-?\d+(\.\d+)?$/;
 // degrees to radian
 function d2r(d) {
     return d * Math.PI / 180.0;
@@ -61,16 +63,18 @@ function clean(a, ...b) {
 class SVGItem {
     m_tag;
     m_attrs;
+    m_style;
     constructor(tag) {
         this.m_tag = tag;
         this.m_attrs = new Map();
+        this.m_style = new Map();
     }
     /**
      * render the item
      * @returns
      */
     render() {
-        return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent()}</${this.m_tag}>`;
+        return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent()}</${this.m_tag}>`;
     }
     /**
      * change the stroke color
@@ -109,6 +113,17 @@ class SVGItem {
         this.m_attrs.set(name, value);
         return this;
     }
+    style(name, value) {
+        if (value === undefined || value === '' || value === undefined) {
+            this.m_style.delete(name);
+            return;
+        }
+        if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+            value = value + 'px';
+        }
+        this.m_style.set(name, '' + value);
+        return this;
+    }
     /**
      * add a class
      * @param name class name to add
@@ -122,12 +137,28 @@ class SVGItem {
      *
      */
     renderAttrs() {
+        if (!this.m_attrs.size) {
+            return "";
+        }
         let result = '';
         this.m_attrs.forEach((v, k) => {
             result += ` ${k} = "${v}"`;
         });
         return result;
     }
+    /**
+     *
+     */
+    renderStyle() {
+        if (!this.m_style.size) {
+            return "";
+        }
+        let result = 'style="';
+        this.m_style.forEach((v, k) => {
+            result += `${k}:${v};`;
+        });
+        return result + '"';
+    }
     renderContent() {
         return '';
     }

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;
@@ -1042,6 +1046,8 @@ textarea::selection {
 .x-message-box .x-form .icon,
 .x-important .x-form .icon {
   font-size: 48px;
+  width: 48px;
+  height: 48px;
   color: var(--x4-error-color);
   margin-right: 8px;
 }
@@ -1211,10 +1217,15 @@ textarea::selection {
 .x-spreadsheet .x-editor {
   position: absolute;
   min-height: 0;
+  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;
@@ -1291,9 +1302,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.35",
+	"version": "1.4.39",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/component.ts

@@ -67,7 +67,7 @@ const _x4_el_store = Symbol();
 const _x4_el_sym = Symbol();
 
 /** @ignore properties without 'px' unit */
-const _x4_unitless = {
+export const _x4_unitless = {
 	animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
 	boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
 	gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,

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/formatters.ts

@@ -74,7 +74,9 @@ export function money_formatter(input: any): string {
 	}
 
 	let val: number = roundTo(typeof (input) == 'string' ? parseFloat(input) : input, 2);
-	if (val === -0.00) val = 0.00;
+	if (Object.is(val, -0.00)) {
+		val = 0.00;
+	}
 
 	let res = moneyFmt.format(val);
 	return res;

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;
 			}
 
@@ -1200,8 +1201,8 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			style: {
 				left: rc.left - prc.left,
 				top: rc.top - prc.top,
-				width: rc.width,
-				height: rc.height
+				width: rc.width - 1,
+				height: rc.height - 1
 			},
 			tabIndex: false,
 			value: cellvalue,
@@ -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

@@ -27,8 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Component, CProps } from './component'
+import { Component, CProps, _x4_unitless } from './component'
+import { isNumber } from "./tools"
 
+const reNumber = /^-?\d+(\.\d+)?$/;
 
 // degrees to radian
 function d2r( d: number ): number {
@@ -69,10 +71,12 @@ function clean( a, ...b ) {
 abstract class SVGItem {
 	private m_tag: string
 	private m_attrs: Map<string,string>;
+	private m_style: Map<string,string>;
 
 	constructor( tag: string ) {
 		this.m_tag = tag;
 		this.m_attrs = new Map( );
+		this.m_style = new Map( );
 	}
 
 	/**
@@ -80,7 +84,7 @@ abstract class SVGItem {
 	 * @returns 
 	 */
 	render( ) : string {
-		return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent( )}</${this.m_tag}>`;
+		return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent( )}</${this.m_tag}>`;
 	}
 
 	/**
@@ -127,6 +131,21 @@ abstract class SVGItem {
 		return this;
 	}
 
+	style( name: string, value: string | number ) : this {
+		
+		if (value === undefined || value==='' || value===undefined ) {
+			this.m_style.delete( name );
+			return;
+		}
+		
+		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
+			value = value + 'px';
+		}
+
+		this.m_style.set( name, ''+value );
+		return this;
+	}
+
 	/**
 	 * add a class
 	 * @param name class name to add 
@@ -142,13 +161,36 @@ abstract class SVGItem {
 	 * 
 	 */
 	
-	renderAttrs( ) {
+	renderAttrs( ): string {
+		if( !this.m_attrs.size ) {
+			return "";
+		}
+
 		let result = '';
 		this.m_attrs.forEach( (v,k) => {
 			result += ` ${k} = "${v}"`
 		});
+
 		return result;
 	}
+
+	/**
+	 * 
+	 */
+	
+	 renderStyle( ): string {
+
+		if( !this.m_style.size ) {
+			return "";
+		}
+
+		let result = 'style="';
+		this.m_style.forEach( (v,k) => {
+			result += `${k}:${v};`
+		});
+
+		return result+'"';
+	}
 	
 	renderContent( ): string {
 		return '';

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 {
@@ -1295,6 +1299,8 @@ textarea {
 		
 		.icon {
 			font-size: 48px;
+			width: 48px;
+			height: 48px;
 			color: var( --x4-error-color );
 			margin-right: 8px;
 		}
@@ -1480,14 +1486,20 @@ textarea {
 	.x-editor {
 		position: absolute;
 		min-height: 0;
+		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;
 
@@ -1592,9 +1604,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 {