x4js 2.0.34 → 2.0.35

package/package.json

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

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/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;
 }