x4js 2.3.23 → 2.3.25

package/src/components/listbox/listbox.ts

@@ -40,11 +40,20 @@ export interface ListItem {
 	iconId?: string;
 	data?: any;
 	cls?: string;
-	checked?: boolean;
+	checked?: boolean;		// checkable listbox: the starting state of the case, getChecked() gives the current one
 }
 
 /**
- * 
+ * a case changed by the user (click, Space)
+ */
+
+export interface EvCheckChange extends ComponentEvent {
+	readonly id: ListboxID;
+	readonly checked: boolean;
+}
+
+/**
+ *
  */
 
 export interface ListboxEvents extends ComponentEvents {
@@ -52,6 +61,7 @@ export interface ListboxEvents extends ComponentEvents {
 	dblClick?: EvDblClick;
 	contextMenu?: EvContextMenu;
 	selectionChange?: EvSelectionChange;
+	checkChange?: EvCheckChange;
 }
 
 /**
@@ -65,16 +75,25 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
 	icon?: string;
 	header?: Header;
 	footer?: Component,
-	checkable?: true,
+	checkable?: boolean,	// a case at the start of each line
 	multisel?: true,
+	reselect?: boolean,		// a click on the item already selected fires selectionChange again
 	emptyMsg?: string,
 
 	dblClick?: EventCallback<EvDblClick>;
 	selectionChange?: EventCallback<EvSelectionChange>;
 	contextMenu?: EventCallback<EvContextMenu>;
+	checkChange?: EventCallback<EvCheckChange>;
 }
 
 /**
+ * checkable: a click on the case, or Space for the last item selected, changes it and fires
+ * checkChange; neither click nor the selection. A double click on the case is ignored.
+ *
+ * reselect: a click of the user on the item already selected fires selectionChange with the
+ * same selection: lists linked together whose view shows what was clicked last. select( ) by
+ * the code, the arrows and a right click do not.
+ *
  * @cssvar
  * ```
  * --listbox-item-color
@@ -90,6 +109,12 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
  * --listbox-border-focus
  * --listbox-title-background
  * --listbox-title-color
+ * --listbox-check-border
+ * --listbox-check-border-hover
+ * --listbox-check-border-sel
+ * --listbox-check-background
+ * --listbox-check-background-disabled
+ * --listbox-check-color
  * ```
  */
 
@@ -106,7 +131,8 @@ private _view: Viewport;
 		super( { ...props } );
 
 		this.setAttribute( "tabindex", 0 );
-		this.mapPropEvents( props, "dblClick", "selectionChange", "contextMenu" );
+		this.mapPropEvents( props, "dblClick", "selectionChange", "contextMenu", "checkChange" );
+		this.setClass( "checkable", !!props.checkable );
 		
 		const scroller = new ScrollView( { cls: "body" } );
 		this._view = scroller.getViewport( );
@@ -169,6 +195,18 @@ private _view: Viewport;
 				break;
 			}
 
+			case " ": {
+				if( !this.props.checkable || this._lastsel===undefined ) {
+					return;
+				}
+
+				const line = this._itemWithID( this._lastsel );
+				if( line ) {
+					this._toggleCheck( line );
+				}
+				break;
+			}
+
 			default:
 				return;
 		}
@@ -246,6 +284,7 @@ private _view: Viewport;
 	
 	private _on_click( ev: MouseEvent ) {
 		let target = ev.target as HTMLElement;
+		let on_check = false;
 
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
@@ -255,7 +294,19 @@ private _view: Viewport;
 				return;
 			}
 
