x4js 1.4.35 → 1.4.37

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/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/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): 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,16 @@ class SVGItem {
         this.m_attrs.set(name, value);
         return this;
     }
+    style(name, value) {
+        if (value === undefined) {
+            value = null;
+        }
+        else 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 +136,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

@@ -1042,6 +1042,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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.35",
+	"version": "1.4.37",
 	"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/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/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,19 @@ abstract class SVGItem {
 		return this;
 	}
 
+	style( name: string, value: string ) : this {
+		
+		if (value === undefined) {
+			value = null;
+		}
+		else 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 +159,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

@@ -1295,6 +1295,8 @@ textarea {
 		
 		.icon {
 			font-size: 48px;
+			width: 48px;
+			height: 48px;
 			color: var( --x4-error-color );
 			margin-right: 8px;
 		}