x4js 2.0.13 → 2.0.15

package/lib/src/components/messages/messages.ts

@@ -2,17 +2,21 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
+import { asap, class_ns, UnsafeHtml } from '../../core/core_tools';
 
-import { HBox } from '../boxes/boxes';
+import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 import { Label } from '../label/label';
 import { Dialog, DialogProps } from "../dialog/dialog"
+import { Form } from '../form/form';
+import { BtnGroupItem } from '../btngroup/btngroup';
+import { Input } from '../input/input';
 
 import "./messages.module.scss";
 
 import error_icon from "./circle-exclamation.svg";
-import { asap, class_ns, UnsafeHtml } from '../../core/core_tools.js';
-import { Form } from '../form/form.js';
+import pen_icon from "./pen-field.svg";
+import { Component } from '@core/component.js';
 
 export interface MessageBoxProps extends DialogProps {
 	message: string;
@@ -26,25 +30,18 @@ export interface MessageBoxProps extends DialogProps {
 @class_ns( "x4" )
 export class MessageBox extends Dialog<DialogProps>
 {
-	m_label: Label;
-
 	constructor(props: DialogProps) {
 		super(props);
 	}
 
-	setText(txt: string | UnsafeHtml ) {
-		this.m_label.setText( txt );
-	}
-
 	/**
-	 * display a messagebox
+	 * 
 	 */
 
-	static show( msg: string | UnsafeHtml ): MessageBox {
-
+	private static _create( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) {
 		const box = new MessageBox({ 
 			modal: true,
-			title: _tr.global.error,
+			title: title ?? _tr.global.error,
 			movable: true,
 			form: new Form( {
 				content: [
@@ -56,14 +53,163 @@ export class MessageBox extends Dialog<DialogProps>
 					}),
 				]
 			}),
-			buttons: [ "ok.outline","cancel.outline" ]
+			buttons: buttons ?? [ "ok.outline","cancel.outline" ]
 		});
-	
+
+		return box;
+	}
+
+	/**
+	 * display a messagebox
+	 */
+
+	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ): MessageBox {
+
+		const box = this._create( msg, buttons, title );
 		box.on( "btnclick", ( ev ) => {
-			asap( ( ) => box.close() );
+			asap( ( ) => {
+				box.close() 
+			});
+		});
+
+		box.show();
+		return box;
+	}
+
+	/**
+	 * idem with promise
+	 */
+
+	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) : Promise<string> {
+
+		return new Promise( (resolve, reject ) => {
+			const box = this._create( msg, buttons, title );
+			box.on( "btnclick", ( ev ) => {
+				asap( ( ) => {
+					resolve( ev.button );
+					box.close() 
+				});
+			});
+
+			box.show();
+		} );
+
+	}
+}
+
+
+@class_ns( "x4" )
+export class InputBox extends Dialog<DialogProps>
+{
+	constructor(props: DialogProps) {
+		super(props);
+	}
+
+	getValue( ) {
+		const input = this.query<Input>( "input" );
+		return input.getValue( );
+	}
+
+	private static _create( msg: string | UnsafeHtml, value: string, title: string ) {
+		const box = new InputBox({ 
+			modal: true,
+			title,
+			movable: true,
+			form: new Form( {
+				content: [
+					new HBox( {
+						content: [
+							new Icon( { iconId: pen_icon }),
+							new VBox( { flex: 1, content: [
+								new Label( { text: msg } ),
+								new Input( { value, type: "text" } )
+							]})
+						]
+					}),
+				]
+			}),
+			buttons: [ "ok.outline.default","cancel.outline" ]
 		});
+	
+		return box;
+	}
+
+	/**
+	 * idem with promise
+	 */
+
+	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string ) : Promise<string> {
+
+		return new Promise( (resolve, reject ) => {
+
+			const box = this._create( msg, value, title );
+		
+			box.on( "btnclick", ( ev ) => {
+				asap( ( ) => {
+					resolve( ev.button=="ok" ? box.getValue( ) : null );
+					box.close() 
+				});
+			});
+
+			box.show();
+		} );
+
+	}
+}
+
+
+
+@class_ns( "x4" )
+export class PromptBox extends Dialog<DialogProps>
+{
+	constructor(props: DialogProps) {
+		super(props);
+	}
 
-		box.display();
+	private static _create( msg: string | UnsafeHtml, editor: Component, title: string ) {
+		const box = new PromptBox({ 
+			modal: true,
+			title,
+			movable: true,
+			form: new Form( {
+				content: [
+					new HBox( {
+						content: [
+							new Icon( { iconId: pen_icon }),
+							new VBox( { flex: 1, cls: "right", content: [
+								new Label( { text: msg } ),
+								editor
+							]})
+						]
+					}),
+				]
+			}),
+			buttons: [ "ok.outline.default","cancel.outline" ]
+		});
+	
 		return box;
 	}
-}
+
+	/**
+	 * idem with promise
+	 */
+
+	static async showAsync( msg: string | UnsafeHtml, editor: Component, title?: string ) : Promise<string> {
+
+		return new Promise( (resolve ) => {
+
+			const box = this._create( msg, editor, title );
+		
+			box.on( "btnclick", ( ev ) => {
+				asap( ( ) => {
+					resolve( ev.button );
+					box.close() 
+				});
+			});
+
+			box.show();
+		} );
+
+	}
+}
+