+			if( c && c.hasClass("x4check") ) {
+				on_check = true;
+			}
+
 			if( c && c.hasClass("x4item") ) {
+				// the case changes alone; a double click on it is ignored
+				if( on_check ) {
+					if( ev.type == 'click' ) {
+						this._toggleCheck( c );
+					}
+					return;
+				}
+
 				const id = c.getInternalData( "id" );
 				const fev: EvClick = { context:id };
 				if (ev.type == 'click') {
@@ -266,7 +317,7 @@ private _view: Viewport;
 				}
 
 				if (!fev.defaultPrevented) {
-					this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single' );
+					this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single', ev.type == 'click' && this.props.reselect );
 				}
 				
 				return;
@@ -315,8 +366,8 @@ private _view: Viewport;
 	 * 
 	 */
 
-	private _selectItem( id: ListboxID, item: Component, mode: "single" | "toggle" ) {
-		
+	private _selectItem( id: ListboxID, item: Component, mode: "single" | "toggle", again = false ) {
+
 		if( !this.props.multisel ) {
 			mode = 'single';
 		}
@@ -324,7 +375,11 @@ private _view: Viewport;
 		this._lastsel = id;
 
 		if( mode=='single' ) {
+			// already selected: nothing changes; again (reselect): its selectionChange all the same
 			if( this._multisel.has(id) ) {
+				if( again ) {
+					this.fire( "selectionChange", { selection: this.getSelection(), empty: false } );
+				}
 				return;
 			}
 
@@ -450,38 +505,43 @@ private _view: Viewport;
 	}
 	
 	/**
-	 * 
+	 * replaces the items of the list
+	 * @param items - the new items; empty or null: the message of an empty list (emptyMsg)
+	 * @param keepSel - true: the items selected before stay selected, when they are in the new items
+	 *
+	 * selectionChange: fired once, after the items are drawn, with the selection they end with,
+	 * when there was a selection before or there is one after. With keepSel and the same ids, it
+	 * is fired too: the items changed, a view that shows the selection draws it again.
+	 * Nothing selected before nor after: no selectionChange.
 	 */
 
 	setItems( items: ListItem[], keepSel = false ) {
 
 		const oldSel = this.getSelection( );
 
-		this.clearSelection( );
+		// the selection changes silently: one selectionChange at the end
+		this.clearSelection( false );
 		this._view.clearContent( );
 		this._items = items ?? [];
 
-		let update_sel = false;
-
 		if( this._items.length ) {
 			this.removeClass( "empty" );
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
 			if( keepSel && oldSel.length>0 ) {
-				this.select( oldSel );
+				this.select( oldSel, false );
 			}
 		}
 		else {
 			this.addClass( "empty" );
-			update_sel = oldSel.length>0;
 			this._view.setContent( new Label( { cls: "empty vertical", icon: icons.empty, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
 		}
-		
-		if( update_sel ) {
-			this.setTimeout( "sel", 100, ( ) => {
-				this.fire( "selectionChange", { selection: [], empty: true } );
-			} );
+
+		// a selection before or after: one selectionChange, the same ids too (the items changed)
+		const sel = this.getSelection( );
+		if( oldSel.length || sel.length ) {
+			this.fire( "selectionChange", { selection: sel, empty: sel.length==0 } );
 		}
 	}
 
@@ -492,13 +552,52 @@ private _view: Viewport;
 	renderItem( item: ListItem ) {
 		const renderer = this.props.renderer ?? this.defaultRenderer;
 		const line = renderer( item );
-	
+
 		line.addClass( "x4item" );
 		line.setInternalData( "id", item.id );
-		
+
+		if( this.props.checkable ) {
+			const check = new Component( { cls: "x4check" } );
+			check.dom.insertAdjacentHTML( "beforeend", icons.check );
+			line.prependContent( check );
+			line.setClass( "checked", !!item.checked );
+		}
+
 		return line;
 	}
 
+	/**
+	 * the user changed the case of a line
+	 */
+
+	private _toggleCheck( line: Component ) {
+		line.toggleClass( "checked" );
+		this.fire( "checkChange", { id: line.getInternalData( "id" ), checked: line.hasClass( "checked" ) } );
+	}
+
+	/**
+	 * ids of the items checked, in the order of the list
+	 */
+
+	getChecked( ): ListboxID[] {
+		return this._view.enumChildComponents( false )
+			.filter( x => x.hasClass( "checked" ) )
+			.map( x => x.getInternalData( "id" ) );
+	}
+
+	/**
+	 * check these items, uncheck the others; no event
+	 */
+
+	setChecked( ids: ListboxID[] ) {
+		const checked = new Set( ids );
+		this._view.enumChildComponents( false ).forEach( x => {
+			if( x.hasClass( "x4item" ) ) {
+				x.setClass( "checked", checked.has( x.getInternalData( "id" ) ) );
+			}
+		} );
+	}
+
 	/**
 	 * 
 	 */
@@ -574,11 +673,17 @@ private _view: Viewport;
 	 */
 
 	appendItem( item: ListItem, prepend = false, select = true ) {
-		
+
 		if( select ) {
 			this._clearSelection( );
 		}
 
+		// the first item: the message of an empty list goes away
+		if( !this._items.length ) {
+			this._view.clearContent( );
+			this.removeClass( "empty" );
+		}
+
 		let el = this.renderItem( item );
 
 		if( prepend ) {
@@ -624,6 +729,11 @@ private _view: Viewport;
 				_new.addClass( "selected" );
 			}
 
+			// the case keeps its state
+			if( this.props.checkable ) {
+				_new.setClass( "checked", old.hasClass( "checked" ) );
+			}
+
 			this._view.dom.replaceChild( _new.dom, old.dom );
 		}
 	}

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

@@ -23,6 +23,11 @@
 	--msgbox-question-icon-color: var( --accent-background );		// a question, an InputBox, a PromptBox
 
 	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
+	--msgbox-log-border: var( --border );
+	--msgbox-log-border-focus: var( --border-focus );
+	--msgbox-log-error-color: var( --alert-background );
+	--msgbox-log-warning-color: var( --warning-background );
+	--msgbox-log-scrollbar: var( --border-hover );		// the thumb; the track is the background of the lines
 }
 
 .x4messagebox {
@@ -95,6 +100,26 @@
 	min-height: 200px;
 	min-width: 500px;
 
+	// after an error: the title bar of an error of MessageBox
+	&.error > .caption {
+		background-color: var( --msgbox-caption-background );
+
+		& > #title {
+			color: var( --msgbox-caption-color );
+		}
+	}
+
+	// on the left of OK: the counts of the errors and the warnings, the icon of the worst
+	#alerts {
+		&.error {
+			--label-icon-color: var( --msgbox-log-error-color );
+		}
+
+		&.warning {
+			--label-icon-color: var( --msgbox-log-warning-color );
+		}
+	}
+
 	&> .x4form {
 		min-height: unset;
 	}
@@ -122,24 +147,68 @@
 		}
 
 		#title {
-			padding: 4px 16px;
+			padding: 0 16px;
 			line-height: 1.8em;
+			font-weight: bold;
 		}
 
+		// on the right, the bar and the lines end where the button OK does: the bar of
+		// buttons has a padding of 20px and the button a margin of 2px, the form 16px
 		.x4progress {
-			margin: 0 16px;
+			margin: 0 6px 0 16px;
 		}
 
+		// the lines: a <pre>, 10 lines high at least; its text gives it no size (contain): it
+		// scrolls, the box does not grow; a line is not wrapped. An error, a warning: their
+		// icon, their colour
 		#sub-text {
 			flex-grow: 1;
+			min-height: calc( 10lh + 10px );	// its padding and its border too
 			max-height: 400px;
 			overflow: auto;
+			white-space: pre;
+			contain: size;
+			font: inherit;
+			line-height: 1.3em;
+			scrollbar-color: var( --msgbox-log-scrollbar ) transparent;
+			outline: none;
+			border: 1px solid var( --msgbox-log-border );
 			background-color: var( --msgbox-log-background );
 			padding: 4px 8px;
-			margin: 0 16px;
+			margin: 0 6px 0 16px;
+
+			&, * {
+				user-select: text;
+			}
+
+			&:focus {
+				border-color: var( --msgbox-log-border-focus );
+			}
+
+			svg {
+				width: 1em;
+				height: 1em;
+				vertical-align: -0.125em;
+				margin-right: 4px;
+			}
+
+			.error {
+				color: var( --msgbox-log-error-color );
+			}
+
+			.warning {
+				color: var( --msgbox-log-warning-color );
+			}
+
+			// a section: its title, a click folds it; its lines below, under the title
+			details {
+				padding-left: 1em;
+			}
 
-			.x4simpletext {
-				white-space: nowrap;
+			summary {
+				margin-left: -1em;
+				cursor: pointer;
+				font-weight: bold;
 			}
 		}
 	}

package/src/components/messages/messages.ts

@@ -2,7 +2,7 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
+import { asap, class_ns, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
@@ -11,8 +11,10 @@ import { Dialog, DialogProps } from "../dialog/dialog"
 import { Form } from '../form/form';
 import { BtnGroupItem } from '../btngroup/btngroup';
 import { Input } from '../input/input';
+import { Button } from '../button/button';
 import { Component } from '../../core/component';
 import { Progress } from '../components.js';
+import icons from '../assets/icons';
 
 import "./messages.module.scss";
 
@@ -36,6 +38,11 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-icon-color
  * --msgbox-question-icon-color
  * --msgbox-log-background
+ * --msgbox-log-border
+ * --msgbox-log-border-focus
+ * --msgbox-log-error-color
+ * --msgbox-log-warning-color
+ * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
  * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
@@ -275,10 +282,23 @@ export class PromptBox extends Dialog<DialogProps>
 
 // :: PROGRESS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
+/**
+ * a modal box that follows a long task: a title, a bar, and the lines of what is done
+ * in a <pre>: a string is text, an UnsafeHtml is html. An error, a warning have their
+ * icon and their colour. addSection puts the lines that follow in a section that folds.
+ * Ctrl+A selects the lines.
+ * done( ) shows its button OK: after an error or a warning it waits for it, their counts
+ * on the left of the bar; else it closes the box after 5s, the seconds left in the button.
+ */
+
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 
-	#has_errors = false;
+	// an error or a warning: done( ) waits for OK
+	#errors = 0;
+	#warnings = 0;
+
+	#section: Component;		// the last section (a <details>): the lines go in it
 
 	constructor( title: string ) {
 		super( { 
@@ -294,48 +314,174 @@ 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 VBox( { id: "sub-text" } ),
+								new Component( { tag: "pre", id: "sub-text", attrs: { tabindex: 0 }, dom_events: {
+									keydown: ( ev ) => this._on_log_key( ev ),
+								} } ),
 							]})
 						]
 					}),
 				]
 			}),
