x4js 2.2.64 → 2.2.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.64",
+  "version": "2.2.65",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/dialog/dialog.module.scss

@@ -70,11 +70,13 @@
 
 		&> .x4button {
 			min-width: 80px;
+            #label {
+                white-space: nowrap;
+            }
 			
 			.x-simple-label {
 				text-align: center;
 			}
-
 		}
 	}
 }

package/src/components/form/form.module.scss

@@ -21,18 +21,18 @@
 }
 
 .x4form {
-	@extend %vbox;
+    @extend %vbox;
 	@extend %flex;
-
-	padding: 16px;
+    
+    padding: 16px;
 	background-color: var( --color-form );
+	
+    &.horizontal {
+        flex-direction: row;
+    }
 
 	&.no-flex {
 		flex-grow: 0;
 	}
-
-	&>.xcontainer {
-
-	}
 }
 

package/src/components/popup/popup.ts

@@ -431,8 +431,11 @@ class CMover {
 		this.self = ref ? true : false;
 
 		const mouseDown = ( e: PointerEvent ) => {
-			if( this.self && e.target && (e.target as HTMLElement).tagName!=="DIV" ) {
-				return;
+			if( this.self && e.target ) {
+                const clickable = (e.target as HTMLElement).closest('button, input, a, [role="button"]');
+                if( clickable ) {
+				    return;
+                }
 			}
 
 			x.setCapture( e.pointerId );

package/src/components/propgrid/progrid.module.scss

@@ -43,48 +43,66 @@
 	.group {
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
-		font-weight: bold;
-		background-color: white;
-		color: var(--color-primary-a50);
-
-		.x4box > .desc {
-			font-style: italic;
-			font-weight: normal;
-			font-size: 90%;
-			color: var( --text-ternary );
-		}
-
-		&:not(:first-child ) {
-			border-top: 1px solid var(--color-primary-a50);
-		}
-
-		&:not( :last-child ) {
-			border-bottom: 1px solid var(--color-primary-a50);
-			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
-		}
-		
-		display: flex;
+		background-color: var( --background-secondary );
+		margin-bottom: 8px;
+        box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
+        color: var(--color-primary-a50);
+        display: flex;
 		align-items: center;
-		padding-left: 8px;
+		padding: 8px;
 		gap: 8px;
 
-		&>.x4box {
-			flex-grow: 1;
-		}
+        &.sticky {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+		
+        .hdr {
+            &>.gadgets {
+                gap: 8px;
+                &> .x4 {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
 
-		&>.x4icon {
-			.fa-secondary,
-			.fa-primary {
-				fill: var( --color-primary-a50 );
-			}
+            .title {
+                font-weight: bold;
+            }
+            
+            &>.x4button {
+                background-color: transparent;
+                color: var(--color-primary-a50);
+            }
+         
+            &>.x4label {
+                .x4icon {
+                    .fa-secondary,
+                    .fa-primary {
+                        fill: var( --color-primary-a50 );
+                    }
+
+                    width: 1em;
+                    height: 1em;
+                }
+            }
+        }
 
-			width: 1em;
-			height: 1em;
+        &>.desc {
+            font-style: italic;
+            font-weight: normal;
+            font-size: 90%;
+            color: var( --text-ternary );
+        }
+
+		&:not(:first-child ) {
+			//border-top: 1px solid var(--color-primary-a50);
 		}
 
-		&>.x4button {
-			background-color: transparent;
-			color: var(--color-primary-a50);
+		&:not( :last-child ) {
+			border-bottom: 1px solid var(--color-primary-a50);
+			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
 

package/src/components/propgrid/propgrid.ts

@@ -50,10 +50,12 @@ export interface PropertyValue {
 export interface PropertyGroup {
 	title: string;
 	desc?: string;
+    name?: string;
 	icon?: string;
 	cls?: string;
 	collapsible?: boolean | number;  // -1 for collapsible+collapsed
 	items: PropertyValue[];
+    gadgets?: Component[];
 }
 
 export interface PropertyProps extends ComponentProps {
@@ -118,6 +120,9 @@ export class PropertyGrid extends VBox {
 				if( i ) {
 					const row = this.makePropertyRow(i);
 					row.addClass( idx&1 ? "even" : "odd" );
+                    if( g.name ) {
+                        row.setData( "group", g.name );
+                    }
 					
 					items.push( row );
 				}
@@ -163,13 +168,16 @@ export class PropertyGrid extends VBox {
 
 		const tr = new HBox({
 			cls,
+            flex: 1,
 			content: [
-				g.icon ? new Icon({ id: "icon", iconId: g.icon }) : null,
-				new VBox( { content: [
-					new SimpleText({ cls: "title", text: g.title }),
-					g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
-				]}),
-				g.collapsible? new Button({ icon: icons.updown, click: (e) => toggle(tr) }) : null,
+                new VBox( { flex: 1, content: [
+                    new HBox( { cls: 'hdr', content: [
+                        new Label({ flex:1, cls: "title", text: g.title, icon: g.icon }),
+                        g.gadgets ? new HBox( { cls: 'gadgets', content: g.gadgets } ) : null,
+				        g.collapsible? new Button({ icon: icons.updown, click: (e) => toggle(tr) }) : null,
+                    ]}),
+                    g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
+                ]}),    
 			]
 		});
 
@@ -352,5 +360,10 @@ export class PropertyGrid extends VBox {
 			this.setPropValue( p, props[p] );
 		}
 	}
+
+    enableGroup( group_name: string, ena = true ) {
+        const els = this.queryAll( `.row[data-group="${group_name}"]` );
+        els.forEach( x => x.enable( ena ) );
+    }
 }
 

package/src/core/component.ts

@@ -45,13 +45,12 @@ const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
 function genClassNames( x: any ): string[] {
 	
-	const classes = [];
 	let self = Object.getPrototypeOf(x);
-
 	if( self.constructor==Component ) {
-		return ["x4-comp"];
+		return ["x4-comp","x4"];
 	}
 
+    const classes = [];
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
 		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
@@ -59,6 +58,7 @@ function genClassNames( x: any ): string[] {
 		self = Object.getPrototypeOf(self);
 	}
 
+    classes.push( "x4" );
 	return classes;
 }