package/lib/src/components/messages/pen-field.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 128l32 0 224 0 32 0 0 64-32 0L64 192l0 256 448 0 0-128 0-32 64 0 0 32 0 160 0 32-32 0L32 512 0 512l0-32L0 160l0-32z"/><path class="fa-primary" d="M288 352l16-112L468.7 75.3l96 96L400 336 288 352zM587.3 148.7l-96-96L544 0l96 96-52.7 52.7zM96 288l64 0 0 64-64 0 0-64zm160 0l0 64-64 0 0-64 64 0z"/></svg>

package/lib/src/components/normalize.scss

@@ -380,6 +380,11 @@ body {
 	font-size: var( --font-size );
 }
 
+dialog {
+	margin: 0;
+	padding: 0;
+}
+
 .x4hidden {
 	display: none !important;
 }

package/lib/src/components/notification/notification.module.scss

@@ -18,6 +18,7 @@
 
 :root {
 	--notification-border: var( --border );
+	--notification-background: white;
 
 	--notification-icon-default: var( --accent-background );
 	--notification-icon-success: var( --success-background );
@@ -30,18 +31,19 @@
 	padding: 8px;
 	border: 1px solid var(--notification-border);
 	border-left: 3px solid var( --accent-background );
+	background-color: var( --notification-background );
 		
 	&> .x4hbox {
 		gap: 8px;
 	}
 	
 	.x4icon {
-		width: 24px;
+		width: 2em;
+		height: 2em;
 		color: var( --notification-icon-default );
 	}
 	
 	.body {
-		
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;

package/lib/src/components/notification/notification.ts

@@ -79,12 +79,10 @@ export class Notification extends Popup {
 			content: [
 				_icon,
 				new VBox( { cls: "body", content: [ 
-					new Label( { cls: "title", text: props.title } ),
+					props.title ? new Label( { cls: "title", text: props.title } ) : null,
 					new Label( { cls: "text", text: props.text } ),
 				] }),
-				new Button( { cls: "outline", icon: close_icon, click: ( ) => {
-					this.close( );
-				} } )
+				props.closable ? new Button( { cls: "outline", icon: close_icon, click: ( ) => {this.close( );} } ) : null
 			]
 		}) );
 	}

package/lib/src/components/panel/panel.module.scss

@@ -45,4 +45,16 @@
 		justify-content: start;
 		padding: 8px;
 	}
+}
+
+.x4panel.inline {
+	border: none;
+	border-top: 1px solid var( --border );
+	margin-top: 1.5em;
+
+	legend {
+		background: none;
+		top: -1.4em;
+		left: 0;
+	}
 }

package/lib/src/components/popup/popup.module.scss

@@ -15,12 +15,12 @@
  **/
 
 :root {
-	--modal-mask-background: rgba(0,0,0,0.5);
+	--modal-mask-background: rgb(0 0 0 / 60% );
 }
 
 .x4popup {
+	position: absolute !important;
 	background-color: var(--fill-color);
-	position: absolute;
 	border: 1px solid var(--border-color);
 	overflow: hidden;
 	z-index: 1000;
@@ -32,8 +32,16 @@
 	}
 }
 
