x4js 2.0.33 → 2.0.35

package/package.json

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

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

@@ -28,6 +28,7 @@
 	position: absolute !important;
 	background-color: white;
 	border: 1px solid var( --border-dark );
+	max-width: 99vw;
 	
 	&> .caption {
 		padding: 8px;

package/src/components/gridview/gridview.ts

@@ -17,7 +17,7 @@
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 import { class_ns, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
-import { DataModel, DataStore, DataView, DataRecord, EvViewChange } from '../../core/core_data';
+import { DataModel, DataStore, DataView, DataRecord, EvViewChange, SortCallback } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -59,7 +59,7 @@ export interface GridColumn {
 	formatter?: (input: any) => string;	// for "custom" type
 	type?: ColType;
 	cls?: string;
-	sortable?: boolean;
+	sortable?: boolean | SortCallback;
 	footer_val?: string;
 	classifier?: CellClassifier;
 }
@@ -86,7 +86,7 @@ export interface GridviewProps extends ComponentProps {
 	contextMenu?: EventCallback<EvContextMenu>;
 	selectionChange?: EventCallback<EvSelectionChange>;
 	sort?: {
-		id: string;
+		field_id: string;
 		asc?: boolean;
 	}
 }
@@ -184,7 +184,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			this.setStore(props.store);
 
 			if( props.sort ) {
-				this.sortCol( props.sort.id, props.sort.asc===true );
+				this.sortCol( props.sort.field_id, props.sort.asc===true );
 			}
 		}
 	}
@@ -625,7 +625,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			this._dataview.sort([{
 				field: cdata.id,
 				ascending: asc,
-				numeric: num
+				numeric: num,
+				callback: cdata.sortable instanceof Function ? cdata.sortable : undefined,
 			}]);
 
 			this._update(true);

package/src/components/messages/messages.module.scss

@@ -92,38 +92,55 @@
 
 
 .x4progressionbox {
-	width: 640px;
-	height: 200px;
+	min-height: 200px;
+	min-width: 500px;
+
 	&> .x4form {
 		min-height: unset;
 	}
 
-	& > .caption,
-	& > #btnbar {
-		display: none;
-	}
-
 	& .x4form {
 		min-width: 400px;
+		gap: 8px;
+
+		&> .x4hbox {
+			flex-grow: 1;
+			align-items: stretch;
+			.right {
+				flex-grow: 1;
+				gap: 8px;
+				display: grid;
+    			grid-template-rows: auto auto 1fr;
+			}
+		}
+
 		.x4icon {
 			    height: 64px;
 				animation: rotating 3s linear infinite;
 				fill: var(--accent-background);
+				align-self: center;
 		}
 
-		.x4label,
-		.x4simpletext {
-			padding: 16px 16px 0 16px;
+		#title {
+			padding: 4px 16px;
 			line-height: 1.8em;
 		}
 
 		.x4progress {
-			margin-left: 16px;
+			margin: 0 16px;
 		}
 
 		#sub-text {
-			max-height: 140px;
-			overflow-y: auto;
+			flex-grow: 1;
+			max-height: 400px;
+			overflow: auto;
+			background-color: #f5f5f5;
+			padding: 4px 8px;
+			margin: 0 16px;
+
+			.x4simpletext {
+				white-space: nowrap;
+			}
 		}
 	}
 }

package/src/components/messages/messages.ts

@@ -240,12 +240,13 @@ export class PromptBox extends Dialog<DialogProps>
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 
-	#log: (string | UnsafeHtml)[];
+	#has_errors = false;
 
 	constructor( title: string ) {
 		super( { 
 			modal: true,
 			title: null,
+			sizable: true,
 			movable: true,
 			form: new Form( {
 				content: [
@@ -255,26 +256,48 @@ export class ProgressionBox  extends Dialog {
 							new VBox( { flex: 1, cls: "right", content: [
 								new SimpleText( { id: "title", text: title } ),
 								new Progress( { id:"prog", min: 0, max: 100, value: 0 } ),
-								new SimpleText( { id: "sub-text", text: "" } ),
+								new VBox( { id: "sub-text" } ),
 							]})
 						]
 					}),
 				]
 			}),
-			buttons: [ "ok.outline.default","cancel.outline" ]
+			buttons: [ "ok.outline.default" ]
 		});
 
