x4js 2.0.13 → 2.0.14

package/lib/src/components/menu/menu.ts

@@ -90,7 +90,10 @@ class CMenuItem extends Component {
 			this.menu.on( "closed", ( ) => this.removeClass( "opened" ) );
 		}
 		else {
-			this.addDOMEvent( "mouseenter", ( ) => { openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); } );
+			this.addDOMEvent( "mouseenter", ( ) => { 
+				openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); 
+			} );
+
 			this.addDOMEvent( "click", ( ) => {
 				this.dismiss( false );
 				if( itm.click ) {

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

@@ -23,6 +23,7 @@
 }
 
 .x4messagebox {
+	max-width: 60vw;
 
 	& > .caption {
 		background-color: var( --msgbox-caption-background );
@@ -41,8 +42,51 @@
 
 		.x4label {
 			padding: 16px;
+			line-height: 1.8em;
 		}
 	}
 }
 
+.x4inputbox,
+.x4promptbox {
+	max-width: 60vw;
+
+	& > .caption {
+		background-color: var( --msgbox-caption-background );
+
+		& > #title {
+			color: var( --msgbox-caption-color );
+		}
+	}
+
+	& .x4form {
+		min-width: 400px;
+		.x4icon {
+			color: var( --msgbox-icon-color );
+			height: 64px;
+		}
+
+		.x4vbox {
+			padding: 16px;
+			gap: 16px;
+
+			.x4label {
+				line-height: 1.8em;
+			}
+
+			justify-content: center;
+		}
+	}
+
+	input {
+		padding: 8px;
+		border: 1px solid var( --border );
+
+		&:invalid {
+			border-color: var( --input-error );
+		}
+	}
+
+
+}
 

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,10 @@
 	}
 }
 
+::backdrop,
 .x4modal-mask {
 	background-color: var( --modal-mask-background );
+	backdrop-filter: blur(8px);
 	position: absolute;
 	left: 0;
 	top: 0;