x4js 2.3.25 → 2.3.27

package/src/components/components.ts

@@ -45,6 +45,7 @@ export * from "./tag/tag"
 export * from "./textarea/textarea"
 export * from "./textedit/textedit"
 export * from "./tickline/tickline"
+export * from "./timeline/timeline"
 export * from "./tooltips/tooltips"
 export * from "./treeview/treeview"
 export * from "./video/video"

package/src/components/dialog/dialog.ts

@@ -20,7 +20,7 @@ import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { asap, class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
+import { asap, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
 import { ComponentEvent } from '../../core/component';
 import { Button } from '../button/button';
 import icons from "../assets/icons"
@@ -58,8 +58,8 @@ interface DialogEvents extends PopupEvents {
  * ```
  */
 
-@class_ns("x4")
 export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
+	static classPrefix = "x4";
 
 	private form: Form;
 	private _title: Label;

package/src/components/dockingview/dockingview.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { CSizer } from '../sizers/sizer';
@@ -185,8 +184,8 @@ interface Drag {
  * ```
  */
 
-@class_ns( "x4" )
 export class DockingView extends Component<DockingViewProps, DockingViewEvents> {
+	static classPrefix = "x4";
 
 	private layout: DockLayout;
 	private saved: { layout: DockLayout } = null;		// the state that remembers it
@@ -405,7 +404,7 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 		this.fills.forEach( fill => fill( ) );
 		this.placeFloats( );
 
-		if( focused instanceof HTMLElement && this.dom.contains( focused ) ) {
+		if( focused instanceof HTMLElement && this.contains( focused ) ) {
 			focused.focus( );
 		}
 	}

package/src/components/filedrop/filedrop.ts

@@ -18,7 +18,7 @@ import { Component, ComponentEvents, ComponentProps } from '../../core/component
 import { _tr } from '../../core/core_i18n';
 import { dragManager } from '../../core/core_dragdrop';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 import { VBox } from '../boxes/boxes';
 import { SimpleText } from '../label/label';
@@ -47,6 +47,7 @@ interface FileDialogProps extends ComponentProps {
  */
 
 export class FileDialog extends Component {
+	static classPrefix = "x4";
 
 	constructor( props: FileDialogProps ) {
 		super( { 
@@ -97,8 +98,8 @@ interface FileDropProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: FileDropProps ) {
 		super( props );

package/src/components/form/form.ts

@@ -14,7 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns, IFormElement } from '../../core/core_tools';
+import { IFormElement } from '../../core/core_tools';
+import { ComponentEvents } from '../../core/component';
 import { Box, BoxProps } from '../boxes/boxes';
 
 import "./form.module.scss"
@@ -35,8 +36,8 @@ type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
  * ```
  */
 
-@class_ns( "x4" )
-export class Form<P extends FormProps = FormProps> extends Box<P> {
+export class Form<P extends FormProps = FormProps, E extends ComponentEvents = ComponentEvents> extends Box<P,E> {
+	static classPrefix = "x4";
 	
 	private validator: ValidationFn;
 

package/src/components/gauge/gauge.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { centerRect, class_ns } from '../../core/core_tools';
+import { centerRect } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component'
 import { SvgBuilder, SvgComponent } from '../../core/core_svg';
 
@@ -49,8 +49,8 @@ export const simpleColorStop = [
  * ```
  */
 
-@class_ns( "x4" )
 export class Gauge extends Component<GaugeProps> {
+	static classPrefix = "x4";
 
 	private pos: number;
 	private stops: string[];

package/src/components/gridview/gridview.module.scss

@@ -22,6 +22,7 @@
 	
 	--gridview-header-cell-background: var( --background-primary );
 	--gridview-header-cell-color: var( --text-primary );
+	--gridview-header-sort-color: var( --gridview-header-cell-color );	// the arrow of the column sorted
 	--gridview-header-cell-vline: var( --border );
 	--gridview-header-cell-border: var( --border );
 
@@ -245,17 +246,19 @@
 				width: 1em;
 			}
 
+			// the arrow is the mask of the box: its colour follows the theme
 			&.sorted .sorter {
-				background-image: url("./arrow-down-light.svg");
 				display: block;
 				width: 20px;
 				height: 0.7em;
-				background-repeat: no-repeat;
-				background-position: 50% 50%;
+				background-color: var( --gridview-header-sort-color );
+				-webkit-mask: url("./arrow-down-light.svg") no-repeat 50% 50% / contain;
+				mask: url("./arrow-down-light.svg") no-repeat 50% 50% / contain;
 			}
-			
+
 			&.sorted.desc .sorter {
-				background-image: url("./arrow-up-light.svg");
+				-webkit-mask-image: url("./arrow-up-light.svg");
+				mask-image: url("./arrow-up-light.svg");
 			}
 			
 			.x-c-sizer:hover {

package/src/components/gridview/gridview.ts

@@ -16,7 +16,7 @@
 
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
-import { class_ns, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
+import { formatDate, formatDateTime, formatMoney, formatNumber, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
 import { DataModel, DataStore, DataView, DataRecord, EvViewChange, SortCallback } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
@@ -108,6 +108,7 @@ export interface GridviewProps extends ComponentProps {
  * --gridview-border
  * --gridview-header-cell-background
  * --gridview-header-cell-color
+ * --gridview-header-sort-color
  * --gridview-header-cell-vline
  * --gridview-header-cell-border
  * --grid-check-background
@@ -132,8 +133,8 @@ export interface GridviewProps extends ComponentProps {
  * ```
  */
 
-@class_ns("x4")
 export class Gridview<P extends GridviewProps = GridviewProps, E extends GridviewEvents = GridviewEvents> extends Component<P,E> {
+	static classPrefix = "x4";
 
 	private _dataview: DataView;
 	private _datamodel: DataModel;
@@ -165,10 +166,6 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	
 
 	// TODO: that
-	private _num_fmt 	= new Intl.NumberFormat('fr-FR');
-	private _mny_fmt 	= new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
-	private _dte_fmt 	= new Intl.DateTimeFormat('fr-FR', {});
-	private _dtetme_fmt = new Intl.DateTimeFormat('fr-FR', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:"2-digit"});
 
 	private _has_fixed: boolean;
 	private _has_footer: boolean;
@@ -744,12 +741,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			})
 
 			sizer.on("resize", (ev) => {
-				cdata.width = ev.size;
+				const size = Math.max( ev.size, 16 );		// 16px at least: the min-width of a .cell
+				cdata.width = size;
 				cdata.flex  = 0;
-				
+
 				const cols = this.queryAll(`[data-col="${col}"]`)
 				cols.forEach(c => {
-					c.setStyleValue("width", ev.size + "px");
+					c.setStyleValue("width", size + "px");
 				});
 
 				const rh = header.getBoundingRect();
@@ -1005,7 +1003,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					return "NaN";
 				}
 
-				data = this._num_fmt.format(data as number);
+				data = formatNumber(data as number);
 				break;
 			}
 
@@ -1014,7 +1012,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					return "NaN";
 				}
 
-				data = this._mny_fmt.format(data as number);
+				data = formatMoney(data as number);
 				break;
 			}
 
@@ -1034,7 +1032,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					data = new Date( data );
 				}
 				
-				data = this._dte_fmt.format(data as Date);
+				data = formatDate(data as Date);
 				break;
 			}
 
@@ -1043,7 +1041,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 					data = new Date( data );
 				}
 				
-				data = this._dtetme_fmt.format(data as Date);
+				data = formatDateTime(data as Date);
 				break;
 			}
 

package/src/components/header/header.ts

@@ -1,4 +1,4 @@
-import { class_ns, getScrollbarSize } from '../../core/core_tools';
+import { getScrollbarSize } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -36,8 +36,8 @@ const MAX_COLS = 10;	// columns with a default name (ref-c1...ref-c10) handled b
  * ```
  */
 
-@class_ns( "x4" )
 export class Header extends HBox<HeaderProps> {
+	static classPrefix = "x4";
 
 	private _els: Component[];
 	private _vwp: Component;

package/src/components/icon/icon.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./icon.module.scss"
@@ -111,8 +110,8 @@ export interface IconProps extends ComponentProps {
  * The CSS class for this component is automatically generated as `x4icon`.
  */
 
-@class_ns( "x4" )
 export class Icon extends Component<IconProps> {
+	static classPrefix = "x4";
 
 	/**
 	 * Create a new Icon.

package/src/components/image/image.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback, CoreEvent } from '../../core/core_events';
 import { dragManager } from '../../core/core_dragdrop';
@@ -56,8 +55,8 @@ export interface ImageProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
+	static classPrefix = "x4";
 
 	private _img: Component;
 

package/src/components/input/input.ts

@@ -16,7 +16,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
-import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
+import { formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
 
 import "./input.module.scss"
 
@@ -214,8 +214,9 @@ interface InputEvents extends ComponentEvent {
  * ```
  */
 
-@class_ns( "x4" )
 export class Input extends Component<InputProps,InputEvents> {
+	static classPrefix = "x4";
+
 	constructor( props: InputProps ) {
 		super( { tag: "input", ...props } );
 

package/src/components/keyboard/keyboard.ts

@@ -19,7 +19,6 @@ import { Box, BoxProps, Button, HBox, VBox } from '../components';
 import { _tr } from '../../core/core_i18n';
 
 import "./keyboard.module.scss"
-import { class_ns } from '../../core/core_tools';
 import { Application } from '../../core/core_application';
 
 import icon_bksp from "./delete-left.svg";
@@ -275,9 +274,10 @@ interface KeyboardProps extends BoxProps {
  * --keyboard-zoom
  * ```
  */
-@class_ns( "x4" )
 export class Keyboard extends HBox<KeyboardProps>
 {
+	static classPrefix = "x4";
+
 	mode: KbMode;
 	upper: boolean;
 	locale: string;

package/src/components/label/label.ts

@@ -18,7 +18,7 @@ import { Component, ComponentProps } from "../../core/component"
 import { Icon } from "../icon/icon"
 
 import "./label.module.scss";
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 export interface LabelProps extends ComponentProps {
 	text?: string | UnsafeHtml;
@@ -37,8 +37,8 @@ export interface LabelProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Label extends Component<LabelProps> {
+	static classPrefix = "x4";
 	
 	constructor( p: LabelProps ) {
 		super( { ...p, content: null } );
@@ -79,8 +79,8 @@ export interface SimpleTextProps extends ComponentProps {
 	align?: "left" | "center" | "right";
 }
 
-@class_ns( "x4" )
 export class SimpleText extends Component<SimpleTextProps> {
+	static classPrefix = "x4";
 	
 	/**
 	 * 

package/src/components/link/link.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentEvents, ComponentProps, EvClick } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 import { Label } from '../label/label';
 
 import "./link.module.scss"
@@ -45,8 +45,9 @@ interface LinkProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Link extends Component<LinkProps,LinkEvents> {
+	static classPrefix = "x4";
+
 	constructor( props: LinkProps ) {
 		super( { tag: "a", ...props} );
 

package/src/components/listbox/listbox.ts

@@ -14,9 +14,9 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, 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';
@@ -118,8 +118,8 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Listbox extends Component<ListboxProps,ListboxEvents> {
+	static classPrefix = "x4";
 
 private _view: Viewport;
 	private _lastsel: ListboxID;
@@ -283,47 +283,38 @@ private _view: Viewport;
 	 */
 	
 	private _on_click( ev: MouseEvent ) {
-		let target = ev.target as HTMLElement;
-		let on_check = false;
+		const target = ev.target as Element;
 
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
+		// avoid trapping child click
+		if( Component.closest( target, "input" ) ) {
+			return;
+		}
 
-			// avoid trapping child click
-			if( c && c.dom.tagName==='INPUT' ) {
+		// an item of this list, not of a list around it
+		const c = Component.closest( target, ".x4item" );
+		if( c && this.contains( c ) ) {
+			// the case changes alone; a double click on it is ignored
+			if( Component.closest( target, ".x4check" ) ) {
+				if( ev.type == 'click' ) {
+					this._toggleCheck( c );
+				}
 				return;
 			}
 
-			if( c && c.hasClass("x4check") ) {
-				on_check = true;
+			const id = c.getInternalData( "id" );
+			const fev: EvClick = { context:id };
+			if (ev.type == 'click') {
+				this.fire('click', fev );
+			}
+			else {
+				this.fire('dblClick', fev );
 			}
 
-			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') {
-					this.fire('click', fev );
-				}
-				else {
-					this.fire('dblClick', fev );
-				}
-
-				if (!fev.defaultPrevented) {
-					this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single', ev.type == 'click' && this.props.reselect );
-				}
-				
-				return;
+			if (!fev.defaultPrevented) {
+				this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single', ev.type == 'click' && this.props.reselect );
 			}
 
-			target = target.parentElement;
+			return;
 		}
 
 		if (ev.type == 'click') {
@@ -344,19 +335,14 @@ private _view: Viewport;
 
 		ev.preventDefault();		
 
-		let target = ev.target as HTMLElement;
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
-			if( c && c.hasClass("x4item") ) {
-				const id = c.getInternalData( "id" );
-				
-				this._selectItem(id, c, 'single' );
-				this.fire('contextMenu', {uievent: ev, context: id } );
-			
-				return;
-			}
+		const c = Component.closest( ev.target as Element, ".x4item" );
+		if( c && this.contains( c ) ) {
+			const id = c.getInternalData( "id" );
 
-			target = target.parentElement;
+			this._selectItem(id, c, 'single' );
+			this.fire('contextMenu', {uievent: ev, context: id } );
+
+			return;
 		}
 
 		this.fire('contextMenu', { uievent:ev, context: null } );

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

@@ -25,8 +25,10 @@
 	--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-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
 }
 
@@ -158,9 +160,10 @@
 			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
+		// 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
@@ -168,15 +171,35 @@
 			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;
 			}
@@ -207,6 +230,7 @@
 
 			summary {
 				margin-left: -1em;
+				padding-left: 11px;		// as the text of a line: its padding and its bar
 				cursor: pointer;
 				font-weight: bold;
 			}