+.x4popup.center {
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+::backdrop,
 .x4modal-mask {
 	background-color: var( --modal-mask-background );
+	backdrop-filter: blur(8px);
 	position: absolute;
 	left: 0;
 	top: 0;

package/lib/src/components/popup/popup.ts

@@ -15,43 +15,44 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM, makeUniqueComponentId } from "../../core/component"
+
 import { CSizer } from '../sizers/sizer';
-import { Rect, Point, class_ns } from '../../core/core_tools.js';
+import { Rect, Point, class_ns, asap } from '../../core/core_tools.js';
+import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
 
-
 export interface PopupEvents extends ComponentEvents {
 	closed: ComponentEvent;
 	opened: ComponentEvent;
 }
 
 export interface PopupProps extends ComponentProps {
-	modal?: boolean;
 	autoClose?: boolean | string;
 	sizable?: boolean;
 	movable?: boolean;
 }
 
-
-let modal_mask: Component;
-let modal_count = 0;
-
-let modal_stack: Popup[] = [];
 let autoclose_list: Popup[] = [];
 let popup_list:  Popup[] = [];
 
+let modal_stack: Popup[] = [];
+let modal_mask: Component;
 
 
+function getRoot( ) {
+	return document.body;
+}
+
 /**
  * 
  */
 
 @class_ns( "x4" )
-export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Component<P,E> {
+export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Box<P,E> {
 
-	private _isopen = false;
 	private _isshown = false;
+	protected _ismodal = false;
 
 	constructor( props: P ) {
 		super( props );
@@ -59,12 +60,28 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		if( this.props.sizable ) {
 			this._createSizers( );
 		}
+
+		// wait for element to create it's childs
+		asap( ( ) => {
+			if( this.props.movable===true || (this.props.sizable && this.props.movable===undefined) ) {
+				const movers = this.queryAll( ".caption-element" );
+				movers.forEach( m => new CMover(m,this) );
+
+				if( this.hasClass("popup-caption") ) {
+					new CMover(this,this);
+				}		
+			}
+		} );
 	}
 
+	/**
+	 * 
+	 */
+
 	displayNear( rc: Rect, dst = "top left", src = "top left", offset = {x:0,y:0} ) {
 
 		this.setStyle( { left: "0px", top: "0px" } );	// avoid scrollbar
-		this._show( );									// to compute size
+		this._do_show( );		// to compute size
 		
 		let rm = this.getBoundingRect();
 
@@ -85,7 +102,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			yref = rc.top + rc.height/2;
 		}
 
-		let halign = 'l';
 		if (dst.indexOf('right') >= 0) {
 			xref -= rm.width;
 		}
@@ -93,7 +109,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			xref -= rm.width/2;
 		}
 
-		let valign = 't';
 		if (dst.indexOf('bottom') >= 0) {
 			yref -= rm.height;
 		}
@@ -114,11 +129,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	}
 
 	/**
-	 * 
+	 * s
 	 */
 
-	displayCenter( ) {
-		this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
+	displayCenter( center = true ) {
+		//this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
+		this.setClass( 'center', center );
+		this._do_show( );		// to compute size
 	}
 
 	/**
@@ -132,7 +149,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			top: y+"px",
 		})
 
-		this._show( );
+		this._do_show( );	// to compute size
 
 		const rc = this.getBoundingRect( );
 		const width = window.innerWidth - 16;
@@ -145,29 +162,65 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		if( rc.bottom>height ) {
 			this.setStyleValue( "top", height-rc.height );
 		}
+	}
+
+	isOpen( ) {
+		return this._isshown;
+	}
 
-		if( this.props.movable ) {
-			const movers = this.queryAll( ".caption-element" );
-			movers.forEach( m => new CMover(m,this) );
+	protected _do_hide( ) {
 
-			if( this.hasClass("popup-caption") ) {
-				new CMover(this,this);
-			}		
+		if( !this._isshown ) {
+			return;
 		}
 
-		this.fire( "opened", {} );
+		this.__hide( );
+		this.__remove( );
+
+		if( this._ismodal ) {
+			modal_stack.pop( );
+			this._hideModalMask( );
+		}
+
+		// remove from popup list
+		const idx = popup_list.indexOf( this );
+		console.assert( idx>=0 );
+		popup_list.splice( idx, 1 );
+
+		// remove from auto close list
+		if( this.props.autoClose ) {
+			const idx = autoclose_list.indexOf( this );
+			if( idx>=0 ) {
+				autoclose_list.splice( idx, 1 );
+				if( autoclose_list.length==0 ) {
+					document.removeEventListener( "pointerdown", this._dismiss );
+				}
+			}
+		}
+
+		this._isshown = false;
+		this.fire( "closed", {} );
 	}
 
-	private _show( ) {
-		
-		if( this.props.modal && !this._isshown ) {
-			this._showModalMask( );
-			modal_stack.push( this );
-			modal_count++;
+	/**
+	 * 
+	 */
+
+	protected _do_show( ) {
+		if( this._isshown  ) {
+			return;
 		}
 
 		this._isshown = true;
-		
+		this.__append( );
+
+		if( this._ismodal ) {
+			modal_stack.push( this );
+			this._showModalMask( );
+		}
+
+		this.__show( );
+				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
 				document.addEventListener( "pointerdown", this._dismiss );
@@ -178,52 +231,53 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		}
 
 		popup_list.push( this );
-		document.body.appendChild( this.dom );
+		
+		this.fire( "opened", {} );
+	}
+
+	/**
+	 * 
+	 */
 
-		this.show( );
+	protected __show( ) {
+		super.show( true );
 	}
 
-	override show( show = true ) {
-		this._isopen = show;
-		super.show( show );
+	protected __hide( ) {
+		super.show( false );
 	}
 
-	isOpen( ) {
-		return this._isopen;
+	protected __append( ) {
+		const root = getRoot( );
+		root.appendChild( this.dom );
+	}
+
+	protected __remove( ) {
+		const root = getRoot( );
+		root.removeChild( this.dom );
 	}
 
 	/**
 	 * 
 	 */
 
-	close( ) {
-		document.body.removeChild( this.dom );
-
-		// remove from popup list
-		const idx = popup_list.indexOf( this );
-		console.assert( idx>=0 );
-		popup_list.splice( idx, 1 );
-
-		// remove from auto close list
-		if( this.props.autoClose ) {
-			const idx = autoclose_list.indexOf( this );
-			if( idx>=0 ) {
-				autoclose_list.splice( idx, 1 );
-				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", this._dismiss );
-				}
-			}
+	override show( show = true ) : this {
+		if( show ) {
+			this.displayCenter( );
 		}
-
-		// update mask
-		if( this.props.modal ) {
-			const top = modal_stack.pop( );
-			console.assert( top==this );
-			this._updateModalMask( );
+		else {
+			this._do_hide( );
 		}
 
-		this._isshown = false;
-		this.fire( "closed", {} );
+		return this;
+	}
+
+	/**
+	 * 
+	 */
+
+	close( ) {
+		this._do_hide( );
 	}
 
 	/**
@@ -280,38 +334,6 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		list.forEach( x => x.close() );
 	}
 
-	/**
-	 * 
-	 */
-
-	private _showModalMask( ) {
-		
-		if( !modal_mask ) {
-			modal_mask = new Component( {
-				cls: "x4modal-mask",
-				domEvents: {
-					click: this._dismiss
-				}
-			});
-		}
-
-		modal_mask.show( true );
-		document.body.insertAdjacentElement( "beforeend", modal_mask.dom );
-	}
-
-	/**
-	 * 
-	 */
-
-	private _updateModalMask( ) {
-		if( --modal_count == 0 ) {
-			modal_mask.show( false );
-		}
-		else {
-			this.dom.insertAdjacentElement( "beforebegin", modal_mask.dom );
-		}
-	}
-
 	/**
 	 * 
 	 */
@@ -328,6 +350,29 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			new CSizer( "bottom-right" ),
 		])
 	}
+
+	private _showModalMask( ) {
+		if( !modal_mask ) {
+			modal_mask = new Component( { cls: 'x4modal-mask' } )
+			//document.body.appendChild( modal_mask.dom );
+		}
+
+		const root = getRoot( );
+		root.insertBefore( modal_mask.dom, this.dom );
+	}
+
+	private _hideModalMask( ) {
+		if( modal_mask ) {
+			const root = getRoot( );
+			if( modal_stack.length ) {
+				const top = modal_stack[ modal_stack.length-1 ];
+				root.insertBefore( modal_mask.dom, top.dom );
+			}
+			else {
+				root.removeChild( modal_mask.dom );
+			}
+		}
+	}
 }
 
 
@@ -335,6 +380,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
  * 
  */
 
+export 
 class CMover {
 	private ref: Component;
 	private delta: Point;

package/lib/src/components/propgrid/folder-closed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 224l448 0 0 224L32 448l0-224z"/><path class="fa-primary" d="M32 32l192 0 48 64 208 0 32 0 0 32 0 320 0 32-32 0L32 480 0 480l0-32L0 64 0 32l32 0zm240 96l-16 0-9.6-12.8L208 64 32 64l0 128 448 0 0-64-208 0zM32 224l0 224 448 0 0-224L32 224z"/></svg>

package/lib/src/components/propgrid/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 64l0 280.4L108.2 192 448 192l0-64-176 0-13.3 0-9.4-9.4L194.7 64 32 64zM51.8 448L384 448l44.2 0 96-192-376.4 0-96 192z"/><path class="fa-primary" d="M272 96L208 32 32 32 0 32 0 64 0 448l0 32 32 0 3.8 0L384 480l64 0L560 256l16-32-35.8 0L128 224 32 416 32 64l162.7 0 54.6 54.6 9.4 9.4 13.3 0 176 0 0 64 32 0 0-64 0-32-32 0L272 96zM51.8 448l96-192 376.4 0-96 192L384 448 51.8 448z"/></svg>