x4js 2.2.64 → 2.2.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.64",
+  "version": "2.2.66",
   "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;
 }
 

package/src/core/core_data.ts

@@ -8,7 +8,7 @@
  * @file core_data.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2026 R-libre ingenierie
+ * @copyright (c) 2024 R-libre ingenierie
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
@@ -78,7 +78,18 @@ const metaFields = Symbol( 'metaField' );
 function _getMetas( obj: object, create = true ) : MetaInfos {
 	
 	let ctor = obj.constructor as any;
-	let mfld = Object.prototype.hasOwnProperty.call(ctor,metaFields) ? ctor[metaFields] : undefined;
+	let mfld = null;
+	let direct = false;
+
+	// comming from new DataModel(...)
+	if( ctor.name=="DataModel" ) {
+		direct = true;
+		mfld = (obj as any)[metaFields];
+	}
+	// standard @data....
+	else {
+		mfld = Object.prototype.hasOwnProperty.call(ctor,metaFields) ? ctor[metaFields] : undefined;
+	}
 	
 	if( mfld===undefined ) {
 		if( !create && ctor!=DataModel ) {
@@ -102,7 +113,12 @@ function _getMetas( obj: object, create = true ) : MetaInfos {
             }	
         }
 
-		(obj.constructor as any)[metaFields] = mfld;
+		if( !direct ) {
+			(obj.constructor as any)[metaFields] = mfld;
+		}
+		else {
+			(obj as any)[metaFields] = mfld;
+		}
 	}
 
 	return mfld;
@@ -119,17 +135,17 @@ export namespace data {
 	**/
 
 	export function id( ) {
-        return ( ownerCls: any, fldName: string ) => {
-            let metas = _getMetas( ownerCls );
-            metas.fields.push( {
-                name: fldName,
-                type: 'any',
-                required: true,
-            });
-
-            metas.id = fldName;
-        }
-    }
+	return ( ownerCls: any, fldName: string ) => {
+		let metas = _getMetas( ownerCls );
+		metas.fields.push( {
+			name: fldName,
+			type: 'any',
+			required: true,
+		});
+
+		metas.id = fldName;
+	}
+}
 
 	/**
 	 * @ignore
@@ -254,12 +270,6 @@ export namespace data {
 
 export class DataModel<T = any> {
 
-    constructor( fields?: FieldInfo[] ) {
-        if( fields && fields.length ) {
-            this.addField( ...fields );
-        }
-    }
-
     /**
      * dynamic DataModel
      */
@@ -270,11 +280,11 @@ export class DataModel<T = any> {
         }
 
         let metas = _getMetas( this, false );
-        if( metas.fields.length==0 ) {
+        metas.fields.push( ...fields );
+
+	    if( !metas.id ) {
             metas.id = fields[0].name;
         }
-
-        metas.fields.push( ...fields );
     }
 
 	/**
@@ -523,24 +533,16 @@ export class DataProxy extends CoreElement<DataEventMap> {
 			url += '?' + this.m_props.params.join( '&' );
 		}
 
-		try {
-			const r = await fetch( url );
-			if( r.ok ) {
-				const raw = await r.json( );
-				
-				let json = raw;
-				if( this.m_props.solver ) {
-					json = this.m_props.solver( json );
-				}
-
-				this.fire( 'change', {value:json,context:raw} );
-			}
-			else {
-				console.error( r.statusText );
+		const r = await fetch( url );
+		if( r.ok ) {
+			const raw = await r.json( );
+			
+			let json = raw;
+			if( this.m_props.solver ) {
+				json = this.m_props.solver( json );
 			}
-		}
-		catch( e ) {
-			console.error( e );
+
+			this.fire( 'change', {value:json,context:raw} );
 		}
 	}
 }
@@ -608,6 +610,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 	/**
 	 * 
+	 * @param records 
 	 */
 
 	async load( url?: string ) {
@@ -671,7 +674,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 	/**
 	 * 
-	 * @param rec
+	 * @param data 
 	 */
 
 	public appendRaw( rec: T ) {
@@ -1211,6 +1214,8 @@ export class DataView extends CoreElement<DataViewEventMap>
 
 	/**
 	 * 
+	 * @param columns 
+	 * @param ascending 
 	 */
 
 	public sort( props: SortProp[] ) {