-		this.#log = [];
+		this.query("#btnbar").show( false );
+
+		this.on("btnclick", ( ) => this.show( false ) );
+	}
+
+	addText( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	addError( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+
+		this.#has_errors = true;
 	}
 
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.#log.push( text );
-		this.query<Label>( "#sub-text").setText( unsafeHtml(this.#log.join("<br/>")) );
+		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
-	clearText( ) {
-		this.#log = [];
-		this.query<Label>( "#sub-text").setText( '' );
+	clear( ) {
+		this.#has_errors = true;
+		this.query<Label>( "#sub-text").clearContent( );
+	}
+
+	done( ) {
+		if( this.#has_errors ) {
+			this.query("#btnbar").show( true );
+		}
+		else {
+			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+		}
 	}
 }

package/src/components/sizers/sizer.module.scss

@@ -26,7 +26,8 @@
 		cursor: ns-resize;
 	}
 
-	&.inplace {
+	&.vsize,
+	&.hsize {
 		position: relative;
 		align-self: stretch;
 		min-width: 4px;
@@ -37,6 +38,10 @@
 		}
 	}
 
+	.hsize {
+		cursor: ew-resize;		
+	}
+
 	&.top {
 		@include horz;
 		top: 0;

package/src/components/sizers/sizer.ts

@@ -33,7 +33,7 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "inplace";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "hsize" | "vsize";
 
 /**
  * 
@@ -57,7 +57,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this.setCapture( e.pointerId );
 
 			let targ = target;
-			if( !targ && type=='inplace' ) {
+			if( !targ && (type=='hsize' || type=='vsize') ) {
 				targ = this.nextElement( );
 			}
 
@@ -66,14 +66,14 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this._delta = {x:0,y:0};
 			const rc = this._ref.getBoundingRect();
 
-			if( this._type=="inplace" || this._type.includes("left") ) {
+			if( this._type=="hsize" || this._type.includes("left") ) {
 				this._delta.x = e.pageX-rc.left;
 			}
 			else {
 				this._delta.x = e.pageX-(rc.left+rc.width);
 			}
 
-			if( this._type.includes("top") ) {
+			if( this._type=="vsize" || this._type.includes("top") ) {
 				this._delta.y = e.pageY-rc.top;
 			}
 			else {
@@ -110,15 +110,22 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
+		else if( this._type=="vsize" ) {
+			nr.height = (rc.top+rc.height)-pt.y;
+			horz = false;
+		}
 		else if( this._type.includes("bottom") ) {
 			//nr.top = rc.top;
 			nr.height = (pt.y-rc.top);
 			horz = false;
 		}
-		else if( this._type=="inplace" || this._type.includes("left") ) {
+		else if( this._type.includes("left") ) {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
+		else if( this._type=="hsize" ) {
+			nr.width = ((rc.left+rc.width)-pt.x);
+		}
 		else if( this._type.includes("right") ) {
 			nr.width = (pt.x-rc.left);
 		}
@@ -132,4 +139,18 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		e.preventDefault( );
 		e.stopPropagation( );
 	}
+}
+
+@class_ns( "x4" )
+export class HSizer extends CSizer {
+	constructor( ) {
+		super( "hsize" );
+	}
+}
+
+@class_ns( "x4" )
+export class VSizer extends CSizer {
+	constructor( ) {
+		super( "vsize" );
+	}
 }

package/src/core/core_data.ts

@@ -25,6 +25,7 @@ export type DataFieldValue = string | Date | number | boolean;
 
 export type ChangeCallback = (type: string, id?: DataRecordID) => void;
 export type CalcCallback = () => string;
+export type SortCallback = ( v1: any, v2: any ) => number;
 
 export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';
 export type DataIndex = Uint32Array;
@@ -935,7 +936,8 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		
 		interface sort_info {
 			fidx: number,
-			asc: boolean
+			asc: boolean,
+			cb: SortCallback,
 		}
 
 		let bads = 0;		// unknown fields
@@ -943,7 +945,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 		// if no fields are given, reset sort by id
 		if ( sort===null ) {
-			fidxs.push( { fidx: 0, asc: true } );
+			fidxs.push( { fidx: 0, asc: true, cb: null } );
 		}
 		else {
 			fidxs = sort.map( (si) => {
@@ -954,7 +956,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					bads++;
 				}
 
-				return { fidx: fi, asc: si.ascending };
+				return { fidx: fi, asc: si.ascending, cb: si.callback };
 			});
 		}
 
@@ -969,11 +971,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		if( fidxs.length==1 ) {
 
 			const field = fidxs[0].fidx;
+			const cb 	= fidxs[0].cb;
 
 			index.sort( ( ia, ib ) => {
 
 				let va = m.getRaw( field, this.getByIndex(ia) ) ?? '';
 				let vb = m.getRaw( field, this.getByIndex(ib) ) ?? '';
+
+				if( cb ) {
+					return cb( va, vb );
+				}
+
 				if (va > vb) { return 1; }
 				if (va < vb) { return -1; }
 				return 0;
@@ -987,13 +995,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		else {
 			index.sort( ( ia, ib ) => {
 
-				for( let fi=0; fi<fidxs.length; fi++ ) {
-
-					let fidx = fidxs[fi].fidx;
-					let mul = fidxs[fi].asc ? 1 : -1;
+				for( const fi of fidxs ) {
+					let fidx 	= fi.fidx;
+					let mul 	= fi.asc ? 1 : -1;
 
 					let va = m.getRaw( fidx, this.getByIndex(ia) ) ?? '';
 					let vb = m.getRaw( fidx, this.getByIndex(ib) ) ?? '';
+
+					if( fi.cb ) {
+						return fi.cb( va, vb );
+					}
+
 					if (va > vb) { return mul; }
 					if (va < vb) { return -mul; }
 				}
@@ -1096,6 +1108,7 @@ export interface SortProp {
 	field: string; 			// 
 	ascending: boolean;		// 
 	numeric?: boolean;		// numeric sort
+	callback?: SortCallback;
 }