x4js 2.0.20 → 2.0.22

package/src/components/boxes/boxes.ts

@@ -122,6 +122,18 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 		});
 	}
 
+	removeItem( name: string ) {
+		const index = this._items.findIndex( x => x.name==name );
+		if( index>=0 ) {
+			const pg = this._items[index];
+			if( pg?.page ) {
+				this.removeChild( pg.page );
+			}
+
+			this._items.splice( index, 1 );
+		}
+	}
+
 	select( name: string ) {
 		let sel = this.query( `:scope > .selected` );
 		if( sel ) {
@@ -143,7 +155,7 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 				sel.setClass( "selected", true );
 			}
 
-			asap( ( ) => this.fire( "pageChange", { selection: pg.name, empty: !sel } ) );
+			asap( ( ) => this.fire( "pageChange", { selection: [pg.name], empty: !sel } ) );
 		}
 
 		return pg?.page;
@@ -177,6 +189,26 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 		return pg ? pg.content : null;
 	}
 
+	/**
+	 * 
+	 */
+
+	getPageCount( ) {
+		return this._items.length;
+	}
+
+	/**
+	 * 
+	 */
+
+	enumPageNames( ) {
+		return this._items.map( x => x.name );
+	}
+
+	/**
+	 * 
+	 */
+
 	getItem( name: string ) {
 		const pg = this._items.find( x => x.name==name );
 		return pg;

package/src/components/canvas/canvas.ts

@@ -30,8 +30,9 @@ interface CanvasEventMap extends ComponentEvents {
 }
 
 export interface CanvasProps extends ComponentProps {
-	paint: EventCallback<EvPaint>
-	clear?: boolean;
+	paint_cb: (ctx: CanvasEx ) => void;	// simple callback
+	paint: EventCallback<EvPaint>		// or standard event (slower)
+	clear?: boolean;					// clear background before painting
 }
 
 
@@ -179,7 +180,12 @@ export class Canvas extends Component<CanvasProps, CanvasEventMap> {
 
 	protected paint(ctx: CanvasEx ) {
 		try {
-			this.fire('paint', { ctx } );
+			if( this.props.paint_cb ) {
+				this.props.paint_cb( ctx );
+			}
+			else {
+				this.fire('paint', { ctx } );
+			}
 		}
 		catch (x) {
 			console.assert(false, x);

package/src/components/combobox/combobox.module.scss

@@ -26,6 +26,8 @@
 	--combobox-btn-background: inherit;
 	--combobox-btn-color: var( --text-secondary );
 	--combobox-btn-color-hover: var( --text-primary );
+
+	--combo-tree-indent: 1em;
 }
 
 .x4dropdownlist {
@@ -33,6 +35,8 @@
 	@extend .hbox;
 
 	max-height: 250px;
+	max-width: 50vw;
+	
 	position: absolute;
 	background-color: var( --dropdown-background );
 	border: 1px solid var( --dropdown-border );
@@ -47,6 +51,15 @@
 
 		.x4item {
 			white-space: nowrap;
+			
+			&.level-1 { padding-left: calc(var(--combo-tree-indent) * 1 ); }
+			&.level-2 { padding-left: calc(var(--combo-tree-indent) * 2 ); }
+			&.level-3 { padding-left: calc(var(--combo-tree-indent) * 3 ); }
+			&.level-4 { padding-left: calc(var(--combo-tree-indent) * 4 ); }
+			&.level-5 { padding-left: calc(var(--combo-tree-indent) * 5 ); }
+			&.level-6 { padding-left: calc(var(--combo-tree-indent) * 6 ); }
+			&.level-7 { padding-left: calc(var(--combo-tree-indent) * 7 ); }
+			&.level-8 { padding-left: calc(var(--combo-tree-indent) * 8 ); }
 		}
 	}
 }

package/src/components/combobox/combobox.ts

@@ -128,6 +128,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 
 		const _select = ( sel: ListboxID ) => {
 			const itm = list.getItem(sel);
+			if( itm ) {
+				list.select( sel, false );
+			}
 
 			//TODO: unsafehtml
 			//@ts-ignore
@@ -270,6 +273,10 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		
 		return super.queryInterface( name );
 	}
+
+	getInput( ) {
+		return this._input;
+	}
 }
 
 

package/src/components/form/form.ts

@@ -20,7 +20,7 @@ import { Box, BoxProps } from '../boxes/boxes';
 import "./form.module.scss"
 
 //type FormValue = string | number | boolean;
-export type FormValues = Record<string,string>;
+export type FormValues = Record<string,any>;
 
 export interface FormProps extends BoxProps {
 	autoComplete?: boolean;
@@ -81,8 +81,8 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 	 * 
 	 */
 
-	getValues( ): FormValues {
-		const result: FormValues = {}
+	getValues<T extends FormValues = FormValues>( ): T {
+		const result: any = {}
 		const items = this._get_inputs( );
 
 		items.forEach( x => {
@@ -94,7 +94,7 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 			}
 		});
 
-		return result;
+		return result as T;
 	}
 
 	/**

package/src/components/gridview/gridview.ts

@@ -17,7 +17,7 @@
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { class_ns, isNumber, isString, setWaitCursor } from '../../core/core_tools';
-import { DataModel, DataStore, DataView, DataRecord, DataFieldValue, EvViewChange } from '../../core/core_data';
+import { DataModel, DataStore, DataView, DataRecord, EvViewChange } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -43,7 +43,7 @@ const SCROLL_LIMIT = 200;
  * 
  */
 
-interface GridColumn {
+export interface GridColumn {
 	id: any;
 	title: string;
 	width: number;
@@ -499,14 +499,15 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 	private _sortCol(col: number, ascending?: boolean ) {
 
-		setWaitCursor(true);
-
 		// to allow cursor
 		this.setTimeout("sort", 50, () => {
 			let asc = true;
 
 			// already sorted ?
-			const scol = this.query(`.col-header [data-col="${col}"`);
+			const scol = this.query(`.col-header .cell[data-col="${col}"]`);
+			if( !scol ) {
+				return;
+			}
 
 			if( ascending===undefined ) {
 				if (scol.hasClass("sorted")) {
@@ -541,6 +542,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				}
 			}
 
+			setWaitCursor(true);
+
 			this._dataview.sort([{
 				field: cdata.id,
 				ascending: asc,
@@ -828,7 +831,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			}
 		}
 
-		const maxr = this._dataview.getCount();
+		const maxr = this._dataview ? this._dataview.getCount() : 0;
 		let maxh = maxr;
 
 		if (maxr < SCROLL_LIMIT) {
@@ -874,7 +877,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 		// WHEEL
 		this.addDOMEvent("wheel", (ev: WheelEvent) => {
-			if (ev.deltaY && this._dataview.getCount() >= SCROLL_LIMIT) {
+			if (ev.deltaY && this._dataview && this._dataview.getCount() >= SCROLL_LIMIT) {
 				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
 				ev.stopPropagation();
 				ev.preventDefault();
@@ -1032,7 +1035,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			const rc = this.getBoundingRect();
 
 			// rows
-			const rowc = this._dataview.getCount();
+			const rowc = this._dataview ? this._dataview.getCount() : 0;
 			const mul = rowc < SCROLL_LIMIT ? this._row_height : 1;
 
 			const start = Math.floor(this._top / mul);
@@ -1132,7 +1135,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		});
 
 		const rec = this._dataview.getByIndex( rowid );
-		this.fire("selectionChange", { selection: rec, empty: false } );
+		this.fire("selectionChange", { selection: [rec], empty: false } );
 	}
 
 	/**

package/src/components/header/header.module.scss

@@ -3,10 +3,10 @@
 :root {
 	--header-background-hover: rgba(100,100,100,0.1);
 	--header-sizer-hover: var( --border-hover );
+	--header-color: var( --text-primary );
 }
 
 .x4header {
-	@extend .flex;
 	width: 100%;
 
 	overflow: hidden;
@@ -26,6 +26,7 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
+			color: var( --header-color );
 		}
 		
 		&:hover {

package/src/components/header/header.ts

@@ -15,10 +15,18 @@ interface HeaderItem {
 
 interface HeaderProps extends Omit<ComponentProps,"content"> {
 	items: HeaderItem[]
+	target?: Component;	// target element to set header col variable width var( --hdr-item-{name}-width )
 }
 
 /**
+ * by default when a header item is resized, the 'target' style '--{name}-width' is updated
+ * if you listbox has a header and 3 cols named A, B, C then in your css, use
  * 
+ * .my-listbox {
+ *    --A-width: 10px;
+ *    --B-width: 50px;
+ *    --C-width: 100px;
+ * }
  */
 
 @class_ns( "x4" )
@@ -94,13 +102,13 @@ export class Header extends HBox<HeaderProps> {
 
 		const rc = this.getBoundingRect( );
 		
-		let rest = (rc.width-filled);
+		let   rest = (rc.width-filled-10);
 		const unit = Math.ceil( rest/count );
 
-		console.log( "filled", filled );
-		console.log( "count", count );
-		console.log( "rest", rest );
-		console.log( "unit", unit );
+		//console.log( "filled", filled );
+		//console.log( "count", count );
+		//console.log( "rest", rest );
+		//console.log( "unit", unit );
 		
 		let fullw = 0;
 		this._els.forEach( c => {
@@ -116,6 +124,10 @@ export class Header extends HBox<HeaderProps> {
 			}
 
 			c.setWidth( width );
+
+			const item = c.getInternalData<HeaderItem>( 'data' );
+			this.props.target?.setStyleVariable( `--${item.name}-width`, width + "px");
+			
 			fullw += width;
 		} );
 

package/src/components/icon/icon.module.scss

@@ -19,6 +19,7 @@
 .x4icon {
 	@extend .hbox;	
 
+	flex-shrink: 0;
 	min-width: 10px;
 	height: 10px;
     overflow: hidden;

package/src/components/label/label.module.scss

@@ -20,6 +20,7 @@
 	--label-background: transparent;
 	--label-color: var( --text-ternary );
 	--label-icon-color: rgb(0 0 0 / 44%);
+	--label-color-disa: var( --disabled-color-dark );
 }
 
 .x4label {
@@ -66,11 +67,15 @@
 	}
 }
 
-
 .x4simpletext {
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }
 }
 
+[disabled] .x4label,
+[disabled] .x4simpletext {
+	color: var(--label-color-disa);
+}
+
 

package/src/components/listbox/listbox.module.scss

@@ -46,7 +46,7 @@
 	outline: none;
 
 	&>.x4header {
-		border-bottom: 1px solid var( --color-gray-3 );
+		border-bottom: 1px solid var( --border );
 	}
 
 	&>.body {
@@ -59,45 +59,45 @@
 
 		&> .x4viewport {
 			display: table;
+		}
+
+		.x4item {
+			@extend .flex;
 			
-			.x4item {
-				@extend .flex;
-				
-				padding: 4px;
-				background-color: transparent;
-				color: var( --color-gray-9 );
+			padding: 4px;
+			background-color: transparent;
+			color: var( --text-primary );
 
-				&> .x4label {
-					color: inherit;
-					padding: 2px 6px;
-				
-					#icon {
-						color: var( --listbox-icon-color );
-						fill: var( --listbox-icon-color );
-					}
+			&> .x4label {
+				color: inherit;
+				padding: 2px 6px;
+			
+				#icon {
+					color: var( --listbox-icon-color );
+					fill: var( --listbox-icon-color );
 				}
+			}
 
-				&:hover {
-					background-color: var( --listbox-item-background-hover );
-				}
+			&:hover {
+				background-color: var( --listbox-item-background-hover );
+			}
 
-				&.selected {
-					background-color: var( --listbox-item-background-sel );
-					color: var( --listbox-item-color-sel );
+			&.selected {
+				background-color: var( --listbox-item-background-sel );
+				color: var( --listbox-item-color-sel );
 
-					&> .x4label {
-						#icon {
-							color: var( --listbox-item-color-sel );
-							fill: var( --listbox-item-color-sel );
-						}
+				&> .x4label {
+					#icon {
+						color: var( --listbox-item-color-sel );
+						fill: var( --listbox-item-color-sel );
 					}
 				}
-
-				//&:active{
-					//background-color: var( --color-80 );
-					//color: var(--color-0);
-				//}	
 			}
+
+			//&:active{
+				//background-color: var( --color-80 );
+				//color: var(--color-0);
+			//}	
 		}
 	}
 
@@ -138,6 +138,10 @@
 				&:focus {
 					background-color: var( --ol-button-background-hover );
 				}
+
+				&:disabled {
+					color: var( --disabled-color-dark );
+				}
 			}
 		}
 	}		

package/src/components/listbox/listbox.ts

@@ -16,9 +16,11 @@
 
 import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { kbNav, class_ns, isArray, UnsafeHtml } from '../../core/core_tools';
+import { kbNav, class_ns, isArray, UnsafeHtml, asap } from '../../core/core_tools';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
+import { Header } from '../header/header';
+
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
 
@@ -55,7 +57,7 @@ interface ListboxEvents extends ComponentEvents {
 interface ListboxProps extends Omit<ComponentProps,'content'> {
 	items?: ListItem[];
 	renderer?: ( item: ListItem ) => Component;
-	//header?: Header;
+	header?: Header;
 	footer?: Component,
 	checkable?: true,
 	multisel?: true,
@@ -98,8 +100,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			props.footer.setAttribute( "id", "footer" );
 		}
 
+		if( props.header ) {
+			props.header.setAttribute( "id", "header" );
+		}
+
 		this.setContent( [
-			//props.header ? props.header : null,
+			props.header ? props.header : null,
 			scroller,
 			props.footer,
 		] );
@@ -342,7 +348,12 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 		if( !ids.length ) {
 			if( this._multisel.size ) {
-				this.clearSelection( );
+				if( notify ) {
+					this.clearSelection( );
+				}
+				else {
+					this._clearSelection( );
+				}
 			}
 
 			return;
@@ -361,7 +372,9 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 				}
 			});
 
-			this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
+			if( notify ) {
+				this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
+			}
 		}
 	}
 	
@@ -411,15 +424,29 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 		this.clearSelection( );
 		this._view.clearContent( );
-		this._items = items;
+		this._items = items ?? [];
 
-		if( items ) {
+		let upsel = false;
+
+		if( this._items.length ) {
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
 			if( keepSel ) {
 				this.select( oldSel );
 			}
+			else {
+				upsel = true;
+			}
+		}
+		else {
+			upsel = true;
+		}
+		
+		if( upsel ) {
+			this.setTimeout( "sel", 100, ( ) => {
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			} );
 		}
 	}
 
@@ -452,7 +479,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	 * 
 	 */
 
-	filter( filter: string ) {
+	filter( filter: string | RegExp ) {
 		const childs = this._view.enumChildComponents( false );
 		
 		if( !filter ) {
@@ -460,13 +487,24 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 		else {
 			// get list of visible items
-			const filtred = this._items
-					.filter( x => x.text.includes(filter) )
-					.map( x => x.id+'' );
+			let filtred: Set<ListboxID>;
+
+			if( filter instanceof RegExp ) {
+				const f = filter as RegExp;
+				filtred = new Set( this._items
+						.filter( x => f.test(x.text as string) )
+						.map( x => x.id ) ); 
+			}
+			else {
+				const f = filter.toUpperCase( );
+				filtred = new Set( this._items
+					.filter( x => x.text.toUpperCase().includes(f) )
+					.map( x => x.id ) );
+			}
 
 			// now hide all elements not in list
 			childs.forEach( x => {
-				x.show( filtred.includes( x.getInternalData( "id" ) ) );
+				x.show( filtred.has( x.getInternalData( "id" ) ) );
 			});
 		}
 	}

package/src/components/messages/messages.ts

@@ -209,7 +209,21 @@ export class PromptBox extends Dialog<DialogProps>
 
 			box.show();
 		} );
+	}
+
+	static show(  msg: string | UnsafeHtml, editor: Component, title: string, callback: ( btn: string ) => boolean | Promise<boolean> | Promise<void> ) {
 
+		const box = this._create( msg, editor, title );
+	
+		box.on( "btnclick", ( ev ) => {
+			asap( async ( ) => {
+				if( await callback( ev.button )!==false ) {
+					box.close() 
+				}
+			});
+		});
+
+		box.show();
 	}
 }
 

package/src/components/notification/notification.ts

@@ -72,7 +72,7 @@ export class Notification extends Popup {
 		const _icon = new Icon( { iconId: icon } );
 		if( props.loading ) {
 			_icon.addClass( "rotate" );
-			this.props.modal = true;
+			//this.props.modal = true;
 		}
 
 		this.setContent( new HBox( { 

package/src/components/popup/popup.ts

@@ -178,8 +178,19 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this.__remove( );
 
 		if( this._ismodal ) {
-			modal_stack.pop( );
-			this._hideModalMask( );
+			// modal1.show()
+			// modal2.show()
+			// modal1.hide()
+			if( modal_stack[modal_stack.length-1]!=this ) {
+				const idx = modal_stack.findIndex( x => x===this );
+				if( idx>=0 ) {
+					modal_stack.splice( idx, 1 );
+				}
+			}
+			else {
+				modal_stack.pop( );
+				this._hideModalMask( );
+			}
 		}
 
 		// remove from popup list

package/src/components/propgrid/propgrid.ts

@@ -81,7 +81,7 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
-		this.groups = _grps;
+		this.groups = _grps.filter( x => !!x );
 		//this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
 
 		let items: Component[] = [];
@@ -89,7 +89,9 @@ export class PropertyGrid extends VBox {
 		for( const g of this.groups ) {
 			items.push( this.makeGroupHeader(g) );
 			g.items.forEach( i => {
-				items.push( this.makePropertyRow(i) );
+				if( i ) {
+					items.push( this.makePropertyRow(i) );
+				}
 			});
 		}
 

package/src/components/sizers/sizer.ts

@@ -23,7 +23,7 @@ import "./sizer.module.scss"
  * 
  */
 
-interface EvSizeChange extends ComponentEvent {
+export interface EvSizeChange extends ComponentEvent {
 	size: number;
 }
 
@@ -33,7 +33,7 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" ;
 
 /**
  * 
@@ -117,11 +117,11 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		}
 
 		if( this._type.includes("right") ) {
-			//nr.left = rc.left;
 			nr.width = (pt.x-rc.left);
-		}
+			}
 
 		this._ref.setStyle( nr );
+		//this._ref.setStyleValue( "flexGrow", 0 );
 
 		const nrc = this._ref.getBoundingRect( );
 		this.fire( "resize", { size: horz ? nrc.width : nrc.height })