-			buttons: [ "ok.outline.default" ]
+			buttons: [ new Label( { id: "alerts", text: "" } ), "-", "ok.outline.default" ]
 		});
 
 		this.query("#btnbar").show( false );
 
-		this.on("btnclick", ( ) => this.show( false ) );
+		// OK: closed at once, the countdown stopped
+		this.on("btnclick", ( ) => {
+			this.clearInterval( "close" );
+			this.show( false );
+		} );
 	}
 
+	/** a line at the end */
+
 	addText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this._addLine( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** a line at the end, with the icon of an error: done( ) then waits for the button OK */
+
 	addError( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this._addLine( text, "error" );
+		this.query<Progress>( "#prog").setValue( perc );
+		this.addClass( "error" );		// the title bar in red, as the one of an error of MessageBox
+
+		this.#errors++;
+	}
+
+	/** a line at the end, with the icon of a warning: done( ) then waits for the button OK */
+
+	addWarning( text: string | UnsafeHtml, perc: number ) {
+		this._addLine( text, "warning" );
 		this.query<Progress>( "#prog").setValue( perc );
 
-		this.#has_errors = true;
+		this.#warnings++;
 	}
 
+	/**
+	 * a section at the end, open: the lines that follow go in it. A click on its title folds
+	 * it; its title has the icon of the worst of its lines (an error, a warning)
+	 */
+
+	addSection( title: string | UnsafeHtml, perc: number ) {
+		const summary = new Component( { tag: "summary", content: new Component( { tag: "span", cls: "alert" } ) } );
+		summary.appendContent( title );
+
+		this.#section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
+
+		const log = this.query( "#sub-text" );
+		log.appendContent( this.#section );
+		log.dom.scrollTop = log.dom.scrollHeight;
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	/** the text in place of all the lines */
+
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
+		this.#section = null;
+		this.query( "#sub-text" ).setContent( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** as at the start: no line, no error, no button OK */
+
 	clear( ) {
-		this.#has_errors = true;
-		this.query<Label>( "#sub-text").clearContent( );
+		this.#errors = 0;
+		this.#warnings = 0;
+		this.clearInterval( "close" );
+		this.query( "#btnbar" ).show( false );
+		this.removeClass( "error" );
+		this.query<Label>( "#alerts" ).setText( "" );
+		this.query<Label>( "#alerts" ).setIcon( null );
+		this.#section = null;
+		this.query( "#sub-text" ).clearContent( );
 	}
 
-	done( ) {
-		if( this.#has_errors ) {
-			this.query("#btnbar").show( true );
+	// the line after the others (in the last section), the last one shown; an error, a
+	// warning in a span of their class, their icon first
+	private _addLine( text: string | UnsafeHtml, kind?: "error" | "warning" ) {
+		const log = this.query( "#sub-text" );
+		const target = this.#section ?? log;
+
+		// after the summary of a section, its first line starts below it
+		if( target.dom.lastChild && target.dom.lastChild.nodeName!="SUMMARY" ) {
+			target.appendContent( "\n" );
+		}
+
+		if( kind ) {
+			const icon = kind=="error" ? icons.danger : icons.warning;
+			const line = new Component( { tag: "span", cls: kind, content: unsafeHtml( icon ) } );
+			line.appendContent( text );
+			target.appendContent( line );
+
+			// the title of the section: the icon of the worst, in its colour
+			const alert = this.#section?.query( ".alert" );
+			if( alert && !alert.hasClass( "error" ) ) {
+				alert.setClass( "warning", kind=="warning" );
+				alert.setClass( "error", kind=="error" );
+				alert.setContent( unsafeHtml( icon ) );
+			}
 		}
 		else {
-			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+			target.appendContent( text );
+		}
+
+		log.dom.scrollTop = log.dom.scrollHeight;
+	}
+
+	// Ctrl+A: the lines only, not the whole page
+	private _on_log_key( ev: KeyboardEvent ) {
+		if( ( ev.ctrlKey || ev.metaKey ) && ev.key.toLowerCase( )=="a" ) {
+			document.getSelection( ).selectAllChildren( ev.currentTarget as HTMLElement );
+			ev.preventDefault( );
 		}
 	}
+
+	/**
+	 * the task is over: the button OK is shown. After an error or a warning it waits for
+	 * a click, their counts on the left of the bar ("2 errors / 1 warning"); without one it counts the
+	 * seconds left, "OK (5s)", and closes the box at 0
+	 */
+
+	done( ) {
+		const ok = this.query<Button>( "#ok" );
+		this.query( "#btnbar" ).show( true );
+
+		if( this.#errors || this.#warnings ) {
+			const tr = _tr.global.progression;
+			const counts = [];
+			if( this.#errors ) {
+				counts.push( sprintf( this.#errors>1 ? tr.errors : tr.error, this.#errors ) );
+			}
+			if( this.#warnings ) {
+				counts.push( sprintf( this.#warnings>1 ? tr.warnings : tr.warning, this.#warnings ) );
+			}
+
+			// on the left, the icon of the worst
+			const alerts = this.query<Label>( "#alerts" );
+			alerts.setText( counts.join( " / " ) );
+			alerts.setIcon( this.#errors ? icons.danger : icons.warning );
+			alerts.setClass( "error", this.#errors>0 );
+			alerts.setClass( "warning", this.#errors==0 );
+
+			ok.setText( _tr.global.ok );
+			return;
+		}
+
+		let left = 5;
+		ok.setText( `${_tr.global.ok} (${left}s)` );
+
+		this.setInterval( "close", 1000, ( ) => {
+			left--;
+			if( left>0 ) {
+				ok.setText( `${_tr.global.ok} (${left}s)` );
+			}
+			else {
+				this.clearInterval( "close" );
+				this.show( false );
+			}
+		} );
+	}
 }

package/src/components/notification/notification.ts

@@ -66,13 +66,12 @@ export class Notification extends Popup {
 	private static list = new Set<Notification>( );
 
 	constructor( props: NotificationProps ) {
-		super( { } );
+		super( props );
 
 		let icon = props.iconId;
 		if( !icon ) {
 			if( props.loading ) {
 				icon = icons.loading;
-				this.addClass( "")
 			}
 			else if( props.mode=="danger" ) {
 				icon = icons.danger;
@@ -84,10 +83,10 @@ export class Notification extends Popup {
 
 		this.addClass( props.mode );
 
+		// the icon of loading turns (x4rotate, base.scss)
 		const _icon = new Icon( { iconId: icon } );
 		if( props.loading ) {
-			_icon.addClass( "rotate" );
-			//this.props.modal = true;
+			_icon.addClass( "x4rotate" );
 		}
 
 		this.setContent( new HBox( {