x4js 2.3.24 → 2.3.26

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

@@ -34,6 +34,13 @@
 
 	--listbox-title-background: var( --background-primary );
 	--listbox-title-color: var( --text-primary );
+
+	--listbox-check-border: var( --border );
+	--listbox-check-border-hover: var( --border-hover );
+	--listbox-check-border-sel: var( --accent-color );
+	--listbox-check-background: var( --accent-background );
+	--listbox-check-background-disabled: var( --disabled-background );
+	--listbox-check-color: var( --accent-color );
 }
 
 .x4listbox {
@@ -50,6 +57,11 @@
         padding: 0 4px;
 	}
 
+	// the columns start after the case
+	&.checkable>.x4header {
+		padding-left: calc( 4px + 6px + 1rem );
+	}
+
 	&>.title {
 	    background: var( --listbox-title-background );
 		padding: 4px;
@@ -129,9 +141,49 @@
             }
         }
 
+        // checkable: the case at the start of the line
+        &>.x4check {
+            flex: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            align-self: center;
+            vertical-align: middle;
+            box-sizing: border-box;
+            width: 1rem;
+            height: 1rem;
+            margin-left: 6px;
+            border: 1px solid var( --listbox-check-border );
+            color: var( --listbox-check-color );
+            cursor: pointer;
+
+            svg {
+                width: 70%;
+                height: 70%;
+                visibility: hidden;
+            }
+
+            &:hover {
+                border-color: var( --listbox-check-border-hover );
+            }
+        }
+
+        &.checked>.x4check {
+            background-color: var( --listbox-check-background );
+            border-color: var( --listbox-check-background );
+
+            svg {
+                visibility: visible;
+            }
+        }
+
+        &.selected>.x4check {
+            border-color: var( --listbox-check-border-sel );
+        }
+
         .column {
-            background-color: transparent; 
-            overflow: hidden; 
+            background-color: transparent;
+            overflow: hidden;
         }
 
         // 10 columns max (see Header)
@@ -232,6 +284,11 @@
 					&.selected {
 						background-color: var( --listbox-item-color-sel-disabled );
 					}
+
+					&.checked>.x4check {
+						background-color: var( --listbox-check-background-disabled );
+						border-color: var( --listbox-check-background-disabled );
+					}
 				}
 			}
 		}

package/src/components/listbox/listbox.ts

@@ -16,7 +16,7 @@
 
 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, asap } from '../../core/core_tools';
+import { kbNav, isArray, UnsafeHtml, asap } from '../../core/core_tools';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Header } from '../header/header';
@@ -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,11 +109,17 @@ 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
  * ```
  */
 
-@class_ns( "x4" )
 export class Listbox extends Component<ListboxProps,ListboxEvents> {
+	static classPrefix = "x4";
 
 private _view: Viewport;
 	private _lastsel: ListboxID;
@@ -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/menu/menu.ts

@@ -16,7 +16,7 @@
 
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
-import { Timer, UnsafeHtml, class_ns, isFunction, isString } from '../../core/core_tools';
+import { Timer, UnsafeHtml, isFunction, isString } from '../../core/core_tools';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
@@ -59,8 +59,9 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 class CMenuSep extends Component {
+	static classPrefix = "x4";
+
 	constructor( ) {
 		super( { } );
 	}
@@ -73,8 +74,8 @@ const openTimer = new Timer( );
  * 
  */
 
-@class_ns( "x4" )
 class CMenuItem extends Component {
+	static classPrefix = "x4";
 
 	private menu: Menu;
 	
@@ -164,8 +165,8 @@ class CMenuItem extends Component {
  * 
  */
 
-@class_ns( "x4" )
 export class Menu extends Popup {
+	static classPrefix = "x4";
 	
 	constructor( props: MenuProps ) {
 		super( { ...props, autoClose: "menu" } );

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

@@ -23,6 +23,13 @@
 	--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 );			// the text and the bar of an error
+	--msgbox-log-error-background: var( --alert-background-light );
+	--msgbox-log-warning-color: var( --warning-background );
+	--msgbox-log-warning-background: var( --warning-background-light );
+	--msgbox-log-scrollbar: var( --border-hover );		// the thumb; the track is the background of the lines
 }
 
 .x4messagebox {
@@ -95,6 +102,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,8 +149,9 @@
 		}
 
 		#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
@@ -132,16 +160,80 @@
 			margin: 0 6px 0 16px;
 		}
 
-		// the lines: a textarea read only, 10 lines high at least, a line is not wrapped
+		// the lines: a <pre> in a fixed font, 10 lines high at least; its text gives it no size
+		// (contain): it scrolls, the box does not grow; a line is not wrapped. Each line is a
+		// <div>, all of them as wide as the longest one (the column of the grid): an error, a
+		// warning, coloured on all their width, a bar on their left
 		#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;
+			display: grid;
+			grid-template-columns: minmax( max-content, 1fr );
+			align-content: start;
+			font: inherit;
+			font-family: monospace, monospace;
+			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;
+			padding: 4px 0;
 			margin: 0 6px 0 16px;
+
+			.line {
+				min-height: 1lh;		// an empty line too
+				padding: 0 8px;
+				border-left: 3px solid transparent;
+
+				&.error {
+					background-color: var( --msgbox-log-error-background );
+					border-left-color: var( --msgbox-log-error-color );
+				}
+
+				&.warning {
+					background-color: var( --msgbox-log-warning-background );
+					border-left-color: var( --msgbox-log-warning-color );
+				}
+			}
+
+			&, * {
+				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;
+			}
+
+			summary {
+				margin-left: -1em;
+				padding-left: 11px;		// as the text of a line: its padding and its bar
+				cursor: pointer;
+				font-weight: bold;
+			}
 		}
 	}
 }