x4js 1.5.12 → 1.5.14

package/lib/cjs/checkbox.js

@@ -69,6 +69,7 @@ class CheckBox extends component_1.Component {
                     change: this._change.bind(this),
                 }
             }),
+            props.slider ? new component_1.Component({ cls: '@slide-el' }) : null,
             new label_1.Label({
                 text: (_d = props.text) !== null && _d !== void 0 ? _d : '',
                 width: labelWidth < 0 ? undefined : labelWidth,
@@ -80,7 +81,7 @@ class CheckBox extends component_1.Component {
                 attrs: {
                     "for": uid
                 }
-            })
+            }),
         ]);
     }
     /**

package/lib/cjs/svgcomponent.js

@@ -169,6 +169,24 @@ class SVGItem {
         this.attr("clip-path", `url(#${id})`);
         return this;
     }
+    /**
+     *
+     */
+    transform(tr) {
+        this.attr("transform", tr);
+    }
+    /**
+     *
+     */
+    rotate(deg, cx, cy) {
+        this.transform(`rotate( ${deg} ${cx} ${cy} )`);
+    }
+    translate(dx, dy) {
+        this.transform(`translate( ${dx} ${dy} )`);
+    }
+    scale(x) {
+        this.transform(`scale( ${x} )`);
+    }
 }
 /**
  *
@@ -302,10 +320,10 @@ class SVGGradient extends SVGItem {
         super('linearGradient');
         this.m_id = 'gx-' + SVGGradient.g_id;
         this.attr('id', this.m_id);
-        this.attr('x1', num(x1) + '');
-        this.attr('x2', num(x2) + '');
-        this.attr('y1', num(y1) + '');
-        this.attr('y2', num(y2) + '');
+        this.attr('x1', (0, tools_1.isString)(x1) ? x1 : num(x1) + '');
+        this.attr('x2', (0, tools_1.isString)(x2) ? x2 : num(x2) + '');
+        this.attr('y1', (0, tools_1.isString)(y1) ? y1 : num(y1) + '');
+        this.attr('y2', (0, tools_1.isString)(y2) ? y2 : num(y2) + '');
         this.m_stops = [];
         SVGGradient.g_id++;
     }

package/lib/cjs/treeview.js

@@ -489,7 +489,8 @@ class TreeView extends layout_1.VLayout {
                     text: node.name,
                     parent: node.parent,
                     cls: node.cls,
-                    icon: node.icon
+                    icon: node.icon,
+                    data: node.data,
                 };
                 if (!node.leaf) {
                     elem.children = [];

package/lib/cjs/version.js

@@ -29,4 +29,4 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.x4js_version = void 0;
-exports.x4js_version = "1.5.12";
+exports.x4js_version = "1.5.14";

package/lib/esm/checkbox.js

@@ -65,6 +65,7 @@ export class CheckBox extends Component {
                     change: this._change.bind(this),
                 }
             }),
+            props.slider ? new Component({ cls: '@slide-el' }) : null,
             new Label({
                 text: props.text ?? '',
                 width: labelWidth < 0 ? undefined : labelWidth,
@@ -76,7 +77,7 @@ export class CheckBox extends Component {
                 attrs: {
                     "for": uid
                 }
-            })
+            }),
         ]);
     }
     /**

package/lib/esm/svgcomponent.js

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, _x4_unitless } from './component';
-import { isNumber } from "./tools";
+import { isNumber, isString } from "./tools";
 const reNumber = /^-?\d+(\.\d+)?$/;
 // degrees to radian
 function d2r(d) {
@@ -169,6 +169,24 @@ class SVGItem {
         this.attr("clip-path", `url(#${id})`);
         return this;
     }
+    /**
+     *
+     */
+    transform(tr) {
+        this.attr("transform", tr);
+    }
+    /**
+     *
+     */
+    rotate(deg, cx, cy) {
+        this.transform(`rotate( ${deg} ${cx} ${cy} )`);
+    }
+    translate(dx, dy) {
+        this.transform(`translate( ${dx} ${dy} )`);
+    }
+    scale(x) {
+        this.transform(`scale( ${x} )`);
+    }
 }
 /**
  *
@@ -307,10 +325,10 @@ class SVGGradient extends SVGItem {
         super('linearGradient');
         this.m_id = 'gx-' + SVGGradient.g_id;
         this.attr('id', this.m_id);
-        this.attr('x1', num(x1) + '');
-        this.attr('x2', num(x2) + '');
-        this.attr('y1', num(y1) + '');
-        this.attr('y2', num(y2) + '');
+        this.attr('x1', isString(x1) ? x1 : num(x1) + '');
+        this.attr('x2', isString(x2) ? x2 : num(x2) + '');
+        this.attr('y1', isString(y1) ? y1 : num(y1) + '');
+        this.attr('y2', isString(y2) ? y2 : num(y2) + '');
         this.m_stops = [];
         SVGGradient.g_id++;
     }

package/lib/esm/treeview.js

@@ -482,7 +482,8 @@ export class TreeView extends VLayout {
                     text: node.name,
                     parent: node.parent,
                     cls: node.cls,
-                    icon: node.icon
+                    icon: node.icon,
+                    data: node.data,
                 };
                 if (!node.leaf) {
                     elem.children = [];

package/lib/esm/version.js

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export const x4js_version = "1.5.12";
+export const x4js_version = "1.5.14";

package/lib/src/checkbox.ts

@@ -103,6 +103,7 @@ export class CheckBox extends Component<CheckBoxProps, CheckBoxEventMap> {
 					change: this._change.bind(this),
 				}
 			}),
+			props.slider ? new Component( { cls: '@slide-el' } ) : null,
 			new Label({
 				text: props.text ?? '',
 				width: labelWidth < 0 ? undefined : labelWidth,
@@ -114,7 +115,7 @@ export class CheckBox extends Component<CheckBoxProps, CheckBoxEventMap> {
 				attrs: {
 					"for": uid
 				}
-			})
+			}),
 		]);
 	}
 

package/lib/src/svgcomponent.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps, _x4_unitless } from './component'
-import { isNumber } from "./tools"
+import { isNumber, isString } from "./tools"
 
 const reNumber = /^-?\d+(\.\d+)?$/;
 
@@ -208,6 +208,30 @@ abstract class SVGItem {
 		this.attr( "clip-path", `url(#${id})` );
 		return this;
 	}
+
+	/**
+	 * 
+	 */
+
+	transform( tr: string ) {
+		this.attr( "transform", tr );
+	}
+
+	/**
+	 * 
+	 */
+
+	rotate( deg: number, cx: number, cy: number ) {
+		this.transform( `rotate( ${deg} ${cx} ${cy} )` );
+	}
+
+	translate( dx: number, dy: number ) {
+		this.transform( `translate( ${dx} ${dy} )` );
+	}
+
+	scale( x: number ) {
+		this.transform( `scale( ${x} )` );
+	}
 }
 
 /**
@@ -371,10 +395,10 @@ class SVGGradient extends SVGItem {
 		
 		this.m_id = 'gx-'+SVGGradient.g_id;
 		this.attr( 'id', this.m_id );
-		this.attr( 'x1', num(x1)+'' );
-		this.attr( 'x2', num(x2)+'' );
-		this.attr( 'y1', num(y1)+'' );
-		this.attr( 'y2', num(y2)+'' );
+		this.attr( 'x1', isString(x1) ? x1 : num(x1)+'' );
+		this.attr( 'x2', isString(x2) ? x2 : num(x2)+'' );
+		this.attr( 'y1', isString(y1) ? y1 : num(y1)+'' );
+		this.attr( 'y2', isString(y2) ? y2 : num(y2)+'' );
 
 		this.m_stops = [];
 		SVGGradient.g_id++;

package/lib/src/treeview.ts

@@ -49,6 +49,7 @@ export interface HierarchicalNode {
 	cls?: string;
 	leaf?: boolean
 	icon?: string;
+	data?: any;
 }
 
 export interface TreeNode {
@@ -659,8 +660,9 @@ export class TreeView extends VLayout<TreeViewProps, TreeViewEventMap> {
 					id: node.id,
 					text: node.name,
 					parent: node.parent,
-					cls: node.cls
-					icon: node.icon
+					cls: node.cls,
+					icon: node.icon,
+					data: node.data,
 				};
 
 				if (!node.leaf) {

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.12";
+export const x4js_version = "1.5.14";

package/lib/src/x4.less

@@ -812,41 +812,46 @@ textarea {
 		height: 1px;
 	}
 
-	.x-label:before {
-		box-sizing: border-box;
-		position: absolute;
-		left: 0px;
-		top: 3px;
-		content: "";
-		display: inline-block;
+	.x-slide-el {
 		width: 2.4em;
 		height: 1.4em;
-		border-radius: 1.4rem;
-		padding: 2px;
-		background-color: @BLACK30;
-		transition: all .2s;
-		border: 1px solid @WHITE50
-	}
-
-	// circle
-	.x-label:after {
-		box-sizing: border-box;
-		content: "";
-		top: 5px;
-		height: calc(1.4em - 4px);
-		width: calc(1.4em - 4px);
-		border-radius: 50%;
-		background-color: #fff;
-		transition: all .2s;
-		position: absolute;
-		left: 2px;
+
+		&:before {
+			box-sizing: border-box;
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			content: "";
+			display: inline-block;
+			width: 2.4em;
+			height: 1.4em;
+			border-radius: 1.4rem;
+			padding: 2px;
+			background-color: @BLACK30;
+			transition: all .2s;
+			border: 1px solid @WHITE50
+		}
+
+		// circle
+		&:after {
+			box-sizing: border-box;
+			content: "";
+			top: 2px;
+			height: calc(1.4em - 4px);
+			width: calc(1.4em - 4px);
+			border-radius: 50%;
+			background-color: #fff;
+			transition: all .2s;
+			position: absolute;
+			left: 2px;
+		}
 	}
 
-	input:checked + .x-label:before {
+	input:checked + .x-slide-el:before {
 		background-color: var( --x4-selection-color );
 	}
 
-	input:checked + .x-label:after {
+	input:checked + .x-slide-el:after {
 		left: calc( 1em + 2px);
 		background-color: white;
 	}

package/lib/styles/x4.css

@@ -646,11 +646,15 @@ textarea::selection {
   width: 1px;
   height: 1px;
 }
-.x-check-box.slider .x-label:before {
+.x-check-box.slider .x-slide-el {
+  width: 2.4em;
+  height: 1.4em;
+}
+.x-check-box.slider .x-slide-el:before {
   box-sizing: border-box;
   position: absolute;
   left: 0px;
-  top: 3px;
+  top: 0px;
   content: "";
   display: inline-block;
   width: 2.4em;
@@ -661,10 +665,10 @@ textarea::selection {
   transition: all 0.2s;
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
-.x-check-box.slider .x-label:after {
+.x-check-box.slider .x-slide-el:after {
   box-sizing: border-box;
   content: "";
-  top: 5px;
+  top: 2px;
   height: calc(1.4em - 4px);
   width: calc(1.4em - 4px);
   border-radius: 50%;
@@ -673,10 +677,10 @@ textarea::selection {
   position: absolute;
   left: 2px;
 }
-.x-check-box.slider input:checked + .x-label:before {
+.x-check-box.slider input:checked + .x-slide-el:before {
   background-color: var(--x4-selection-color);
 }
-.x-check-box.slider input:checked + .x-label:after {
+.x-check-box.slider input:checked + .x-slide-el:after {
   left: calc(1em + 2px);
   background-color: white;
 }

package/lib/styles/x4.less

@@ -812,41 +812,46 @@ textarea {
 		height: 1px;
 	}
 
-	.x-label:before {
-		box-sizing: border-box;
-		position: absolute;
-		left: 0px;
-		top: 3px;
-		content: "";
-		display: inline-block;
+	.x-slide-el {
 		width: 2.4em;
 		height: 1.4em;
-		border-radius: 1.4rem;
-		padding: 2px;
-		background-color: @BLACK30;
-		transition: all .2s;
-		border: 1px solid @WHITE50
-	}
-
-	// circle
-	.x-label:after {
-		box-sizing: border-box;
-		content: "";
-		top: 5px;
-		height: calc(1.4em - 4px);
-		width: calc(1.4em - 4px);
-		border-radius: 50%;
-		background-color: #fff;
-		transition: all .2s;
-		position: absolute;
-		left: 2px;
+
+		&:before {
+			box-sizing: border-box;
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			content: "";
+			display: inline-block;
+			width: 2.4em;
+			height: 1.4em;
+			border-radius: 1.4rem;
+			padding: 2px;
+			background-color: @BLACK30;
+			transition: all .2s;
+			border: 1px solid @WHITE50
+		}
+
+		// circle
+		&:after {
+			box-sizing: border-box;
+			content: "";
+			top: 2px;
+			height: calc(1.4em - 4px);
+			width: calc(1.4em - 4px);
+			border-radius: 50%;
+			background-color: #fff;
+			transition: all .2s;
+			position: absolute;
+			left: 2px;
+		}
 	}
 
-	input:checked + .x-label:before {
+	input:checked + .x-slide-el:before {
 		background-color: var( --x4-selection-color );
 	}
 
-	input:checked + .x-label:after {
+	input:checked + .x-slide-el:after {
 		left: calc( 1em + 2px);
 		background-color: white;
 	}

package/lib/types/svgcomponent.d.ts

@@ -84,6 +84,16 @@ declare abstract class SVGItem {
      *
      */
     clip(id: string): this;
+    /**
+     *
+     */
+    transform(tr: string): void;
+    /**
+     *
+     */
+    rotate(deg: number, cx: number, cy: number): void;
+    translate(dx: number, dy: number): void;
+    scale(x: number): void;
 }
 /**
  *

package/lib/types/treeview.d.ts

@@ -41,6 +41,7 @@ export interface HierarchicalNode {
     cls?: string;
     leaf?: boolean;
     icon?: string;
+    data?: any;
 }
 export interface TreeNode {
     id: any;

package/lib/types/version.d.ts

@@ -26,4 +26,4 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export declare const x4js_version = "1.5.12";
+export declare const x4js_version = "1.5.14";

package/package.json

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